655 lines
16 KiB
Vue
655 lines
16 KiB
Vue
<template>
|
||
<view class="emergencyalarm">
|
||
<headers class="fixedheader" :showBack="true">
|
||
<view class="headerName">
|
||
应急警报
|
||
</view>
|
||
</headers>
|
||
<view class="item-boxs" :style="{ 'margin-top': (statusBarHeight+52) + 'px' }">
|
||
<view class="item-box">
|
||
<view class="title">
|
||
应急类型
|
||
</view>
|
||
<picker @change="pick($event)" mode='selector' :value="index" :range="emergencyList"
|
||
range-key="emergencyType" class='listPicker'>
|
||
<view class="inputType">
|
||
{{inputType ? inputType : '请选择'}}
|
||
<!-- <input class="inputType" readonly disabled v-model="inputType" placeholder="请选择" /> -->
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="item-box">
|
||
<view class="title">
|
||
应急详情
|
||
</view>
|
||
<textarea class="textareaType" maxlength="-1" v-model="emergencyInfo.emergencyDetail" placeholder="请选择应急详情,描述当时情况" />
|
||
</view>
|
||
<view class="item-box">
|
||
<view class="title">
|
||
现场情况
|
||
</view>
|
||
<view class="uploadbox">
|
||
<view class="uploadImg">
|
||
<text>上传图片：</text>
|
||
<view class="uni-form-input imgBox_wrap">
|
||
<view v-show="imgFileList.length>0">
|
||
<view class="imgBox" v-for="(item,index) in imgFileList"
|
||
:key="index">
|
||
<image :src="url_config+'image/'+item.url" class="img"
|
||
@click="previewImage(url_config+'image/'+item.url)">
|
||
</image>
|
||
<view @click="deleteImg(item,1)" style="margin: 5px;" class="deleteImg">×</view>
|
||
</view>
|
||
</view>
|
||
<view class="addImgBox" @click="uploadImg(1)" v-if="imgFileList.length<1">
|
||
<image src="/static/icon-add.png" class="icon-add"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="uploadImg">
|
||
<text>视频(mp4)附件：</text>
|
||
<view v-if="videoFileList.length>0" class="imgBox flex2">
|
||
<view style="overflow: hidden;" v-for="(item,index) in videoFileList" :key="index">
|
||
<view
|
||
style="color: #4181FE;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
|
||
@click="playVideo(url_config+'image/'+item.url,'video')">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
<view @click="deleteImg(item,2)" style="margin: 5px;color: gray;right: 0%;"
|
||
class="deleteImg">×
|
||
</view>
|
||
</view>
|
||
<view class="addImgBox" @click="uploadVideo" v-if="videoFileList.length<=0">
|
||
<image src="/static/icon-add.png" class="icon-add"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item-box_address">
|
||
<view class="address">
|
||
<text>事发地</text>
|
||
<input class="inputAddress" readonly disabled v-model="emergencyInfo.incidentSite" placeholder="请获取地址" />
|
||
</view>
|
||
<view class="getaddress" @click="getAddress()">
|
||
<text class="round"></text>
|
||
<text>获取地址</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" @click="emergencyEdit">
|
||
请求救援
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from "@/components/headers/headers.vue"
|
||
import {
|
||
emergencyRecordQueryById,
|
||
emergencyTypeList,
|
||
emergencyRecordEdit,
|
||
emergencyRecordSendNotice
|
||
} from "@/api/index.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: ['一般', '严重'],
|
||
index: 0,
|
||
inputType: "",
|
||
textareaType: "",
|
||
inputAddress: "",
|
||
videoFileList: [],
|
||
imgFileList: [],
|
||
id: "",
|
||
projectSn: "",
|
||
emergencyDetail: {},
|
||
emergencyInfo: {
|
||
emergencyTypeId: "",
|
||
emergencyDetail: "",
|
||
livePicture: "",
|
||
liveVideoSituation: "",
|
||
incidentSite: "",
|
||
longitude: "",
|
||
latitude: "",
|
||
},
|
||
addressList:[],
|
||
emergencyList: [],
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id;
|
||
console.log(uni.getStorageSync('devInfoList'));
|
||
this.projectSn = uni.getStorageSync('devInfoList').projectSn;
|
||
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
|
||
console.log(options);
|
||
emergencyRecordQueryById({
|
||
projectSn: this.projectSn,
|
||
id: this.id,
|
||
}).then(result => {
|
||
if (result.code == 200) {
|
||
// uni.showToast({
|
||
// title: "登录成功"
|
||
// })
|
||
this.emergencyDetail = result.result;
|
||
console.log(result);
|
||
} else {
|
||
uni.showToast({
|
||
title: result.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
});
|
||
emergencyTypeList({
|
||
projectSn: this.projectSn,
|
||
}).then(result => {
|
||
if (result.code == 200) {
|
||
this.emergencyList = result.result;
|
||
console.log(result);
|
||
} else {
|
||
uni.showToast({
|
||
title: result.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
emergencyEdit() {
|
||
var that = this;
|
||
if(!this.emergencyInfo.emergencyTypeId){
|
||
uni.showToast({
|
||
title: "请输入类型",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
if(!this.emergencyInfo.emergencyDetail){
|
||
uni.showToast({
|
||
title: "请输入详情",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
if(!this.addressList){
|
||
uni.showToast({
|
||
title: "请输入事发地",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
emergencyRecordEdit({
|
||
id: this.id,
|
||
projectSn: this.projectSn,
|
||
emergencyTypeId: this.emergencyInfo.emergencyTypeId,
|
||
emergencyDetail: this.emergencyInfo.emergencyDetail,
|
||
livePicture: JSON.stringify(this.imgFileList),
|
||
liveVideoSituation: JSON.stringify(this.videoFileList),
|
||
incidentSite: JSON.stringify(this.addressList),
|
||
longitude: this.emergencyInfo.longitude,
|
||
latitude: this.emergencyInfo.latitude,
|
||
}).then(result => {
|
||
if (result.code == 200) {
|
||
uni.showToast({
|
||
title: result.message,
|
||
})
|
||
emergencyRecordSendNotice({
|
||
projectSn: that.projectSn,
|
||
id:that.id,
|
||
}).then(result => {
|
||
if (result.code == 200) {
|
||
// uni.showToast({
|
||
// title: "登录成功"
|
||
// })
|
||
} else {
|
||
uni.showToast({
|
||
title: result.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
uni.navigateBack()
|
||
console.log(result);
|
||
} else {
|
||
uni.showToast({
|
||
title: result.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
pick(e) {
|
||
this.inputType = this.emergencyList[e.target.value].emergencyType;
|
||
this.emergencyInfo.emergencyTypeId = this.emergencyList[e.target.value].id;
|
||
this.index = e.target.value;
|
||
},
|
||
//上传视频
|
||
uploadVideo() {
|
||
var that = this;
|
||
uni.chooseVideo({
|
||
count: 5 - that.videoFileList.length,
|
||
sourceType: ['camera', 'album'],
|
||
compressed: false,
|
||
success: function(res) {
|
||
let url = res.tempFilePath;
|
||
uni.uploadFile({
|
||
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
||
filePath: url,
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
let obj = {
|
||
name: JSON.parse(uploadFileRes.data).data[0].fileInfo
|
||
.originalFilename,
|
||
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
||
}
|
||
that.videoFileList.push(obj);
|
||
console.log('上传视频后的数据', that.videoFileList);
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//查看视频
|
||
playVideo(url, type) {
|
||
uni.navigateTo({
|
||
url: '../carWashManage/mediaPlay?url=' + url + '&type=' + type
|
||
})
|
||
},
|
||
//预览图片
|
||
previewImage(url) {
|
||
uni.previewImage({
|
||
urls: [url]
|
||
})
|
||
},
|
||
//上传附件
|
||
uploadImg(type) {
|
||
var that = this
|
||
if (type == 1) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
uni.uploadFile({
|
||
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
||
filePath: tempFilePaths[0],
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
console.log(uploadFileRes);
|
||
let data = {
|
||
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
||
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
||
};
|
||
that.imgFileList.push(data)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
} else if (type == 2) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
uni.uploadFile({
|
||
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
||
filePath: tempFilePaths[0],
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
let data = {
|
||
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
||
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
||
};
|
||
if (that.imgDialogUrl.length >= 1) {
|
||
that.imgDialogUrl[0].url = data.url
|
||
that.imgDialogUrl[0].name = data.name
|
||
|
||
} else {
|
||
that.imgDialogUrl.push(data)
|
||
}
|
||
console.log("上传图片的信息：", that.imgDialogUrl)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
uni.chooseImage({
|
||
count: 1 - that.mapImgList.length,
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
uni.uploadFile({
|
||
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
||
filePath: tempFilePaths[0],
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
let data = {
|
||
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
||
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
||
};
|
||
that.mapImgList.push(data)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
|
||
},
|
||
//删除附件
|
||
deleteImg(val, type) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定删除该附件吗?',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
if (type == 1) {
|
||
let fileArr = JSON.parse(JSON.stringify(that.imgFileList));
|
||
fileArr.forEach((item, index) => {
|
||
if (item.url == val.url) {
|
||
fileArr.splice(index, 1)
|
||
}
|
||
})
|
||
that.imgFileList = fileArr;
|
||
} else if (type == 2) {
|
||
let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
|
||
fileArr.forEach((item, index) => {
|
||
if (item.url == val.url) {
|
||
fileArr.splice(index, 1)
|
||
}
|
||
})
|
||
that.videoFileList = fileArr;
|
||
}
|
||
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
getAddress() {
|
||
const that = this;
|
||
console.log("获取地址")
|
||
uni.chooseLocation({
|
||
success: function (res) {
|
||
// console.log('位置名称：' + res.name);
|
||
// console.log('详细地址：' + res.address);
|
||
// console.log('纬度：' + res.latitude);
|
||
// console.log('经度：' + res.longitude);
|
||
that.emergencyInfo.incidentSite = res.address;
|
||
that.emergencyInfo.longitude = parseFloat(res.longitude);
|
||
that.emergencyInfo.latitude = parseFloat(res.latitude);
|
||
}
|
||
});
|
||
// uni.getLocation({
|
||
// type: 'gcj02',
|
||
// // type: 'wgs84',
|
||
// geocode: true, //设置该参数为true可直接获取经纬度及城市信息
|
||
// isHighAccuracy: "true",
|
||
// accuracy: "best", // 精度值为20m
|
||
// success: function(res) {
|
||
// console.log(res)
|
||
// // const latitude = parseFloat(res.latitude);
|
||
// // const longitude = parseFloat(res.longitude);
|
||
// that.emergencyInfo.longitude =
|
||
// that.emergencyInfo.latitude = parseFloat(res.latitude);
|
||
// that.addressList = [
|
||
// res.address.province,
|
||
// res.address.city,
|
||
// res.address.district,
|
||
// res.address.street,
|
||
// res.address.streetNum,
|
||
// res.address.city,
|
||
// res.address.poiName,
|
||
// res.address.cityCode,
|
||
// ]
|
||
// that.emergencyInfo.incidentSite = that.addressList.map(item => item).join('、')
|
||
// console.log(that.emergencyInfo.incidentSite)
|
||
// console.log(66666666);
|
||
|
||
// // that.addrDel = res;
|
||
// },
|
||
// fail: function() {
|
||
// uni.showToast({
|
||
// title: '获取地址失败，将导致部分功能不可用',
|
||
// icon: 'none'
|
||
// });
|
||
// }
|
||
// });
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
|
||
/deep/.headerBox {
|
||
background: #2b8df3;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.picker {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 50rpx;
|
||
text-align: center;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.emergencyalarm {
|
||
padding: 0 24rpx 120rpx 24rpx;
|
||
|
||
.item-boxs {
|
||
.item-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 40rpx;
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
color: rgba(39, 45, 69, 0.9);
|
||
}
|
||
|
||
.inputType {
|
||
padding: 16rpx 38rpx;
|
||
// border: 2rpx solid;
|
||
margin-top: 30rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 18rpx 8rpx 16rpx 4rpx rgba(168, 193, 255, 0.17);
|
||
border-radius: 0;
|
||
}
|
||
|
||
.textareaType {
|
||
width: calc(100% - 48rpx);
|
||
padding: 16rpx 38rpx;
|
||
// border: 2rpx solid;
|
||
margin-top: 30rpx;
|
||
// border-radius: 20rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 18rpx 8rpx 16rpx 4rpx rgba(168, 193, 255, 0.17);
|
||
}
|
||
|
||
.uploadbox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: rgba(0, 0, 0, 0.7);
|
||
padding: 16rpx 38rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 18rpx 8rpx 16rpx 4rpx rgba(168, 193, 255, 0.17);
|
||
|
||
.uploadImg {
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.uploadImg>image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background-color: #F6F5F8;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.item-box_address {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
padding: 16rpx 38rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 18rpx 8rpx 16rpx 4rpx rgba(168, 193, 255, 0.17);
|
||
|
||
.address {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 34rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.inputAddress {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.getaddress {
|
||
padding: 0 20rpx 0 26rpx;
|
||
border-left: 2rpx solid rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #5181F6;
|
||
}
|
||
|
||
.round {
|
||
width: 4rpx;
|
||
height: 4rpx;
|
||
background: #EA3941;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16rpx;
|
||
margin-right: 30rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.round::after {
|
||
content: "";
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
background: rgba(84, 112, 242, 0.15);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.round::before {
|
||
content: "";
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background: rgba(84, 112, 242, 0.25);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
// width: 100vw;
|
||
// height: 100rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// color: white;
|
||
// background-color: #E00D0D;
|
||
// font-size: 40rpx;
|
||
// position: fixed;
|
||
// left: 0;
|
||
// bottom: 0;
|
||
width: 480rpx;
|
||
height: 80rpx;
|
||
background: #5181F6;
|
||
box-shadow: 0 8rpx 18rpx 0 rgba(81, 129, 246, 0.37);
|
||
border-radius: 148rpx;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
margin-top: 106rpx;
|
||
}
|
||
}
|
||
|
||
.imgBox_wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
// width: 75%;
|
||
}
|
||
|
||
.imgBox {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: inline-flex;
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
// margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.deleteImg {
|
||
position: absolute;
|
||
right: -6rpx;
|
||
top: -24rpx;
|
||
font-size: 36rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
|
||
.addImgBox {
|
||
border: 2rpx solid rgba(42, 43, 91, 0.1);
|
||
background: rgba(236, 240, 255, 0.83);
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
|
||
.icon-add {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
</style> |