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

210自动报警，手动报警

Browse Source
This commit is contained in:
fengerli
2025-11-17 10:20:54 +08:00
parent c8ea753b8e
commit 1ba22c7aae
1 changed files with 156 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,15 +39,24 @@
<!-- 设备基本信息 -->
<view class="info-card">
<view class="info-row">
<text class="info-label">设备状态</text>
<text class="info-label">设备名称</text>
<text class="info-value status-running">运行中</text>
</view>
<view class="info-row">
<text class="info-label">蓝牙名称</text>
<text class="info-value status-running">FB-Site_02</text>
</view>
<view class="info-row">
<text class="info-label">蓝牙状态</text>
<text class="info-value status-running">未连接</text>
</view>
<view class="hr"></view>
<view class="info-row">
<text class="info-label">联机状态</text>
<text class="info-value status-greend">联机</text>
</view>
<view class="info-row">
<text class="info-label">定位信息</text>
<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">
@ -69,63 +78,6 @@
</view>
</view>
</view>
<!-- 灯光模式选择 -->
<!-- <view class="mode-section">
<view class="mode-buttons">
<view class="mode-v1">
<view class="mode-v2" @click="selectMode">
<image src="/static/images/210/lj.png" class="setIMG"></image>
<view>
<view class="battery-v2">联机设备</view>
</view>
</view>
</view>
<view class="mode-v1">
<view class="mode-v2" @click="uploadStartup">
<image src="/static/images/common/path7.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">开机画面</view>
<view class="mode-v3">上传</view>
</view>
</view>
</view>
<view class="mode-v1">
<view class="mode-v2" @click="automaticAlarm">
<image src="/static/images/210/zd.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">自动报警</view>
</view>
</view>
</view>
<view class="mode-v1">
<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>
</view>
</view>
</view>
<view class="mode-v1">
<view class="mode-v2">
<image src="/static/images/210/bj.png" class="setIMG" mode="aspectFit"></image>
<view>
<view class="battery-v2">报警声音</view>
<view class="mode-v3">上传</view>
</view>
</view>
</view>
<view class="mode-v1">
<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">{{alarmTimeDisplay }}</view>
</view>
</view>
</view>
</view>
</view> -->
<view class="mode-section">
<view class="mode-buttons">
<view v-for="(item, index) in modeItems" :key="index" class="mode-v1"
@ -238,122 +190,17 @@
<button class="agree" @click="handleupload">确定</button>
</view>
</view>
<!-- ======各个弹框类型======= -->
<CustomPopup :show="currentPopup.show" ="currentPopup.config" @confirm="handleConfirm"
@cancel="handleCancel" />
</view>
<!-- ======各个弹框类型======= -->
<CustomPopupTXT :show="currentPopup.show" v-bind="currentPopup.config" @confirm="handleConfirm"
@cancel="handleCancel" class="custom-popup-txt" />
</view>
</view>
</template>
<script>
// 弹框配置中心
const POPUP_CONFIGS = {
// 人员信息发送
person: {
config: {
icon: '/static/images/common/sendSucc.png',
message: '信息发送成功',
showCancel: false
},
confirm() {
return true; // 直接关闭
}
import CustomPopupTXT from '@/components/CustomPopup/CustomPopup.vue'
},
// 上传开机log
logo: {
config: {
icon: '/static/images/common/upload.png',
message: '上传成功',
showCancel: false
},
confirm() {
return true; // 直接关闭
}
},
// 电量低于20%.提示框
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
},
confirm() {
return true; // 直接关闭
}
},
// 解除报警关闭的那个提示
cancel: {
config: {
titleColor: 'rgba(224, 52, 52, 1)',
icon: '/static/images/6170/svg.png',
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
confirmBtnBg: 'rgba(224, 52, 52, 1)',
showCancel: true //取消按钮
},
confirm() {
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
},
confirm() {
return 'alarmCountdown'; //点击确认,再次弹框,解除报警,再次报警的类型
}
},
// 手动报警再次弹框 再次报警，解除报警指令
alarmCountdown: {
config: {
title: '报警倒计时',
icon: '/static/images/6170/svg.png',
message: '59秒',
popupBorder: '1rpx solid rgba(224, 52, 52, 1)',
confirmBtnBg: 'rgba(224, 52, 52, 1)',
cancelBtnColor:"rgba(224, 52, 52, 1)",
confirmBtnColor:"rgba(255, 255, 255, 0.87)",
confirmText: '解除报警',
cancelText:"再次报警",
showCancel: true //取消按钮
},
confirm() {
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,
},
confirm() {
console.log('自动报警解除报警的弹框');
}
}
}
import MqttClient from '@/utils/mqtt.js';
import {
deviceDetail,
@ -373,6 +220,9 @@
clientid
} from '@/utils/request'
export default {
components: {
CustomPopupTXT
},
data() {
return {
selectedIndex: -1, // Track currently selected index
@ -382,8 +232,8 @@
subTitle: ""
},
{
image: "/static/images/common/path7.png",
title: "开机画面",
image: "/static/images/210/bj.png",
title: "报警声音",
subTitle: "上传"
},
{
@ -397,8 +247,8 @@
subTitle: ""
},
{
image: "/static/images/210/bj.png",
title: "报警声音",
image: "/static/images/common/path7.png",
title: "开机画面",
subTitle: "上传"
},
{
@ -450,6 +300,118 @@
radioSelected: 0, // -1表示未选中任何项
deviceType: '',
popupType: '', //弹框类型
// 弹框配置中心
POPUP_CONFIGS: {
// 人员信息发送
person: {
config: {
icon: '/static/images/common/sendSucc.png',
message: '信息发送成功',
showCancel: false
},
confirm() {
return true; // 直接关闭
}
},
// 上传开机log
logo: {
config: {
icon: '/static/images/common/upload.png',
message: '上传成功',
showCancel: false
},
confirm() {
return true; // 直接关闭
}
},
// 电量低于20%.提示框
bettery: {
config: {
show: true, // 必须显式设置为true
showIcon: true, // 显示图标
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
},
confirm() {
return true; // 直接关闭
}
},
// 解除报警关闭的那个提示
cancel: {
config: {
show: true, // 必须显式设置为true
showIcon: true, // 显示图标
titleColor: 'rgba(224, 52, 52, 1)',
icon: '/static/images/6170/svg.png',
popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
confirmBtnBg: 'rgba(224, 52, 52, 1)',
showCancel: true //取消按钮
},
confirm() {
console.log('解除报警确认');
}
},
// 手动报警弹框
del: {
config: {
show: true, // 必须显式设置为true
showIcon: true, // 显示图标
message: '确定开启报警?',
icon: '/static/images/210/bj_1.png',
popupBorder: '1rpx solid rgba(255, 200, 78, 1)',
confirmBtnBg: 'rgba(255, 200, 78, 1)',
showCancel: true
},
confirm() {
return 'alarmCountdown'; //点击确认,再次弹框,解除报警,再次报警的类型
}
},
// 手动报警再次弹框 再次报警，解除报警指令
alarmCountdown: {
config: {
show: true, // 必须显式设置为true
showIcon: true, // 显示图标
title: '报警倒计时',
icon: '/static/images/6170/svg.png',
message: '59秒',
popupBorder: '1rpx solid rgba(224, 52, 52, 1)',
confirmBtnBg: 'rgba(224, 52, 52, 1)',
cancelBtnColor: "rgba(224, 52, 52, 1)",
confirmBtnColor: "rgba(255, 255, 255, 0.87)",
confirmText: '解除报警',
cancelText: "再次报警",
showCancel: true //取消按钮
},
confirm() {
console.log('解除报警确认');
}
},
// 自动报警
autoAlarm: {
config: {
show: true, // 必须显式设置为true
showIcon: true, // 显示图标
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,
},
confirm() {
console.log('自动报警解除报警的弹框');
}
}
}
}
},
methods: {
@ -462,9 +424,10 @@
showPopup(type) {
this.currentPopup = {
show: true,
config: POPUP_CONFIGS[type].config,
callback: POPUP_CONFIGS[type].confirm
config: this.POPUP_CONFIGS[type].config,
callback: this.POPUP_CONFIGS[type].confirm
}
console.log(type, 'typetype');
},
handleConfirm() {
if (this.currentPopup.callback) {
@ -487,8 +450,8 @@
case 0:
this.selectMode();
break;
case 1:
this.uploadStartup();
case 1: // 报警声音
this.soundAlarm();
break;
case 2:
this.automaticAlarm();
@ -496,6 +459,9 @@
case 3:
this.manualAlarm();
break;
case 4:
this.uploadStartup();
break;
case 5:
this.alarmTime();
break;
@ -508,6 +474,10 @@
handleRadioSelect(index) {
this.radioSelected = index;
console.log('选中了单选选项：', this.radioList[index]);
},
// 报警声音
soundAlarm() {
},
// 自动报警
automaticAlarm() {
@ -1048,6 +1018,11 @@
margin-bottom: 20rpx;
}
.hr {
border-bottom: 2rpx solid rgba(255, 255, 255, 0.04);
margin-bottom: 10rpx;
}
.info-label {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.87);