dyf/APP
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://47.107.152.87:3000/dyf/APP

Browse Source 
# Conflicts:
#	pages.json
#	unpackage/dist/dev/app-plus/app-config-service.js
#	unpackage/dist/dev/app-plus/app-service.js
#	unpackage/dist/dev/app-plus/app-view.js
#	unpackage/dist/dev/app-plus/manifest.json
#	utils/request.js
This commit is contained in:
liub
2025-08-11 15:21:37 +08:00
parent 4ab10bb251 d8edb9f31e
commit 47a9dace85
126 changed files with 3977 additions and 727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
pages/210/addDevice/index.vue Normal file
View File

@ -0,0 +1,332 @@
<template>
<view class="container">
<!-- 设备列表 -->
<scroll-view class="device-list" scroll-y>
<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>
<view class="editInfmation">
<button class="login-btn" @click="sendTextMessage">添加</button>
</view>
</scroll-view>
<!-- 成功提示弹框 -->
<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage" icon="/static/images/common/success.png"
:confirm-text="popupConfirmText" :show-cancel="false" @confirm="onPopupConfirm" />
</view>
</template>
<script>
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
import {
deviceInfo,
} from '@/api/common/index.js'
import {
deviceSendMessage
} from '@/api/6170/deviceControl.js'
export default {
components: {
CustomPopup
},
data() {
return {
deviceList: [],
messageToSend: '', //发送信息
showPopupFlag: false,
popupTitle: '',
popupMessage: '联机设备添加成功',
popupConfirmText: '确认'
}
},
methods: {
toggleSelect(index) {
this.deviceList[index].checked = !this.deviceList[index].checked
this.$forceUpdate()
},
// 获取设备列表
getData(deviceType) {
this.loading = true;
let data = {
pageNum: 1,
pageSize: 20,
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
}
}).finally(() => {
this.loading = false;
});
},
// 发送文本消息
sendTextMessage() {
const selectedDevices = this.deviceList.filter(item => item.checked)
const deviceIds = selectedDevices.map(item => item.id);
if (selectedDevices.length === 0) {
uni.showToast({
title: '请选择一个设备',
icon: 'none'
});
return;
}
let data = {
deviceIds: deviceIds
}
deviceSendMessage(data).then((res) => {
if (res.code == 200) {
this.showPopupFlag = true
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
})
},
onPopupConfirm() {
this.showPopupFlag = false
uni.navigateBack()
console.log('用户点击了确定')
// 处理确认逻辑
},
},
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
// 监听 'deviceSend' 事件，获取传过来的数据
eventChannel.on('deviceSend', (data) => {
console.log('Received detail data:', data);
this.getData(data.data)
});
// 如果需要向调用页面返回数据，可以触发 'ack' 事件
eventChannel.emit('ack', {})
},
}
</script>
<style scoped>
.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-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-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-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 {
padding: 20rpx;
border-radius: 40rpx 40rpx 0px 0px;
position: fixed;
bottom: 50rpx;
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%;
}
</style>

1384
pages/210/deviceControl/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

120
pages/210/historyRecords/index.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<view class="histyRecords">
<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
<view class="tab-container">
<view v-for="(tab, index) in tabs" :key="index"
:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
{{tab.name}}
</view>
</view>
</scroll-view>
<scroll-view class="content-list" scroll-y="true">
<view class="record-item" v-for="item in recodesInfo" :key="item.index">
<view class="record-details">
<text class="detail-time">开机时间</text>
<text class="detail-line">2026.08.29 21:13:58</text>
<text class="detail-line">关机时间</text>
<text class="detail-time">2025.06.30 00:45:20</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: [{
name: '开机',
},
{
name: '报警',
},
],
activeTab: 0,
recodesInfo: [{}]
}
},
methods: {
// tab切换页
switchTab(tab, index) {
this.activeTab = index
},
}
}
</script>
<style>
.histyRecords {
width: 100%;
height: 100vh;
background: rgba(18, 18, 18, 1);
padding: 30rpx;
}
.tab-bar {
width: 100%;
color: rgb(255, 255, 255);
white-space: nowrap;
overflow: hidden;
position: relative;
}
.tab-container {
display: flex;
cursor: pointer;
margin-bottom: 40rpx;
justify-content: space-between;
}
.tab-item {
font-size: 28rpx;
padding: 0 30rpx;
text-align: center;
}
.active {
color: rgba(187, 230, 0, 1);
border-bottom: 6rpx solid rgba(187, 230, 0, 1);
height: 60rpx;
}
.content-list {
height: calc(100vh - 300rpx);
}
.record-item {
display: flex;
margin-bottom: 20rpx;
background: rgba(26, 26, 26, 1);
border-radius: 18rpx;
padding: 20rpx;
}
.record-details {
flex: 1;
}
.detail-line {
display: block;
font-size: 28rpx;
margin-bottom: 10rpx;
color: rgba(255, 255, 255, 0.87);
font-size: 24rpx;
line-height: 40rpx;
}
.detail-time {
color: rgba(255, 255, 255, 0.6);
font-size: 24rpx;
}
.time-display {
position: absolute;
top: 30rpx;
right: 30rpx;
font-size: 28rpx;
color: #BBE600;
}
</style>

254
pages/210/onlineDevice/index.vue Normal file
View File

@ -0,0 +1,254 @@
<template>
<view>
<view class="device-page">
<view class="sendFlex">
<view class="Sendmessage" @click="location">呼叫</view>
<view class="Sendmessage" @click="handleSend">发送信息</view>
</view>
<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
style="height:80vh;">
<view v-if="deviceList.length>0">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index"
class="device-card">
<view @click.stop="handleFile(item)">
<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">在线</view>
<!-- 离线状态 -->
<view class="offlines" v-if="item.onlineStatus==0">离线</view>
<view>电量：{{item.battery || '0'}}%</view>
</view>
</view>
</view>
<view>
<view class="device-status">1</view>
</view>
</view>
</block>
</view>
<view class="content1" @click="addvideo">
<image src="/static/images/common/path1.png" class="path1"></image>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
deviceID: '',
deviceList: [],
loading: false,
deviceType:''
}
},
methods: {
// 添加视频
addvideo() {
uni.navigateTo({
url: `/pages/210/addDevice/index??id=${this.deviceID}`
})
},
getData() {
let data = {
deviceId: this.deviceID
}
},
// 发生短信
handleSend() {
uni.navigateTo({
url: '/pages/common/send/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('deviceSend', {
data:this.deviceType
});
}
})
},
},
onShow() {
this.getData()
},
// onLoad(options) {
// this.deviceID = options.id
// }
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('onlineDevice', (data) => {
this.deviceType=data.data
})
}
}
</script>
<style scoped>
/* 页面整体样式 */
.device-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: rgb(18, 18, 18);
padding: 30rpx;
}
.sendFlex {
display: flex;
color: rgba(255, 255, 255, 0.87);
justify-content: flex-end;
cursor: pointer;
margin-bottom: 30rpx;
font-size: 28rpx;
}
/* 设备卡片 */
.device-card {
background-color: rgb(26, 26, 26);
border-radius: 16rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
position: relative;
}
.device-header {
display: flex;
align-items: center;
margin-bottom: 15rpx;
padding: 30rpx 0 10rpx 30rpx;
}
.device-name {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
margin-left: 24rpx;
line-height: 50rpx;
width: 75%;
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;
color: rgba(255, 255, 255, 0.8)
}
.circle {
width: 8rpx;
height: 40rpx;
position: absolute;
right: 25rpx;
top: 60rpx;
}
.device-id {
font-size: 26rpx;
color: #999;
margin-bottom: 20rpx;
display: block;
}
.device-info {
display: flex;
justify-content: space-evenly;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.87);
position: relative;
padding: 0rpx 0rpx 30rpx 30rpx;
}
.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%;
object-fit: contain;
}
.onlines {
position: relative;
}
.onlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgb(0, 171, 103);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.offlines {
position: relative;
}
.offlines::before {
content: '';
position: absolute;
width: 15rpx;
height: 15rpx;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
top: 20rpx;
left: -20rpx
}
.content1 {
height: 160rpx;
background: rgb(26, 26, 26);
border-radius: 16rpx;
text-align: center;
line-height: 200rpx;
}
.Sendmessage {
margin-left: 50rpx;
color: rgba(255, 255, 255, 0.87);
}
.path1 {
width: 62rpx;
height: 62rpx;
}
</style>

25
pages/6170/allShare/index.vue
View File

