892 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="emergencyDisposal">
<view class="fixedheader">
<headers :showBack="true">
<view class="headerName">
立即救援
</view>
</headers>
</view>
<!-- 新增问题 -->
<view class="immediate-rescue" :style="{ 'margin-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
<view class="content">
<!-- <view class="type flex">
<view class="name"><text class="star">*</text>是否处理完毕</view>
<radio-group class="radio-group" @change="radioChange">
<label class="radio" v-for="(item, index) in items" :key="item.value">
<view>
<radio :value="item.value" :checked="index === current" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
</view> -->
<view class="rescue-item" v-for="(item,eIndex) in rescueList" :key="eIndex">
<view class="type flex">
<view class="name">
<!-- <text class="star">*</text> -->
处置人:
</view>
<!-- <picker class="picker">
<view class="uni-input uni-select cl" v-if="issueName==''">
请输入
</view>
<view class="uni-input uni-select" v-else>{{issueName}}
</view>
</picker> -->
<view>
{{item.disposalPersonName}}
</view>
</view>
<view class="type flex">
<view class="name">
<!-- <text class="star">*</text> -->
处理完成时间:
</view>
<dateTimePiccker :placeholder="'请选择'" :start="startTime2" fields="minute"
:default-value="item.changeLimitTime" @change="bindPickerChange($event,'startTime2',eIndex)"
class="dateTimePiccker">
</dateTimePiccker>
</view>
<view class="type flex3">
<view class="name">现场照片:</view>
<view class="uni-form-input imgBox_wrap"
v-show="item.videoFileList && item.imgFileList.length>0">
<view class="imgBox" v-for="(item,index) in item.imgFileList" :key="index">
<image :src="item.url" class="img" @click="previewImage(item.url)">
</image>
<view @click="deleteImg(item,1,eIndex,index)" style="margin: 10rpx;" class="deleteImg">×
</view>
</view>
</view>
<view class="addImgBox" @click="uploadImg(1,eIndex)" v-if="item.imgFileList.length<1">
<image src="/static/icon-add.png" class="icon-add"></image>
</view>
</view>
<view class="type flex3">
<view class="name">现场视频:</view>
<view v-if="item.videoFileList && item.videoFileList.length>0">
<view class="imgBox flex2 imgBoxVideo" v-for="(item,index) in item.videoFileList"
:key="index">
<view
style="color: #4181FE;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
@click="playVideo(item.url,'video')">
{{item.name}}
<!-- url_config+'image/'+ -->
</view>
<view @click="deleteImg(item,2,eIndex,index)" style="margin: 10rpx;color: gray;"
class="deleteImg">×
</view>
</view>
</view>
<view class="addImgBox" @click="uploadVideo(eIndex)" v-if="item.videoFileList.length<=0">
<image src="/static/icon-add.png" class="icon-add"></image>
</view>
</view>
<view class="type flex3">
<view class="name">处置说明</view>
<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="inspectContent"
v-model="item.addedDescription" placeholder="请输入"></textarea>
</view>
<view class="rescue-item_delete" @click="deleteRescue(eIndex)">
X
</view>
</view>
<view class="rescue-item_add" @click="addRescue()">
<image src="/static/icon-add.png" class="icon-add"></image> 新增救援记录
</view>
<view class="addSaveBtn" @click="addSaveBtn" v-if="btnAuth">提交保存</view>
</view>
</view>
</view>
</template>
<script>
import headers from "../../../components/headers/headers.vue"
import dateTimePiccker from '@/components/dateTimePicker/index.vue'
import {
dateformat
} from "@/utils/tool.js"
export default {
components: {
dateTimePiccker
},
data() {
return {
rescueList: [{
changeLimitTime: "",
imgFileList: [],
videoFileList: [],
addedDescription: "",
}],
isShowPicker: true,
startTime: this.getDate({
format: true,
}),
startTime2: this.getDate({
format: true,
}),
imgList: {},
openImg: false,
base64Image: '',
imgIndex: -1,
pointList: [],
pageTitle: '新增检查',
projectSn: '',
checkType: 1, //分包商类型 1专业分包 6劳务分包
videoFileList: [],
imgFileList: [],
mapImgList: [],
basicInfo: {},
selectIndex: null,
userInfo: '',
current: 0,
id: "",
emergencyDetail: {},
btnAuth: true,
}
},
onLoad(option) {
this.btnAuth = this.checkBtnPermission({
key: 'emergencyDisposal_add',
menuPath: '/project/emergencyDisposal/emergencyDisposal'
})
this.id = option.id;
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
this.pageTitle = option.type == 'add' ? '新增检查' : '编辑检查';
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
console.log('111111', this.userInfo);
console.log(dateformat(new Date()), 777888)
this.getEmergencyRecordQueryById();
},
onShow() {
},
methods: {
//获取记录
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;
this.rescueList = res.result.situations.map(item => {
return {
disposalPersonId: item.disposalPersonId,
disposalPersonName: item.disposalPersonName,
changeLimitTime: item.disposalCompletionTime,
imgFileList: item.livePicture ? JSON.parse(item.livePicture) : [],
videoFileList: item.liveVideoSituation ? JSON.parse(item
.liveVideoSituation) : [],
addedDescription: item.disposalSpecification,
}
});
}
})
},
// 添加
addRescue() {
this.rescueList.push({
disposalPersonId: this.userInfo.userId,
disposalPersonName: this.userInfo.realName,
changeLimitTime: "",
imgFileList: [],
videoFileList: [],
addedDescription: "",
});
console.log(this.rescueList, 888999)
},
// 删除
deleteRescue(index) {
this.rescueList.splice(index, 1);
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year;
} else if (type === 'end') {
// year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
//图片上传请求的接口
imgUpload(baseImg) {
console.log('进入----------图片上传请求的接口');
let that = this
let cuDate = new Date().getTime();
let arr = []
that.base64Image = baseImg
let parmars = {
base64Image: that.base64Image
}
this.sendRequest({
url: 'xmgl/upload/uploadBase64',
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
},
data: parmars,
success: (res) => {
console.log('转换后的地址----------', res.data.imageUrl);
console.log('阶段代码 imgUpload 耗时2 ' + (new Date().getTime() - cuDate))
that.imgFileList[that.imgFileList.length - 1].url = res.data.imageUrl
}
})
},
//下拉选择回显
bindPickerChange(e, type, eIndex) {
console.log(e)
//type ==1 问题等级;2紧急情况;3检查人;4 检查时间;5整改时限; 6整改人; 7复查人; 8核验人;
if (type == 'startTime2') {
// this.form.changeLimitTime = e.f3;
this.rescueList[eIndex].changeLimitTime = e.f3;
}
},
//上传附件
uploadImg(type, rowIndex) {
var that = this
if (type == 1) {
uni.chooseImage({
count: 1,
success(res) {
const tempFilePaths = res.tempFilePaths;
console.log(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: that.url_config + 'image/' + JSON.parse(uploadFileRes
.data).data[0].imageUrl
};
console.log(rowIndex, 777888)
console.log(that.rescueList, 777888)
that.rescueList[rowIndex].imgFileList.push(data)
uni.getImageInfo({
src: tempFilePaths[0],
success: (resInfo) => {
console.log('传过去啦 resInfo', resInfo)
that.imgList = {
imgUrl: tempFilePaths[0],
imgWidth: resInfo.width,
imgHeight: resInfo.height,
// team:'班组人员',
// name: '张三'
}
that.openImg = true
}
})
that.openImg = false
}
});
}
})
} 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, rowIndex, eIndex) {
let that = this;
uni.showModal({
title: '提示',
content: '确定删除该附件吗?',
success: function(res) {
if (res.confirm) {
if (type == 1) {
let fileArr = JSON.parse(JSON.stringify(that.rescueList[rowIndex]
.imgFileList));
fileArr.forEach((item, index) => {
if (item.url == val.url) {
fileArr.splice(index, 1)
}
})
that.rescueList[rowIndex].imgFileList = fileArr;
} else if (type == 2) {
let fileArr = JSON.parse(JSON.stringify(that.rescueList[rowIndex]
.videoFileList));
fileArr.forEach((item, index) => {
if (item.url == val.url) {
fileArr.splice(index, 1)
}
})
that.rescueList[rowIndex].videoFileList = fileArr;
}
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//上传视频
uploadVideo(eIndex) {
var that = this;
uni.chooseVideo({
count: 1,
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: that.url_config + 'image/' + JSON.parse(uploadFileRes
.data).data[0].imageUrl
}
that.rescueList[eIndex].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]
})
},
//新增保存
addSaveBtn() {
if (this.rescueList.length == 0) {
uni.showToast({
title: '救援数据不能为空',
icon: 'none'
})
return
}
const everyTime = this.rescueList.every(item => item.changeLimitTime);
if (!everyTime && this.rescueList.length != 0) {
uni.showToast({
title: '处置完成时间有未填项',
icon: 'none'
})
return
}
console.log(this.rescueList);
this.sendRequest({
url: 'xmgl/xzEmergencyRecord/edit',
method: 'post',
data: {
projectSn: this.projectSn,
id: this.emergencyDetail.id,
dispositionStatus: 2,
situations: this.rescueList.map(item => {
return {
disposalPersonId: item.disposalPersonId,
disposalPersonName: item.disposalPersonName,
disposalCompletionTime: item.changeLimitTime,
livePicture: JSON.stringify(item.imgFileList),
liveVideoSituation: JSON.stringify(item.videoFileList),
disposalSpecification: item.addedDescription,
}
}),
},
success: res => {
console.log(res.result)
if (res.code == 200) {
uni.showToast({
title: '提交成功',
})
uni.navigateBack()
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.emergencyDisposal {
height: 100%;
}
.fixedheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
:deep(.headerBox ){
background: #2b8df3;
color: #fff;
}
}
.rescue-item:not(:first-child) {
margin-top: 22rpx;
}
.rescue-item {
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;
position: relative;
}
.rescue-item_delete {
color: #D81E06;
font-size: 38rpx;
font-weight: bold;
position: absolute;
top: 8rpx;
right: 32rpx;
}
.rescue-item_add {
width: 580rpx;
height: 74rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 2rpx dashed #D8DBE8;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 34rpx;
.icon-add {
width: 20rpx;
height: 20rpx;
margin-right: 10rpx;
}
}
.radio-group {
display: flex;
.uni-label-pointer {
display: flex;
}
.uni-label-pointer:not(:first-child) {
margin-left: 40rpx;
}
:deep( .uni-radio-input ){
width: 32rpx;
height: 32rpx;
}
}
.immediate-rescue {
margin: 0 4%;
position: relative;
}
.tab {
width: 100%;
height: 90rpx;
text-align: center;
box-shadow: 0 0 20rpx rgba(194, 194, 194, 0.5);
}
.tabType {
width: 50%;
line-height: 43px;
border-bottom: 1px solid rgba(194, 194, 194, 0.2);
}
.checkedTab {
color: #4181FE;
border-bottom: 4rpx solid #4181FE;
}
.noCheckTab {
padding-bottom: 4rpx;
}
.lagCss {
width: 180px;
height: 61px;
background: #fff;
text-align: center;
line-height: 29px;
border-radius: 20rpx;
}
.add2 {
width: 240rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
color: #fff;
background: #4181fe;
border-radius: 50rpx;
font-size: 28rpx;
margin: 0px 24rpx;
}
.point {
height: 40rpx;
width: 40rpx;
position: absolute;
}
.flex {
display: flex;
align-items: center;
}
.flex2 {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex3 {
display: flex;
}
.content {
width: 100%;
box-sizing: border-box;
// padding: 40rpx 30rpx;
}
.type {
font-size: 30rpx;
line-height: 80rpx;
margin-bottom: 16rpx;
/* border-bottom: 1px solid rgba(194, 194, 194, 0.2); */
}
.type .name {
width: 220rpx;
margin-right: 6px;
// width: 176rpx;
text-align: right;
}
.radio-wrap {
display: flex;
align-items: center;
.radio {
margin-right: 40rpx;
}
}
.accessory {
width: 100%;
height: 70px;
padding: 0 20rpx;
box-sizing: border-box;
}
.accessoryImg {
width: 110rpx;
height: 120rpx;
margin-right: 16rpx;
}
.picker {
width: 70%;
border: 1px solid rgba(42, 43, 91, 0.3);
padding: 0px 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
}
.uni-input {
line-height: 64rpx;
}
.textarea {
width: calc(79% - 64rpx);
border-radius: 10rpx;
border: 1px solid rgba(42, 43, 91, 0.3);
padding: 8px 30rpx;
box-sizing: border-box;
height: 100rpx;
}
.inpuStyle {
width: calc(80% - 70rpx);
border-radius: 40rpx;
border: 1px solid rgba(42, 43, 91, 0.3);
padding: 8px 30rpx;
box-sizing: border-box;
height: 70rpx;
color: #000;
}
.cl {
font-size: 30rpx;
border-radius: 10rpx;
}
.imgBox_wrap {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
// width: 75%;
}
.imgBox {
width: 120rpx;
height: 120rpx;
display: inline-flex;
position: relative;
margin-right: 30rpx;
margin-bottom: 16rpx;
.img {
width: 100%;
height: 100%;
border-radius: 20rpx;
}
.deleteImg {
position: absolute;
right: -6rpx;
top: -36rpx;
font-size: 36rpx;
color: #fff;
}
}
.imgBoxVideo {
width: 342rpx;
}
.addImgBox {
border: 2rpx solid rgba(42, 43, 91, 0.1);
background-color: rgba(236, 240, 255, 0.83);
width: 120rpx;
height: 120rpx;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
font-size: 24rpx;
.icon-add {
width: 36rpx;
height: 36rpx;
}
}
.unitDialog {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 111;
background-color: rgba(0, 0, 0, 0.5);
}
.unitContent {
width: 85%;
height: 70%;
margin: 25% auto 0;
background-color: #fff;
box-sizing: border-box;
padding: 40rpx 30rpx;
border-radius: 10rpx;
box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.6);
}
.tabs {
border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
.tabs_name {
width: 40%;
text-align: center;
padding: 10rpx 10rpx;
box-sizing: border-box;
font-size: 30rpx;
}
.checkName {
border-bottom: 4rpx solid #4181FE;
color: #4181FE;
}
.noCheckName {
padding-top: 4px;
}
.unitList {
margin: 20rpx 0;
font-size: 30rpx;
.title {
margin-bottom: 20rpx;
}
.list_val {
padding: 8px 20rpx;
}
}
.bg_999 {
background-color: rgba(153, 153, 153, 0.1);
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
color: #007AFF;
}
.addSaveBtn {
margin: 60rpx auto;
width: 60%;
padding: 20rpx 0;
text-align: center;
background-color: #4181FE;
color: #fff;
font-size: 34rpx;
border-radius: 60rpx;
letter-spacing: 4rpx;
box-shadow: 0 3px 20rpx rgba(65, 129, 254, 0.8);
}
.addSaveBtn:active {
background-color: rgba(65, 129, 254, 0.8);
}
.radio-box {
display: flex;
}
.radio-item {
display: flex;
margin-right: 20rpx;
align-items: center;
font-size: 28rpx;
:deep( .uni-radio-input ){
width: 32rpx;
height: 32rpx;
}
}
.radio-text {
height: 72rpx;
}
.butA {
display: flex;
// position: absolute;
top: 60%;
width: 70%;
}
.icon-right {
margin-left: 16rpx;
width: 16rpx;
height: 32rpx;
}
.dateTimePiccker {
border: 2rpx solid #ccc;
border-radius: 10rpx;
// width: 67%;
flex: 1;
padding-left: 20rpx;
}
</style>