695 lines
18 KiB
Vue
695 lines
18 KiB
Vue
<template>
|
||
<view class="emergencyDisposal">
|
||
<view class="fixedheader">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
处置详情
|
||
</view>
|
||
</headers>
|
||
</view>
|
||
<view class="disposal-detail" :style="{ 'margin-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
|
||
<view class="rescue">
|
||
<view class="title">
|
||
基本信息
|
||
</view>
|
||
<view class="rescue-detail">
|
||
<view>
|
||
<text>报警人员姓名：</text>
|
||
<text>{{emergencyDetail.alarmPersonName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>所属企业：</text>
|
||
<text>{{emergencyDetail.enterpriseName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>应急类型：</text>
|
||
<text>{{emergencyDetail.emergencyTypeName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>所属班组/部门：</text>
|
||
<text> {{emergencyDetail.teamName ? emergencyDetail.teamName : emergencyDetail.departmentName}}</text>
|
||
</view>
|
||
<view class="detail">
|
||
<text>应急详情：</text>
|
||
<text
|
||
style="word-wrap:break-word; word-break:break-all;">{{emergencyDetail.emergencyDetail}}</text>
|
||
</view>
|
||
<view>
|
||
<text>救援状态：</text>
|
||
<text v-if="emergencyDetail.dispositionStatus === 1"
|
||
style="color:#f56c6c;font-weight:bold;">待救援</text>
|
||
<text v-if="emergencyDetail.dispositionStatus === 2"
|
||
style="color:#5181f6;font-weight:bold;">救援中</text>
|
||
<text v-if="emergencyDetail.dispositionStatus === 3"
|
||
style="color:#008000;font-weight:bold;">已救援</text>
|
||
<!-- <text class="color-ea3">
|
||
{{emergencyDetail.dispositionStatus == 1 ? '待救援' : emergencyDetail.dispositionStatus == 2 ? '救援中' :'已救援' }}
|
||
</text> -->
|
||
</view>
|
||
<view>
|
||
<text>现场情况视频：</text>
|
||
<view class="imgBox flex2"
|
||
v-for="(item,index) in emergencyDetail.liveVideoSituation && JSON.parse(emergencyDetail.livePicture).length>0 && JSON.parse(emergencyDetail.liveVideoSituation)"
|
||
:key="index" style="width:380rpx;">
|
||
<view
|
||
style="display: inline-block;color: #4181FE;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
|
||
@click="playVideo(url_config+'image/'+item.url,'video')">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
<!-- url_config+'image/'+ -->
|
||
<!-- <text class="color-518">
|
||
{{emergencyDetail.liveVideoSituation}}
|
||
</text> -->
|
||
</view>
|
||
<view>
|
||
<text>报警时间：</text>
|
||
<text>{{emergencyDetail.alarmTime}}</text>
|
||
</view>
|
||
<view>
|
||
<text>经纬度：</text>
|
||
<text>{{emergencyDetail.longitude}}<text
|
||
v-if="emergencyDetail.longitude && emergencyDetail.latitude">,</text>{{emergencyDetail.latitude}}</text>
|
||
</view>
|
||
<view>
|
||
<text>详细地址：</text>
|
||
<text>{{emergencyDetail.incidentSite}}</text>
|
||
</view>
|
||
<view>
|
||
<text>现场情况图片：</text>
|
||
<view class="uni-form-input imgBox_wrap">
|
||
<view class="imgBox"
|
||
v-for="(item,index) in emergencyDetail.livePicture && JSON.parse(emergencyDetail.livePicture).length>0 && JSON.parse(emergencyDetail.livePicture)"
|
||
:key="index">
|
||
<image :src="url_config+'image/'+item.url" style="width: 75px;height: 100rpx;" class="img"
|
||
@click="previewImage(item.url)">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<!-- <text>
|
||
<image class="image" :src="emergencyDetail.livePicture"></image>
|
||
</text> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="rescue" v-if="emergencyDetail.emergencyTypeId != '-1'">
|
||
<view class="title">
|
||
救援资料
|
||
</view>
|
||
<view class="rescue-detail data">
|
||
<view>
|
||
<text>处置资料：</text>
|
||
<text v-if="emergencyInfo.disposalInformation"
|
||
style="cursor: pointer;word-wrap:break-word; word-break:break-all;" class="color-518"
|
||
@click="downloadReport(emergencyInfo.disposalInformation)">
|
||
{{ JSON.parse(emergencyInfo.disposalInformation).map(item => item.name).join("、") }}
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text>指导文件：</text>
|
||
<text v-if="emergencyInfo.guidanceDocument"
|
||
style="cursor: pointer;word-wrap:break-word; word-break:break-all;" class="color-518"
|
||
@click="downloadReport(emergencyInfo.guidanceDocument)">
|
||
{{ JSON.parse(emergencyInfo.guidanceDocument).map(item => item.name).join("、") }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rescue">
|
||
<view class="title">
|
||
救援情况
|
||
<text class="color-518" v-if="emergencyDetail.incidentClosedStatus == 2">事故已关闭</text>
|
||
</view>
|
||
<view class="rescue-detail">
|
||
<view class="rescue-item" v-for="item in emergencyDetail.situations" :key="item.id">
|
||
<!-- <view class="rescue-detail data condition">
|
||
</view> -->
|
||
<view>
|
||
<text>处置人：</text>
|
||
<text>{{item.disposalPersonName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>现场情况视频：</text>
|
||
<view v-if="item.liveVideoSituation && JSON.parse(item.liveVideoSituation).length>0"
|
||
class="imgBox flex2" v-for="(ele,index) in JSON.parse(item.liveVideoSituation)"
|
||
:key="index" style="width:380rpx;">
|
||
<view
|
||
style="display: inline-block;color: #4181FE;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
|
||
@click="playVideo(ele.url,'video')">
|
||
{{ele.name}}
|
||
</view>
|
||
</view>
|
||
<!-- <text class="color-518">4654.mp4</text> -->
|
||
</view>
|
||
<view>
|
||
<text>处置说明：</text>
|
||
<text>{{item.disposalSpecification}}</text>
|
||
</view>
|
||
<view>
|
||
<text>现场图片：</text>
|
||
<view class="uni-form-input imgBox_wrap" v-show="item.livePicture.length>0">
|
||
<view class="imgBox" v-for="(item,index) in JSON.parse(item.livePicture)" :key="index">
|
||
<!-- url_config+'image/'+ -->
|
||
<image :src="item.url" class="image" @click="previewImage(item.url)">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<!-- <text>
|
||
<image class="image" src="/static/aqjy.png"></image>
|
||
</text> -->
|
||
</view>
|
||
<view>
|
||
<text>处理完成时间：</text>
|
||
<text>{{item.disposalCompletionTime}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="addSaveBtn" v-if="emergencyDetail.incidentClosedStatus == 1"
|
||
@click="getnavigateTo(`./ImmediateRescue?id=${emergencyDetail.id}`)">
|
||
立即救援
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rescue" v-if="emergencyDetail.incidentClosedStatus == 2">
|
||
<view class="title">
|
||
处置报告
|
||
</view>
|
||
<view v-if="emergencyDetail.dispositionStatus != 3">
|
||
<view class="rescue-report">
|
||
<view class="file-picker__header">
|
||
<text>最多选择1个文件</text>
|
||
<text>{{ imgList ? imgList.length : 0}}/1</text>
|
||
</view>
|
||
<view class="file-picker__files" @click="canversList">
|
||
<uni-icons2 type="plusempty" :size="19"></uni-icons2>
|
||
选择文件
|
||
</view>
|
||
<!-- <uni-file-picker v-model="imgList" limit="1" @select="canversList" file-mediatype="all"
|
||
title="最多选择1个文件">
|
||
<uni-icons2 type="plusempty" :size="19"></uni-icons2>
|
||
选择文件
|
||
</uni-file-picker>
|
||
<view></view> -->
|
||
<view v-for="(item,index) in imgList" :key="index">
|
||
<view>文件名称</view>
|
||
<view style="display: flex;">
|
||
<view style="display: inline-block;color: rgb(65, 129, 254); width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 204rpx;">{{item.name}}</view>
|
||
<uni-icons2 type="close" :size="26" @click="deleteImgList(index)"></uni-icons2>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="addSaveBtn" @click="addSaveBtn">提交</view>
|
||
</view>
|
||
<view v-if="emergencyDetail.dispositionStatus == 3"
|
||
style="color: #5181f6; cursor: pointer; height: 88rpx; justify-content: center; align-items: center;display: flex;"
|
||
@click="downloadReport(imgList)">
|
||
下载处置报告
|
||
</view>
|
||
</view>
|
||
<view class="lable-absolute" @click="goMaps()">
|
||
<image src="/static/emergencywz.png"></image>
|
||
<text>应急物资</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from "../../../components/headers/headers.vue"
|
||
var _self;
|
||
export default {
|
||
data() {
|
||
return {
|
||
projectSn: "",
|
||
id: "",
|
||
emergencyDetail: {},
|
||
imageValue: [],
|
||
imgList: [],
|
||
emergencyTypeList: [],
|
||
emergencyInfo: {},
|
||
statusBarHeight: "",
|
||
btnEditAuth: true
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.btnEditAuth = this.checkBtnPermission({
|
||
key: 'emergencyDisposal_edit',
|
||
menuPath: '/project/emergencyDisposal/emergencyDisposal'
|
||
})
|
||
this.id = options.id;
|
||
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
|
||
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
// console.log(options);
|
||
|
||
},
|
||
onShow() {
|
||
this.getEmergencyTypeList();
|
||
this.getEmergencyRecordQueryById();
|
||
},
|
||
methods: {
|
||
downloadReport(row) {
|
||
console.log(1111111111111, row);
|
||
const url = Array.isArray(row) ? row[0].url : (row != "null" && JSON.parse(row).length > 0 && JSON.parse(
|
||
row)[0].url);
|
||
const fileName = Array.isArray(row) ? row[0].name : (row != "null" && JSON.parse(row).length > 0 && JSON
|
||
.parse(row)[0].name);
|
||
if (!url) {
|
||
uni.showToast({
|
||
title: "暂无下载文件！",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
// #ifdef APP-PLUS
|
||
uni.showLoading({
|
||
title: "保存中..."
|
||
})
|
||
uni.downloadFile({
|
||
url: url, //网络路径，下载下来
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
// uni.saveFile({
|
||
// filePath: res.tempFilePath, //下载后的临时路径
|
||
// success: res => { //下载完成后在相册里压根找不到
|
||
// uni.hideLoading()
|
||
// uni.showToast({
|
||
// title: "保存成功！"
|
||
// })
|
||
// },
|
||
// fail:(e) => {
|
||
// console.log(e);
|
||
// },
|
||
// complete: () => {
|
||
// uni.hideLoading(); //关闭提示
|
||
// },
|
||
// })
|
||
console.log(111111);
|
||
uni.saveImageToPhotosAlbum({ // 然后调用这个方法
|
||
filePath: res.tempFilePath,
|
||
success: (res) => {
|
||
uni.hideLoading(); //关闭提示
|
||
uni.showToast({
|
||
title: '保存成功'
|
||
})
|
||
},
|
||
fail: (e) => {
|
||
console.log(e);
|
||
},
|
||
})
|
||
}
|
||
},
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
fetch(url)
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
const link = document.createElement('a');
|
||
link.href = URL.createObjectURL(blob);
|
||
link.download = fileName;
|
||
link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
|
||
link.click();
|
||
});
|
||
// #endif
|
||
|
||
},
|
||
addSaveBtn() {
|
||
if (this.imgList == null || this.imgList.length == 0) {
|
||
uni.showToast({
|
||
title: "请提交处置报告",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
this.sendRequest({
|
||
url: 'xmgl/xzEmergencyRecord/edit',
|
||
method: 'post',
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
id: this.emergencyDetail.id,
|
||
dispositionStatus: 3,
|
||
situations: this.emergencyDetail.situations,
|
||
disposalReport: JSON.stringify(this.imgList)
|
||
},
|
||
success: res => {
|
||
console.log(res.result)
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
})
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
deleteImgList(eIndex) {
|
||
this.imgList.splice(eIndex, 1);
|
||
},
|
||
canversList(e) {
|
||
const that = this;
|
||
// const accept = ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf", "txt"]
|
||
// const findIndex = accept.findIndex(item => item == e.tempFiles[0].extname);
|
||
// // console.log(findIndex,e.tempFiles[0].extname);
|
||
// if (findIndex == -1) {
|
||
// that.imgList = [];
|
||
// uni.showToast({
|
||
// title: '请上传文件类型!',
|
||
// icon: "none"
|
||
// })
|
||
// return
|
||
// }
|
||
console.log(1111111111, e);
|
||
console.log(that.imgList == null, that.imgList == "null");
|
||
|
||
console.log(that.imgList);
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
console.log(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].fileInfo
|
||
.originalFilename,
|
||
url: that.url_config + 'image/' + JSON.parse(uploadFileRes
|
||
.data).data[0].imageUrl
|
||
};
|
||
that.imgList = (!that.imgList || that.imgList == null) ? [] : that
|
||
.imgList;
|
||
that.imgList.push(data)
|
||
console.log('传过去啦', that.imgList)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
// this.imgList = {
|
||
// imgUrl: e.tempFiles[0].image.location,
|
||
// imgWidth: e.tempFiles[0].image.width,
|
||
// imgHeight: e.tempFiles[0].image.height,
|
||
// team: this.teamList[this.teamindex].teamName,
|
||
// name: this.teamList[this.teamindex].leaderName
|
||
// }
|
||
|
||
},
|
||
getEmergencyTypeList() {
|
||
let that = this;
|
||
//获取我整改的巡查记录数量
|
||
this.sendRequest({
|
||
url: 'xmgl/xzEmergencyType/list',
|
||
method: 'get',
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
},
|
||
success: res => {
|
||
console.log(res);
|
||
that.emergencyTypeList = res.result;
|
||
}
|
||
})
|
||
},
|
||
//获取记录
|
||
getEmergencyRecordQueryById() {
|
||
let that = this;
|
||
//获取我整改的巡查记录数量
|
||
this.sendRequest({
|
||
url: 'xmgl/xzEmergencyRecord/queryById',
|
||
method: 'get',
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
id: this.id,
|
||
},
|
||
success: res => {
|
||
console.log(res);
|
||
that.emergencyDetail = res.result;
|
||
const find = that.emergencyTypeList.find(item => item.id == res.result
|
||
.emergencyTypeId);
|
||
that.emergencyInfo = find ? find : {};
|
||
this.imgList = (res.result.disposalReport && res.result.disposalReport != null) ? JSON
|
||
.parse(res.result.disposalReport) : [];
|
||
}
|
||
})
|
||
},
|
||
getnavigateTo(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
})
|
||
},
|
||
goMaps() {
|
||
uni.navigateTo({
|
||
url: `./mymaps?latitude=${this.emergencyDetail.latitude}&longitude=${this.emergencyDetail.longitude}&alarmPersonName=${this.emergencyDetail.alarmPersonName}`
|
||
})
|
||
},
|
||
//查看视频
|
||
playVideo(url, type) {
|
||
uni.navigateTo({
|
||
url: '../carWashManage/mediaPlay?url=' + url + '&type=' + type
|
||
})
|
||
},
|
||
//预览图片
|
||
previewImage(url) {
|
||
uni.previewImage({
|
||
urls: [url]
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep( .uni-file-picker__lists ){
|
||
display: none;
|
||
}
|
||
|
||
.emergencyDisposal {
|
||
height: 100%;
|
||
}
|
||
|
||
.addSaveBtn {
|
||
width: 496rpx;
|
||
height: 80rpx;
|
||
background: #5181F6;
|
||
box-shadow: 0 8rpx 18rpx 0 rgba(81, 129, 246, 0.37);
|
||
border-radius: 148rpx;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 70rpx auto;
|
||
}
|
||
|
||
.rescue-report {
|
||
view:last-child {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.file-picker__header {
|
||
padding-top: 10rpx;
|
||
padding-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
text:last-child {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.file-picker__files {
|
||
width: 220rpx;
|
||
height: 80rpx;
|
||
background-color: #5181F6;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center !important;
|
||
align-items: center;
|
||
margin: 24rpx 0;
|
||
|
||
.files-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon-add {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
text {
|
||
color: white !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.color-ea3 {
|
||
color: #EA3941;
|
||
}
|
||
|
||
.color-518 {
|
||
color: #5181F6;
|
||
}
|
||
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
|
||
:deep(.headerBox ){
|
||
background: #2b8df3;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.image {
|
||
width: 148rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.disposal-detail {
|
||
// margin: 88rpx 0;
|
||
padding: 0 30rpx 30rpx;
|
||
position: relative;
|
||
|
||
.rescue {
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.rescue-item {
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(198, 220, 255, 0.2) 100%);
|
||
box-shadow: 0px 8rpx 32rpx -8rpx rgba(42, 60, 106, 0.24);
|
||
border-radius: 34rpx;
|
||
padding: 24rpx 24rpx;
|
||
|
||
// view {
|
||
// margin: 6rpx 0 !important;
|
||
// }
|
||
}
|
||
|
||
.rescue-item>view:last-child {
|
||
font-size: 20rpx;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
justify-content: flex-end;
|
||
|
||
text:last-child {
|
||
flex: initial,
|
||
}
|
||
}
|
||
|
||
.rescue-detail {
|
||
// margin-top: 15%;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
padding: 0 8rpx 30rpx;
|
||
|
||
view {
|
||
display: flex;
|
||
line-height: 50rpx;
|
||
margin: 20rpx 0;
|
||
|
||
text:last-child {
|
||
flex: 1,
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
flex-direction: column;
|
||
|
||
text:last-child {
|
||
padding: 0 26rpx;
|
||
}
|
||
}
|
||
|
||
.rescue-data {
|
||
border: 1px solid #BBBBBB;
|
||
background-color: #F5F5F5;
|
||
justify-content: center;
|
||
}
|
||
|
||
.addSaveBtn {
|
||
margin: 60rpx auto;
|
||
color: #fff;
|
||
// width: 60%;
|
||
// padding: 20rpx 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// background-color: #4181FE;
|
||
|
||
// font-size: 34rpx;
|
||
// border-radius: 60rpx;
|
||
// letter-spacing: 4rpx;
|
||
width: 254rpx;
|
||
height: 80rpx;
|
||
background: #5181F6;
|
||
box-shadow: 0px 4px 9px 0px rgba(81, 129, 246, 0.37);
|
||
border-radius: 74px 74px 74px 74px;
|
||
}
|
||
|
||
.addSaveBtn:active {
|
||
background-color: rgba(65, 129, 254, 0.8);
|
||
}
|
||
}
|
||
|
||
.data {
|
||
margin-left: 46rpx;
|
||
color: #272D45;
|
||
}
|
||
|
||
.condition {
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.lable-absolute {
|
||
// background-color: #fcebec;
|
||
// color: #ea3941;
|
||
padding: 4rpx 24rpx;
|
||
border-radius: 20rpx;
|
||
position: absolute;
|
||
top: 32rpx;
|
||
right: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 68rpx;
|
||
height: 74rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.imgBox_wrap,
|
||
.imgBox {
|
||
margin: 0 !important;
|
||
|
||
view {
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
</style> |