@ -17,7 +17,7 @@
<text>{{
tabs[activeTab].name === '我的分享'
? `分享给“${group.sharedTo}”的设备`
: `来自“${group.sharedTo}”分享的设备`
: `来自“${group.othersharedTo}”分享的设备`
}}</text>
<text class="edit-btn"
@click="toggleEdit(groupIndex)">{{editingGroup === groupIndex ? '完成' : '编辑'}}</text>
@ -40,8 +40,11 @@
<view class="ID">
<view class="ID">
ID:{{item.deviceImei}}</view>
<view class="onlines">在线</view>
<view>电量：{{item.battery || '80'}}%</view>
<!-- 在线状态 -->
<view class="onlines" v-if="item.onlineStatus==1">在线</view>
<!-- 离线状态 -->
<view class="offlines" v-if="item.onlineStatus==0">离线</view>
<view>电量：{{item.battery || '0'}}%</view>
</view>
</view>
</view>
@ -49,11 +52,6 @@
</view>
</block>
</view>
<!-- 加载状态提示 -->
<!-- <view class="loading-status">
<text v-if="loading">加载中...</text>
<text v-if="finished">没有更多数据了</text>
</view> -->
</view>
<view v-else class="noDATA">
<view>
@ -67,7 +65,7 @@
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
<view class="agreement-popupC" @click.stop>
<view class="popup-content">
<image src="/static/images/delel.png" class="svg" mode="aspectFit"></image>
<image src="/static/images/common/delel.png" class="svg" mode="aspectFit"></image>
<uni-icon class="trash"></uni-icon>
<view class="popup-Title">
{{ tabs[activeTab].name === '我的分享' ? '确定停止分享该设备' : '确定移除他人分享给你的这台设备' }}
@ -117,10 +115,12 @@
const groups = {};
this.deviceList.forEach(device => {
// 这里假设device.sharedTo是分享目标的手机号
const key = device.sharedTo || '未分享';
const key = this.activeTab === 0 ? device.phonenumber : device.otherPhonenumber;
const displayName = this.activeTab === 0 ? device.phonenumber : device.otherPhonenumber;
if (!groups[key]) {
groups[key] = {
sharedTo: key,
sharedTo: displayName, // 显示用名称
othersharedTo: displayName, // 显示用名称
devices: []
};
}
@ -213,7 +213,8 @@
const newDevices = res.rows.map(device => ({
...device,
showConfirm: false,
sharedTo: device.phonenumber || '未分享'
sharedTo: device.phonenumber,
othersharedTo: device.otherPhonenumber
}));
// 分页处理
if (this.page === 1) {

413
pages/6170/callPolice/index.vue Normal file
View File

@ -0,0 +1,413 @@
<template>
<view class="container">
<!-- 设备列表 -->
<view class="allSelect" @click="selectAll"> 全选</view>
<scroll-view class="device-list" scroll-y>
<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>
<view class="editInfmation">
<button class="login-btn qz" @click="forceAlarm">强制报警</button>
<button class="login-btn jc" @click="cancelAlarm">解除报警</button>
</view>
</scroll-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 {
deviceInfo,
} from '@/api/common/index.js'
import {
deviceSendAlarmMessage
} from '@/api/6170/callPolice.js'
export default {
components: {
CustomPopup
},
data() {
return {
deviceList: [],
messageToSend: '', //发送信息
showPopupFlag: false,
popupTitle: '',
popupMessage: '确认要对所选设备开启强制报警?',
popupConfirmText: '确认',
popupType: 'force', // 'force' or 'cancel'
pendingAlarmAction: ''
}
},
computed: {
selectedDeviceIds() {
return this.deviceList.filter(item => item.checked).map(item => item.id);
}
},
methods: {
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 => {
item.checked = !allSelected;
});
this.$forceUpdate();
},
// 获取设备列表
getData(deviceType) {
this.loading = true;
let data = {
pageNum: 1,
pageSize: 20,
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
}
}).finally(() => {
this.loading = false;
});
},
// 强制报警
forceAlarm() {
const selectedDevices = this.deviceList.filter(item => item.checked)
const deviceIds = selectedDevices.map(item => item.id);
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
},
sendAlarmCommand(type) {
const selectedDevices = this.deviceList.filter(item => item.checked);
const deviceIds = selectedDevices.map(item => item.id);
let data = {
deviceIds: deviceIds,
instructValue: this.pendingAlarmAction, // '强制或者解除'
}
deviceSendAlarmMessage(data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'none'
});
this.showPopupFlag = false
uni.$emit('deviceStatusUpdate', {});
setTimeout(() => {
uni.navigateBack()
}, 500)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
});
},
// 点击确认状态
onPopupConfirm() {
this.sendAlarmCommand(this.popupType);
// 处理确认逻辑
},
},
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
// 监听 'deviceSend' 事件，获取传过来的数据
eventChannel.on('devicePolice', (data) => {
this.getData(data.data)
});
// 如果需要向调用页面返回数据，可以触发 'ack' 事件
eventChannel.emit('ack', {})
},
}
</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);
}
</style>

619
pages/6170/deviceControl/index.vue
View File

