<template>
|
<view>
|
<view class="container" :style="{ height:webHeight+'px'}">
|
<tn-nav-bar fixed :isBack="false" style=" position: absolute;z-index: 999999999;">
|
<text class="page-title">首页</text>
|
</tn-nav-bar>
|
<view style="width: 100%;">
|
<image src="../../static/my/setting.png"
|
:style="{position: 'absolute',right:'10px',top:topheight+'px', width:'20px',height:'20px'}"
|
@click="settinginfo">
|
</image>
|
<image v-if="isSilence==true" src="../../static/my/Bell_ringing.png"
|
:style="{position: 'absolute',right:'50px',top:topheight+'px', width:'20px',height:'20px'}"
|
@click="closelock">
|
</image>
|
<image v-else src="../../static/my/pauseAlarm.png"
|
:style="{position: 'absolute',right:'50px',top:topheight+'px', width:'20px',height:'20px'}"
|
@click="openlock">
|
</image>
|
|
</view>
|
|
<view class="content">
|
<view class="device-info" :style="{top:topheight+30+'px'}">
|
|
<view style="display: flex;margin-bottom: 15px;">设备编号:
|
<uni-data-select placeholder="选择设备" v-model="deviceInfo.id" :localdata="list"
|
@change="change"></uni-data-select>
|
</view>
|
实时距离: <text style="color: #ff0000;">{{ bledistance }}m</text>
|
<view style="color: #8c8c8c;margin-top: 15px;">{{ deviceInfo.time }}</view>
|
</view>
|
<view class="circle" :style="{'background-color':color}">
|
<!-- <u-circle-progress :percent="deviceInfo.distance / 1000 * 100" active-color="#FF6B6B" :stroke-width="10"> -->
|
<text style="font-size: 40px;color: white;">{{ juli }}cm</text>
|
<!-- <view class="circle-text">
|
|
</view> -->
|
|
<!-- </u-circle-progress> -->
|
</view>
|
</view>
|
</view>
|
<u-modal buttonReverse confirmText="保存" cancelText="取消" :show="showsetting" @cancel="cancelfaka"
|
:title="titleinfo" @confirm="confirmfaka" ref="uModal" :showCancelButton="true" :closeOnClickOverlay="true">
|
<u-icon name="close" style="position: absolute;right: 10px;top:10px" @click="closemodal"></u-icon>
|
<u--form labelWidth="auto" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
|
|
<u-form-item required label="主机编号:" prop="fatherCode" borderBottom ref="item1">
|
<u--input v-model="model1.fatherCode" border="none" placeholder="请输入主机编号"></u--input>
|
</u-form-item>
|
|
<u-form-item required label="子级编号:" prop="chiledCode" borderBottom ref="item1">
|
<u--input v-model="model1.chiledCode" border="none" placeholder="请输入子级编号"></u--input>
|
</u-form-item>
|
|
<u-form-item required label="报警距离:" prop="juli" borderBottom ref="item1">
|
<u--input v-model="model1.juli" border="none" placeholder="请输入报警距离"></u--input>（厘米）
|
</u-form-item>
|
</u--form>
|
</u-modal>
|
<successCom ref="refSuccess"></successCom>
|
</view>
|
</template>
|
|
<script>
|
import {
|
formatDate,
|
get_time_cha_s
|
} from '@/js/tools.js'
|
import store from '@/store/index.js'
|
import successCom from '@/components/success.vue'
|
export default {
|
components: {
|
successCom
|
},
|
data() {
|
return {
|
time: '',
|
list: [{
|
value: '4578',
|
text: "4578"
|
|
},
|
{
|
text: '4579',
|
value: '4579'
|
}
|
],
|
color: '#F3B381FF',
|
model1: {
|
fatherCode: '',
|
chiledCode: '',
|
juli: '',
|
},
|
rules: {
|
'fatherCode': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写主机编号',
|
trigger: ['blur', 'change']
|
},
|
'chiledCode': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写子级编号',
|
trigger: ['blur', 'change']
|
},
|
'juli': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写报警距离',
|
trigger: ['blur', 'change']
|
},
|
|
},
|
showsetting: false,
|
titleinfo: '分离报警设置',
|
deviceInfo: {
|
id: '4578',
|
distance: 578,
|
time: '2025-2-17 17:30:15'
|
},
|
}
|
},
|
props: {
|
webHeight: {
|
type: Number,
|
default: 100
|
},
|
topheight: {
|
type: Number,
|
default: 60
|
},
|
},
|
mounted() {
|
// if (this.bledistance==0) {
|
|
// }
|
this.gettime()
|
this.getalarm()
|
},
|
methods: {
|
getalarm() {
|
// console.log(this.bledistance);
|
// console.log(this.juli);
|
// console.log(parseInt(this.bledistance) > parseInt(this.juli) );
|
if (parseInt(this.bledistance*100) > parseInt(this.juli)) {
|
this.color = '#ff0000'
|
if (this.isSilence == true) {
|
console.log(this.time);
|
var a = 0
|
if (this.time != '') {
|
a = get_time_cha_s(this.time); //上次下发蜂鸣时间和现在时间差
|
} else {
|
a = 6
|
}
|
|
console.log(a);
|
if (a >= 5) {
|
|
let _this = this;
|
let src = '../../static/alarm.mp3';
|
//实例化声音
|
const Audio = uni.createInnerAudioContext();
|
Audio.autoplay = true;
|
Audio.src = src; //音频地址
|
Audio.onPlay(() => {
|
console.log('开始播放');
|
}); //执行播放
|
Audio.onError(res => {
|
console.log(res);
|
});
|
Audio.onEnded(function() {
|
Audio.destroy();
|
});
|
uni.vibrateLong({
|
success: function() {
|
console.log('success');
|
}
|
});
|
this.time = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
}
|
}
|
|
} else {
|
this.color = '#00ff00'
|
|
}
|
console.log(this.color);
|
setTimeout(() => {
|
this.getalarm()
|
}, 500);
|
},
|
gettime() {
|
this.deviceInfo.time = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
setTimeout(() => {
|
this.gettime()
|
}, 1000);
|
},
|
change() {
|
|
},
|
closemodal() {
|
this.showsetting = false
|
},
|
closelock() {
|
uni.vibrateLong({
|
success: function() {
|
console.log('success');
|
}
|
});
|
store.commit('$tStore', {
|
name: 'isSilence',
|
value: false
|
})
|
},
|
openlock() {
|
store.commit('$tStore', {
|
name: 'isSilence',
|
value: true
|
})
|
},
|
settinginfo() {
|
this.model1.fatherCode = this.fatherCode
|
this.model1.chiledCode = this.chiledCode
|
this.model1.juli = this.juli
|
this.showsetting = true
|
},
|
cancelfaka() {
|
this.showsetting = false
|
},
|
confirmfaka() {
|
this.$refs.uForm.validate().then(res => {
|
this.$refs.refSuccess.showBox({
|
type: 'success',
|
txt: "保存成功！"
|
});
|
uni.$u.toast('')
|
store.commit('$tStore', {
|
name: 'fatherCode',
|
value: this.model1.fatherCode
|
})
|
store.commit('$tStore', {
|
name: 'chiledCode',
|
value: this.model1.chiledCode
|
})
|
store.commit('$tStore', {
|
name: 'juli',
|
value: this.model1.juli
|
})
|
this.showsetting = false
|
this.writeBLECharacteristicValue()
|
|
}).catch(errors => {
|
uni.$u.toast('校验失败', errors)
|
})
|
},
|
|
writeBLECharacteristicValue() { //写入值
|
let _this = this;
|
//蓝牙设备写入数据时，需要将数据先转换为 ArrayBuffer
|
let msg = '$blr,'+this.model1.fatherCode+','+this.model1.chiledCode+','+this.model1.juli+'\r\n'
|
console.log(msg);
|
// let msg = '$blr,1234,4578,100/r/n'
|
var buffer = new ArrayBuffer(msg.length)
|
const dataView = new DataView(buffer)
|
// dataView.setUint8(0, 0)
|
|
for (var i = 0; i < msg.length; i++) { //只支持英文 数字
|
dataView.setUint8(i, msg.charAt(i).charCodeAt())
|
console.log(`Byte ${i}:`, dataView.getUint8(i));
|
}
|
console.log(buffer.toString());
|
uni.writeBLECharacteristicValue({
|
// writeType:write,
|
deviceId: _this.bledeviceId,
|
serviceId: _this.bleserviceId,
|
characteristicId: _this.blewriteId,
|
value: buffer, //自定义内容buffer
|
success(res) {
|
console.log('写入成功', res)
|
},
|
fail(err) {
|
console.log('写入失败', err)
|
}
|
})
|
},
|
|
}
|
}
|
</script>
|
|
<style>
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
/* background-color: #7CDDD5FF; */
|
}
|
|
.header {
|
padding: 20px;
|
background-color: #87CEEB;
|
}
|
|
.title {
|
font-size: 20px;
|
color: white;
|
}
|
|
.content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 20px;
|
}
|
|
.device-info {
|
font-size: 18px;
|
position: absolute;
|
|
}
|
|
.circle {
|
width: 250px;
|
height: 250px;
|
background-color: #F3B381FF;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.circle-text {
|
|
width: 50px;
|
height: 50px;
|
background-color: #ff0000;
|
border-radius: 50%;
|
}
|
</style>
|
