批量报警、批量发送消息,分供应商处理

This commit is contained in:
liub
2026-03-10 14:07:13 +08:00
parent 4cacdbe7f7
commit 2be522977c
15 changed files with 1273 additions and 1011 deletions

View File

@ -0,0 +1,100 @@
<template>
<view>
<canvas id="splashCanvas" canvas-id="splashCanvas" :style="{'width':width+'px','height':height+'px'}" style=" z-index: 9999;position: fixed; visibility: hidden;"></canvas>
<qf-image-cropper :src="src" :showAngle="false" :width="cropWidth" :height="cropHeight" fileType="jpg"
@crop="handleCrop" :areaScale="0.1" :minScale="0.1" :gpu="true">
</qf-image-cropper>
</view>
</template>
<script>
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
export default {
components: {
QfImageCropper
},
data() {
return {
src: "",
Statu: false,
width:160,
height:80,
times:10
}
},
computed:{
cropWidth(){
return this.width*this.times;
}
,
cropHeight(){
return this.height*this.times;
}
},
onLoad: function(option) {
const eventChannel = this.getOpenerEventChannel();
var these = this;
eventChannel.on('checkImg', (rec)=> {
console.log("我收到你的消息了,消息内容是:" + JSON.stringify(rec));
this.src = rec.data;
this.width=rec.width?rec.width:160;
this.height=rec.height?rec.height:80;
this.times=rec.times?rec.times:10;
})
},
methods: {
handleCrop(e) {
var these = this;
const eventChannel = these.getOpenerEventChannel();
this.Statu = true;
console.log("裁剪完成");
console.log(e.tempFilePath);
eventChannel.emit('ImgCutOver_Path',e.tempFilePath);
const ctx = uni.createCanvasContext('splashCanvas', this);
ctx.drawImage(
e.tempFilePath,
0,0,these.width,these.height
);
setTimeout(() => {
ctx.draw(false, ()=>{
console.log("abcdefg")
uni.canvasGetImageData({
canvasId: 'splashCanvas',
x: 0,
y: 0,
width: these.width,
height: these.height,
success: (res) => {
// 处理像素数据并发送
console.log("res.data.length="+res.data.length);
eventChannel.emit('ImgCutOverPath', {
picPath: e.tempFilePath
});
eventChannel.emit('ImgCutOver',{piexls:res.data,picPath:e.tempFilePath});
uni.navigateBack();
},
fail: (err) => {
reject(`获取canvas数据失败: ${err.errMsg}`);
}
});
});
}, 500);
}
}
}
</script>
<style>
.canvas {
border: 1px solid #ccc;
}
</style>

View File