@ -6,7 +6,7 @@
<!-- 使用自定义导航栏 -->
<view v-show="!pageLoading">
<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF"
:rightIcon="isRightIconVisible ? '/static/images/shape.png' : ''"
:rightIcon="isRightIconVisible ? '/static/images/common/shape.png' : ''"
@right-click="shareUp"></custom-navbar>
<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
<!-- 设备电量信息 -->
@ -16,16 +16,22 @@
</view>
<view>
<view class="battery-v1">
<image src="/static/images/dl.png" class="dlIMG"></image>
<image src="/static/images/common/dl.png" class="dlIMG"></image>
<view>
<view class="battery-v2">90%</view>
<view class="battery-v2"
:style="{color: deviceInfo.batteryPercentage < 20 ? '#FF0000' : ''}">
{{deviceInfo.batteryPercentage}}%
</view>
<view class="battery-v3">电量</view>
</view>
<view v-if="deviceInfo.chargeState==1">
<image src="/static/images/common/chargeState.png" class="chargeStateIMG"></image>
</view>
</view>
<view class="battery-v1">
<image src="/static/images/nz.png" class="dlIMG" mode="aspectFit"></image>
<image src="/static/images/common/nz.png" class="dlIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">1小时</view>
<view class="battery-v2">{{deviceInfo.batteryRemainingTime || '0'}}分钟</view>
<view class="battery-v3">续航时间</view>
</view>
</view>
@ -42,28 +48,46 @@
</view>
<view class="info-row">
<text class="info-label">设备状态</text>
<text class="info-value status-running">运行中</text>
<text class="info-value status-running">{{deviceInfo.onlineStatus===0?'离线':'在线'}}</text>
</view>
<view class="info-row">
<text class="info-label">定位信息</text>
<view class="info-value status-running" @click="gpsPosition">
<view class="info-value status-running">114.72 30.28</view>
<view class="info-value status-running">深圳市龙华区富源晟</view>
<text class="info-label" style="display: flex; align-items: center;">定位信息</text>
<view class="info-value status-running" @click="gpsPosition(deviceInfo)">
<view class="info-value status-running">
{{ deviceInfo && deviceInfo.longitude ? Number(deviceInfo.longitude).toFixed(4) : '' }}
{{ deviceInfo && deviceInfo.latitude ? Number(deviceInfo.latitude).toFixed(4) : '' }}
</view>
<view class="info-value status-running locationGPS">
<uni-icons @click="toggleForm" type="location" size="17"
color="rgba(255, 255, 255, 0.8)" style="vertical-align: bottom;" />
{{deviceInfo.address}}
</view>
</view>
</view>
</view>
<view class="callpolice" v-if="deviceInfo.onlineStatus==0">
<view class="">设备强制报警中</view>
<view>
<uni-icons type="closeempty" size="15" color="rgba(255, 255, 255, 0.9)"
@click="handlePolice"></uni-icons>
</view>
</view>
<view class="info-row">
<text class="info-label">灯光亮度</text>
<text class="info-value status-running">{{ sliderValue }}%</text>
</view>
<!-- 灯光亮度控制 -->
<view class="control-card">
<slider :value="sliderValue" min="10" max="100" activeColor="rgb(187, 230, 0)"
backgroundColor="rgb(26, 26, 26)" :show-value="false" @changing="onSliderChanging"
@change="onSliderChanging" />
<view class="control-card" @touchstart="cardTouchStart" @touchmove="cardTouchMove"
@touchend="cardTouchEnd">
<view @touchmove.prevent>
<slider :value="sliderValue" min="10" max="100" activeColor="rgb(187, 230, 0)"
backgroundColor="rgb(26, 26, 26)" :show-value="false" @changing="onSliderChanging"
@change="onSliderChangeEnd" block-color="#fff" block-size="20" />
</view>
</view>
<!-- 灯光模式选择 -->
@ -71,7 +95,7 @@
<view class="mode-buttons">
<view class="mode-v1" v-if="hasPermission('1')">
<view class="mode-v2" @click="selectMode('main')">
<image src="/static/images/set.png" class="setIMG"></image>
<image src="/static/images/6170/set.png" class="setIMG"></image>
<view>
<view class="battery-v2">灯光模式</view>
<view class="mode-v3">{{ currentMainMode }}</view>
@ -80,15 +104,16 @@
</view>
<view class="mode-v1" v-if="hasPermission('2')">
<view class="mode-v2" @click="lasermode">
<image src="/static/images/jg.png" class="setIMG" mode="aspectFit"></image>
<image src="/static/images/6170/jg.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">激光模式</view>
<view class="mode-v3">{{currentlaserMode}}</view>
</view>
</view>
</view>
<view class="mode-v1" v-if="hasPermission('3')">
<view class="mode-v2" @click="uploadStartup">
<image src="/static/images/path7.png" class="setIMG" mode="aspectFit"></image>
<image src="/static/images/common/path7.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">开机画面</view>
<view class="mode-v3">上传</view>
@ -111,19 +136,23 @@
<button class="send-btn1" @click="sendPersonnelInfo">发送</button>
<view class="form-row">
<text class="form-label">单位：</text>
<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unitName" />
<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unitName"
:maxlength="15" />
</view>
<view class="form-row">
<text class="form-label">姓名：</text>
<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name" />
<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name"
:maxlength="15" />
</view>
<view class="form-row">
<text class="form-label">职位：</text>
<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position" />
<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position"
:maxlength="15" />
</view>
<view class="form-row">
<text class="form-label">ID：</text>
<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.code" />
<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.code"
:maxlength="15" />
</view>
</view>
</view>
@ -135,7 +164,8 @@
</view>
<view class="form-row">
<input class="form-input" placeholder="请输入文字" v-model="messageToSend" />
<input class="form-input1" maxlength="20" placeholder="请输入文字" v-model="messageToSend"
@input="filterChinese" />
</view>
</view>
<!-- 产品信息 -->
@ -143,15 +173,15 @@
<view class="section-title">产品信息</view>
<view class="mode-buttons">
<view class="mode_1" @click="productparams">
<image src="/static/images/cp.png" mode="" class="cpIMG" mode="aspectFit"></image>
<image src="/static/images/common/cp.png" class="cpIMG" mode="aspectFit"></image>
<view class="">产品参数</view>
</view>
<view class="mode_1" @click="operatingInst">
<image src="/static/images/sm.png" mode="" class="cpIMG" mode="aspectFit"></image>
<image src="/static/images/common/sm.png" class="cpIMG" mode="aspectFit"></image>
<view class="">操作说明</view>
</view>
<view class="mode_1" @click="operatingVideo">
<image src="/static/images/sp.png" mode="" class="cpIMG" mode="aspectFit"></image>
<image src="/static/images/common/sp.png" class="cpIMG" mode="aspectFit"></image>
<view class="">操作视频</view>
</view>
</view>
@ -185,16 +215,12 @@
<view class="popup-title">上传开机画面</view>
<view class="popup-content">
<view class="example-body">
<!-- <uni-file-picker limit="1" class="custom-file-picker"></uni-file-picker> -->
<view class="icoContent" @click="checkImgUpload">
<!-- <image mode="aspectFit" class="img" src="/static/images/6155/DeviceDetail/add.png">
</image> -->
<image v-if="selectedImage" :src="selectedImage" mode="aspectFit" class="img"
style="width: 100%; height: 100%;"></image>
<image v-else mode="aspectFit" class="img"
src="/static/images/6155/DeviceDetail/add.png"></image>
</view>
<!-- <view class="example_title">点击上传图片</view> -->
</view>
</view>
<!-- 按钮组 -->
@ -208,9 +234,9 @@
<!-- 上传画面弹窗 -->
<view class="agreement-popupC" @click.stop>
<!-- 标题 -->
<view class="popup-title">确认开启激光模式？</view>
<view class="popup-title">{{ isLaserOn ? '确认关闭激光模式？' : '确认开启激光模式？' }}</view>
<view class="popup-content">
<view class="popup-Title">
<view class="popup-Title" v-if="!isLaserOn">
<view>注意事项</view>
<view>1.禁止直视光源或反射面！</view>
<view>2.避免直射人或易燃物！</view>
@ -225,8 +251,40 @@
</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="onPopupConfirmPolice" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
</view>
<!-- ===============进度条============== -->
<view
v-if="Progress.show"
@click="closeProgress"
:style="{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: Progress.maskBgColor,
zIndex: 999
}"
>
<Progress :config="Progress" @click.stop />
</view>
</view>
</template>
@ -237,27 +295,36 @@
deviceDetail,
registerPersonInfo,
deviceSendMessage,
deviceShareId
deviceShareId,
lightModeSettings, //灯光模式设置
laserModeSettings, //激光模式设置
lightBrightnessSettings, //灯光亮度设置
} from '@/api/6170/deviceControl.js'
import {
getDeviceId
} from '../../../store/BLETools';
import {
baseURL,
getToken,
clientid
} from '@/utils/request'
import {
deviceSendAlarmMessage
} from '@/api/6170/callPolice.js'
export default {
data() {
return {
lastBrightnessTime: 0,
isCardSliding: false,
cardRect: null,
touchStartX: 0,
touchStartY: 0,
pageLoading: true,
mainMode: 'string',
secondaryMode: 'string',
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
navTitle: "",
sliderValue: 30,
sliderValue: 25,
lightModeA: false,
currentMainMode: '强光',
currentlaserMode: "关闭",
lightModeB: false,
lightModeC: false, //激光提示框
items: [],
@ -273,13 +340,6 @@
code: '',
},
deviceInfo: {},
modeInstructions: {
'关灯': [1, 0, 0, 0, 0],
'强光': [1, 1, 0, 0, 0],
'弱光': [1, 2, 0, 0, 0],
'爆闪': [1, 3, 0, 0, 0],
'泛光': [1, 4, 0, 0, 0]
},
activePermissions: [], // 存储当前设备的权限数组
isSharedDevice: false, // 标记是否来自分享
isRightIconVisible: false,
@ -289,7 +349,26 @@
showUploadPopup: false,
selectedImage: null, // 添加这个变量来存储选择的图片
file: '',
selectedItemIndex: 0
selectedItemIndex: 0,
popupType: 'person', //弹框类型
isLaserOn: false,
// 进度条
Progress: {
show: false, //是否显示
height: '40rpx',
showMask: true, //是否显示mask
maskBgColor: 'rgba(0, 0, 0, 0.5)', // 半透明黑色遮罩
contentBgColor: 'rgba(18, 18, 18, 0.8)', // 主背景带透明度
showText: true, //是否显示当前进度的文字
txtColor: '#ffffffde', //文字的颜色
curr: 20, //当前进度
total: 100, //总进度
proBgColor: '#2a2a2a', //进度条底色,
proBorder: '', //进度条border
currBgColor: '#bbe600', //当前进度底色
currBorder: '', //当前进度border
borderRadius: '10rpx'
}
}
},
computed: {
@ -298,21 +377,145 @@
}
},
methods: {
filterChinese(e) {
const value = e.detail.value;
// 允许中文和常见中文标点
this.messageToSend = value.replace(/[^\u4e00-\u9fa5，。？！、；：“”‘’（）【】《》…—]/g, '');
// 修复某些平台输入法兼容性问题
this.$nextTick(() => {
e.target.value = this.messageToSend;
});
},
// 点击弹框外的区域关闭
closePopup() {
this.lightModeA = false;
this.lightModeB = false;
this.lightModeC = false;
},
closeProgress() {
this.Progress.show = false; // 直接关闭进度条
},
// *******定位******
gpsPosition() {
gpsPosition(item) {
// 添加调试日志
uni.navigateTo({
url: '/pages/common/map/index'
url: '/pages/common/map/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('Map', {
data: item
});
}
})
},
// 强制报警（）
handlePolice() {
this.popupType = 'cancel';
this.popupMessage = '确认要解除所选设备的报警状态';
this.showPopupFlag = true;
},
// ***********进度条***********
cardTouchStart(e) {
if (!this.cardRect) return;
this.touchStartX = e.touches[0].clientX;
this.touchStartY = e.touches[0].clientY;
},
cardTouchMove(e) {
if (!this.cardRect || e.touches.length === 0) return;
const deltaX = e.touches[0].clientX - this.touchStartX;
const deltaY = e.touches[0].clientY - this.touchStartY;
// 只有当水平滑动距离大于垂直距离时，才判断为有效滑动
if (Math.abs(deltaX) > Math.abs(deltaY)) {
this.isCardSliding = true;
this.updateSliderFromTouch(e);
}
},
cardTouchEnd(e) {
if (this.isCardSliding) {
// 触摸结束时，调用滑动结束的处理函数来发送最终值
this.onSliderChangeEnd({
detail: {
value: this.sliderValue
}
});
this.isCardSliding = false;
}
this.touchStartX = 0;
this.touchStartY = 0;
},
updateSliderFromTouch(e) {
const touchX = e.touches[0].clientX;
const cardLeft = this.cardRect.left;
const cardWidth = this.cardRect.width;
let relativeX = touchX - cardLeft;
// 边界处理
if (relativeX < 0) relativeX = 0;
if (relativeX > cardWidth) relativeX = cardWidth;
const newValue = Math.round((relativeX / cardWidth) * 100);
// 调用已有的节流函数来更新值和发送命令
this.onSliderChanging({
detail: {
value: newValue
}
});
},
onSliderChanging(e) {
this.sliderValue = e.detail.value;
if (!this.cardRect) return;
let value = e.detail.value;
if (value < 10) {
value = 10;
}
this.sliderValue = value; // 实时更新UI
const now = Date.now();
// 使用节流防止指令发送过于频繁
if (now - this.lastBrightnessTime > 200) { // 200毫秒节流
this.lastBrightnessTime = now;
// 增加轻微的震动反馈，提升手感
uni.vibrateShort({
type: 'light'
});
let data = {
deviceId: this.deviceID,
instructValue: this.sliderValue + '.00',
deviceImei:this.itemInfo.deviceImei
}
lightBrightnessSettings(data).then((res) => {
if (res.code !== 200) {
// 可以在这里处理错误，但滑动中不建议用toast
}
})
}
},
onSliderChangeEnd(e) {
let value = e.detail.value;
if (value < 10) {
value = 10;
}
this.sliderValue = value;
let data = {
deviceId: this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId,
instructValue: this.sliderValue + '.00',
deviceImei:this.itemInfo.deviceImei
}
lightBrightnessSettings(data).then((res) => {
if (res.code == 200) {
// 可以在此处理成功反馈
} else {
uni.showToast({
icon: 'none',
title: res.msg || '亮度调节失败'
})
}
})
},
selectMode(type) {
this.modeType = type;
@ -321,30 +524,37 @@
this.items = [{
text: '强光',
selected: this.currentMainMode === '强光', // 修正匹配条件
image: '/static/images/sett.png',
image: '/static/images/6170/sett.png',
instructValue: '1'
},
{
text: '弱光',
selected: this.currentMainMode === '弱光',
image: '/static/images/sett.png'
image: '/static/images/6170/rg.png',
instructValue: '2'
},
{
text: '爆闪',
selected: this.currentMainMode === '爆闪',
image: '/static/images/bs.png'
image: '/static/images/6170/bs.png',
instructValue: '3'
},
{
text: '泛光',
selected: this.currentMainMode === '泛光',
image: '/static/images/settt.png'
image: '/static/images/6170/settt.png',
instructValue: '4'
},
{
text: '关闭',
selected: this.currentMainMode === '关闭',
image: '/static/images/6170/close.png',
instructValue: '0'
},
];
}
},
// 激光模式
lasermode() {
this.lightModeC = true
},
// 人员信息登录
toggleForm() {
this.isFormExpanded = !this.isFormExpanded;
},
@ -366,28 +576,64 @@
},
// 灯光模式的确认
handleSumbit() {
if (this.selectedItemIndex === null) return;
const selectedItem = this.items[this.selectedItemIndex];
const instruction = this.modeInstructions[selectedItem.text];
console.log(selectedItem, 'selectedItemselectedItem');
// 修正这里的赋值错误，应该保存索引而不是文本
this.selectedItemIndex = this.selectedItemIndex;
console.log(this.selectedItemIndex,'this.selectedItemIndexthis.selectedItemIndex');
// if (instruction) {
// const topic = `B/${this.itemInfo.deviceImei}`;
// const message = JSON.stringify(instruction);
// // 确保mqttClient已连接
// if (this.mqttClient && this.mqttClient.client && this.mqttClient.client.isConnected()) {
// this.mqttClient.publish(topic, message);
// console.log('已发送指令:', instruction);
// } else {
// uni.showToast({
// title: 'MQTT未连接',
// icon: 'none'
// });
// }
// }
this.lightModeA = false;
if (this.selectedItemIndex === null) return;
const selectedItem = this.items[this.selectedItemIndex];
console.log(selectedItem, 'selectedItemselectedItem');
// 修正这里的赋值错误，应该保存索引而不是文本
this.selectedItemIndex = this.selectedItemIndex;
let data = {
deviceId: this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId,
instructValue: selectedItem.instructValue,
deviceImei:this.itemInfo.deviceImei
}
lightModeSettings(data).then((res) => {
if (res.code == 200) {
uni.showToast({
icon: 'none',
title: res.msg
})
this.lightModeA = false;
} else {
uni.showToast({
icon: 'none',
title: res.msg
})
}
})
},
// 激光模式
lasermode() {
this.lightModeC = true
},
// 激光确认框提交
handleBtn() {
const instructValue = this.isLaserOn ? 0 : 1;
let data = {
deviceId: this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId,
instructValue: instructValue,
deviceImei:this.itemInfo.deviceImei
}
laserModeSettings(data).then((res) => {
if (res.code == 200) {
uni.showToast({
icon: 'none',
title: res.msg
})
this.isLaserOn = !this.isLaserOn;
this.currentlaserMode = this.isLaserOn ? "开启" : "关闭"; // 更新显示文本
this.lightModeC = false
} else {
uni.showToast({
icon: 'none',
title: res.msg
})
}
})
},
//激光取消
handleDisagree() {
this.lightModeC = false
},
// 上传开机画面
uploadStartup() {
@ -414,7 +660,7 @@
}
this.selectedImage = res.tempFilePaths[0];
console.log('选择的图片:', res);
this.file = res.tempFiles[0].file
//this.file = res.tempFiles[0].file
},
fail: (err) => {
console.error('选择图片失败:', err);
@ -434,12 +680,21 @@
});
return;
}
// 显示进度条
this.Progress = {
...this.Progress,
show: true,
curr: 0,
showText: true
};
uni.uploadFile({
url: baseURL + '/app/device/uploadLogo',
url: baseURL + '/app/bjq/device/uploadLogo',
filePath: this.selectedImage,
name: this.file,
name: 'file',
formData: {
deviceId: this.deviceID,
deviceId: this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId,
deviceImei:this.itemInfo.deviceImei
},
header: {
'Authorization': 'Bearer ' + getToken(),
@ -450,10 +705,6 @@
try {
const responseData = JSON.parse(res.data);
if (responseData.code === 200) {
uni.showToast({
title: responseData.msg,
icon: 'success'
});
this.selectedImage = '';
this.file = null;
this.lightModeB = false
@ -468,12 +719,12 @@
title: '上传失败',
icon: 'none'
});
this.Progress.show = false; // 上传失败隐藏进度条
} finally {
uni.hideLoading();
}
}
})
},
// 分享
shareUp() {
@ -492,48 +743,29 @@
// 操作说明
operatingInst() {
let id = this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId
uni.navigateTo({
url: `/pages/common/operatingInstruct/index?id=${this.deviceID}`
url: `/pages/common/operatingInstruct/index?id=${id}`
})
},
// 产品参数
productparams() {
let id = this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId
uni.navigateTo({
url: `/pages/common/productDes/index?id=${this.deviceID}`
url: `/pages/common/productDes/index?id=${id}`
})
},
// 操作视频
operatingVideo() {
let id = this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId
uni.navigateTo({
url: `/pages/common/operationVideo/index?id=${this.deviceID}`
url: `/pages/common/operationVideo/index?id=${id}`
})
},
// 激光确认框
handleBtn() {
this.lightModeC = false
},
//取消
handleDisagree() {
this.lightModeC = false
},
// 发送人员信息
sendPersonnelInfo() {
// if (!this.mqttClient || !this.mqttClient.client.isConnected()) {
// uni.showToast({
// title: 'MQTT未连接',
// icon: 'none'
// });
// return;
// }
// const topic = `device/command/${this.deviceID}/personnel`;
// const message = JSON.stringify(this.personnelInfo);
// this.mqttClient.publish(topic, message);
// uni.showToast({
// title: '人员信息已发送',
// icon: 'success'
// });
if (!this.personnelInfo.unitName) {
uni.showToast({
title: '单位名称不能为空',
@ -571,11 +803,12 @@
name: this.personnelInfo.name,
position: this.personnelInfo.position,
unitName: this.personnelInfo.unitName,
deviceId: this.deviceID
deviceId: this.apiType === 'listA' ? this.deviceID : this.itemInfo.deviceId,
}
registerPersonInfo(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
this.popupType = 'person';
this.showPopupFlag = true
this.popupMessage = '人员信息发送成功'
} else {
@ -590,6 +823,32 @@
this.showPopupFlag = false
console.log('用户点击了确定')
},
// 解除报警
onPopupConfirmPolice() {
let data = {
deviceIds: this.apiType === 'listA' ? [this.deviceID] : [this.itemInfo.deviceId],
instructValue: 0, // '解除报警'
}
deviceSendAlarmMessage(data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'none'
});
this.showPopupFlag = false
setTimeout(() => {
this.fetchDeviceDetail(this.deviceID);
uni.$emit('deviceStatusUpdate', {});
}, 500)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
});
},
// 发送文本消息
sendTextMessage() {
if (!this.messageToSend) {
@ -605,11 +864,14 @@
})
let data = {
sendMsg: this.messageToSend,
deviceIds: [this.deviceID]
//deviceIds: [this.deviceID],
deviceIds: this.apiType === 'listA' ? [this.deviceID] : [this.itemInfo.deviceId],
}
deviceSendMessage(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
this.popupType = 'person';
this.showPopupFlag = true
this.popupMessage = '发送信息成功'
} else {
@ -619,18 +881,19 @@
});
}
})
// const topic = `device/command/${this.deviceID}/message`;
// this.mqttClient.publish(topic, this.messageToSend);
// uni.showToast({
// title: '消息已发送',
// icon: 'success'
// });
},
// 统一处理返回方法
handleDeviceData(res, isFromShared = false) {
if (res.code == 200) {
// 最后关闭加载状态
this.pageLoading = false
this.$nextTick(() => {
uni.createSelectorQuery().in(this).select('.control-card').boundingClientRect(data => {
if (data) {
this.cardRect = data;
}
}).exec();
})
this.deviceInfo = res.data
this.personnelInfo = {
unitName: res.data.personnelInfo?.unitName || '',
@ -683,7 +946,14 @@
icon: 'none'
})
}
},
handleMqttLost() {
this.Progress = {
...this.Progress,
show: false, // 隐藏进度条
};
}
},
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
@ -705,23 +975,65 @@
// 订阅来自设备的状态更新
const statusTopic = `A/${this.itemInfo.deviceImei}`;
this.mqttClient.subscribe(statusTopic, (payload) => {
console.log(`收到来自 ${statusTopic} 的消息:`, payload);
// uni.showModal({
// title: '收到设备消息',
// content: payload,
// showCancel: false
// });
try {
console.log(`收到来自 ${statusTopic} 的消息:`, payload);
//收到电量上报。延迟20s请求接口数据
const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) :
payload;
const deviceState = parsedMessage.state; // 直接取 state 数组
// ✅ 发送全局事件通知主页面更新
uni.$emit('deviceStatusUpdate', {
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 (deviceState[0] === 3) {
const progress = deviceState[1];
// 更新进度条
this.Progress = {
...this.Progress,
curr: progress * 2,
show: progress < 50 // 进度达到100时自动隐藏
};
// 当进度为100时显示成功弹框
if (progress === 50) {
this.popupType = 'logo';
this.popupMessage = '上传成功';
this.showPopupFlag = true;
this.lightModeB = false; // 关闭上传弹窗
this.selectedImage = ''; // 清空已选图片
}
}
} catch (error) {
console.error('解析MQTT消息失败:', error, '原始消息:', payload);
}
});
});
})
// 设置连接丢失回调
uni.$on('mqttConnectionLost', this.handleMqttLost);
if (this.apiType === 'listA') {
this.fetchDeviceDetail(data.data.id)
} else {
this.fetchSharedDeviceDetail(data.data.deviceId)
// 查分享权限详情
this.fetchSharedDeviceDetail(data.data.id)
}
});
// 如果需要向调用页面返回数据，可以触发 'ack' 事件
eventChannel.emit('ack', {})
eventChannel.emit('ack', {
})
},
onUnload() {
@ -729,6 +1041,10 @@
if (this.mqttClient) {
this.mqttClient.disconnect();
}
uni.$off('mqttConnectionLost', this.handleMqttLost);
if (this.mqttClient) {
this.mqttClient.disconnect();
}
},
}
@ -796,7 +1112,6 @@
width: 204rpx;
height: 144rpx;
margin-top: 30rpx;
object-fit: contain;
}
.dlIMG {
@ -804,6 +1119,12 @@
height: 52rpx;
}
.chargeStateIMG {
width: 27rpx;
height: 37rpx;
margin-left: 10rpx;
}
.cpIMG {
width: 66rpx;
height: 66rpx;
@ -859,7 +1180,7 @@
.info-card {
background-color: rgb(26, 26, 26);
border-radius: 16rpx;
padding: 10rpx 30rpx 5rpx 30rpx;
padding: 10rpx 20rpx 5rpx 20rpx;
margin-bottom: 20rpx;
}
@ -873,6 +1194,7 @@
.info-label {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.87);
white-space: nowrap;
}
.info-value {
@ -885,6 +1207,13 @@
text-align: end;
}
.locationGPS {
width: 88%;
text-align: end;
float: right;
line-height: 50rpx;
}
.control-card {
background-color: rgb(26, 26, 26);
border-radius: 16rpx;
@ -952,6 +1281,18 @@
}
.callpolice {
display: flex;
justify-content: space-between;
border-radius: 16rpx;
background: rgba(224, 52, 52, 1);
padding: 15rpx;
margin-bottom: 15rpx;
color: #fff;
line-height: 35rpx;
font-size: 26rpx;
}
.example-body {
position: absolute;
left: 50%;
@ -1014,6 +1355,7 @@
.form-label {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
white-space: nowrap;
}
.form-input {
@ -1021,6 +1363,15 @@
border: 1rpx solid transparent;
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
width: 100%;
}
.form-input1 {
height: 80rpx;
border: 1rpx solid transparent;
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
width: 98%;
}
.product-section {
@ -1100,7 +1451,7 @@
/* 弹窗主体 */
.agreement-popup {
width: 100%;
height: 40%;
height: 50%;
background-color: rgb(42, 42, 42);
border-radius: 60rpx 60rpx 0rpx 0rpx;
padding: 40rpx;

2
pages/6170/shareDevices/index.vue
View File

@ -48,7 +48,7 @@
<view class="agreement-mask" v-if="shareShow" @click="closePopup('share')">
<view class="agreement-popup" @click.stop>
<view class="popup-content">
<image src="/static/images/success.png" mode="aspectFit" class="svg"></image>
<image src="/static/images/common/success.png" mode="aspectFit" class="svg"></image>
<view>
<view class="popup-Title">设备分享成功</view>
</view>

6
pages/6170/shareManagement/index.vue
View File

@ -4,7 +4,7 @@
<view class="device-info" v-for="(item, index) in deviceList" :key="index">
<view class="device-header" @click.stop="handleFile(item)">
<view class="deviceIMG">
<image src="@/static/images/user.png" mode="aspectFit" class="IMG"></image>
<image src="@/static/images/common/user.png" mode="aspectFit" class="IMG"></image>
</view>
<view class="device-name">
<view>用户名：{{item.deviceName}}</view>
@ -22,7 +22,7 @@
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
<view class="agreement-popup" @click.stop>
<view class="popup-content">
<image src="/static/images/delel.png" mode="" class="svg"></image>
<image src="/static/images/common/delel.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定移除该用户！</view>
@ -86,7 +86,7 @@
},
getData(val) {
let data = {
deviceid: val
deviceId: val
}
deviceShareList(data).then((res) => {
if (res.code == 200) {

2
pages/common/addvideo/index.vue
View File

@ -25,7 +25,7 @@
<!-- 上传画面弹窗 -->
<view class="agreement-popupC">
<view class="popup-content">
<image src="/static/images/path2.png" mode="" class="path2"></image>
<image src="/static/images/common/path2.png" mode="" class="path2"></image>
<view class="popup-Title">
<view>保存成功！</view>
</view>

2
pages/common/allType/index.vue
View File

@ -4,7 +4,7 @@
<view class="vehicle-list" v-if="vehicles.length>0">
<view v-for="(item, index) in vehicles" :key="index">
<view class="vehicle-item" @click="alltypeInfo(item)">
<image src="/static/images/bip.6.png" mode="" class="IMG"></image>
<image src="/static/images/common/bip.6.png" mode="" class="IMG"></image>
</view>
<view class="plate-number">{{ item.typeName }}</view>
</view>

248
pages/common/index/index.vue
View File

@ -2,22 +2,25 @@
<view>
<!-- 使用自定义导航栏 -->
<custom-navbar :title="navTitle" :showBack="false" backgroundColor="#202020" color="#FFFFFF"
rightIcon="/static/images/add.png" @right-click="scan"></custom-navbar>
rightIcon="/static/images/common/add.png" @right-click="scan"></custom-navbar>
<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
<!-- handleSend 发送信息 -->
<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
<view class="tab-container">
<view v-for="(tab, index) in tabs" :key="index"
:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
{{tab.typeName}}
<view class="tab-bar-wrap">
<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
<view class="tab-container">
<view v-for="(tab, index) in tabs" :key="index"
:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
{{tab.typeName}}
</view>
</view>
</scroll-view>
<view class="tab-more" @click="allMore">
<image src="/static/images/common/more.png" mode="aspectFit" class="more"></image>
</view>
<view class="uniui-more">
<image @click="allMore" src="/static/images/more.png" mode="" class="more"></image>
</view>
</scroll-view>
<view class="sendFlex" v-if="activeTab && activeTab.id !== ''&& activeTabInfo.communicationMode==0">
<!-- <view class="callpolice">报警</view> -->
</view>
<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>
</view>
@ -27,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">
@click="handleSwipeClick($event, item, index)" class="device-card"
:style="{ border: item.communicationMode==0 && item.onlineStatus==0 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }">
<view @click.stop="handleFile(item)">
<view class="device-header">
<view class="deviceIMG">
@ -39,17 +43,24 @@
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}
</view>
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
<view class="onlines" v-if="item.communicationMode==0">在线</view>
<view>电量：90%</view>
<!-- 在线状态 -->
<view class="onlines"
v-if="item.communicationMode==0 && item.onlineStatus==1">在线</view>
<!-- 离线状态 -->
<view class="offlines"
v-if="item.communicationMode==0 && item.onlineStatus==0">离线</view>
<view>电量：{{item.battery || '0'}}%</view>
</view>
</view>
</view>
<view class="" v-if="item.communicationMode==1">
<view class="device-callpolice"
v-if="item.communicationMode==0 && item.onlineStatus==0">报警中</view>
<view v-if="item.communicationMode==1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view>
</view>
</view>
<image src="/static/images/cires.png" class="circle" mode="aspectFit"></image>
<image src="/static/images/common/cires.png" class="circle" mode="aspectFit"></image>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
@ -67,10 +78,10 @@
</scroll-view>
</view>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')" catchtouchmove="true">
<view class="agreement-popupC" @click.stop>
<view class="popup-content">
<image src="/static/images/dell.png" mode="" class="svg"></image>
<image src="/static/images/common/dell.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定删除所选设备！</view>
@ -83,7 +94,7 @@
</view>
</view>
<!-- =========重命名============== -->
<view class="agreement-mask" v-if="RenameModel" @click="closePopup('rename')">
<view class="agreement-mask" v-if="RenameModel" @click="closePopup('rename')" catchtouchmove="true">
<view class="agreement-popupD" @click.stop>
<view class="popup-content">
<view>
@ -101,9 +112,9 @@
</view>
</view>
<!-- 小提示框 -->
<view class="tooltip-box" v-if="showTooltip">
<view class="tooltip-box" v-if="showTooltip" @click="closePopupTooltip" catchtouchmove="true">
<view class="tooltip-arrow"></view>
<view class="tooltip-content">
<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" />
@ -112,9 +123,9 @@
</view>
</view>
<!-- ====分享，类型提示框==== -->
<view class="tooltip-share" v-if="showshare">
<view class="tooltip-share" v-if="showshare" @click="closePopupTooltip" catchtouchmove="true">
<view class="tooltip-arrow"></view>
<view class="tooltip-content">
<view class="tooltip-content" @click.stop>
<view class="tooltip-item" v-for="(item, index) in shareItems" :key="index"
@click="handleshareClick(item)">
<image :src="item.icon" class="item-icon" />
@ -163,23 +174,23 @@
RenameModel: false,
menuItems: [{
text: '扫一扫添加',
icon: '/static/images/scane.png',
icon: '/static/images/common/scane.png',
action: 'scan'
},
{
text: '蓝牙添加',
icon: '/static/images/bluetooth.png',
icon: '/static/images/common/bluetooth.png',
action: 'bluetooth'
}
],
shareItems: [{
text: '所有类型',
icon: '/static/images/type.png',
icon: '/static/images/common/type.png',
action: 'type'
},
{
text: '所有分享',
icon: '/static/images/share.png',
icon: '/static/images/common/share.png',
action: 'share'
}
],
@ -289,17 +300,38 @@
onScrollToLower() {
this.getData();
},
// 添加扫一三图标
// 添加扫一扫图标
scan() {
this.showTooltip = !this.showTooltip;
},
closePopupTooltip() {
this.showTooltip = !this.showTooltip
this.showshare = !this.showshare
},
// 添加设备,扫一扫,蓝牙
handleMenuClick(item) {
this.showTooltip = false; // 关闭弹窗
switch (item.action) {
case 'scan':
uni.navigateTo({
url: '/pages/common/scan/scan'
// uni.navigateTo({
// url: '/pages/common/scan/scan'
// });
// 扫一扫
uni.scanCode({
success: (res) => {
console.log('条码内容：' + res.result);
// 跳转并传递扫描结果
uni.navigateTo({
url: `/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(res.result)}`
});
},
fail: (err) => {
console.log('扫码失败', err);
uni.showToast({
title: '扫码失败',
icon: 'none'
});
}
});
break;
case 'bluetooth':
@ -311,7 +343,6 @@
},
// 右滑点击事件处理
handleSwipeClick(e, item, index) {
const {
content
} = e
@ -346,6 +377,7 @@
});
setTimeout(() => {
this.onIntall();
this.getTab()
}, 500);
this.deleteShow = false
// 关闭所有滑动项
@ -394,10 +426,27 @@
}
})
},
// 报警
callpolice() {
const currentTab = this.tabs[this.activeTab];
const deviceType = currentTab.id || '';
console.log(`跳转到发送信息页面\n当前设备类型: ${deviceType}\n设备类型名称: ${currentTab.typeName}`);
uni.navigateTo({
url: '/pages/6170/callPolice/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('devicePolice', {
data: deviceType
});
}
})
},
// 发生短信
handleSend() {
const currentTab = this.tabs[this.activeTab];
const deviceType = currentTab.id || 'all';
const deviceType = currentTab.id || '';
console.log(`跳转到发送信息页面\n当前设备类型: ${deviceType}\n设备类型名称: ${currentTab.typeName}`);
uni.navigateTo({
url: '/pages/common/send/index',
@ -414,13 +463,21 @@
// 位置
location() {
uni.navigateTo({
url: '/pages/common/map/index'
url: '/pages/common/map/index',
events: {
ack: function(data) {}
},
success: (res) => {
// 页面跳转成功后的回调函数
res.eventChannel.emit('Map', {
data: this.deviceList,
});
}
})
},
handleFile(item) {
//console.log('item' + JSON.stringify(item));
// communicationMode 0是4G 1是蓝牙
if (item.communicationMode == 0) {
// communicationMode 0是4G 1是蓝牙,考虑多个4g设备
if (item.typeName == 'BJQ6170') {
uni.navigateTo({
url: "/pages/6170/deviceControl/index",
events: {
@ -434,14 +491,29 @@
});
}
})
} else if (item.typeName == 'HBY210') {
const currentTab = this.tabs[this.activeTab];
const deviceType = currentTab.id || '';
uni.navigateTo({
url: "/pages/210/deviceControl/index",
events: {
ack: function(data) {}
},
success: (res) => {
// 页面跳转成功后的回调函数
res.eventChannel.emit('deviceControl', {
data: item,
deviceType: deviceType,
apiType: 'listA' // 自定义标识
});
}
})
}
if (item.typeName == '6155') {
uni.navigateTo({
url: "/pages/6155/deviceDetail",
events: {
ack: function(data) {
}
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('detailData', {
@ -450,14 +522,36 @@
}
})
}
},
onIntall() {
this.page = 1;
this.finished = false;
this.getData(this.deviceType); // 重新加载第一页数据
},
updateDeviceStatus(data) {
this.deviceList = this.deviceList
.map(item => {
if (!item) return null; // 如果 item 是 undefined/null，返回 null
if (item.communicationMode == 0) {
let messageData;
try {
messageData = data.message;
} catch (e) {
return item; // 解析失败则返回原 item
}
const [deviceId, onlineStatus, battery] = messageData.state || [];
console.log('我收到消息了没', item.battery);
return {
...item,
battery: battery ?? item.battery,
onlineStatus: onlineStatus ?? item.onlineStatus,
lastUpdate: data.timestamp,
};
}
return item;
})
.filter(Boolean);
},
},
onLoad() {
this.getTab()
@ -467,11 +561,19 @@
this.getTab() // 刷新数据
this.onIntall()
});
// 监听设备状态更新事件
uni.$on('deviceStatusUpdate', (data) => {
console.log('列表收到消息了么');
this.onIntall()
});
},
beforeDestroy() {
// 组件销毁前移除监听器
uni.$off('refreshDeviceList');
},
onUnload() {
uni.$off('deviceStatusUpdate');
}
}
</script>
@ -498,11 +600,10 @@
.tab-container {
display: flex;
/* justify-content: space-around; */
cursor: pointer;
margin-bottom: 40rpx;
/* min-width: 100%; */
/* 最小宽度 */
padding-right: 80rpx;
/* 预留更多按钮空间 */
}
.tab-item {
@ -530,26 +631,26 @@
font-size: 28rpx;
}
.uniui-more {
.tab-bar-wrap {
display: flex;
/* 横向排列 */
align-items: baseline;
/* 垂直居中 */
position: relative;
width: 100%;
/* 可选（若需要绝对定位 fallback） */
}
.tab-more {
margin-left: 10rpx;
/* 与Tab的间距 */
display: flex;
align-items: center;
background: linear-gradient(-88.60deg, rgba(18, 18, 18, 1), rgba(18, 18, 18, 0) 100%);
}
.more {
width: 40rpx;
height: 8rpx;
/* position: absolute; */
/* right: 0rpx;
z-index: 100; */
float: right;
top: -95rpx
}
.gprs {
width: 28rpx;
height: 35rpx;
position: absolute;
left: 50rpx
}
.Sendmessage {
@ -599,6 +700,20 @@
}
.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;
@ -672,6 +787,21 @@
left: -20rpx
}
.offlines {
position: relative;
}
.offlines::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;

