安全例会优化->实时照片添加水印，实时照片和签字图片上传优化
WenShiJun
parent
5be53f55b0
commit
081d0dab1d
|
|
@ -38,6 +38,7 @@
|
|||
</view>
|
||||
<view class="cu-tabbar-height"></view>
|
||||
</scroll-view>
|
||||
<canvas style="width: 300px; height: 150px; position: absolute; top: -9999px;" canvas-id="watermarkCanvas"></canvas>
|
||||
<uni-drawer ref="showHiddenWindow" mode="right" :mask-click="true">
|
||||
<scroll-view scroll-y="true" style="height: 100vh;">
|
||||
<view class="de-drawer">
|
||||
|
|
@ -46,8 +47,7 @@
|
|||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<!-- 循环展示隐患图片，因为只允许一张，故使用v-if控制 -->
|
||||
<view class="bg-img" v-if="liveImgs.length > 0" @tap="ViewImage"
|
||||
<view class="bg-img" v-if="liveImgs.length > 0"
|
||||
:data-url="liveImgs[0].FILEPATH">
|
||||
<image :src="liveImgs[0].IMGFILES_ID ? (baseImgPath + liveImgs[0].FILEPATH) : liveImgs[0].FILEPATH" mode="aspectFill"></image>
|
||||
<!-- 删除图片按钮 -->
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-form-group" style="border: none;" v-if="!forbidEdit">
|
||||
<view class="cu-form-group" style="border: none;">
|
||||
<view class="title">签字</view>
|
||||
<button class="cu-btn bg-green shadow" @tap="modalShow = true" data-target="Modal">手写签字</button>
|
||||
</view>
|
||||
|
|
@ -184,14 +184,58 @@
|
|||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['camera'],
|
||||
success: (res) => {
|
||||
let img = {
|
||||
IMGFILES_ID: '',
|
||||
FILEPATH: res.tempFilePaths[0]
|
||||
};
|
||||
_this.liveImgs = [img];
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
geocode: true,
|
||||
success: function (locationRes) {
|
||||
const locationAddress = `${locationRes.address.province}${locationRes.address.city}${locationRes.address.district}${locationRes.address.street}${locationRes.address.streetNum}${locationRes.address.poiName}`;
|
||||
// 创建画布
|
||||
const ctx = uni.createCanvasContext('watermarkCanvas', _this);
|
||||
ctx.drawImage(tempFilePath, 0, 0, 300, 150); // 图片大小
|
||||
ctx.setFontSize(20); // 水印字体大小
|
||||
ctx.setFillStyle('red'); // 水印字体颜色
|
||||
ctx.setFontSize(10); // 调整字体大小，适应位置信息
|
||||
// 绘制水印
|
||||
ctx.fillText(`用户名: ${loginUser.NAME}`, 10, 120); // 根据实际情况调整位置
|
||||
ctx.fillText(`当前位置: ${locationAddress}`, 10, 130); // 根据实际情况调整位置
|
||||
ctx.draw(false, () => {
|
||||
// 将画布内容保存为图片
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'watermarkCanvas',
|
||||
success: function(res) {
|
||||
let img = {
|
||||
IMGFILES_ID: '',
|
||||
FILEPATH: res.tempFilePath // 使用带有水印的图片路径
|
||||
};
|
||||
_this.liveImgs = [img];
|
||||
_this.uploadFilePromise(img.FILEPATH, 'livePhoto', locationAddress)
|
||||
.then(() => {
|
||||
uni.showToast({
|
||||
title: '实时照片上传成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}).catch(error => {
|
||||
uni.showToast({
|
||||
title: '实时照片上传失败: ' + error,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
}, _this);
|
||||
});
|
||||
},
|
||||
fail: function () {
|
||||
uni.showToast({
|
||||
title: '获取位置信息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
DelImg() {
|
||||
var _this = this;
|
||||
uni.showModal({
|
||||
|
|
@ -229,18 +273,14 @@
|
|||
},
|
||||
submitMeetingAttendance(permissionID) {
|
||||
var _this = this;
|
||||
if (this.liveImgs.length === 0 || this.signImgList.length === 0) {
|
||||
if (this.signImgList.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请上传实时照片和签字图片',
|
||||
title: '请上传签字图片',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.permissionID = permissionID;
|
||||
setTimeout(()=>{
|
||||
this.$refs['authpup'].open();
|
||||
},200)
|
||||
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
geocode: true,
|
||||
|
|
@ -248,47 +288,25 @@
|
|||
const locationAddress = `${res.address.province}${res.address.city}${res.address.district}${res.address.street}${res.address.streetNum}${res.address.poiName}`;
|
||||
_this.longitude = res.longitude;
|
||||
_this.latitude = res.latitude;
|
||||
// 获取位置成功后，上传图片和其他数据
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
// 循环上传签字图片
|
||||
const uploadTasks = [];
|
||||
_this.signImgList.forEach(signImg => {
|
||||
uploadTasks.push(_this.uploadFilePromise(signImg.filePath, 'signPhoto', locationAddress));
|
||||
});
|
||||
|
||||
uni.uploadFile({
|
||||
url: basePath + '/app/safetymeeting/edit',
|
||||
filePath:_this.liveImgs[0].FILEPATH,
|
||||
name: 'livePhoto',
|
||||
formData: {
|
||||
SAFETY_MEETING_ID: _this.SAFETY_MEETING_ID,
|
||||
SIGNATUREPICTURE: _this.SIGNATUREPICTURE,
|
||||
ATTENDANCE_STATUS: '1',
|
||||
LATITUDE: _this.longitude, // 上传经度
|
||||
LONGITUDE: _this.latitude, // 上传纬度
|
||||
LOCATIONADDRESS: locationAddress
|
||||
},
|
||||
success: uploadRes => {
|
||||
// 解析返回的数据
|
||||
const data = JSON.parse(uploadRes.data);
|
||||
if (data.result === 'success') {
|
||||
// 关闭弹窗
|
||||
_this.$refs.showHiddenWindow.close();
|
||||
// 重新加载数据
|
||||
_this.getData();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '提交失败: ' + data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
Promise.all(uploadTasks).then(() => {
|
||||
// 所有图片上传完成后的处理
|
||||
uni.showToast({
|
||||
title: '全部上传成功',
|
||||
icon: 'success'
|
||||
});
|
||||
// 重新加载或更新页面数据等
|
||||
_this.getData();
|
||||
_this.$refs.showHiddenWindow.close();
|
||||
}).catch(error => {
|
||||
uni.showToast({
|
||||
title: '上传出错: ' + error,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
fail: function () {
|
||||
|
|
@ -299,49 +317,75 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 封装一个上传数据的函数，包括位置信息、实时照片和签字图片
|
||||
formData(latitude, longitude) {
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
});
|
||||
const livePhotoPath =baseImgPath + this.liveImgs[0].FILEPATH;
|
||||
const signPhotoPath = this.signImgList[0].filePath;
|
||||
|
||||
uni.uploadFile({
|
||||
url: basePath + '/app/safetymeeting/edit',
|
||||
filePath: livePhotoPath,
|
||||
name: 'livePhoto',
|
||||
formData: {
|
||||
SAFETY_MEETING_ID: this.SAFETY_MEETING_ID,
|
||||
SIGNATUREPICTURE: this.SIGNATUREPICTURE,
|
||||
ATTENDANCE_STATUS: '1',
|
||||
},
|
||||
success: uploadRes => {
|
||||
const data = JSON.parse(uploadRes.data);
|
||||
uni.hideLoading();
|
||||
if (data.result === 'success') {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
this.$refs.showHiddenWindow.close();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '提交失败: ' + data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
uploadFilePromise(filePath, name, locationAddress) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: basePath + '/app/safetymeeting/edit',
|
||||
filePath: filePath,
|
||||
name: name,
|
||||
formData: {
|
||||
SAFETY_MEETING_ID: this.SAFETY_MEETING_ID,
|
||||
ATTENDANCE_STATUS: '1',
|
||||
LATITUDE: this.latitude,
|
||||
LONGITUDE: this.longitude,
|
||||
LOCATIONADDRESS: locationAddress
|
||||
},
|
||||
success: uploadRes => {
|
||||
const data = JSON.parse(uploadRes.data);
|
||||
if (data.result === 'success') {
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(data.message);
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
reject('上传失败');
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 封装一个上传数据的函数，包括位置信息、实时照片和签字图片
|
||||
// formData(latitude, longitude) {
|
||||
// uni.showLoading({
|
||||
// title: '提交中...'
|
||||
// });
|
||||
// const livePhotoPath =baseImgPath + this.liveImgs[0].FILEPATH;
|
||||
// const signPhotoPath = this.signImgList[0].filePath;
|
||||
//
|
||||
// uni.uploadFile({
|
||||
// url: basePath + '/app/safetymeeting/edit',
|
||||
// filePath: livePhotoPath,
|
||||
// name: 'livePhoto',
|
||||
// formData: {
|
||||
// SAFETY_MEETING_ID: this.SAFETY_MEETING_ID,
|
||||
// SIGNATUREPICTURE: this.SIGNATUREPICTURE,
|
||||
// ATTENDANCE_STATUS: '1',
|
||||
// },
|
||||
// success: uploadRes => {
|
||||
// const data = JSON.parse(uploadRes.data);
|
||||
// uni.hideLoading();
|
||||
// if (data.result === 'success') {
|
||||
// uni.showToast({
|
||||
// title: '提交成功',
|
||||
// icon: 'success'
|
||||
// });
|
||||
// this.$refs.showHiddenWindow.close();
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '提交失败: ' + data.message,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// fail: () => {
|
||||
// uni.hideLoading();
|
||||
// uni.showToast({
|
||||
// title: '上传失败',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
addMeeting() {
|
||||
if (this.$refs.showHiddenWindow) {
|
||||
// 清空实时照片和签字图片数组
|
||||
|
|
|
|||
Loading…
Reference in New Issue