liubiao/APP
1
0
Fork 0
forked from dyf/APP
Code Pull Requests Activity

210设备管控页弹框功能

Browse Source
This commit is contained in:
fengerli
2025-08-06 18:33:33 +08:00
parent 566fb77648
commit 77d1fdbe64
7 changed files with 250 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
pages/210/deviceControl/index.vue
View File

@ -59,8 +59,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>
@ -97,7 +96,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 +104,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 +113,11 @@
</view>
</view>
<view class="mode-v1">
<view class="mode-v2" @click="lasermode">
<view class="mode-v2" @click="alarmTime">
<image src="/static/images/jg.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 +186,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 +209,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 +223,74 @@
</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('删除确认');
}
}
}
import MqttClient from '@/utils/mqtt.js';
import {
deviceDetail,
@ -296,6 +312,11 @@
export default {
data() {
return {
currentPopup: {
show: false,
config: {},
callback: null
},
pageLoading: true,
mainMode: 'string',
secondaryMode: 'string',
@ -303,11 +324,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 +354,7 @@
radioList: ['M', 'S'],
radioSelected: 0, // -1表示未选中任何项
deviceType: '',
popupType:'popupType' //弹框类型
popupType: '', //弹框类型
}
},
methods: {
@ -338,7 +362,26 @@
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;
@ -369,78 +412,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 +479,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,6 +500,21 @@
}
})
},
// 报警时长
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);
},
// 分享
shareUp() {
uni.navigateTo({
@ -610,9 +594,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 +603,6 @@
}
})
},
onPopupConfirm() {
this.showPopupFlag = false
console.log('用户点击了确定')
},
// 发送文本消息
sendTextMessage() {
if (!this.messageToSend) {
@ -645,9 +623,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 +1118,7 @@
/* 弹窗主体 */
.agreement-popup {
width: 100%;
height: 50%;
height: 40%;
background-color: rgb(42, 42, 42);
border-radius: 60rpx 60rpx 0rpx 0rpx;
padding: 40rpx;