7
pages/common/login/index.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="pageContent">
<image src="/static/images/login.png" mode="" class="login-bg"></image>
<image src="/static/images/common/login.png" mode="" class="login-bg"></image>
<view class="content_con">
欢迎登录
</view>
@ -49,7 +49,6 @@
</view>
</view>
</view>
</template>
<script>
@ -61,8 +60,8 @@
data() {
return {
showView: false,
phone: '13058067817', //手机号码
code: "", //验证码
phone: '13800138002', //手机号码
code: "123456", //验证码
agreed: false,
isCounting: false,
countdown: 0,

389
pages/common/map/index.vue
View File

@ -1,236 +1,175 @@
<template>
<view class="map-container">
<!-- 背景保护层 -->
<view class="map-background"></view>
<view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
<!-- 加载提示 -->
<view v-if="loading" class="loading-mask">
<view class="loading-content">地图加载中...</view>
</view>
</view>
<view>
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 100vh;"
:latitude="latitude"
:longitude="longitude"
:markers="covers"
@markertap="onMarkerTap"
:scale="16">
</map>
</view>
</view>
<!-- 加载提示 -->
<view v-if="loading" class="loading-mask">
<view class="loading-content">加载中...</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loading: true
}
},
methods: {
hideLoading() {
this.loading = false
}
}
data() {
return {
title: 'map',
latitude: 39.909, // 默认纬度
longitude: 116.39742, // 默认经度
covers: [], // 标记点数组
loading: true, // 加载状态
markerData: [] // 存储原始标记数据
}
},
onLoad() {
// 获取事件通道
const eventChannel = this.getOpenerEventChannel();
// 监听传递过来的位置数据
eventChannel.on('Map', (receivedData) => {
this.loading = true;
this.covers = [];
//先获取data属性内容
const dataContent = receivedData.data;
//data是数组
if (Array.isArray(dataContent)) {
// 过滤掉经纬度为空的设备
const validDevices = dataContent.filter(device =>
device.latitude !== null &&
device.longitude !== null &&
device.latitude !== '' &&
device.longitude !== ''
);
this.markerData = validDevices;
if (validDevices.length > 0) {
this.processMultipleMarkers(validDevices);
} else {
console.log('没有有效的设备经纬度数据');
this.loading = false;
}
}
//data是单个设备对象
else if (typeof dataContent === 'object' && dataContent !== null) {
if (this.validateMarker(dataContent)) {
this.markerData = [dataContent];
this.processSingleMarker(dataContent);
} else {
console.log('单个设备数据缺少有效的经纬度');
this.loading = false;
}
}
});
},
methods: {
// 处理单个标记点
processSingleMarker(marker) {
// 转换经纬度为数字
const lat = parseFloat(marker.latitude);
const lng = parseFloat(marker.longitude);
// 设置地图中心
this.latitude = lat;
this.longitude = lng;
// 创建标记点
this.covers = [{
id: marker.deviceImei, // 适配deviceId字段
latitude: lat,
longitude: lng,
iconPath: marker.devicePic || '/static/images/common/device.png',
width: 40,
height: 40,
anchor: {x: 0.5, y: 0.5}, // 锚点在中心
callout: {
content: `ID: ${marker.deviceImei}`
}
}];
this.loading = false;
},
// 处理多个标记点
processMultipleMarkers(markers) {
// 使用第一个有效标记点的位置作为地图中心
const firstMarker = markers[0];
this.latitude = parseFloat(firstMarker.latitude);
this.longitude = parseFloat(firstMarker.longitude);
// 转换所有有效标记点
this.covers = markers.map((marker, index) => ({
id: marker.deviceId || marker.id || marker.deviceImei || index + 1,
latitude: parseFloat(marker.latitude),
longitude: parseFloat(marker.longitude),
iconPath: marker.devicePic || '/static/images/common/device.png',
width: 40,
height: 40,
anchor: {x: 0.5, y: 0.5},
callout: {
content: `ID: ${marker.deviceImei}`,
}
}));
this.loading = false;
},
// 验证标记点是否包含必要信息
validateMarker(marker) {
// 验证经纬度是否有效
const hasValidLat = marker.latitude && marker.latitude !== '' && !isNaN(parseFloat(marker.latitude));
const hasValidLng = marker.longitude && marker.longitude !== '' && !isNaN(parseFloat(marker.longitude));
return hasValidLat && hasValidLng;
},
// 标记点点击事件
onMarkerTap(e) {
const clickedMarker = this.markerData.find(
item =>item.deviceImei === e.markerId
);
}
}
}
</script>
<script module="amap" lang="renderjs">
export default {
data() {
return {
markers: [],
customPopup: null
}
},
mounted() {
// 初始设置背景色
const container = document.getElementById('mapWrapper')
container.style.backgroundColor = '#121212'
container.style.transition = 'background 0.5s'
this.initMap()
},
methods: {
async loadScript(url) {
return new Promise((resolve) => {
const script = document.createElement('script')
script.src = url
script.onload = resolve
document.head.appendChild(script)
})
},
async initMap() {
try {
// 动态加载SDK
if (!window.AMap) {
await this.loadScript(
'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
)
}
const container = document.getElementById('mapWrapper')
container.innerHTML = `
<div id="amapContainer" style="
width:100%;
height:100%;
opacity:0;
transition:opacity 0.8s ease-out;
background:#121212;
"></div>
`
// 初始化地图
this.map = new AMap.Map('amapContainer', {
viewMode: '3D',
zoom: 13,
center: [114.305, 30.592],
mapStyle: 'amap://styles/grey'
})
// 地图加载完成后淡入
this.map.on('complete', () => {
document.getElementById('amapContainer').style.opacity = 1
this.$ownerInstance.callMethod('hideLoading')
// 添加标记点
const wuhanPoints = [
{ lnglat: [114.404, 30.507], name: "华中科技大学" },
{ lnglat: [114.428, 30.476], name: "光谷金融港" },
{ lnglat: [114.433, 30.504], name: "武汉东站" }
]
wuhanPoints.forEach(point => {
this.addMarker(point.lnglat, point.name)
})
})
// 创建自定义弹窗
this.createCustomPopup()
} catch (e) {
console.error('初始化失败:', e)
this.$ownerInstance.callMethod('hideLoading')
}
},
createCustomPopup() {
this.customPopup = document.createElement('div')
this.customPopup.className = 'custom-map-popup'
this.customPopup.innerHTML = `
<div class="popup-content">
<div class="popup-title"></div>
</div>
`
this.customPopup.style.display = 'none'
document.getElementById('amapContainer').appendChild(this.customPopup)
},
addMarker(position, title) {
const marker = new AMap.Marker({
position: new AMap.LngLat(...position),
map: this.map,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
})
marker.on('click', () => {
this.showCustomPopup(position, title)
})
this.markers.push(marker)
return marker
},
showCustomPopup(position, title) {
const pixel = this.map.lngLatToContainer(position)
this.customPopup.querySelector('.popup-title').textContent = title
this.customPopup.style.display = 'block'
this.customPopup.style.left = `${pixel.x}px`
this.customPopup.style.top = `${pixel.y}px`
this.map.on('click', this.hideCustomPopup)
},
hideCustomPopup() {
if (this.customPopup) {
this.customPopup.style.display = 'none'
}
this.map.off('click', this.hideCustomPopup)
}
}
}
</script>
<style>
/* 基础样式 */
.map-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.map-background {
position: absolute;
width: 100%;
height: 100%;
background: #121212;
z-index: 1;
}
.map-wrapper {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
/* 加载提示 */
.loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #121212;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.loading-content {
color: rgba(255,255,255,0.9);
font-size: 16px;
padding: 12px 24px;
background: rgba(0,0,0,0.7);
border-radius: 8px;
}
/* 弹窗样式 */
.custom-map-popup {
position: absolute;
z-index: 9999;
transform: translate(-50%, -100%);
min-width: 200rpx;
pointer-events: none;
animation: popupFadeIn 0.3s ease-out;
}
.popup-content {
background: rgba(18,45,74,0.95);
border-radius: 16rpx;
padding: 12rpx 24rpx;
color: #fff;
font-size: 14px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.1);
}
.popup-content:after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 8px 8px 0;
border-style: solid;
border-color: rgba(18,45,74,0.95) transparent transparent;
}
@keyframes popupFadeIn {
from { opacity: 0; transform: translate(-50%, -90%); }
to { opacity: 1; transform: translate(-50%, -100%); }
}
</style>
.loading-content {
color: #fff;
font-size: 16px;
padding: 12px 24px;
background: rgba(0, 0, 0, 0.7);
border-radius: 8px;
}
.empty-tip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px 20px;
border-radius: 4px;
z-index: 99;
}
</style>

