Compare commits

...

4 Commits

19 changed files with 594 additions and 354 deletions

18
App.vue
View File

@ -15,12 +15,9 @@
<style lang="scss">
@import 'vk-uview-ui/index.scss';
uni-slider .uni-slider-handle-wrapper {
border-radius: 20rpx;
}
uni-slider .uni-slider-thumb {
width: 66rpx !important;
height: 80rpx !important;
@ -29,7 +26,6 @@
margin-left: -72rpx !important;
}
uni-slider .uni-slider-handle-wrapper {
height: 88rpx;
position: relative;
@ -41,17 +37,21 @@
width: 180rpx;
height: 180rpx;
}
.uni-file-picker.custom-file-picker {
overflow: inherit !important;
}
.custom-file-picker .icon-add {
height: 5rpx !important;
width: 70rpx !important;
}
.custom-file-picker .file-picker__box-content {
// display: none
.uni-picker-view-mask{
background: rgba(42, 42, 42, 1);
z-index: -1;
}
.uni-picker-view-content{
position: inherit;
}
.uni-picker-view-wrapper{
background: rgba(42, 42, 42, 1);
}
</style>

9
api/6170/callPolice.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
//报警
export function deviceSendAlarmMessage(data) {
return request({
url: '/app/device/sendAlarmMessage',
method: 'post',
data: data
})
}

View File

@ -1,87 +1,62 @@
<template>
<view class="agreement-mask" v-if="show" @click.stop="closePopup">
<!-- 弹窗主体支持自定义边框背景 -->
<view
class="agreement-popup"
@click.stop
:style="{
<view class="agreement-popup" @click.stop :style="{
border: popupBorder,
backgroundColor: popupBg,
borderRadius: popupRadius
}"
:class="popupClass"
>
<view class="popup-content">
<!-- 动态图标支持自定义大小边距 -->
<image
v-if="showIcon && icon"
:src="icon"
mode="aspectFit"
class="svg"
:style="iconStyle"
></image>
<view class="text-content">
<!-- 动态标题支持自定义颜色字体大小 -->
<view
class="popup-Title"
v-if="title"
:style="{
color: titleColor,
fontSize: titleSize,
padding: titlePadding
}"
>
{{ title }}
</view>
}" :class="popupClass">
<view class="text-content">
<!-- 动态标题支持自定义颜色字体大小 -->
<view class="popup-Title" v-if="title" :style="{
color: titleColor,
fontSize: titleSize,
padding: titlePadding
}">
{{ title }}
</view>
<view class="popup-content">
<!-- 动态图标支持自定义大小边距 -->
<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg" :style="iconStyle"></image>
<!-- 动态消息内容支持自定义颜色换行字体大小 -->
<view
class="popup-Message"
v-if="message"
:style="{
<view class="popup-Message" v-if="message" :style="{
color: messageColor,
fontSize: messageSize,
whiteSpace: messageWrap ? 'normal' : 'nowrap',
padding: messagePadding
}"
>
}">
{{ message }}
</view>
<!-- 倒计时显示 -->
<!-- <view v-if="showCountdown" class="countdown" :style="countdownStyle">
{{ countdownFormat.replace('{time}', currentCountdown) }}
</view> -->
</view>
</view>
<!-- 按钮组支持自定义按钮样式 -->
<view class="popup-buttons" :style="{ marginTop: buttonGroupMargin }">
<button
v-if="showCancel"
class="btn cancelBtn"
@click="handleCancel"
:style="{
<button v-if="showCancel" class="btn cancelBtn" @click="handleCancel" :style="{
border: cancelBtnBorder,
color: cancelBtnColor,
backgroundColor: cancelBtnBg,
fontSize: cancelBtnSize,
borderRadius: buttonRadius,
margin: buttonMargin
}"
:class="cancelBtnClass"
>
}" :class="cancelBtnClass">
{{ cancelText }}
</button>
<button
class="btn agreeBtn"
@click="handleConfirm"
:style="{
<button class="btn agreeBtn" @click="handleConfirm" :style="{
backgroundColor: confirmBtnBg,
color: confirmBtnColor,
fontSize: confirmBtnSize,
borderRadius: buttonRadius,
margin: buttonMargin
}"
:class="confirmBtnClass"
>
}" :class="confirmBtnClass">
{{ confirmText }}
</button>
</view>
@ -106,6 +81,10 @@
type: String,
default: ''
},
showCountdown: {
type: Boolean,
default: false
},
confirmText: {
type: String,
default: '确定'
@ -131,7 +110,7 @@
type: Boolean,
default: false // 默认不换行true则自动换行
},
// 弹窗样式自定义
popupBorder: {
type: String,
@ -139,7 +118,7 @@
},
popupBg: {
type: String,
default: 'rgb(42, 42, 42)'
default: 'rgb(42, 42, 42, 0.9)'
},
popupRadius: {
type: String,
@ -149,7 +128,7 @@
type: String,
default: ''
},
// 标题样式自定义
titleColor: {
type: String,
@ -163,7 +142,7 @@
type: String,
default: '10rpx 0 10rpx'
},
// 消息样式自定义
messageColor: {
type: String,
@ -177,7 +156,7 @@
type: String,
default: '10rpx 20rpx 30rpx'
},
// 图标样式自定义
iconStyle: {
type: Object,
@ -187,7 +166,7 @@
marginBottom: '20rpx'
})
},
// 按钮组样式
buttonGroupMargin: {
type: String,
@ -201,7 +180,7 @@
type: String,
default: '0 10rpx'
},
// 确认按钮样式
confirmBtnBg: {
type: String,
@ -219,7 +198,7 @@
type: String,
default: ''
},
// 取消按钮样式
cancelBtnBorder: {
type: String,
@ -267,7 +246,7 @@
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;

View File

@ -0,0 +1,88 @@
<template>
<picker-view
class="picker-body"
:value="timeIndex"
@change="handleTimeChange"
>
<!-- 分钟列 -->
<picker-view-column>
<view
v-for="min in minutes"
:key="min"
class="item"
:class="{ active: timeIndex[0] === minutes.indexOf(min) }"
>{{ min }}</view>
</picker-view-column>
<!-- 秒数列 -->
<picker-view-column>
<view
v-for="sec in seconds"
:key="sec"
class="item"
:class="{ active: timeIndex[1] === seconds.indexOf(sec) }"
>{{ sec }}</view>
</picker-view-column>
</picker-view>
</template>
<script>
export default {
name: "TimePicker",
props: {
// 初始时间(格式:{ minutes: '02', seconds: '30' }
defaultTime: {
type: Object,
default: () => ({ minutes: '00', seconds: '00' })
}
},
data() {
return {
minutes: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
seconds: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
timeIndex: [0, 0], // 当前选中索引
selectedTime: { minutes: '00', seconds: '00' } // 当前选择的时间
};
},
created() {
// 初始化默认时间
const minIndex = this.minutes.indexOf(this.defaultTime.minutes);
const secIndex = this.seconds.indexOf(this.defaultTime.seconds);
this.timeIndex = [minIndex, secIndex];
this.selectedTime = { ...this.defaultTime };
},
methods: {
// 时间变化时更新选中值
handleTimeChange(e) {
this.timeIndex = e.detail.value;
const [minIdx, secIdx] = this.timeIndex;
this.selectedTime = {
minutes: this.minutes[minIdx],
seconds: this.seconds[secIdx]
};
this.$emit("change", this.selectedTime); // 实时通知父组件
},
// 提供给父组件的方法:获取当前时间
getCurrentTime() {
return this.selectedTime;
}
}
};
</script>
<style scoped>
.picker-body {
height: 180px;
background: #3A3A3A;
border-radius: 10px;
}
.item {
color: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 10px 0;
}
.item.active {
color: #A3FF00; /* 选中项高亮 */
}
</style>

View File

@ -22,9 +22,17 @@
<text v-if="rightText" :style="{ color: rightColor }" @click="handleRightClick">
{{ rightText }}
</text>
<!-- 显示多个图标 -->
<template v-if="rightIcons && rightIcons.length > 0">
<image v-for="(icon, index) in rightIcons" :key="index" :src="icon.src"
@click="handleIconClick(index)" class="pathIMG" :style="{
width: icon.size || '40rpx',
height: icon.size || '40rpx',
marginLeft: index > 0 ? '20rpx' : '0'
}" />
</template>
<!-- 或显示图标 -->
<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" mode=""
class="pathIMG">
<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" class="pathIMG">
</image>
</slot>
</view>
@ -60,6 +68,11 @@
rightIconSize: { // 图标大小
type: Number,
default: 24
},
rightIcons: {
type: Array,
default: () => []
// 格式: [{src: '/path/icon1.png'}, {src: '/path/icon2.png'}]
}
},
data() {
@ -76,6 +89,10 @@
},
handleRightClick() {
this.$emit('right-click'); // 触发右侧点击事件
},
// 新增图标点击方法
handleIconClick(index) {
this.$emit('icon-click', index)
}
}
}