@ -0,0 +1,584 @@
<template>
<view class="container">
<!-- 设备列表 -->
<view class="allSelect" @click="selectAll"> 全选</view>
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" :fixed="false" :style="{ height: mescrollHeight + 'px' }">
<view class="device-card" v-for="(item, index) in deviceList" :key="index" @click="toggleSelect(index)">
<!-- 复选框 -->
<view class="checkbox" :class="{ checked: item.checked }">
<uni-icons v-if="item.checked" type="checkmarkempty" size="18" color="rgb(0, 0, 0)"></uni-icons>
</view>
<!-- 设备信息 -->
<view class="device-content">
<view class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
</view>
<view class="device-name">
<view>设备:{{ item.deviceName }}</view>
<view class="ID">
<view class="ID">ID:{{ item.deviceImei }}</view>
<view class="onlines" v-if="item.onlineStatus == 1">在线</view>
<!-- 离线状态 -->
<view class="unlines" v-if="item.onlineStatus == 0">离线</view>
<view>电量{{ item.battery || '0' }}%</view>
</view>
</view>
</view>
</view>
</view>
</mescroll-uni>
<view class="editInfmation">
<button class="login-btn qz" @click="forceAlarm">强制报警</button>
<button class="login-btn jc" @click="cancelAlarm">解除报警</button>
</view>
<!-- 强制报警提示弹框 -->
<CustomPopup v-if="popupType === 'force'" :show="showPopupFlag" popupBorder="1rpx solid rgba(224, 52, 52, 0.3)"
:message="popupMessage" icon="/static/images/6170/bj.png" :confirm-text="popupConfirmText"
:show-cancel="false" @close="onclosePopup" @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" @close="onclosePopup" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)"
confirmBtnColor="#fff" />
</view>
</template>
<script>
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
import {
generateShortId,
getdeviceSTatus
} from '@/utils/function.js';
import {
deviceInfo,
} from '@/api/common/index.js'
// 1. 导入所有需要的报警接口
import {
deviceSendAlarmMessage, //6170对应类型接口
deviceDefaultAlarm
} from '@/api/6170/callPolice.js'
import {
deviceForceAlarmActivation
} from '@/api/100J/HBY100-J.js'
// BJQ100J 对应的接口
import {
deviceRealTimeStatus //设备状态
} from '@/api/6170/deviceControl.js'
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
var timeout = null;
var these = null;
export default {
components: {
CustomPopup,
MescrollUni
},
data() {
return {
deviceList: [],
showPopupFlag: false,
popupTitle: '',
popupMessage: '确认要对所选设备开启强制报警?',
popupConfirmText: '确认',
popupType: 'force', // 'force' or 'cancel'
pendingAlarmAction: '',
sendInfo: '',
// 2. 核心typeName 与接口的映射表
dic: {
alarmApiMapping: [{
type: ['HBY100-J'],
sendApi: deviceForceAlarmActivation,
statusTypeName: 'FunctionAccessBatchStatusRule_BJQ100J'
},
{
type: ['BJQ6170'],
sendApi: deviceSendAlarmMessage,
statusTypeName: 'FunctionAccessBatchStatusRule_BJQ200J'
},
]
},
loading: false,
total: 0,
mescroll: null,
downOption: {
auto: true,
autoShowLoading: false,
},
upOption: {
auto: false,
noMoreSize: 0,
offset: 50,
isLock: false,
empty: {
tip: '暂无数据',
hideScroll: false
},
textNoMore: '没有更多数据了'
},
mescrollHeight: 0
}
},
computed: {
selectedDeviceIds() {
return this.deviceList.filter(item => item.checked).map(item => item.id);
},
// 自动匹配当前typeName对应的接口配置
currentApiConfig() {
const currentTypeName = this.sendInfo.typeName || '';
// 匹配到则用对应配置,匹配不到用默认配置
let f= this.dic.alarmApiMapping.find(v=>{
return v.type.indexOf(currentTypeName)>-1;
});
if(f){
return f;
}else{
return {
sendApi: deviceDefaultAlarm,
statusTypeName: 'FunctionAccessBatchStatusRule_Default'
};
}
}
},
methods: {
getSystemInfoSyncH() {
let sysInfo = uni.getSystemInfoSync();
// 底部 footer 高度约 220rpx + 120rpx = 340rpx转换为 px1rpx = sysInfo.pixelRatio / 750 * 屏幕宽度?不,直接用 rpx 转 px 公式)
let footerHeight = 340 * (sysInfo.screenWidth / 750); // rpx 转 px
// console.log("footerHeight=", footerHeight);
this.mescrollHeight = sysInfo.screenHeight - footerHeight;
// console.log("mescrollHeight=", this.mescrollHeight);
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
// 下拉刷新
downCallback() {
if (this.mescroll) {
this.mescroll.resetUpScroll(false);
this.mescroll.scrollTo(0, 0);
}
this.getData(this.sendInfo.id);
},
// 上拉加载
upCallback() {
this.getData(this.sendInfo.id);
},
onclosePopup() {
this.showPopupFlag = false
},
toggleSelect(index) {
this.deviceList[index].checked = !this.deviceList[index].checked
this.$forceUpdate()
},
// 全选/取消全选
selectAll() {
console.log('123');
// 仅对在线设备进行全选/取消
const allSelected = this.deviceList.every(item => item.checked);
this.deviceList.forEach(item => {
// 离线设备不修改checked状态
item.checked = !allSelected;
});
this.$forceUpdate();
},
// 获取设备列表
getData(deviceType) {
clearTimeout(timeout);
timeout = setTimeout(() => {
console.log(deviceType, 'deviceTypedeviceType');
this.loading = true;
let data = {
pageNum: 1,
pageSize: 50,
deviceType: deviceType
}
deviceInfo(data).then((res) => {
if (res.code == 200) {
const newDevices = res.rows.map(device => ({
...device,
showConfirm: false,
checked: false
}));
this.total = res.total;
this.deviceList = newDevices;
let hasNext = true;
if (res.rows.length < this.size || this.deviceList.length >= this
.total) {
hasNext = false;
} else {
hasNext = true;
}
this.mescroll.endSuccess(res.rows.length, hasNext);
} else {
this.mescroll.endSuccess(0, false);
}
}).finally(() => {
this.loading = false;
}).catch(ex => {
this.mescroll.endSuccess(0, false);
});
}, 200);
},
// 强制报警
forceAlarm() {
const selectedDevices = this.deviceList.filter(item => item.checked)
if (selectedDevices.length === 0) {
uni.showToast({
title: '请选择一个在线设备',
icon: 'none'
});
return;
}
this.popupType = 'force';
this.popupMessage = '确认要对所选设备开启强制报警?';
this.showPopupFlag = true;
this.pendingAlarmAction = 1
},
// 解除报警
cancelAlarm() {
const selectedDevices = this.deviceList.filter(item => item.checked);
if (selectedDevices.length === 0) {
uni.showToast({
title: '请选择一个在线设备',
icon: 'none'
});
return;
}
this.popupType = 'cancel';
this.popupMessage = '确认要解除所选设备的报警状态?';
this.showPopupFlag = true;
this.pendingAlarmAction = 0
},
//动态调用对应接口
async sendAlarmCommand() {
const selectedDevices = this.deviceList.filter(item => item.checked);
const deviceIds = selectedDevices.map(item => item.id);
const deviceImeiList = selectedDevices.map(item => item.deviceImei);
const isAlarming = this.pendingAlarmAction == 1;
if (selectedDevices.length === 0) {
uni.showToast({
title: '请选择在线设备',
icon: 'none'
});
return;
}
try {
uni.showLoading({
title: isAlarming ? '设备报警中...' : '解除报警中...',
mask: true
});
// 获取当前typeName对应的接口和参数配置
const {
sendApi,
statusTypeName
} = this.currentApiConfig;
// 准备请求数据
// const batchId = generateShortId();
const requestData = {
deviceIds: deviceIds,
typeName: this.sendInfo.typeName,
deviceImeiList: deviceImeiList,
// batchId: batchId,
voiceStrobeAlarm: this.pendingAlarmAction == 1 ? '1' : '0'
};
// 动态调用匹配的接口
const registerRes = await sendApi(requestData);
if (registerRes.code == 200) {
uni.showToast({
title: isAlarming ? '强制报警开启成功' : '报警已解除',
icon: 'success'
});
this.showPopupFlag = false
uni.$emit('deviceStatusUpdate', {});
setTimeout(() => {
uni.navigateBack()
}, 500)
} else {
uni.showToast({
title: registerRes.msg || '状态查询失败',
icon: 'none'
});
}
} catch (error) {
console.error('报警操作异常:', error);
uni.showToast({
title: '网络异常,请重试',
icon: 'none'
});
} finally {
uni.hideLoading();
}
},
// 点击确认状态
onPopupConfirm() {
this.sendAlarmCommand(this.popupType);
},
},
onLoad(options) {
these = this;
const eventChannel = this.getOpenerEventChannel();
// 监听 'deviceSend' 事件,获取传过来的数据
eventChannel.on('devicePolice', (data) => {
this.getData(data.data.id)
this.sendInfo = data.data
});
eventChannel.emit('ack', {});
this.getSystemInfoSyncH();
},
}
</script>
<style scoped>
.container {
min-height: 100vh;
background-color: rgb(18, 18, 18);
box-sizing: border-box;
overflow-x: hidden;
}
.allSelect {
color: rgba(255, 255, 255, 0.87);
float: right;
padding: 25rpx;
cursor: pointer;
}
.device-list {
flex: 1;
padding: 0rpx 20rpx;
clear: both;
}
.device-card {
position: relative;
display: flex;
align-items: center;
width: 95%;
margin-bottom: 20rpx;
}
.checkbox {
width: 40rpx;
height: 40rpx;
border: 2rpx solid rgba(255, 255, 255, 0.5);
margin-right: 20rpx;
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox.checked {
background: rgba(224, 52, 52, 1);
border-color: rgba(224, 52, 52, 1);
}
.device-content {
background-color: rgb(26, 26, 26);
border-radius: 16rpx;
position: relative;
/* display: flex; */
align-items: center;
padding: 20rpx;
width: 95%;
}
.device-header {
display: flex;
align-items: center;
margin-bottom: 15rpx;
}
.device-name {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
margin-left: 12rpx;
line-height: 50rpx;
width: 83%;
white-space: nowrap;
}
.ID {
color: rgba(255, 255, 255, 0.6);
font-size: 26rpx;
display: flex;
justify-content: space-between;
position: relative;
}
.device-status {
width: 122rpx;
height: 52rpx;
font-size: 26rpx;
border-radius: 0px 8px 0px 8px;
background-color: rgb(42, 42, 42);
position: absolute;
top: 0rpx;
right: 0rpx;
text-align: center;
line-height: 52rpx;
}
.online {
color: rgb(187, 230, 0);
}
.unline {
color: rgba(255, 255, 255, 0.4);
}
.device-info {
display: flex;
justify-content: space-evenly;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.87);
padding-top: 10rpx;
position: relative;
}
.deviceIMG {
width: 100rpx;
height: 100rpx;
border-radius: 16rpx;
position: relative;
background-color: rgba(42, 42, 42, 0.6);
display: flex;
align-items: center;
}
.IMG {
width: 68rpx;
height: 50rpx;
margin-left: 17%;
}
.onlines {
position: relative;
}
.onlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgb(0, 171, 103);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.unlines {
position: relative;
}
.unlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.line {
width: 2rpx;
height: 24rpx;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgb(255, 255, 255) 50%,
rgba(255, 255, 255, 0) 100%);
margin-top: 12rpx;
}
.ql-editor {
color: rgba(255, 255, 255, 0.6);
font-size: 30rpx;
}
.ql-input {
width: 95.9%;
height: 200rpx;
margin-top: 30rpx;
box-sizing: border-box;
padding: 30rpx;
border-radius: 16rpx;
background: rgb(26, 26, 26);
}
.textarea {
color: rgba(255, 255, 255, 0.8);
background: rgba(42, 42, 42, 1);
border-radius: 16rpx;
padding: 10rpx;
height: 150rpx;
}
.editInfmation {
display: flex;
padding: 20rpx;
border-radius: 40rpx 40rpx 0px 0px;
width: 96%;
position: fixed;
bottom: 50rpx;
box-sizing: border-box;
}
.login-btn {
margin-top: 30rpx;
color: rgb(35, 35, 35);
border-radius: 50rpx;
width: 40%;
color: #fff;
height: 88rpx;
font-size: 30rpx;
line-height: 88rpx;
}
.qz {
background: rgba(224, 52, 52, 1);
}
.jc {
border: 1px solid rgba(255, 255, 255, 0.87);
background: rgba(18, 18, 18, 1);
}
.checkbox.disabled {
opacity: 0.5;
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
pointer-events: none;
/* 阻止点击事件 */
}
/* 可选:离线设备的卡片整体置灰 */
.device-card[data-offline="true"] {
opacity: 0.6;
}
</style>