4
pages/common/operatingInstruct/index.vue
View File

@ -17,7 +17,7 @@
<!-- 多选模式下的选中标记 -->
<view class="checkmark" v-if="isDeleteMode && selectedImages.includes(index)">
<image src="/static/images/delete-icon.png" mode="aspectFill"></image>
<image src="/static/images/common/delete-icon.png" mode="aspectFill"></image>
</view>
</view>
@ -38,7 +38,7 @@
<view class="agreement-mask" v-if="deleteShow">
<view class="agreement-popupC">
<view class="popup-content">
<image src="/static/images/dell.png" mode="" class="svg"></image>
<image src="/static/images/common/dell.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定删除所选设备！</view>

6
pages/common/operationVideo/index.vue
View File

@ -10,20 +10,20 @@
@click="handleSwipeClick($event, index,item)" class="content">
<view class="image-box" @click="openVideoUrl(item.videoUrl)">
<view class="deviceIMG">
<image src="/static/images/video.png" mode="" class="video"></image>
<image src="/static/images/common/video.png" mode="" class="video"></image>
</view>
<view class="">
<view class="file-title">{{item.videoName}}</view>
<view class="file-baidu">{{item.videoUrl}}</view>
</view>
</view>
<image src="/static/images/cires.png" class="circle"></image>
<image src="/static/images/common/cires.png" class="circle"></image>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
</scroll-view>
<view class="content1" @click="addvideo">
<image src="/static/images/path1.png" class="path1"></image>
<image src="/static/images/common/path1.png" class="path1"></image>
</view>
</view>
</view>