View File

@ -84,7 +84,8 @@
"name" : "amapHG8nIFW5",
"appkey_ios" : "065c43f02c7b627a74ad7dd23b16bb4f",
"appkey_android" : "d7d852dbda2b95f6f796fb9a711a9fee"
}
},
"customStyle": true
},
"oauth" : {},
"push" : {}

View File

@ -178,7 +178,14 @@
"style": {
"navigationBarTitleText": "添加联机设备"
}
},
{
"path": "pages/210/historyRecords/index",
"style": {
"navigationBarTitleText": "历史记录"
}
}
],
"tabBar": {

View File

@ -5,9 +5,11 @@
</view>
<!-- 使用自定义导航栏 -->
<view v-show="!pageLoading">
<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF"
:rightIcon="isRightIconVisible ? '/static/images/shape.png' : ''"
@right-click="shareUp"></custom-navbar>
<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" :rightIcons="[
{src: '/static/images/210/ls.png'},
...(isRightIconVisible ? [{src: '/static/images/common/shape.png'}] : [])
]" @right-click="shareUp" @icon-click="handleIconClick"></custom-navbar>
<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
<!-- 设备电量信息 -->
<view class="battery-section">
@ -59,8 +61,7 @@
<!-- ===========主副机选择============= -->
<view class="mode-section">
<view class="radio-group">
<view v-for="(item, index) in radioList" :key="index" @click="handleRadioSelect(index)"
class="group-item">
<view v-for="(item, index) in radioList" :key="index" class="group-item">
<view class="radio-icon" :class="{ 'selected': radioSelected === index }">
{{ item }}
<view class="uni-border"></view>
@ -89,7 +90,7 @@
</view>
</view>
<view class="mode-v1">
<view class="mode-v2" @click="lasermode">
<view class="mode-v2" @click="automaticAlarm">
<image src="/static/images/210/zd.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">自动报警</view>
@ -97,7 +98,7 @@
</view>
</view>
<view class="mode-v1">
<view class="mode-v2" @click="lasermode">
<view class="mode-v2" @click="anualAlarm">
<image src="/static/images/210/zd-HL.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">手动报警</view>
@ -105,7 +106,7 @@
</view>
</view>
<view class="mode-v1">
<view class="mode-v2" @click="lasermode">
<view class="mode-v2">
<image src="/static/images/210/bj.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">报警声音</view>
@ -114,11 +115,11 @@
</view>
</view>
<view class="mode-v1">
<view class="mode-v2" @click="lasermode">
<image src="/static/images/jg.png" class="setIMG" mode="aspectFit"></image>
<view class="mode-v2" @click="alarmTime">
<image src="/static/images/210/time.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">报警时长</view>
<view class="mode-v3">2分30秒</view>
<view class="mode-v3">{{alarmTimeDisplay }}</view>
</view>
</view>
</view>
@ -187,21 +188,18 @@
</view>
<!-- 弹框 -->
<view class="agreement-mask" v-if="lightModeA" @click.stop="closePopup">
<!-- 灯光模式弹窗 -->
<!-- 报警时长弹窗 -->
<view class="agreement-popup" @click.stop>
<!-- 标题 -->
<view class="popup-title"> {{ popupTitle }}</view>
<view class="popup-title">报警时长</view>
<view class="popup-content">
<view v-for="(item, index) in items" :key="index">
<view class="item" :class="{'selected': item.selected}" @click="onItemClick(index)">
<image :src="item.image" class="setIMG"></image>
{{item.text}}
</view>
<view class="time-picker-container">
<TimePicker ref="timePicker" :defaultTime="currentAlarmTime" @change="handleTimeChange" />
</view>
</view>
<!-- 按钮组 -->
<view class="popup-buttons">
<button class="agree" @click="handleSumbit">确定</button>
<button class="agree" @click="saveAlarmTime">保存</button>
</view>
</view>
</view>
@ -213,10 +211,7 @@
<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"
@ -230,51 +225,95 @@
</view>
</view>
</view>
<!--===================== 激光提示框================== -->
<view class="agreement-mask" v-if="lightModeC" @click.stop="closePopup">
<!-- 上传画面弹窗 -->
<view class="agreement-popupC" @click.stop>
<!-- 标题 -->
<view class="popup-title">确认开启激光模式</view>
<view class="popup-content">
<view class="popup-Title">
<view>注意事项</view>
<view>1.禁止直视光源或反射面</view>
<view>2.避免直射人或易燃物</view>
<view>3.需佩戴相应专业防护眼镜</view>
</view>
</view>
<!-- 按钮组 -->
<view class="popup-buttons">
<button class="btn disagree" @click="handleDisagree">取消</button>
<button class="btn agreeBtn" @click.stop="handleBtn">确定</button>
</view>
</view>
</view>
<!-- 人员信息成功提示弹框 -->
<CustomPopup v-if="popupType === 'person'" :show="showPopupFlag" :message="popupMessage"
icon="/static/images/common/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
@confirm="onPopupConfirm" />
<!-- 开机log上传成功的弹框提示 -->
<CustomPopup v-if="popupType === 'logo'" :show="showPopupFlag" :message="popupMessage"
icon="/static/images/common/upload.png" :confirm-text="popupConfirmText" :show-cancel="false"
@confirm="onPopupConfirm" />
<!--============= 电量低于提示弹框=========== -->
<CustomPopup v-if="popupType === 'bettery'" :show="showPopupFlag"
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage" title="设备电量低于20%"
titleColor="rgba(224, 52, 52, 1)" icon="/static/images/common/path.png" :confirm-text="popupConfirmText"
:show-cancel="true" @cancel="onPopupConfirm" @confirm="onPopupConfirm"
confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
<!-- 解除报警 -->
<CustomPopup v-if="popupType === 'cancel'" :show="showPopupFlag"
popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage"
icon="/static/images/6170/svg.png" :confirm-text="popupConfirmText" :show-cancel="false"
@confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
<!-- ======各个弹框类型======= -->
<CustomPopup :show="currentPopup.show" v-bind="currentPopup.config" @confirm="handleConfirm"
@cancel="handleCancel" />
</view>
</view>
</template>
<script>
// 弹框配置中心
const POPUP_CONFIGS = {
person: {
config: {
icon: '/static/images/common/sendSucc.png',
message: '信息发送成功',
showCancel: false
},
},
// 开机log
logo: {
config: {
icon: '/static/images/common/upload.png',
message: '上传成功',
showCancel: false
},
},
bettery: {
config: {
title: '设备电量低于20%',
titleColor: 'rgba(224, 52, 52, 1)',
message: '请及时充电',
icon: '/static/images/common/path.png',
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
confirmBtnBg: 'rgba(224, 52, 52, 1)',
showCancel: true
},
onConfirm() {
console.log('确认按钮');
return true; // 直接关闭
}
},
cancel: {
config: {
titleColor: 'rgba(224, 52, 52, 1)',
icon: '/static/images/common/svg.png',
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
confirmBtnBg: 'rgba(224, 52, 52, 1)',
showCancel: true //取消按钮
},
onConfirm() {
console.log('解除报警确认');
}
},
del: {
config: {
message: '确定开启报警?',
icon: '/static/images/210/bj_1.png',
popupBorder: '1rpx solid rgba(255, 200, 78, 1)',
confirmBtnBg: 'rgba(255, 200, 78, 1)',
showCancel: true
},
onConfirm() {
console.log('删除确认');
}
},
// 自动报警
autoAlarm: {
config: {
icon: '/static/images/6170/svg.png',
title: '报警信息',
message: '002号设备(ID:123456)\n出现报警', // 使用\n换行
showCountdown: true,
countdownTime: 59,
confirmText: '解除报警',
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
confirmBtnBg: 'rgba(224, 52, 52, 1)',
confirmBtnColor: "rgba(255, 255, 255, 0.87)",
showCancel: false,
},
onConfirm() {
console.log('自动报警确认');
// 这里可以添加自动报警的逻辑
}
}
}
import MqttClient from '@/utils/mqtt.js';
import {
deviceDetail,
@ -296,6 +335,11 @@
export default {
data() {
return {
currentPopup: {
show: false,
config: {},
callback: null
},
pageLoading: true,
mainMode: 'string',
secondaryMode: 'string',
@ -303,11 +347,14 @@
navTitle: "",
lightModeA: false,
lightModeB: false,
lightModeC: false, //激光提示框
items: [],
isFormExpanded: true, // 默认展开
deviceID: '',
itemInfo: {},
alarmTimeDisplay: '',
currentAlarmTime: {
minutes: '0',
seconds: '30'
},
mqttClient: null,
messageToSend: '',
personnelInfo: {
@ -330,7 +377,7 @@
radioList: ['M', 'S'],
radioSelected: 0, // -1表示未选中任何项
deviceType: '',
popupType:'popupType' //弹框类型
popupType: '', //弹框类型
}
},
methods: {
@ -338,12 +385,35 @@
closePopup() {
this.lightModeA = false;
this.lightModeB = false;
this.lightModeC = false;
},
// 打开弹框
showPopup(type) {
this.currentPopup = {
show: true,
config: POPUP_CONFIGS[type].config,
callback: POPUP_CONFIGS[type].onConfirm
}
},
handleConfirm() {
this.currentPopup.show = false;
console.log('这是点击了确认');
},
// 统一处理取消
handleCancel() {
this.currentPopup.show = false;
},
// 手动报警
anualAlarm() {
this.showPopup('del');
},
handleRadioSelect(index) {
this.radioSelected = index;
console.log('选中了单选选项:', this.radioList[index]);
},
// 自动报警
automaticAlarm() {
this.showPopup('autoAlarm');
},
// *******定位******
gpsPosition() {
uni.navigateTo({
@ -369,78 +439,6 @@
toggleForm() {
this.isFormExpanded = !this.isFormExpanded;
},
onItemClick(index) {
const selectedItem = this.items[index];
if (selectedItem.text === '激光') {
this.lightModeC = true;
} else {
// 更新选中状态
this.items = this.items.map((item, i) => ({
...item,
selected: i === index
}));
this.currentMainMode = selectedItem.text;
this.selectedItemIndex = index;
// 强制更新视图(如果需要)
this.$forceUpdate();
}
},
// 灯光模式的确认
handleSumbit() {
if (this.selectedItemIndex === null) return;
const selectedItem = this.items[this.selectedItemIndex];
console.log(selectedItem, 'selectedItemselectedItem');
// 修正这里的赋值错误,应该保存索引而不是文本
this.selectedItemIndex = this.selectedItemIndex;
let data = {
deviceId: this.deviceID,
instructValue: selectedItem.instructValue
}
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() {
let data = {
deviceId: this.deviceID,
instructValue: 1
}
laserModeSettings(data).then((res) => {
if (res.code == 200) {
uni.showToast({
icon: 'none',
title: res.msg
})
this.lightModeC = false
} else {
uni.showToast({
icon: 'none',
title: res.msg
})
}
})
},
//激光取消
handleDisagree() {
this.lightModeC = false
},
// 上传开机画面
uploadStartup() {
this.lightModeB = true
@ -508,9 +506,7 @@
try {
const responseData = JSON.parse(res.data);
if (responseData.code === 200) {
this.popupType = 'logo'; //弹框类型
this.showPopupFlag = true;
this.popupMessage = '上传成功';
this.showPopup('logo');
this.selectedImage = '';
this.file = null;
this.lightModeB = false
@ -531,19 +527,52 @@
}
})
},
// 报警时长
alarmTime() {
this.lightModeA = true
},
handleTimeChange(time) {
this.currentAlarmTime = time;
},
// 保存时间
saveAlarmTime() {
const time = this.$refs.timePicker.getCurrentTime();
this.alarmTimeDisplay = `${time.minutes}${time.seconds}`;
this.lightModeA = false;
console.log("保存的时间:", time);
},
handleIconClick(index) {
// 历史记录
if (index === 0) {
uni.navigateTo({
url: '/pages/210/historyRecords/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('share', {
data: this.itemInfo,
});
}
})
} else {
uni.navigateTo({
url: '/pages/6170/share/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('share', {
data: this.itemInfo,
});
}
})
}
},
// 分享
shareUp() {
uni.navigateTo({
url: '/pages/6170/share/index',
events: {
ack: function(data) {}
},
success: (res) => {
res.eventChannel.emit('share', {
data: this.itemInfo,
});
}
})
},
// 操作说明
@ -610,9 +639,7 @@
registerPersonInfo(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
this.popupType = 'person'; //弹框类型
this.showPopupFlag = true;
this.popupMessage = '人员信息发送成功'
this.showPopup('person');
} else {
uni.showToast({
title: res.msg,
@ -621,10 +648,6 @@
}
})
},
onPopupConfirm() {
this.showPopupFlag = false
console.log('用户点击了确定')
},
// 发送文本消息
sendTextMessage() {
if (!this.messageToSend) {
@ -645,9 +668,7 @@
deviceSendMessage(data).then((res) => {
if (res.code == 200) {
uni.hideLoading()
this.popupType = 'person'; //弹框类型
this.showPopupFlag = true;
this.popupMessage = '发送信息成功'
this.showPopup('person');
} else {
uni.showToast({
title: res.msg,
@ -1142,7 +1163,7 @@
/* 弹窗主体 */
.agreement-popup {
width: 100%;
height: 50%;
height: 40%;
background-color: rgb(42, 42, 42);
border-radius: 60rpx 60rpx 0rpx 0rpx;
padding: 40rpx;

View File

@ -0,0 +1,8 @@
<template>
</template>
<script>
</script>
<style>
</style>

View File

@ -35,11 +35,13 @@
<!-- 强制报警提示弹框 -->
<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" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
: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" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
:show-cancel="false" @close="onclosePopup" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)"
confirmBtnColor="#fff" />
</view>
</template>
@ -49,8 +51,8 @@
deviceInfo,
} from '@/api/common/index.js'
import {
deviceSendMessage
} from '@/api/6170/deviceControl.js'
deviceSendAlarmMessage
} from '@/api/6170/callPolice.js'
export default {
components: {
CustomPopup
@ -64,6 +66,7 @@
popupMessage: '确认要对所选设备开启强制报警?',
popupConfirmText: '确认',
popupType: 'force', // 'force' or 'cancel'
pendingAlarmAction: ''
}
},
computed: {
@ -72,6 +75,9 @@
}
},
methods: {
onclosePopup() {
this.showPopupFlag = false
},
toggleSelect(index) {
this.deviceList[index].checked = !this.deviceList[index].checked
this.$forceUpdate()
@ -122,6 +128,8 @@
this.popupType = 'force';
this.popupMessage = '确认要对所选设备开启强制报警?';
this.showPopupFlag = true;
this.pendingAlarmAction = 1
},
// 解除报警
cancelAlarm() {
@ -136,6 +144,8 @@
this.popupType = 'cancel';
this.popupMessage = '确认要解除所选设备的报警状态?';
this.showPopupFlag = true;
this.pendingAlarmAction = 1
},
sendAlarmCommand(type) {
const selectedDevices = this.deviceList.filter(item => item.checked);
@ -143,12 +153,20 @@
let data = {
deviceIds: deviceIds,
commandType: type // '强制或者解除'
instructValue: this.pendingAlarmAction, // '强制或者解除'
}
deviceSendMessage(data).then((res) => {
deviceSendAlarmMessage(data).then((res) => {
if (res.code == 200) {
this.showPopupFlag = true;
uni.showToast({
title: res.msg,
icon: 'none'
});
this.showPopupFlag = false
setTimeout(() => {
uni.navigateBack()
}, 500)
} else {
uni.showToast({
title: res.msg,
@ -159,10 +177,8 @@
},
// 点击确认状态
onPopupConfirm() {
this.showPopupFlag = false
uni.navigateBack()
console.log('用户点击了确定')
this.sendAlarmCommand(this.popupType);
// 处理确认逻辑
},
},

View File

@ -222,9 +222,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>
@ -294,7 +294,7 @@
secondaryMode: 'string',
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
navTitle: "",
sliderValue: 30,
sliderValue: 25,
lightModeA: false,
currentMainMode: '强光',
lightModeB: false,
@ -326,7 +326,7 @@
file: '',
selectedItemIndex: 0,
popupType: 'person', //弹框类型
timer: null
isLaserOn: false
}
},
computed: {
@ -346,20 +346,13 @@
// 添加调试日志
uni.navigateTo({
url: '/pages/common/map/index',
success: (res) => {
// 确保使用深拷贝
const mapData = {
deviceLocation: {
longitude: String(item.longitude), // 强制转为字符串
latitude: String(item.latitude),
deviceImage: item.devicePic || '',
deviceName: item.deviceImei || ''
}
}
res.eventChannel.emit('MapData', JSON.parse(JSON.stringify(mapData)))
events: {
ack: function(data) {}
},
fail: (err) => {
success: (res) => {
res.eventChannel.emit('Map', {
data: item
});
}
})
},
@ -558,9 +551,10 @@
},
// 激光确认框提交
handleBtn() {
const instructValue = this.isLaserOn ? 0 : 1;
let data = {
deviceId: this.deviceID,
instructValue: 1
instructValue: instructValue
}
laserModeSettings(data).then((res) => {
if (res.code == 200) {
@ -568,6 +562,7 @@
icon: 'none',
title: res.msg
})
this.isLaserOn = !this.isLaserOn;
this.lightModeC = false
} else {
uni.showToast({
@ -885,7 +880,8 @@
this.mqttClient.subscribe(statusTopic, (payload) => {
console.log(`收到来自 ${statusTopic} 的消息:`, payload);
//收到电量上报。延迟20s请求接口数据
const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) : payload;
const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) :
payload;
const deviceState = parsedMessage.state; // 直接取 state 数组
// ✅ 发送全局事件通知主页面更新
uni.$emit('deviceStatusUpdate', {
@ -896,7 +892,7 @@
setTimeout(() => {
this.fetchDeviceDetail(data.data.id);
}, 20000);
// 这里判断电量低于20%,弹框提示
if (this.deviceInfo.batteryPercentage < 20) {
this.popupType = 'bettery'

View File

@ -442,7 +442,16 @@
// 位置
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) {
@ -473,7 +482,8 @@
// 页面跳转成功后的回调函数
res.eventChannel.emit('deviceControl', {
data: item,
deviceType: deviceType
deviceType: deviceType,
apiType: 'listA' // 自定义标识
});
}
})
@ -498,29 +508,29 @@
this.getData(this.deviceType); // 重新加载第一页数据
},
updateDeviceStatus(data) {
// 只更新 communicationMode == 0 的设备
this.deviceList = this.deviceList.map(item => {
console.log(item,'item444');
if (item.communicationMode == 0) {
console.log(item, 'item2222');
let messageData;
try {
messageData = data.message; // 双重解析(如果消息被转义)
} catch (e) {
return item; // 解析失败则不更新
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,
};
}
const [deviceId, onlineStatus, batteryPercentage] = messageData.state || [];
// 只更新电量 & 在线状态(避免覆盖其他字段)
return {
...item,
batteryPercentage: batteryPercentage ?? item.batteryPercentage, // 如果新电量有效则更新,否则保留旧值
onlineStatus: onlineStatus ?? item.onlineStatus, // 如果新状态有效则更新,否则保留旧值
lastUpdate: data.timestamp // 更新时间戳
};
return item;
}
});
}
})
.filter(Boolean);
},
},
onLoad() {
this.getTab()
@ -530,22 +540,19 @@
this.getTab() // 刷新数据
this.onIntall()
});
// 监听设备状态更新事件
uni.$on('deviceStatusUpdate', (data) => {
console.log('收到设备状态更新通知:', data);
this.onIntall()
});
},
beforeDestroy() {
// 组件销毁前移除监听器
uni.$off('refreshDeviceList');
},
onShow() {
// 监听设备状态更新事件
uni.$on('deviceStatusUpdate', (data) => {
console.log('收到设备状态更新通知:', data);
this.updateDeviceStatus(data);
});
},
onHide() {
// 页面隐藏时取消监听,避免内存泄漏
onUnload() {
uni.$off('deviceStatusUpdate');
},
}
}
</script>

View File

@ -1,73 +1,151 @@
<template>
<view class="map-container">
<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
:custom-map-style="customMapStyle" :enable-custom="true">
</map>
<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 class="loading-content">加载中...</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loading: true, // 默认显示加载提示
latitude: 30.592,
longitude: 114.305,
customMapStyle: '8c3efc37298895fd78e6aa0e799e78ce',
markers: [{
id: 1,
latitude: 30.507,
longitude: 114.404,
title: '华中科技大学'
}, {
id: 2,
latitude: 30.476,
longitude: 114.428,
title: '光谷金融港'
}, {
id: 3,
latitude: 30.504,
longitude: 114.433,
title: '武汉东站'
}]
}
},
onLoad() {
// 尝试获取当前位置
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.latitude = res.latitude;
this.longitude = res.longitude;
export default {
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;
}
});
},
onReady() {
// 页面初次渲染完成时,隐藏加载提示
}
//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>
<style>
.map-container {
width: 100%;
height: 100vh;
position: relative;
}
/* 加载提示 */
<style>
.loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #121212;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
@ -75,10 +153,23 @@
}
.loading-content {
color: rgba(255, 255, 255, 0.9);
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>

View File

@ -32,7 +32,7 @@
<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>

BIN
static/images/210/bj_1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/images/210/ls.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/images/210/time.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 510 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -1,5 +1,5 @@
import config from '../config/index.js';
const env = 'development'; //production development //开发of线上 改这里就行
const env = 'production'; //production development //开发of线上 改这里就行
const BASE = config[env];
const request = (options) => {
console.log("options"+JSON.stringify(options),BASE.BASE_URL)