2025-08-26 19:38:39 +08:00

791 lines
16 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="addIssue">
<view class="fixedheader">
<headers :showBack="true" :themeType="true">
<view class="headerName">
上报隐患
</view>
</headers>
</view>
<view class="content" :style="{paddingTop: mobileTopHeight + 60 + 'px'}">
<view class="type flex">
<view class="name"><text class="star">*</text>隐患部位</view>
<u-input v-model="form.detailPlace" type="text" :border="true" placeholder="请输入" />
</view>
<view class="type flex">
<view class="name"><text class="star">*</text>隐患描述:</view>
<u-input v-model="form.addedDescription" type="text" :border="true" placeholder="请输入" />
</view>
<view class="type flex">
<view class="name"><text class="star">*</text>上报时间:</view>
<u-input v-model="form.inspectTime" disabled type="text" :border="true" placeholder="请输入" />
</view>
<view class="type flex">
<view class="name"><text class="star">*</text>隐患图片:</view>
<view class="uni-form-input imgBox_wrap">
<view class="imgBox" v-show="imgFileList.length>0" 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 class="addImgBox" @click="uploadImg(1)" v-if="imgFileList.length<5">
<image src="/static/icon-add.png" class="icon-add"></image>
</view>
</view>
</view>
<view class="type flex">
<view class="name">现场整改:</view>
<view class="flex">
<text :class="form.status==2?'status':''">未完成</text>
<switch :checked="form.status==5" @change="switchChange"
style="margin: 0 10px;transform: scale(0.74,0.7)" />
<text :class="form.status==5?'status':''">已完成</text>
</view>
</view>
<view style="font-size: 12px;
margin: 0 0 10px 17px;
color: gray;">注:如果在检查的时候已经整改,请直接选择已完成</view>
<view class="type flex" v-if="form.status==5">
<view class="name">整改后图片:</view>
<view class="uni-form-input imgBox_wrap">
<view class="imgBox" v-show="rectifyAfterImageList.length>0"
v-for="(item,index) in rectifyAfterImageList" :key="index">
<image :src="url_config+'image/'+item.url" class="img"
@click="previewImage(url_config+'image/'+item.url)">
</image>
<view @click="deleteImg(item,2)" style="margin: 5px;" class="deleteImg"></view>
</view>
<view class="addImgBox" @click="uploadImg(2)" v-if="rectifyAfterImageList.length<5">
<image src="/static/icon-add.png" class="icon-add"></image>
</view>
</view>
</view>
</view>
<view class="confrim-btn">
<view @click="onNavigateBack">取消</view>
<view @click="addSaveBtn">确定</view>
</view>
<canversCom v-if="openImg" :style="`position: absolute; left: -9999px;`" @imgUrl="imgUrl" :imgList="imgList">
</canversCom>
</view>
</template>
<script>
import tkiTree from "@/components/tki-tree/tki-tree.vue"
import canversCom from "@/pages/projectEnd/safeSame/hiddenTroubleComponents/canversCom/canversCom.vue"
import dateTimePiccker from '@/components/dateTimePicker/index.vue'
import {
dateformat
} from "@/utils/tool.js"
export default {
components: {
tkiTree,
canversCom,
dateTimePiccker
},
data() {
return {
mobileTopHeight: 0,
projectSn: '',
form: {
inspectTime: "",
addedDescription: "",
detailPlace: "",
status: 2,
},
imgFileList: [],
rectifyAfterImageList: [],
imageUrl: "",
openImg: false,
imgList: [],
width: 0,
height: 0,
weatherInfo: '',
locationInfo: '',
shooter: '张三' // 可根据实际情况修改或动态获取拍摄人信息
}
},
onLoad(opts) {
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
this.form.inspectTime = this.$dayjs().format("YYYY-MM-DD HH:mm:ss");
console.log('1122', opts.imageUrl);
if (opts.imageUrl) {
this.uploadFileFn(opts.imageUrl);
}
},
mounted() {
var that = this
uni.getSystemInfo({
success(res) {
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
uni.setStorageSync('systemInfo', res)
console.log(res)
}
})
console.log('this.mobileTopHeight', this.mobileTopHeight)
},
methods: {
// 取消
onNavigateBack() {
uni.navigateBack({
delta: 1
})
},
//现场整改是否完成
switchChange(e) {
if (e.detail.value) {
this.form.status = 5;
} else {
this.form.status = 2;
}
},
//新增保存
addSaveBtn() {
let data = {
...this.form,
projectSn: this.projectSn,
inspectManId: this.userInfo.userId,
imageUrl: JSON.stringify(this.imgFileList),
rectifyAfterImage: JSON.stringify(this.rectifyAfterImageList),
};
if (!this.form.detailPlace) {
uni.showToast({
title: "请输入隐患部位",
icon: 'none'
})
return false
}
if (!this.form.addedDescription) {
uni.showToast({
title: "请输入隐患描述",
icon: 'none'
})
return false
}
if (this.imgFileList.length == 0) {
uni.showToast({
title: "请输入隐患图片",
icon: 'none'
})
return false
}
// 安全问题
this.sendRequest({
url: 'xmgl/xzSecurityQualityInspectionRecordDraft/add',
method: 'post',
data: data,
success: (res) => {
console.log(res)
if (res.code == 200) {
uni.showToast({
title: '保存成功'
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1200)
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}
})
},
//上传附件
uploadImg(type) {
var that = this
if (type == 1) {
this.$chooseImage({
count: 5 - that.imgFileList.length,
success(res) {
const tempFilePaths = res.tempFilePaths;
console.log(222, tempFilePaths[0])
that.canversList(tempFilePaths[0]);
// 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.imgFileList.push(data)
// }
// });
}
})
} else if (type == 2) {
this.$chooseImage({
count: 5 - that.rectifyAfterImageList.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.rectifyAfterImageList.push(data)
}
});
}
})
}
},
canversList(tempFilePath) {
// 设置画布宽高为图片宽高
uni.getImageInfo({
src: tempFilePath,
success: (imageRes) => {
console.log(88888, imageRes)
const {
width,
height
} = imageRes;
this.imgList = {
imgUrl: tempFilePath,
imgWidth: width,
imgHeight: height,
shooter: this.userInfo.realName,
}
this.openImg = true
console.log('传过去啦', this.imgList)
},
fail: (err) => {
console.error('获取图片信息失败:', err);
reject(err);
}
});
},
imgUrl(val) {
console.log(val);
this.uploadFileFn(val.imgUrl);
// 保存图片到相册
this.saveBase64Img(val.imageBase64);
this.openImg = false;
},
uploadFileFn(filePath){
let that = this;
uni.uploadFile({
url: that.url_config + 'upload/image', //仅为示例,非真实的接口地址
filePath: filePath,
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)
}
});
},
saveBase64Img(base64) {
const bitmap = new plus.nativeObj.Bitmap('test');
bitmap.loadBase64Data(
base64,
function() {
const url = '_doc/' + new Date() + '.png'; // url建议用时间戳命名方式
console.log('url:', url);
bitmap.save(
url, {
overwrite: true // 是否覆盖
// quality: 'quality' // 图片清晰度
},
i => {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '保存成功',
icon: 'none'
})
bitmap.clear();
}
});
},
e => {
uni.showToast({
title: '保存失败',
icon: 'none'
})
console.log(e);
bitmap.clear();
}
);
},
e => {
console.log('保存失败', e);
bitmap.clear();
}
);
},
//删除附件
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.rectifyAfterImageList));
fileArr.forEach((item, index) => {
if (item.url == val.url) {
fileArr.splice(index, 1)
}
})
that.rectifyAfterImageList = fileArr;
}
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//预览图片
previewImage(url) {
uni.previewImage({
urls: [url]
})
},
}
}
</script>
<style scoped lang="scss">
.confrim-btn {
padding: 18rpx 26rpx;
background-color: #FFFFFF;
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
display: flex;
width: 100%;
position: fixed;
bottom: 0;
>view {
width: 50%;
height: 76rpx;
font-weight: 500;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
>view:first-child {
background-color: rgba(81, 129, 246, 0.1);
border-radius: 6rpx 0rpx 0rpx 6rpx;
color: #5181F6;
}
>view:last-child {
background-color: #5181F6;
border-radius: 0rpx 6rpx 6rpx 0rpx;
color: #FFFFFF;
}
}
.fixedheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
.headerName {
z-index: 1;
}
}
.tab {
width: 100%;
height: 45px;
text-align: center;
box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
}
.tabType {
width: 50%;
line-height: 43px;
border-bottom: 1px solid rgba(194, 194, 194, 0.2);
}
.checkedTab {
color: #498CEC;
border-bottom: 4rpx solid #498CEC;
}
.noCheckTab {
padding-bottom: 2px;
}
.lagCss {
width: 180px;
height: 61px;
background: #fff;
text-align: center;
line-height: 29px;
border-radius: 10px;
}
.add2 {
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
background: #4181fe;
border-radius: 25px;
font-size: 14px;
margin: 0px 22px;
}
.point {
height: 20px;
width: 20px;
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: 20px 30rpx 120rpx;
}
.type {
font-size: 30rpx;
line-height: 68rpx;
margin-bottom: 16rpx;
/* border-bottom: 1px solid rgba(194, 194, 194, 0.2); */
}
.type .name {
margin-right: 6px;
width: 168rpx;
text-align: right;
font-size: 28rpx;
color: #808080;
}
.radio-wrap {
display: flex;
align-items: center;
.radio {
margin-right: 20px;
}
}
.accessory {
width: 100%;
height: 70px;
padding: 0 10px;
box-sizing: border-box;
}
.accessoryImg {
width: 110rpx;
height: 120rpx;
margin-right: 16rpx;
}
.picker {
// width: 70%;
border: 2rpx solid rgba(42, 43, 91, 0.3);
padding: 0px 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
width: calc(100% - 204rpx);
height: 68rpx;
}
.pickerone {
// width: 70%;
border: 2rpx solid rgba(42, 43, 91, 0.3);
box-sizing: border-box;
border-radius: 10rpx;
width: calc(100% - 204rpx);
.issueserch {
width: 80rpx;
// background: skyblue;
display: flex;
align-items: center;
justify-content: center;
.icon-down {
width: 40rpx !important;
height: 40rpx !important;
}
}
}
/deep/ .uni-easyinput__placeholder-class {
font-size: 28rpx;
color: #A2A4AF;
}
.uni-input {
line-height: 32px;
}
.textarea {
// width: calc(79% - 32px);
width: calc(100% - 204rpx);
border-radius: 10rpx;
border: 2rpx solid rgba(42, 43, 91, 0.3);
padding: 16rpx 28rpx;
box-sizing: border-box;
height: 68rpx;
font-size: 28rpx;
}
.inpuStyle {
width: calc(80% - 35px);
border-radius: 20px;
border: 1px solid rgba(42, 43, 91, 0.3);
padding: 8px 15px;
box-sizing: border-box;
height: 35px;
color: #000;
}
.uni-input {
font-size: 28rpx;
}
.cl {
border-radius: 5px;
font-size: 28rpx;
color: #A2A4AF;
}
.imgBox_wrap {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
width: 75%;
}
.imgBox {
width: 112rpx;
height: 120rpx;
display: inline-flex;
position: relative;
flex-wrap: wrap;
border-radius: 8rpx;
margin-right: 20rpx;
.img {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.deleteImg {
position: absolute;
right: -20rpx;
top: -20rpx;
color: #fff;
width: 20rpx;
height: 20rpx;
background-image: url('@/static/workTicketManage/index-icon9.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.addImgBox {
width: 118rpx;
height: 120rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 2rpx solid #D8DBE8;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
.icon-add {
width: 40rpx;
height: 40rpx;
}
}
.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: 20px 30rpx;
border-radius: 5px;
box-shadow: 0 0 10px 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: 5px 10rpx;
box-sizing: border-box;
font-size: 30rpx;
}
.checkName {
border-bottom: 2px solid #4181FE;
color: #4181FE;
}
.noCheckName {
padding-top: 4px;
}
.unitList {
margin: 10px 0;
font-size: 30rpx;
.title {
margin-bottom: 10px;
}
.list_val {
padding: 8px 10px;
}
}
.bg_999 {
background-color: rgba(153, 153, 153, 0.1);
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
color: #007AFF;
}
.addSaveBtn {
margin: 30px auto;
width: 60%;
padding: 10px 0;
text-align: center;
background-color: #4181FE;
color: #fff;
font-size: 34rpx;
border-radius: 30px;
letter-spacing: 2px;
box-shadow: 0 3px 10px 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%;
padding-left: 20rpx;
width: calc(100% - 204rpx);
font-size: 28rpx;
height: 68rpx;
line-height: 68rpx;
}
</style>