<template>
|
<view class="main_app">
|
<view class="info">
|
<view class="head">
|
<view class="">{{ info.pointName }}</view>
|
<view class="status" :class="{primaryColor: info.status == 0}">{{ info.status == 1 ? '已巡检' : '待巡检' }}</view>
|
</view>
|
<template v-if="info.status == 1">
|
<view class="line">
|
<div class="la">巡检结果：</div>
|
<div class="val primaryColor" :class="{red: info.dealStatus == 1}">{{ info.dealStatus == 0 ? '正常' : '异常' }}
|
</div>
|
</view>
|
<view class="line">
|
<div class="la">巡检时间：</div>
|
<div class="val">{{ info.dealDate }}</div>
|
</view>
|
</template>
|
<template v-else>
|
<view class="desc">
|
{{ info.content }}
|
</view>
|
</template>
|
</view>
|
<!-- -->
|
<view v-if="info.status == 1" class="content">
|
<view class="title">巡检记录</view>
|
<view class="files">
|
<view class="adduser_list_item_ipt1_upload" v-for="(item, i) in info.multifileList" :key="i">
|
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
|
<video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
|
</view>
|
</view>
|
<view v-if="info.dealInfo" class="desc">{{ info.dealInfo }}</view>
|
<view class="line line_s">
|
<view class="la">巡检人：</view>
|
<view class="val">{{ info.realname }}</view>
|
</view>
|
<view class="line line_s">
|
<view class="la">巡检时间：</view>
|
<view class="val">{{ info.dealDate }}</view>
|
</view>
|
</view>
|
<view v-else class="content">
|
<view class="title">巡检处理</view>
|
<view class="appr_modal">
|
<view class="df_sb">
|
<view><text class="red">*</text>处理时间</view>
|
<view class="df_ac" @click="isShowHandleDate = true" v-if="handleParam.dealDate">
|
{{ handleParam.dealDate }}
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
<view @click="isShowHandleDate = true" v-else class="placeholder9 df_ac">
|
请选择
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
</view>
|
<view class="df_sb">
|
<view class="">巡检结果</view>
|
<view class="df_ac" @click="isShowRes = true" v-if="handleParam.dealDate">
|
{{ handleParam.dealName }}
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
</view>
|
<view class="label">
|
上传图片/视频
|
</view>
|
<view class="upload_wrap">
|
<view class="adduser_list_item_ipt1_upload" @click="showUpload = true">
|
<u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
|
<view class="mt6">图片/视频</view>
|
</view>
|
<view class="adduser_list_item_ipt1_upload" v-for="(item, i) in fileList" :key="i">
|
<u-icon class="close" size="20" name="close-circle-fill" color="red"
|
@click="fileDel('fileList', i)"></u-icon>
|
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
|
<video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
|
</view>
|
</view>
|
|
<view class="label" style="margin-bottom: 10rpx;">处理说明</view>
|
<textarea v-model="handleParam.dealInfo" :maxlength="-1" placeholder="请填写处理说明"
|
placeholder-class="placeholder9" />
|
</view>
|
</view>
|
<view v-if="info.status == 0" class="sub_btn" @click="onSubmit">确认巡检</view>
|
<!-- -->
|
<u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
|
<view class="sel_upload_wrap">
|
<view class="btn" @click="uploadImage">选择图片</view>
|
<view class="btn" @click="uploadVideo">选择视频</view>
|
</view>
|
</u-popup>
|
<!-- -->
|
<u-datetime-picker :minDate="new Date().getTime()" :show="isShowHandleDate" @confirm="confirmHandleDate"
|
@cancel="isShowHandleDate = false" mode="datetime"></u-datetime-picker>
|
<u-picker :show="isShowRes" keyName="name" @cancel="isShowRes = false" @confirm='confirmRes'
|
:columns="columns"></u-picker>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
uploadUrl,
|
ywPatrolPointDetail,
|
patrolData
|
} from '@/api'
|
import dayjs from 'dayjs';
|
export default {
|
data() {
|
return {
|
id: '',
|
info: {},
|
isShowRes: false,
|
showUpload: false,
|
isShowHandle: false,
|
isShowHandleDate: false,
|
handleParam: {
|
dealStatus: 0,
|
dealName: '正常'
|
},
|
fileList: [],
|
columns: [
|
[{
|
id: 0,
|
name: '正常'
|
},
|
{
|
id: 1,
|
name: '异常'
|
},
|
{
|
id: '',
|
name: '跳过'
|
},
|
]
|
],
|
};
|
},
|
onLoad(option) {
|
this.id = option.id
|
this.getDetail()
|
this.$set(this.handleParam, 'dealDate', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
},
|
methods: {
|
onSubmit() {
|
const {
|
handleParam,
|
fileList,
|
id
|
} = this
|
patrolData({
|
...handleParam,
|
multifileList: fileList,
|
id,
|
}).then(res => {
|
if (handleParam.dealStatus == 1) {
|
return uni.showModal({
|
title: '温馨提示',
|
content: '巡检结果异常，是否前往提交工单？',
|
success: (res) => {
|
if (res.confirm) {
|
this.showToast('操作成功')
|
setTimeout(() => {
|
uni.redirectTo({
|
url: '/pages/workOrder/edit'
|
})
|
}, 300)
|
}else{
|
this.showToast('操作成功')
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 300)
|
}
|
}
|
});
|
} else {
|
this.showToast('操作成功')
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 300)
|
}
|
})
|
},
|
getDetail() {
|
const {
|
id
|
} = this
|
ywPatrolPointDetail(id).then(res => {
|
this.info = res.data
|
})
|
},
|
callPhone() {
|
uni.makePhoneCall({
|
phoneNumber: '114' //仅为示例
|
});
|
},
|
confirmHandleDate(e) {
|
this.$set(this.handleParam, 'dealDate', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'));
|
this.isShowHandleDate = false;
|
},
|
confirmRes(e) {
|
this.$set(this.handleParam, 'dealStatus', e.value[0].id)
|
this.$set(this.handleParam, 'dealName', e.value[0].name)
|
this.isShowRes = false
|
},
|
fileDel(str, i) {
|
this[str].splice(i, 1);
|
},
|
uploadImage() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseImage({
|
count: 4,
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
let imgs = tempFilePaths.map((value, index) => {
|
return {
|
name: 'file',
|
uri: value
|
};
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
files: imgs,
|
name: 'file',
|
formData: {
|
folder: 'YW_PATROL'
|
},
|
header: {
|
Dm_user_token: token
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 0;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.fileList.push(i);
|
});
|
}
|
},
|
fail(err) {
|
console.log('err', err);
|
},
|
complete() {
|
uni.hideLoading();
|
// if (i === chooseImageRes.tempFilePaths.length - 1) {
|
// uni.hideLoading()
|
// }
|
}
|
});
|
}
|
});
|
},
|
uploadVideo() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseVideo({
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
filePath: chooseImageRes.tempFilePath,
|
header: {
|
Dm_user_token: token
|
},
|
name: 'file',
|
formData: {
|
folder: 'YW_PATROL'
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 1;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.fileList.push(i);
|
});
|
}
|
},
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.main_app {
|
.info {
|
margin: 0 -30rpx;
|
border-bottom: 14rpx solid #f7f7f7;
|
padding: 30rpx;
|
|
.head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-weight: 600;
|
font-size: 34rpx;
|
margin-bottom: 30rpx;
|
|
.status {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #999999;
|
}
|
}
|
}
|
|
.line {
|
display: flex;
|
margin-top: 20rpx;
|
|
.la {
|
color: #666666;
|
|
}
|
}
|
|
.desc {
|
padding: 24rpx 30rpx;
|
width: 690rpx;
|
background: #F7F7F7;
|
border-radius: 12rpx;
|
}
|
|
.line_s {
|
justify-content: space-between;
|
}
|
|
.title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
margin: 30rpx 0;
|
}
|
}
|
|
.sel_upload_wrap {
|
width: 100%;
|
border-top: 1px solid #333333;
|
box-shadow: 0 1 1 #333333;
|
|
.btn {
|
height: 90rpx;
|
line-height: 90rpx;
|
text-align: center;
|
}
|
}
|
|
.sub_btn {
|
// position: fixed;
|
// bottom: 68rpx;
|
// left: 40rpx;
|
width: 670rpx;
|
margin-top: 60rpx;
|
height: 88rpx;
|
background: $primaryColor;
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);
|
border-radius: 44rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
|
.appr_modal {
|
.label {
|
text {
|
color: #ed4545;
|
}
|
}
|
|
.df_sb {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 90rpx;
|
border-bottom: 1rpx solid #e4e4e4;
|
margin-bottom: 30rpx;
|
}
|
|
.back_footer {
|
display: flex;
|
|
.btn {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
background: #ffffff;
|
border-radius: 44rpx;
|
border: 1rpx solid #999999;
|
font-size: 32rpx;
|
text-align: center;
|
margin: 16rpx 8rpx;
|
}
|
|
.agree {
|
background: $uni-color-primary;
|
color: #fff;
|
border: 1rpx solid $uni-color-primary;
|
}
|
}
|
|
textarea {
|
box-sizing: border-box;
|
width: 690rpx;
|
min-height: 140rpx;
|
background-color: #f7f7f7;
|
font-size: 28rpx;
|
color: #333333;
|
padding: 24rpx;
|
border-radius: 8rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.upload_wrap {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 30rpx;
|
}
|
|
}
|
|
.files {
|
display: flex;
|
margin-bottom: 20rpx;
|
}
|
|
.adduser_list_item_ipt1_upload {
|
margin-top: 24rpx;
|
width: 156rpx;
|
height: 156rpx;
|
margin-right: 24rpx;
|
border: 2rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
.close {
|
position: absolute;
|
right: -20rpx;
|
top: -20rpx;
|
z-index: 9999;
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