View File

@ -18,13 +18,16 @@
<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.communicationMode==2">
<view class="callpolice" @click="callpolice">报警</view>
<view class="Sendmessage" @click="location">位置</view>
<view class="Sendmessage" @click="handleSend" v-if="activeTabInfo.typeName!=='HBY100-J'">发送信息</view>
</view> -->
<!-- <scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100" style="height:80vh;"> -->
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
<view class="sendFlex"
v-show="showSendFlex"
>
<view class="callpolice" @click="callpolice" v-show="showWarn">报警</view>
<view class="Sendmessage" @click="location" v-show="showMap">位置</view>
<view class="Sendmessage" @click="handleSend"
v-show="ShowSendmessage">发送信息</view>
</view>
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" :fixed="false" :style="{ height: mescrollHeight + 'px' }">
<view v-if="deviceList.length>0">
<uni-swipe-action ref="swipeAction">
@ -40,15 +43,15 @@
<view class="device-name">
<view>设备:{{item.deviceName}}</view>
<view class="ID">
<view class="ID" v-if="item.communicationMode==0 || item.communicationMode==2">ID:{{item.deviceImei}}
<view class="ID"
v-if="item.communicationMode==0 || item.communicationMode==2">
ID:{{item.deviceImei}}
</view>
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
<!-- 在线状态 -->
<view class="onlines"
v-if="item.onlineStatus==1">在线</view>
<view class="onlines" v-if="item.onlineStatus==1">在线</view>
<!-- 离线状态 -->
<view class="offlines"
v-if="item.onlineStatus==0">离线</view>
<view class="offlines" v-if="item.onlineStatus==0">离线</view>
<view>电量{{item.battery || '0'}}%</view>
</view>
</view>
@ -74,7 +77,7 @@
暂无数据
</view> -->
</mescroll-uni>
<!-- </scroll-view> -->
</view>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow" @click.stop="closePopup('delete')" catchtouchmove="true">
@ -116,7 +119,7 @@
<view class="tooltip-content" @click.stop>
<view class="tooltip-item" v-for="(item, index) in menuItems" :key="index"
@click="handleMenuClick(item)">
<image :src="item.icon" class="item-icon" mode="aspectFit"/>
<image :src="item.icon" class="item-icon" mode="aspectFit" />
<text>{{ item.text }}</text>
</view>
</view>
@ -146,17 +149,34 @@
} from '@/api/common/index.js'
import bleTool from '@/utils/BleHelper.js';
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
import BleReceive from '@/utils/BleReceive';
import BleReceive from '@/utils/BleReceive';
var pagePath = 'pages/common/index';
var ble = null;
var timeout = null;
var recei=null;
var recei = null;
export default {
components: {
MescrollUni
},
computed:{
showSendFlex(){
// return this.activeTab && this.activeTab.id !== ''&& (this.activeTabInfo.communicationMode==0 || this.activeTabInfo.communicationMode==2);
if(this.showMap || this.ShowSendmessage || this.showWarn){
return true;
}
return false;
},
ShowSendmessage(){
return this.dic.showMsgTypes.indexOf(this.activeTabInfo.typeName)>-1
},
showMap(){
return this.dic.showMapTypes.indexOf(this.activeTabInfo.typeName)>-1
},
showWarn(){
return this.dic.showCallPolice.indexOf(this.activeTabInfo.typeName)>-1
}
},
data() {
return {
mescroll: null,
@ -187,8 +207,7 @@ import BleReceive from '@/utils/BleReceive';
navTitle: "我的设备",
deleteShow: false,
RenameModel: false,
menuItems: [
{
menuItems: [{
text: '扫一扫添加',
icon: '/static/images/common/scane.png',
action: 'scan'
@ -233,7 +252,12 @@ import BleReceive from '@/utils/BleReceive';
deviceId: '',
deviceName: "", //重命名
activeTabInfo: ''
activeTabInfo: '',
dic: {
showMsgTypes: ['BJQ6170', 'HBY210', 'HBY670', 'BJQ6075', 'BJQ6075J'],//需要发送消息的类型
showMapTypes:['BJQ6170','HBY210','HBY670','BJQ6075','HBY018A','HBY100-J','BJQ6075J','HBY008A','HBY100-Y'],//需要显示地图的类型
showCallPolice:['BJQ6170','HBY210','HBY670','BJQ6075','HBY018A','HBY100-J','BJQ6075J','HBY008A','HBY100-Y']//需要发送报警的类型
}
}
},
methods: {
@ -254,7 +278,7 @@ import BleReceive from '@/utils/BleReceive';
// 下拉刷新
downCallback() {
if (this.mescroll) {
this.mescroll.resetUpScroll(false);
this.mescroll.scrollTo(0, 0);
@ -266,7 +290,7 @@ import BleReceive from '@/utils/BleReceive';
// 上拉加载
upCallback() {
this.getData();
},
@ -387,7 +411,7 @@ import BleReceive from '@/utils/BleReceive';
if (res.code == 200) {
//console.log("deviceTypeList=" + JSON.stringify(res.data));
this.tabs = [{
id: '',
id: '',
name: '全部设备',
typeName: '全部设备'
},
@ -412,7 +436,7 @@ import BleReceive from '@/utils/BleReceive';
getData() {
var task = () => {
return new Promise((resolve, reject) => {
let data = {
pageNum: this.mescroll.num,
@ -496,9 +520,9 @@ import BleReceive from '@/utils/BleReceive';
case 'scan':
// 扫一扫
uni.navigateTo({
url:'/pages/common/addScan/ScanEquip'
url: '/pages/common/addScan/ScanEquip'
});
break;
case 'bluetooth':
uni.navigateTo({
@ -619,7 +643,7 @@ import BleReceive from '@/utils/BleReceive';
const deviceType = currentTab.id || '';
console.log(`跳转到发送信息页面\n当前设备类型: ${deviceType}\n设备类型名称: ${currentTab.typeName}`);
uni.navigateTo({
url: '/pages/6170/callPolice/index',
url: '/pages/common/callPolice/index',
events: {
ack: function(data) {}
},
@ -666,7 +690,7 @@ import BleReceive from '@/utils/BleReceive';
// 列表跳转
handleFile(item) {
let url = item.detailPageUrl;
// url="/pages/6075/BJQ6075L";
// url="/pages/6075/BJQ6075L";
// if(!url){
// url="/pages/6075/BJQ6075"
// }
@ -715,7 +739,7 @@ import BleReceive from '@/utils/BleReceive';
},
},
onShow() {
if (ble) {
//因为vue视图只能后退不能隐藏后再显示
//所以回到首页后将其他所有页面的订阅都删除
@ -723,12 +747,12 @@ import BleReceive from '@/utils/BleReceive';
}
},
onLoad() {
// console.error("首页加载");
this.getTab()
this.downCallback();
// 绑定页面做了监听,新增成功,刷新页面
uni.$on('refreshDeviceList', () => {
this.getTab() // 刷新数据
@ -771,9 +795,9 @@ import BleReceive from '@/utils/BleReceive';
recei.ReceiveData(receive, device, path, recArr);
this.updateBleStatu();
}, pagePath);
let phone=uni.getStorageSync("phone");
if(phone==='17671332251'){//先写死方便自己使用,后面按人员权限区分
let phone = uni.getStorageSync("phone");
if (phone === '17671332251') { //先写死方便自己使用,后面按人员权限区分
this.menuItems.push({
text: '上报设备',
icon: '/static/images/common/add.png',

View File

@ -1,11 +1,12 @@
<template>
<view class="container">
<!-- 设备列表 -->
<scroll-view class="device-list" scroll-y>
<view class="device-card" v-for="(item, index) in deviceList" :key="index"
@click="item.onlineStatus === 1 ? toggleSelect(index) : null">
<!-- <scroll-view class="device-list" scroll-y> -->
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" :fixed="false" :style="{ height: mescrollHeight + 'px' }">
<view class="device-card" v-for="(item, index) in deviceList" :key="index" @click="toggleSelect(index)">
<!-- 复选框 -->
<view class="checkbox" :class="{ checked: item.checked, disabled: item.onlineStatus !== 1 }">
<view class="checkbox" :class="{ checked: item.checked }">
<uni-icons v-if="item.checked" type="checkmarkempty" size="18" color="rgb(0, 0, 0)"></uni-icons>
</view>
<!-- 设备信息 -->
@ -27,7 +28,10 @@
</view>
</view>
</view>
<view class="editInfmation">
</mescroll-uni>
<!-- </scroll-view> -->
<view class="editInfmation">
<view class="ql-editor">编辑信息</view>
<view class="ql-input">
<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"
@ -35,7 +39,6 @@
</view>
<button class="login-btn" @click.stop="sendTextMessage">发送</button>
</view>
</scroll-view>
<!-- 成功提示弹框 -->
<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage"
icon="/static/images/common/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
@ -44,138 +47,284 @@
</template>
<script>
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
import {
deviceInfo,
} from '@/api/common/index.js'
import {
deviceSendMessage,
deviceRealTimeStatus //设备状态
} from '@/api/6170/deviceControl.js'
import {
generateShortId,
getdeviceSTatus
} from '@/utils/function.js';
export default {
components: {
CustomPopup
},
data() {
return {
deviceList: [],
messageToSend: '', //发送信息
showPopupFlag: false,
popupTitle: '',
popupMessage: '信息发送成功!',
popupConfirmText: '确认',
isSending: false,
sendInfo: {}
}
},
methods: {
onPullDownRefresh() {
// 执行下拉刷新时的操作,比如重新获取数据
this.getData();
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
import {
deviceInfo,
} from '@/api/common/index.js'
import {
deviceSendMessage,
deviceRealTimeStatus //设备状态
} from '@/api/6170/deviceControl.js'
import {
generateShortId,
getdeviceSTatus
} from '@/utils/function.js';
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
var timer=null;
var these=null;
export default {
components: {
CustomPopup,
MescrollUni
},
toggleSelect(index) {
this.deviceList[index].checked = !this.deviceList[index].checked
this.$forceUpdate()
},
// 获取设备列表
getData(deviceType) {
this.loading = true;
let data = {
pageNum: 1,
pageSize: 50,
deviceType: deviceType
data() {
return {
deviceList: [],
messageToSend: '', //发送信息
showPopupFlag: false,
popupTitle: '',
popupMessage: '信息发送成功!',
popupConfirmText: '确认',
isSending: false,
sendInfo: {},
mescroll: null,
downOption: {
auto: true,
autoShowLoading: false,
},
upOption: {
auto: false,
noMoreSize: 0,
offset: 50,
isLock: false,
empty: {
tip: '暂无数据',
hideScroll: false
},
textNoMore: '没有更多数据了'
},
mescrollHeight: 0,
}
deviceInfo(data).then((res) => {
if (res.code == 200) {
const newDevices = res.rows.map(device => ({
...device,
showConfirm: false,
checked: false
}));
this.total = res.total;
this.deviceList = newDevices
},
methods: {
getSystemInfoSyncH() {
let sysInfo = uni.getSystemInfoSync();
// 底部 footer 高度约 220rpx + 120rpx = 340rpx转换为 px1rpx = sysInfo.pixelRatio / 750 * 屏幕宽度?不,直接用 rpx 转 px 公式)
let footerHeight = 500 * (sysInfo.screenWidth / 750); // rpx 转 px
// console.log("footerHeight=", footerHeight);
this.mescrollHeight = sysInfo.screenHeight - footerHeight;
// console.log("mescrollHeight=", this.mescrollHeight);
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
// 下拉刷新
downCallback() {
console.log("触发下拉刷新");
if (this.mescroll) {
this.mescroll.resetUpScroll(false);
this.mescroll.scrollTo(0, 0);
}
}).finally(() => {
this.loading = false;
});
},
// 发送文本消息
async sendTextMessage() {
// 防重复提交
if (this.isSending) return;
const selectedDevices = this.deviceList.filter(item => item.checked)
const deviceIds = selectedDevices.map(item => item.id);
const deviceImeiList = selectedDevices.map(item => item.deviceImei);
if (selectedDevices.length === 0) {
uni.showToast({
title: '请选择一个设备',
icon: 'none'
});
return;
}
if (!this.messageToSend) {
uni.showToast({
title: '请输入要发送的文字',
icon: 'none'
});
return;
}
this.isSending = true;
let loadingShown = false;
try {
uni.showLoading({
title: '发送中...',
mask: true
});
loadingShown = true;
// 2. 准备请求数据
const batchId = generateShortId();
const data = {
sendMsg: this.messageToSend,
deviceIds: deviceIds,
batchId: batchId,
typeName: this.sendInfo.typeName,
batchId: batchId,
deviceImeiList: deviceImeiList
};
// 3.人员信息
const registerRes = await deviceSendMessage(data);
if (registerRes.code !== 200) {
this.getData(this.sendInfo.id);
},
// 上拉加载
upCallback() {
console.log("触发上拉加载");
this.getData(this.sendInfo.id);
},
// onPullDownRefresh() {
// // 执行下拉刷新时的操作,比如重新获取数据
// this.getData();
// },
toggleSelect(index) {
this.deviceList[index].checked = !this.deviceList[index].checked
this.$forceUpdate()
},
// 获取设备列表
getData(deviceType) {
clearTimeout(timer);
timer=setTimeout(()=>{
console.log("开始加载第"+(this.mescroll? this.mescroll.num:1)+'页数据')
this.loading = true;
let data = {
pageNum:this.mescroll? this.mescroll.num:1,
pageSize: 50,
deviceType: deviceType
}
deviceInfo(data).then((res) => {
if (res.code == 200) {
const newDevices = res.rows.map(device => ({
...device,
showConfirm: false,
checked: false
}));
this.total = res.total;
this.deviceList = newDevices
this.total = res.total;
// 判断是否加载完成
let hasNext = true;
if (res.rows.length < this.size || this.deviceList.length >= this
.total) {
hasNext = false;
} else {
hasNext = true;
}
this.mescroll.endSuccess(res.rows.length, hasNext);
}else {
this.mescroll.endSuccess(0, false);
}
}).finally(() => {
this.loading = false;
}).catch(ex=>{
this.mescroll.endSuccess(0, false);
});
},200);
},
// 发送文本消息
sendTextMessage() {
// 防重复提交
if (this.isSending) return;
const selectedDevices = this.deviceList.filter(item => item.checked)
const deviceIds = selectedDevices.map(item => item.id);
const deviceImeiList = selectedDevices.map(item => item.deviceImei);
if (selectedDevices.length === 0) {
uni.showToast({
title: registerRes.msg,
title: '请选择一个设备',
icon: 'none'
})
return
});
return;
}
// 4. 获取设备状态
let deviceImei = this.sendInfo.deviceImei
let typeName = this.sendInfo.typeName
const statusRes = await getdeviceSTatus({
functionMode: 2,
batchId,
typeName:'FunctionAccessBatchStatusRule',
deviceImei,
interval: 500
},
deviceRealTimeStatus
);
if (statusRes.data.functionAccess === 'OK') {
// 5. 显示成功弹窗
this.showPopupFlag = true
if (!this.messageToSend) {
uni.showToast({
title: '请输入要发送的文字',
icon: 'none'
});
return;
}
} catch (error) {
uni.showToast({
title: error.message,
icon: 'none'
});
} finally {
uni.hideLoading();
this.isSending = false;
this.isSending = true;
//FYS的方法
let FYSSend =async () => {
try {
uni.showLoading({
title: '发送中...',
mask: true
});
// 2. 准备请求数据
const batchId = generateShortId();
const data = {
sendMsg: this.messageToSend,
deviceIds: deviceIds,
batchId: batchId,
typeName: this.sendInfo.typeName,
batchId: batchId,
deviceImeiList: deviceImeiList
};
// 3.人员信息
const registerRes = await deviceSendMessage(data);
if (registerRes.code !== 200) {
uni.showToast({
title: registerRes.msg,
icon: 'none'
})
return
}
// 4. 获取设备状态
let deviceImei = this.sendInfo.deviceImei
let typeName = this.sendInfo.typeName
const statusRes = await getdeviceSTatus({
functionMode: 2,
batchId,
typeName: 'FunctionAccessBatchStatusRule',
deviceImei,
interval: 500
},
deviceRealTimeStatus
);
if (statusRes.data.functionAccess === 'OK') {
// 5. 显示成功弹窗
this.showPopupFlag = true
}
} catch (error) {
uni.showToast({
title: error.message,
icon: 'none'
});
} finally {
uni.hideLoading();
this.isSending = false;
}
}
//XS的方法
let XSSend=() => {
try {
this.showPopupFlag=true;
} catch (error) {
} finally {
this.isSending = false;
}
}
//FS的方法
let FSSend = () => {
try {
this.showPopupFlag = true
} catch (error) {
} finally {
this.isSending = false;
}
}
let device = selectedDevices[0];
let sendDic = [{
urls: ['/pages/6170/deviceControl/index', '/pages/210/HBY210', '/pages/6075/BJQ6075',
'/pages/100J/HBY100-J'
],
send: FYSSend,
},
{
urls: ['/pages/670/HBY670'],
send: XSSend
},
{
urls: ['/pages/6075J/BJQ6075J'],
send: FSSend
}
];
let f = sendDic.find(v => {
return v.urls.indexOf(device.detailPageUrl)>-1;
});
if (f) {
f.send();
} else {
FYSSend();
}
},
onPopupConfirm() {
this.showPopupFlag = false
@ -185,227 +334,236 @@ export default {
},
},
onLoad(options) {
these=this;
const eventChannel = this.getOpenerEventChannel();
// 监听 'deviceSend' 事件,获取传过来的数据
eventChannel.on('deviceSend', (data) => {
console.log('Received detail data:', data);
this.getData(data.data.id)
this.sendInfo = data.data
this.downCallback();
});
// 如果需要向调用页面返回数据,可以触发 'ack' 事件
eventChannel.emit('ack', {})
eventChannel.emit('ack', {});
this.getSystemInfoSyncH();
},
}
onUnload() {
clearTimeout(timer);
}
}
</script>
<style scoped>
.container {
min-height: 100vh;
background-color: rgb(18, 18, 18);
box-sizing: border-box;
overflow-x: hidden;
.container {
min-height: 100vh;
background-color: rgb(18, 18, 18);
box-sizing: border-box;
overflow-x: hidden;
}
}
.device-list {
flex: 1;
padding: 0 20rpx;
.device-list {
flex: 1;
padding: 0 20rpx;
}
}
.device-card {
position: relative;
display: flex;
align-items: center;
width: 95%;
margin-bottom: 20rpx;
}
.device-card {
position: relative;
display: flex;
align-items: center;
width: 95%;
margin-bottom: 20rpx;
}
.checkbox {
width: 40rpx;
height: 40rpx;
border: 2rpx solid rgba(255, 255, 255, 0.5);
margin-right: 20rpx;
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox {
width: 40rpx;
height: 40rpx;
border: 2rpx solid rgba(255, 255, 255, 0.5);
margin-right: 20rpx;
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox.checked {
background-color: rgb(187, 230, 0);
border-color: rgb(187, 230, 0);
}
.checkbox.checked {
background-color: rgb(187, 230, 0);
border-color: rgb(187, 230, 0);
}
.device-content {
background-color: rgb(26, 26, 26);
border-radius: 16rpx;
position: relative;
/* display: flex; */
align-items: center;
padding: 20rpx;
width: 95%;
}
.device-content {
background-color: rgb(26, 26, 26);
border-radius: 16rpx;
position: relative;
/* display: flex; */
align-items: center;
padding: 20rpx;
width: 95%;
}
.device-header {
display: flex;
align-items: center;
margin-bottom: 15rpx;
}
.device-header {
display: flex;
align-items: center;
margin-bottom: 15rpx;
}
.device-name {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
margin-left: 12rpx;
line-height: 50rpx;
width: 83%;
white-space: nowrap;
}
.device-name {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
margin-left: 12rpx;
line-height: 50rpx;
width: 83%;
white-space: nowrap;
}
.ID {
color: rgba(255, 255, 255, 0.6);
font-size: 26rpx;
display: flex;
justify-content: space-between;
position: relative;
}
.ID {
color: rgba(255, 255, 255, 0.6);
font-size: 26rpx;
display: flex;
justify-content: space-between;
position: relative;
}
.device-status {
width: 122rpx;
height: 52rpx;
font-size: 26rpx;
border-radius: 0px 8px 0px 8px;
background-color: rgb(42, 42, 42);
position: absolute;
top: 0rpx;
right: 0rpx;
text-align: center;
line-height: 52rpx;
}
.device-status {
width: 122rpx;
height: 52rpx;
font-size: 26rpx;
border-radius: 0px 8px 0px 8px;
background-color: rgb(42, 42, 42);
position: absolute;
top: 0rpx;
right: 0rpx;
text-align: center;
line-height: 52rpx;
}
.online {
color: rgb(187, 230, 0);
}
.online {
color: rgb(187, 230, 0);
}
.unline {
color: rgba(255, 255, 255, 0.4);
}
.unline {
color: rgba(255, 255, 255, 0.4);
}
.device-info {
display: flex;
justify-content: space-evenly;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.87);
padding-top: 10rpx;
position: relative;
}
.device-info {
display: flex;
justify-content: space-evenly;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.87);
padding-top: 10rpx;
position: relative;
}
.deviceIMG {
width: 100rpx;
height: 100rpx;
border-radius: 16rpx;
position: relative;
background-color: rgba(42, 42, 42, 0.6);
display: flex;
align-items: center;
}
.deviceIMG {
width: 100rpx;
height: 100rpx;
border-radius: 16rpx;
position: relative;
background-color: rgba(42, 42, 42, 0.6);
display: flex;
align-items: center;
}
.IMG {
width: 68rpx;
height: 50rpx;
margin-left: 17%;
}
.IMG {
width: 68rpx;
height: 50rpx;
margin-left: 17%;
}
.onlines {
position: relative;
}
.onlines {
position: relative;
}
.onlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgb(0, 171, 103);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.onlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgb(0, 171, 103);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.unlines {
position: relative;
}
.unlines {
position: relative;
}
.unlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.unlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.line {
width: 2rpx;
height: 24rpx;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgb(255, 255, 255) 50%,
rgba(255, 255, 255, 0) 100%);
margin-top: 12rpx;
}
.line {
width: 2rpx;
height: 24rpx;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgb(255, 255, 255) 50%,
rgba(255, 255, 255, 0) 100%);
margin-top: 12rpx;
}
.ql-editor {
color: rgba(255, 255, 255, 0.6);
font-size: 30rpx;
}
.ql-editor {
color: rgba(255, 255, 255, 0.6);
font-size: 30rpx;
}
.ql-input {
width: 95.9%;
height: 200rpx;
margin-top: 30rpx;
box-sizing: border-box;
padding: 30rpx;
border-radius: 16rpx;
background: rgb(26, 26, 26);
}
.ql-input {
width: 95.9%;
height: 200rpx;
margin-top: 30rpx;
box-sizing: border-box;
padding: 20rpx;
border-radius: 16rpx;
background: rgb(26, 26, 26);
}
.textarea {
color: rgba(255, 255, 255, 0.8);
background: rgba(42, 42, 42, 1);
border-radius: 16rpx;
padding: 10rpx;
height: 150rpx;
}
.textarea {
color: rgba(255, 255, 255, 0.8);
background: rgba(42, 42, 42, 1);
border-radius: 16rpx;
padding: 10rpx;
height: 150rpx;
width: 100%;
}
.editInfmation {
padding: 20rpx;
border-radius: 40rpx 40rpx 0px 0px;
background: rgba(28, 28, 28, 1);
position: fixed;
bottom: 50rpx;
box-sizing: border-box;
}
.editInfmation {
padding: 20rpx;
border-radius: 40rpx 40rpx 0px 0px;
background: rgba(28, 28, 28, 1);
position: fixed;
bottom: 20rpx;
box-sizing: border-box;
width: 100%;
}
.login-btn {
margin-top: 30rpx;
background-color: rgb(187, 230, 0);
color: rgb(35, 35, 35);
border-radius: 50rpx;
width: 90%;
}
.login-btn {
margin-top: 30rpx;
background-color: rgb(187, 230, 0);
color: rgb(35, 35, 35);
border-radius: 50rpx;
width: 90%;
}
.checkbox.disabled {
opacity: 0.5;
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
pointer-events: none;
/* 阻止点击事件 */
}
.checkbox.disabled {
opacity: 0.5;
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
pointer-events: none;
/* 阻止点击事件 */
}
/* 可选:离线设备的卡片整体置灰 */
.device-card[data-offline="true"] {
opacity: 0.6;
}
/* 可选:离线设备的卡片整体置灰 */
.device-card[data-offline="true"] {
opacity: 0.6;
}
</style>