4
pages/common/productDes/index.vue
View File

@ -17,7 +17,7 @@
<!-- 多选模式下的选中标记 -->
<view class="checkmark" v-if="isDeleteMode && selectedImages.includes(index)">
<image src="/static/images/delete-icon.png" mode="aspectFill"></image>
<image src="/static/images/common/delete-icon.png" mode="aspectFill"></image>
</view>
</view>
@ -38,7 +38,7 @@
<view class="agreement-mask" v-if="deleteShow">
<view class="agreement-popupC">
<view class="popup-content">
<image src="/static/images/dell.png" mode="" class="svg"></image>
<image src="/static/images/common/dell.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定删除所选设备！</view>

10
pages/common/qrcode/qrcode.vue
View File

@ -2,16 +2,20 @@
<view class="pageContent">
<!-- 初始状态 -->
<view class="pause" v-if="!isConnecting">
<image src="/static/images/svg.png" class="svg"></image>
<image src="/static/images/common/svg.png" class="svg"></image>
<view class="scanT">ID: {{ deviceId }}</view>
</view>
<!-- 连接中状态 -->
<view class="connecting-container" v-else>
<view class="device-info">
<view>
<image src="/static/images/bip.6.png" class="bip"></image>
<view class="">
<image src="/static/images/common/svg.png" class="svg"></image>
</view>
<!-- <view>
<image src="/static/images/bip.6.png" class="bip"></image>
</view> -->
<text class="device-name">设备名：{{deviceId}}</text>
<text class="device-model1">ID:{{deviceId}}</text>
</view>

