|
|
<template> |
|
|
<view class="container"> |
|
|
<uni-forms ref="form" :modelValue="form" :rules="rules" class="padding-wrap" label-position="top"> |
|
|
<view class="user-box"> |
|
|
<view class="user-avatar"> |
|
|
<image class="user-avatar-image" src="@/static/header.png" mode="widthFix"></image> |
|
|
</view> |
|
|
<view class="user-info"> |
|
|
<view class="user-info-name">{{form.employeeId}}</view> |
|
|
<view class="user-info-group">1组</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="tab-switch" @click="switchPositionType"> |
|
|
<view class="tab-btn" :class="positionType == 1 ? 'tab-btn active' : 'tab-btn'"> |
|
|
<view class="tab-btn-item"></view> |
|
|
</view> |
|
|
<view class="tab-label">使用常用报警位置</view> |
|
|
</view> |
|
|
<uni-forms-item v-if="positionType === 0" label="当前位置" label-width="200upx"> |
|
|
<view class="choose-map" @click="goMap" :style="{color:form.buildId? '#000' : '#C4C7CB'}"> |
|
|
{{form.buildId ? form.buildId + '号楼' + form.floorNo + '层 纬度'+ form.latidute + ' 经度' + form.longidute : '请选择地图定位'}} |
|
|
</view> |
|
|
</uni-forms-item> |
|
|
<uni-forms-item v-if="positionType == 1" label="常用报警位置" label-width="200upx"> |
|
|
<view class="choose-map" @click="goSetOther" :style="{color:form.buildId? '#000' : '#C4C7CB'}"> |
|
|
{{form.buildId ? form.buildId + '号楼' + form.floorNo + '层 纬度'+ form.latidute + ' 经度' + form.longidute : '去设置常用报警定位'}} |
|
|
</view> |
|
|
</uni-forms-item> |
|
|
<uni-forms-item label="应急预案选择" label-width="200upx"> |
|
|
<uni-data-select v-model="form.planTypeId" :localdata="planTypeList" |
|
|
placeholder="请选择常应急预案报警类型"></uni-data-select> |
|
|
</uni-forms-item> |
|
|
<!-- 巡更照片 --> |
|
|
<view class="photo-list"> |
|
|
<view class="photo-box" v-for="(item,index) in photoList"> |
|
|
<image :src="item.uri" mode="scaleToFill" @click="previewImg(item.uri)" |
|
|
class="img"></image> |
|
|
<text class="del-icon" @click="delImg(index)">X</text> |
|
|
</view> |
|
|
<view class="choose-img-btn" @click="chooseImg"> |
|
|
<view class="txt">记录</view> |
|
|
</view> |
|
|
</view> |
|
|
<view style="text-align: right;"> |
|
|
<view class="submit-btn" @click="submit">上报</view> |
|
|
</view> |
|
|
</uni-forms> |
|
|
</view> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
export default { |
|
|
data() { |
|
|
return { |
|
|
form: { |
|
|
type: '2', |
|
|
deviceId: '', |
|
|
employeeId: '', |
|
|
buildId: '', |
|
|
floorNo: '', |
|
|
longidute: '', |
|
|
latidute: '', |
|
|
planTypeId: '', |
|
|
planTypeName: '' |
|
|
}, |
|
|
photoList: [], //巡更照片 |
|
|
positionType: 1, //是否使用常用报警位置 |
|
|
planTypeList: [], //常用预案 |
|
|
position: null, //地图定位 |
|
|
rules: {}, |
|
|
userInfo: {}, |
|
|
locationInfo: {}, |
|
|
deviceSn:'', |
|
|
filesList:[] |
|
|
} |
|
|
}, |
|
|
onUnload() { |
|
|
console.log('释放监听') |
|
|
uni.$off('mapData'); |
|
|
}, |
|
|
onShow() { |
|
|
uni.$on('mapData',(data) => { |
|
|
let obj = JSON.parse(data.data[0].detail); |
|
|
console.log('监听到事件来自返回的参数：', obj); |
|
|
this.position = obj; |
|
|
this.form.buildId = obj.buildId; |
|
|
if(obj.floorNo) { |
|
|
this.form.floorNo = obj.floorNo > 3 ? obj.floorNo - 3 : obj.floorNo > 0 && obj.floorNo <= 3 ? obj.floorNo - 4 : obj.floorNo; |
|
|
} |
|
|
this.form.latidute = obj.y; |
|
|
this.form.longidute = obj.x; |
|
|
}) |
|
|
let userInfo = uni.getStorageSync('mobileInfo'); |
|
|
let locationInfo = uni.getStorageSync('locationInfo'); |
|
|
if (userInfo) { |
|
|
this.userInfo = JSON.parse(userInfo); |
|
|
this.form.employeeId = this.userInfo.employeeId; |
|
|
this.form.deviceId = this.userInfo.employeeId; |
|
|
} |
|
|
if (locationInfo && this.positionType == 1) { |
|
|
console.log('====', this.positionType) |
|
|
this.locationInfo = JSON.parse(locationInfo); |
|
|
this.form.planTypeId = this.locationInfo.planTypeId; |
|
|
this.form.planTypeName = this.locationInfo.planTypeName; |
|
|
this.form.buildId = this.locationInfo.buildId; |
|
|
this.form.floorNo = this.locationInfo.floorNo; |
|
|
this.form.latidute = this.locationInfo.latidute; |
|
|
this.form.longidute = this.locationInfo.longidute; |
|
|
} |
|
|
}, |
|
|
onLoad() { |
|
|
this.queryPlanTypeList(); |
|
|
// this.getDeviceSn() |
|
|
}, |
|
|
methods: { |
|
|
getDeviceSn(){ |
|
|
console.log('进入此方法') |
|
|
let token = uni.getStorageSync('bizToken'); |
|
|
if(token == undefined || !token) { |
|
|
uni.request({ |
|
|
url: 'http://171.16.8.58:8080/prod-api/api/Login', |
|
|
method: 'POST', |
|
|
data: { appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }, |
|
|
success: (res) => { |
|
|
if(res.data.code == 0) { |
|
|
uni.setStorageSync('bizToken', res.data.data.token); |
|
|
this.getDeviceSn(); |
|
|
} |
|
|
}, |
|
|
fail: (err) => { |
|
|
uni.showToast({ |
|
|
title: '登录错误 ==============>',err, |
|
|
icon: 'none' |
|
|
}) |
|
|
} |
|
|
}) |
|
|
} else { |
|
|
uni.request({ |
|
|
url: 'http://171.16.8.58:8080/prod-api/api/bizDevice/list?pid=119¶ms[type]=3', |
|
|
method: 'GET', |
|
|
header: { |
|
|
Authorization: token |
|
|
}, |
|
|
success: (res) => { |
|
|
if(res.data.code == 401){ |
|
|
uni.removeStorageSync('bizToken'); |
|
|
this.getDeviceSn(deviceId); |
|
|
}else{ |
|
|
this.deviceSn = JSON.parse(res.data.rows[0].tags).mac; |
|
|
let _arr = []; |
|
|
this.filesList.forEach(item => { |
|
|
_arr.push({url: item}); |
|
|
}) |
|
|
let data = { |
|
|
"alarmTypeIdentity": "700006", |
|
|
"description": "巡更照片上报", |
|
|
"deviceSn": this.deviceSn, |
|
|
"platformCode": "DIANXIN", |
|
|
"pictureList": _arr |
|
|
} |
|
|
console.log('iot', data) |
|
|
uni.request({ |
|
|
url: getApp().globalData.apiUrl + '/appData/escalation', |
|
|
method: 'POST', |
|
|
data: data, |
|
|
success: (res) => { |
|
|
let _data = JSON.parse(res.data.data); |
|
|
if (_data.resultCode == 0) { |
|
|
uni.showToast({ |
|
|
title: '成功' |
|
|
}); |
|
|
uni.redirectTo({ |
|
|
url: '/pages/patrolRecord/list' |
|
|
}) |
|
|
} else { |
|
|
uni.showToast({ |
|
|
title: _data.msg, |
|
|
icon: 'none' |
|
|
}); |
|
|
} |
|
|
}, |
|
|
complete: (res) => { |
|
|
console.log(res) |
|
|
} |
|
|
}) |
|
|
} |
|
|
}, |
|
|
fail: (err) => { |
|
|
uni.showToast({ |
|
|
title: '错误 ============>'+ err, |
|
|
icon: 'none' |
|
|
}) |
|
|
} |
|
|
}) |
|
|
} |
|
|
// if(uni.getStorageSync('bizToken')){ |
|
|
// uni.request({ |
|
|
// url:'http://171.16.8.58:8080/prod-api/api/bizDevice/list?pid=" + pid + "¶ms[type]=2', |
|
|
// method:"GET", |
|
|
// header:{ Authorization: uni.getStorageSync('bizToken') }, |
|
|
// success: (res) => { |
|
|
// if (res.code == 200) { |
|
|
// this.deviceSn = |
|
|
// } |
|
|
// } |
|
|
// }) |
|
|
// } |
|
|
}, |
|
|
|
|
|
//预案类型 |
|
|
queryPlanTypeList() { |
|
|
let arr = [] |
|
|
uni.request({ |
|
|
// url: "http://172.19.2.177:8081/GetAllPlanInfo", |
|
|
url: getApp().globalData.mobileUrl + "/GetAllPlanInfo", |
|
|
success: (res) => { |
|
|
if (res.data.code == 200) { |
|
|
res.data.data.forEach(item => { |
|
|
arr.push({ |
|
|
value:item.planId, |
|
|
text:item.planName |
|
|
}) |
|
|
}) |
|
|
this.planTypeList = arr; |
|
|
} |
|
|
} |
|
|
}) |
|
|
// this.planTypeList = [ |
|
|
// {value:1,text:'ceshi001'}, |
|
|
// {value:2,text:'ceshi002'}, |
|
|
// ] |
|
|
}, |
|
|
//跳到重用设置页面 |
|
|
goSetOther() { |
|
|
uni.navigateTo({ |
|
|
url: '/pages/setting/other' |
|
|
}) |
|
|
}, |
|
|
//跳到地图页面获取定位 |
|
|
goMap() { |
|
|
console.log('页面跳转') |
|
|
uni.navigateTo({ |
|
|
url: '/pages/map/map' |
|
|
}) |
|
|
}, |
|
|
//切换定位类型 |
|
|
switchPositionType() { |
|
|
this.positionType = this.positionType == 1 ? 0 : 1 |
|
|
this.form.buildId = this.positionType == 1 ? this.locationInfo.buildId : this.position ? this.position.buildId : |
|
|
''; |
|
|
let floorNo = ''; |
|
|
if(this.positionType == 1) { |
|
|
floorNo = this.locationInfo.floorNo ? this.locationInfo.floorNo : ''; |
|
|
}else{ |
|
|
if(this.position && this.position.floorNo) { |
|
|
floorNo = this.position.floorNo > 3 ? this.position.floorNo - 3 : this.position.floorNo > 0 && this.position.floorNo <= 3 ? this.position.floorNo - 4 : this.position.floorNo; |
|
|
} |
|
|
else{ |
|
|
floorNo = ''; |
|
|
} |
|
|
} |
|
|
this.form.floorNo = floorNo; |
|
|
this.form.latidute = this.positionType == 1 ? this.locationInfo.latidute : this.position ? this.position.y : ''; |
|
|
this.form.longidute = this.positionType == 1 ? this.locationInfo.longidute : this.position ? this.position.x : |
|
|
''; |
|
|
}, |
|
|
submit() { |
|
|
this.$refs.form.validate().then(res => { |
|
|
if (this.photoList.length == 0) { |
|
|
uni.showToast({ |
|
|
title: '请先上传巡更照片', |
|
|
icon: 'none' |
|
|
}) |
|
|
return; |
|
|
} |
|
|
uni.showLoading({ |
|
|
title: '请求中' |
|
|
}); |
|
|
console.log(this.photoList) |
|
|
uni.uploadFile({ |
|
|
url: getApp().globalData.apiUrl + '/appData/putFile', |
|
|
files: this.photoList, |
|
|
formData: this.form, |
|
|
success: (res) => { |
|
|
let _data = JSON.parse(res.data); |
|
|
if (_data.code == 200) { |
|
|
this.reportIot(_data.data); |
|
|
//测试使用 |
|
|
// uni.redirectTo({ |
|
|
// url: '/pages/patrolRecord/list' |
|
|
// }) |
|
|
} else { |
|
|
uni.showToast({ |
|
|
title: _data.msg, |
|
|
icon: 'none' |
|
|
}); |
|
|
} |
|
|
}, |
|
|
fail: (err) => { |
|
|
console.log(err) |
|
|
}, |
|
|
complete: () => { |
|
|
setTimeout(() => { |
|
|
uni.hideLoading(); |
|
|
}, 2000) |
|
|
} |
|
|
}) |
|
|
}).catch(err => { |
|
|
console.log('表单错误信息：', err); |
|
|
uni.showToast({ |
|
|
title: err, |
|
|
icon: 'error' |
|
|
}); |
|
|
}) |
|
|
}, |
|
|
//删除 |
|
|
delImg(index) { |
|
|
this.photoList.splice(index, 1); |
|
|
}, |
|
|
//图片选择 |
|
|
chooseImg() { |
|
|
uni.chooseImage({ |
|
|
count: 6, //默认9 |
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|
|
sourceType: ['album'], //从相册选择 |
|
|
success: (res) => { |
|
|
let fileList = []; |
|
|
res.tempFiles.forEach((item, index) => { |
|
|
fileList.push({ |
|
|
name: 'file' + (new Date().getTime()) + '_' + index, |
|
|
uri: res.tempFilePaths[index], |
|
|
file: item |
|
|
}); |
|
|
}) |
|
|
this.photoList = this.photoList.concat(fileList); |
|
|
} |
|
|
}); |
|
|
}, |
|
|
//图片预览 |
|
|
previewImg(url) { |
|
|
uni.previewImage({ |
|
|
urls: [url], |
|
|
}); |
|
|
}, |
|
|
//消息上报 |
|
|
reportIot(files) { |
|
|
// uni.showToast({ |
|
|
// title: 'deviceSN ===========>' + this.deviceSn, |
|
|
// icon: 'none' |
|
|
// }) |
|
|
this.filesList = files |
|
|
this.getDeviceSn() |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style lang="scss" scoped> |
|
|
page, |
|
|
.container { |
|
|
min-height: 100vh; |
|
|
background-color: #FFFFFF; |
|
|
|
|
|
/deep/.uni-forms-item__label { |
|
|
color: #031945; |
|
|
font-size: 28upx; |
|
|
font-family: PingFang SC-Bold, PingFang SC; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
/deep/.uni-select { |
|
|
height: 99upx; |
|
|
background: #F6F8FA; |
|
|
border-radius: 30upx; |
|
|
padding: 0 15upx 0 30upx; |
|
|
border: 0; |
|
|
} |
|
|
|
|
|
/deep/.uni-select__input-box { |
|
|
height: 99upx; |
|
|
} |
|
|
|
|
|
/deep/.uni-select__input-placeholder { |
|
|
color: #C4C7CB; |
|
|
font-size: 28upx; |
|
|
font-family: PingFang SC-Regular, PingFang SC; |
|
|
font-weight: 400; |
|
|
} |
|
|
|
|
|
/deep/.uni-icons { |
|
|
color: #C4C7CB; |
|
|
font-size: 28upx; |
|
|
} |
|
|
} |
|
|
|
|
|
.padding-wrap { |
|
|
padding: 30upx; |
|
|
} |
|
|
|
|
|
.voice-rocord-box { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 40upx; |
|
|
|
|
|
.voice-box { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: flex-end; |
|
|
min-width: 300px; |
|
|
height: 90upx; |
|
|
background: #338AF8 url(@/static/voive_bg.png) 40upx 28upx no-repeat; |
|
|
background-size: 226upx 34upx; |
|
|
border-radius: 100upx; |
|
|
|
|
|
.voice-mins { |
|
|
color: #FFFFFF; |
|
|
font-size: 28upx; |
|
|
font-family: Arial-Regular, Arial; |
|
|
font-weight: 400; |
|
|
margin-right: 40upx; |
|
|
} |
|
|
} |
|
|
|
|
|
.voice-del { |
|
|
color: #B6B8BB; |
|
|
font-size: 28upx; |
|
|
font-family: PingFang SC-Regular, PingFang SC; |
|
|
font-weight: 400; |
|
|
margin-left: 20upx; |
|
|
} |
|
|
} |
|
|
|
|
|
.choose-map { |
|
|
line-height: 44upx; |
|
|
color: #C4C7CB; |
|
|
font-size: 28upx; |
|
|
font-family: PingFang SC-Regular, PingFang SC; |
|
|
font-weight: 400; |
|
|
text-align: left; |
|
|
background: #F6F8FA; |
|
|
border-radius: 30upx; |
|
|
word-break: break-all; |
|
|
padding: 22upx 15upx 22upx 33upx; |
|
|
} |
|
|
|
|
|
.submit-btn { |
|
|
display: inline-block; |
|
|
width: 140upx; |
|
|
color: #338AF8; |
|
|
font-size: 28upx; |
|
|
font-family: PingFang SC-Regular, PingFang SC; |
|
|
font-weight: 400; |
|
|
line-height: 66upx; |
|
|
text-align: center; |
|
|
background: #E5F0FF; |
|
|
border-radius: 20upx; |
|
|
border: 1px solid #338AF8; |
|
|
} |
|
|
|
|
|
.tab-switch { |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
align-items: center; |
|
|
|
|
|
.tab-btn { |
|
|
width: 80upx; |
|
|
height: 40upx; |
|
|
border-radius: 20upx; |
|
|
background-color: #eee; |
|
|
margin-right: 10upx; |
|
|
|
|
|
.tab-btn-item { |
|
|
float: left; |
|
|
display: inline-block; |
|
|
width: 36upx; |
|
|
height: 36upx; |
|
|
border-radius: 18upx; |
|
|
background-color: #FFFFFF; |
|
|
margin: 2upx; |
|
|
} |
|
|
|
|
|
&.active { |
|
|
background-color: #338AF8; |
|
|
|
|
|
.tab-btn-item { |
|
|
float: right; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.user-box { |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
margin-bottom: 40upx; |
|
|
|
|
|
.user-avatar { |
|
|
display: block; |
|
|
margin-right: 26upx; |
|
|
|
|
|
.user-avatar-image { |
|
|
width: 90upx; |
|
|
height: 90upx; |
|
|
} |
|
|
} |
|
|
|
|
|
.user-info { |
|
|
flex: 1; |
|
|
color: #031945; |
|
|
font-size: 28upx; |
|
|
line-height: 40upx; |
|
|
font-family: PingFang SC-Bold, PingFang SC; |
|
|
font-weight: bold; |
|
|
|
|
|
.user-info-group { |
|
|
color: #90959D; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.photo-list { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
|
|
|
.photo-box { |
|
|
position: relative; |
|
|
width: 120upx; |
|
|
height: 120upx; |
|
|
border-radius: 20upx; |
|
|
background-color: #eee; |
|
|
margin: 10upx; |
|
|
.img { |
|
|
width: 120upx; |
|
|
height: 120upx; |
|
|
border-radius: 20upx; |
|
|
} |
|
|
.del-icon{ |
|
|
position: absolute; |
|
|
right: -11upx; |
|
|
top: -11upx; |
|
|
width: 22upx; |
|
|
height: 22upx; |
|
|
background-color: #B6B8BB; |
|
|
color: #fff; |
|
|
font-size: 16upx; |
|
|
line-height: 22upx; |
|
|
text-align: center; |
|
|
border-radius: 11upx; |
|
|
} |
|
|
} |
|
|
|
|
|
.choose-img-btn { |
|
|
width: 120upx; |
|
|
height: 120upx; |
|
|
border-radius: 20upx; |
|
|
margin: 10upx; |
|
|
background: #F6F8FA url(@/static/upload-icon.png) center 23upx no-repeat; |
|
|
background-size: 44upx 44upx; |
|
|
|
|
|
.txt { |
|
|
color: #EE9070; |
|
|
line-height: 33upx; |
|
|
font-size: 24upx; |
|
|
font-family: PingFang SC-Regular, PingFang SC; |
|
|
font-weight: 400; |
|
|
margin-top: 76upx; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
