313 lines
8.0 KiB
Vue
313 lines
8.0 KiB
Vue
|
<template>
|
||
|
|
<view class='video-box'>
|
||
|
|
<view class="policeItem">
|
||
|
|
<u-form labelWidth="150rpx" ref="uForm" labelAlign="left">
|
||
|
|
<u-collapse accordion :value="0">
|
||
|
|
<u-collapse-item title="事件类型:" >
|
||
|
|
<u-radio-group v-model="radiovalue" placement="column">
|
||
|
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist"
|
||
|
|
:key="index" size="40" labelSize="24" :label="item.name" :name="item.name"
|
||
|
|
@change="radioChange">
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-collapse-item>
|
||
|
|
</u-collapse>
|
||
|
|
<u-form-item label="事件备注:">
|
||
|
|
<u-input v-model="description" placeholder="请输入备注"></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="拍照:" borderBottom>
|
||
|
|
<view style="color: red;">一次只能上传六张</view>
|
||
|
|
</u-form-item>
|
||
|
|
</u-form>
|
||
|
|
|
||
|
|
<view class="pictureList">
|
||
|
|
<u-upload width="100px" height="100px" :fileList="fileList6" @afterRead="afterRead" @delete="deletePic"
|
||
|
|
@clickPreview="clickPreview(event)" name="6" multiple :maxCount="6"></u-upload>
|
||
|
|
</view>
|
||
|
|
<view class="SignItem">
|
||
|
|
<view class="Cancel">
|
||
|
|
<u-button color="#4e87ff" @click="onClickpolice">一键报警</u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<u-modal @cancel="policemessage = false" zoom @confirm="policeClick" :show="policemessage" :asyncClose="true"
|
||
|
|
:showCancelButton="true" width="500rpx" content='是否确认报警?'></u-modal>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const QQMapWX = require('@/utils/qqmap-wx-jssdk.js')
|
||
|
|
import {
|
||
|
|
iotserveralarmadd
|
||
|
|
} from '@/api/login';
|
||
|
|
import {
|
||
|
|
mapGetters
|
||
|
|
} from 'vuex';
|
||
|
|
import {timestampFormatTime} from '@/utils/index.js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
latitude: '',
|
||
|
|
longitude: '',
|
||
|
|
qqmapsdk: null,
|
||
|
|
policeArr: {
|
||
|
|
reporterAccount: '',
|
||
|
|
reporterName: '',
|
||
|
|
reporterPhone: '',
|
||
|
|
address: '',
|
||
|
|
latitude: '',
|
||
|
|
longitude: '',
|
||
|
|
province: '',
|
||
|
|
city: '',
|
||
|
|
district: '',
|
||
|
|
street: '',
|
||
|
|
adcode: '',
|
||
|
|
city_code: '',
|
||
|
|
phone_area_code: '',
|
||
|
|
},
|
||
|
|
radiovalue: '',
|
||
|
|
radiolist: [{
|
||
|
|
name: '打架斗殴',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '非法侵害',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '非法侵入',
|
||
|
|
}, {
|
||
|
|
name: '财物盗抢',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
fileList6: [],
|
||
|
|
imageUrlsDate: [],
|
||
|
|
baseURl: 'https://www.lonsungsh.com:8083',
|
||
|
|
description:'',
|
||
|
|
policemessage:false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 拿取vuex数据
|
||
|
|
...mapGetters({
|
||
|
|
userInfo: 'users/getLoginInfo'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.qqmapsdk = new QQMapWX({
|
||
|
|
key: 'IBCBZ-W5C3W-X32R4-35XWR-SK5E2-BIFDO'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
uni.authorize({
|
||
|
|
scope: "scope.userLocation",
|
||
|
|
success: (res) => {
|
||
|
|
wx.getLocation({
|
||
|
|
isHighAccuracy: true, // 开启地图精准定位
|
||
|
|
altitude: true,
|
||
|
|
type: 'gcj02', // 地图类型写这个
|
||
|
|
success: (res) => {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '定位中...',
|
||
|
|
mask: true,
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
this.latitude = Number(res.latitude.toFixed(6)),
|
||
|
|
this.longitude = Number(res.longitude.toFixed(6))
|
||
|
|
this.qqmapsdk.reverseGeocoder({
|
||
|
|
location: {
|
||
|
|
latitude: res.latitude,
|
||
|
|
longitude: res.longitude
|
||
|
|
},
|
||
|
|
success: (data) => {
|
||
|
|
this.policeArr.address = data.result
|
||
|
|
.formatted_addresses
|
||
|
|
.standard_address,
|
||
|
|
this.policeArr.latitude = data
|
||
|
|
.result.ad_info.location.lat,
|
||
|
|
this.policeArr.longitude = data
|
||
|
|
.result.ad_info.location.lng,
|
||
|
|
this.policeArr.province = data
|
||
|
|
.result.ad_info.province,
|
||
|
|
this.policeArr.city = data.result
|
||
|
|
.ad_info.city,
|
||
|
|
this.policeArr.district = data
|
||
|
|
.result.ad_info.district,
|
||
|
|
this.policeArr.street = data.result
|
||
|
|
.address_component.street,
|
||
|
|
this.policeArr.adcode = data.result
|
||
|
|
.ad_info.adcode,
|
||
|
|
this.policeArr.city_code = data
|
||
|
|
.result.ad_info.city_code,
|
||
|
|
this.policeArr.phone_area_code =
|
||
|
|
data.result.ad_info.phone_area_code
|
||
|
|
}
|
||
|
|
})
|
||
|
|
uni.hideLoading()
|
||
|
|
}, 1000)
|
||
|
|
},
|
||
|
|
fail() {
|
||
|
|
console.log(1111);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
deletePic(event) {
|
||
|
|
const keyDelete = event.index
|
||
|
|
let UrlsDateLIst = this.imageUrlsDate.filter((value, index, arr) => index !== keyDelete);
|
||
|
|
this.imageUrlsDate = UrlsDateLIst;
|
||
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
||
|
|
},
|
||
|
|
clickPreview(event) {
|
||
|
|
const {index} = event.currentTarget.dataset
|
||
|
|
console.log(index);
|
||
|
|
uni.previewImage({
|
||
|
|
urls: this.imageUrlsDate,
|
||
|
|
current: 0
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
async afterRead(event) {
|
||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
|
|
let lists = [].concat(event.file)
|
||
|
|
let fileListLen = this[`fileList${event.name}`].length
|
||
|
|
lists.map((item) => {
|
||
|
|
this[`fileList${event.name}`].push({
|
||
|
|
...item,
|
||
|
|
status: 'uploading',
|
||
|
|
message: '上传中'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
for (let i = 0; i < lists.length; i++) {
|
||
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
||
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
||
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
|
|
status: 'success',
|
||
|
|
message: '',
|
||
|
|
url: result
|
||
|
|
}))
|
||
|
|
fileListLen++
|
||
|
|
}
|
||
|
|
},
|
||
|
|
uploadFilePromise(url) {
|
||
|
|
var that = this;
|
||
|
|
const picUploadData = {
|
||
|
|
creator: that.userInfo.name,
|
||
|
|
business: 'school.revise',
|
||
|
|
type: 'image',
|
||
|
|
deviceid: that.userInfo.id,
|
||
|
|
createtime: timestampFormatTime(),
|
||
|
|
description: '',
|
||
|
|
comment: ''
|
||
|
|
};
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
let a = uni.uploadFile({
|
||
|
|
url: that.baseURl + '/mdev/picture/upload',
|
||
|
|
filePath: url,
|
||
|
|
name: 'file',
|
||
|
|
header: {
|
||
|
|
'Content-Type': 'multipart/form-data;charset=utf-8'
|
||
|
|
},
|
||
|
|
formData: {
|
||
|
|
jsondata: JSON.stringify(picUploadData),
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
const resImage = JSON.parse(res.data)?.data;
|
||
|
|
if (!that.imageUrlsDate.includes(resImage.uri)) {
|
||
|
|
that.imageUrlsDate.push(resImage.uri);
|
||
|
|
}
|
||
|
|
resolve(that.imageUrlsDate)
|
||
|
|
}, 1000)
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onClickpolice(){
|
||
|
|
this.policemessage = true
|
||
|
|
},
|
||
|
|
// 一键报警
|
||
|
|
async policeClick() {
|
||
|
|
const policeList = {
|
||
|
|
address: this.policeArr.address,
|
||
|
|
latitude: this.policeArr.latitude,
|
||
|
|
longitude: this.policeArr.longitude,
|
||
|
|
province: this.policeArr.province,
|
||
|
|
city: this.policeArr.city,
|
||
|
|
district: this.policeArr.district,
|
||
|
|
street: this.policeArr.street,
|
||
|
|
adcode: this.policeArr.adcode,
|
||
|
|
city_code: this.policeArr.city_code,
|
||
|
|
phone_area_code: this.policeArr.phone_area_code,
|
||
|
|
reporterAccount: this.userInfo.id,
|
||
|
|
reporterName: this.userInfo.name,
|
||
|
|
reporterPhone: this.userInfo.phone,
|
||
|
|
alarmType:this.radiovalue,
|
||
|
|
description:this.description,
|
||
|
|
imageUrls:JSON.stringify(this.imageUrlsDate)
|
||
|
|
}
|
||
|
|
const resp = await iotserveralarmadd(policeList)
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在报警中..'
|
||
|
|
});
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.hideLoading();
|
||
|
|
uni.showToast({
|
||
|
|
title: '报警成功',
|
||
|
|
success: (res) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.switchTab({
|
||
|
|
url: `/pages/securityCheck/securityCheck`
|
||
|
|
});
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
radioChange(e) {
|
||
|
|
this.radiovalue = e
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.policeItem {
|
||
|
|
|
||
|
|
// margin: 30rpx 0 0 0;
|
||
|
|
/deep/ .u-form-item__body__left {
|
||
|
|
margin-left: 31rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.u-form-item__body {
|
||
|
|
padding: 5px 0;
|
||
|
|
}
|
||
|
|
.SignItem {
|
||
|
|
transform: translateY(15%);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin: 20rpx 48rpx;
|
||
|
|
// background-color: #fff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Cancel {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
margin: 20rpx 40rpx;
|
||
|
|
}
|
||
|
|
.pictureList{
|
||
|
|
padding: 10rpx 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|