22
pages/common/send/index.vue
View File

@ -16,32 +16,29 @@
<view class="device-name">
<view>设备:{{item.deviceName}}</view>
<view class="ID">
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}
</view>
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
<!-- <view class="onlines" v-if="item.communicationMode==0">在线</view> -->
<view class="unlines" v-if="item.communicationMode==0">离线</view>
<view>电量：90%</view>
<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 class="" v-if="item.communicationMode==1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view>
</view>
</view>
</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"
v-model="messageToSend" />
v-model="messageToSend" :maxlength="20"/>
</view>
<button class="login-btn" @click="sendTextMessage">发送</button>
</view>
</scroll-view>
<!-- 成功提示弹框 -->
<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage" icon="/static/images/sendSucc.png"
<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage" icon="/static/images/common/sendSucc.png"
:confirm-text="popupConfirmText" :show-cancel="false" @confirm="onPopupConfirm" />
</view>
</template>
@ -168,6 +165,7 @@
display: flex;
align-items: center;
width: 95%;
margin-bottom: 20rpx;
}
.checkbox {

12
pages/common/user/index.vue
View File

@ -1,29 +1,29 @@
<template>
<view class="pageContent">
<image src="/static/images/login.png" mode="" class="login-bg"></image>
<image src="/static/images/common/login.png" mode="" class="login-bg"></image>
<view class="content_con">
<view class="user_logo">
<image src="/static/images/logo.png" class="logo"></image>
<image src="/static/images/common/logo.png" class="logo"></image>
</view>
<view class="user-right">
<view class="user-title">星汉研创</view>
<view class="user-title">富源晟科技</view>
<view class="ID">ID:123456</view>
</view>
</view>
<view class="content">
<view class="menu-list">
<view class="menu-item" @click="userAgree">
<image src="/static/images/xy.png" class="icon"></image>
<image src="/static/images/common/xy.png" class="icon"></image>
<text class="title">用户协议</text>
<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
</view>
<view class="menu-item" @click="privacyAgree">
<image src="/static/images/ys.png" class="icon"></image>
<image src="/static/images/common/ys.png" class="icon"></image>
<text class="title">隐私协议</text>
<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
</view>
<view class="menu-item" @click="aboutUs">
<image src="/static/images/wm.png" class="icon"></image>
<image src="/static/images/common/wm.png" class="icon"></image>
<text class="title">关于我们</text>
<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
</view>