admin/zhgdyunapp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
zhgdyunapp/pages/projectEnd/emergencyDisposal/reliefApprove.vue

595 lines
15 KiB
Vue
Raw Normal View History

提交应急
2024-05-21 18:03:30 +08:00
<template>
<view class="emergencyDisposal">
<headers class="fixedheader" :showBack="true">
<view class="headerName">
处置详情
</view>
</headers>
提交应急
2024-05-22 00:12:45 +08:00
<view class="disposal-detail" :style="{ 'margin-top': (statusBarHeight+52) + 'px' }">
提交应急
2024-05-21 18:03:30 +08:00
<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}}</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">
<view style="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>
<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: 50px;" class="img"
@click="previewImage(item.url)">
</image>
</view>
</view>
<!-- <text>
<image class="image" :src="emergencyDetail.livePicture"></image>
</text> -->
</view>
</div>
</view>
</view>
<view class="rescue">
<view class="title">
救援资料
</view>
<view class="rescue-detail data">
<view>
<text>处置资料：</text>
<text v-if="emergencyInfo.disposalInformation" style="cursor: pointer;" 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;" 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>
提交应急
2024-05-22 00:12:45 +08:00
<!-- style="flex-direction: column;" -->
<view >
提交应急
2024-05-21 18:03:30 +08:00
<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">
<view
提交应急
2024-05-22 00:12:45 +08:00
style="color: #4181FE;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
提交应急
2024-05-21 18:03:30 +08:00
@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.dispositionStatus == 3">
<view class="title">
处置报告
</view>
<view v-if="this.imgList && this.imgList.length > 0"
style="color: #5181f6; cursor: pointer; height: 88rpx; justify-content: center; align-items: center;display: flex;"
提交应急
2024-05-22 00:12:45 +08:00
@click="downloadReport(imgList)">
提交应急
2024-05-21 18:03:30 +08:00
下载处置报告
</view>
</view>
<view class="addSaveBtn" v-if="emergencyDetail.incidentClosedStatus == 1" @click="onSubmitAll()">
关闭事故
</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: {},
}
},
mounted() {
},
onLoad(options) {
this.id = options.id;
提交应急
2024-05-22 00:12:45 +08:00
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
提交应急
2024-05-21 18:03:30 +08:00
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
console.log(options);
},
onShow() {
this.getEmergencyTypeList();
this.getEmergencyRecordQueryById();
},
methods: {
downloadReport(row) {
提交应急
2024-05-22 00:12:45 +08:00
const url = row && row != "null" && row[0].url;
const fileName = row && row != "null" && row[0].name;
if (!url) {
uni.showToast({
title: "暂无下载文件！",
icon: "none"
})
return
}
uni.showLoading({
title: "保存中..."
})
uni.downloadFile({
url: url, //网络路径，下载下来
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath, //下载后的临时路径
success: res => { //下载完成后在相册里压根找不到
uni.hideLoading()
uni.showToast({
title: "保存成功！"
})
}
})
}
}
});
提交应急
2024-05-21 18:03:30 +08:00
},
onSubmitAll() {
this.sendRequest({
url: 'xmgl/xzEmergencyRecord/edit',
method: 'post',
data: {
projectSn: this.projectSn,
id: this.emergencyDetail.id,
incidentClosedStatus: 2,
situations: this.emergencyDetail.situations,
disposalReport: JSON.stringify(this.imgList)
},
success: res => {
console.log(res.result)
if (res.code == 200) {
uni.showToast({
title: '提交成功',
})
uni.navigateBack()
}
}
})
},
addSaveBtn() {
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;
console.log(e);
提交应急
2024-05-22 00:12:45 +08:00
that.imgList = that.imgList == null ? [] : that.imgList;
提交应急
2024-05-21 18:03:30 +08:00
uni.uploadFile({
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
filePath: e.tempFilePaths[0],
name: 'files',
success: (uploadFileRes) => {
let data = {
name: JSON.parse(uploadFileRes.data).data[0].filename,
url: that.url_config + 'image/' + JSON.parse(uploadFileRes
.data).data[0].imageUrl
};
that.imgList.push(data)
console.log('传过去啦', this.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 && JSON.parse(res.result.disposalReport);
}
})
},
getnavigateTo(url) {
uni.navigateTo({
url,
})
},
goMaps() {
uni.navigateTo({
url: `./mymaps?latitude=${this.emergencyDetail.latitude}&longitude=${this.emergencyDetail.longitude}`
})
},
//查看视频
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;
}
}
/deep/ .uni-file-picker__files {
width: 220rpx;
height: 80rpx;
background-color: #5181F6;
color: #fff;
border-radius: 20rpx;
display: flex;
justify-content: center;
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 {
提交应急
2024-05-22 00:12:45 +08:00
padding: 0 30rpx 30rpx;
提交应急
2024-05-21 18:03:30 +08:00
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;
提交应急
2024-05-22 00:12:45 +08:00
// view {
// margin: 6rpx 0 !important;
// }
提交应急
2024-05-21 18:03:30 +08:00
}
.rescue-item>view:last-child {
font-size: 10px;
color: rgba(0, 0, 0, 0.5);
justify-content: flex-end;
text:last-child {
flex: initial,
}
}
.rescue-detail {
// margin-top: 15%;
font-size: 14px;
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: 30px;
// letter-spacing: 2px;
width: 252px;
height: 40px;
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;
}
}
}
提交应急
2024-05-22 00:12:45 +08:00
.imgBox_wrap,.imgBox {
margin: 0 !important;
view {
margin: 0 !important;
}
}
提交应急
2024-05-21 18:03:30 +08:00
</style>
Reference in New Issue Copy Permalink