wangpeng
/
integrated_traffic_uniapp
forked from integrated_whb/UniApp_integrated_whb
1
0
Fork 0
Code Pull Requests Activity

安全例会优化->实时照片添加水印，实时照片和签字图片上传优化

dev
WenShiJun 2024-03-11 18:08:35 +08:00
parent 5be53f55b0
commit 081d0dab1d
1 changed files with 138 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
pages/application/safetymeeting/safetymeeting-detail.vue
View File

@ -38,6 +38,7 @@
</view> </view>
<view class="cu-tabbar-height"></view> <view class="cu-tabbar-height"></view>
</scroll-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"> <uni-drawer ref="showHiddenWindow" mode="right" :mask-click="true">
<scroll-view scroll-y="true" style="height: 100vh;"> <scroll-view scroll-y="true" style="height: 100vh;">
<view class="de-drawer"> <view class="de-drawer">
@ -46,8 +47,7 @@
</view> </view>
<view class="cu-form-group"> <view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub"> <view class="grid col-4 grid-square flex-sub">
<!-- 循环展示隐患图片，因为只允许一张，故使用v-if控制 --> <view class="bg-img" v-if="liveImgs.length > 0"
<view class="bg-img" v-if="liveImgs.length > 0" @tap="ViewImage"
:data-url="liveImgs[0].FILEPATH"> :data-url="liveImgs[0].FILEPATH">
<image :src="liveImgs[0].IMGFILES_ID ? (baseImgPath + liveImgs[0].FILEPATH) : liveImgs[0].FILEPATH" mode="aspectFill"></image> <image :src="liveImgs[0].IMGFILES_ID ? (baseImgPath + liveImgs[0].FILEPATH) : liveImgs[0].FILEPATH" mode="aspectFill"></image>
<!-- 删除图片按钮 --> <!-- 删除图片按钮 -->
@ -63,7 +63,7 @@
</view> </view>
</view> </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> <view class="title">签字</view>
<button class="cu-btn bg-green shadow" @tap="modalShow = true" data-target="Modal">手写签字</button> <button class="cu-btn bg-green shadow" @tap="modalShow = true" data-target="Modal">手写签字</button>
</view> </view>
@ -184,14 +184,58 @@
sizeType: ['original', 'compressed'], sizeType: ['original', 'compressed'],
sourceType: ['camera'], sourceType: ['camera'],
success: (res) => { success: (res) => {
let img = { const tempFilePath = res.tempFilePaths[0];
IMGFILES_ID: '', uni.getLocation({
FILEPATH: res.tempFilePaths[0] type: 'gcj02',
}; geocode: true,
_this.liveImgs = [img]; 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() { DelImg() {
var _this = this; var _this = this;
uni.showModal({ uni.showModal({
@ -229,18 +273,14 @@
}, },
submitMeetingAttendance(permissionID) { submitMeetingAttendance(permissionID) {
var _this = this; var _this = this;
if (this.liveImgs.length === 0 || this.signImgList.length === 0) { if (this.signImgList.length === 0) {
uni.showToast({ uni.showToast({
title: '请上传实时照片和签字图片', title: '请上传签字图片',
icon: 'none' icon: 'none'
}); });
return; return;
} }
this.permissionID = permissionID; this.permissionID = permissionID;
setTimeout(()=>{
this.$refs['authpup'].open();
},200)
uni.getLocation({ uni.getLocation({
type: 'gcj02', type: 'gcj02',
geocode: true, 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}`; 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.longitude = res.longitude;
_this.latitude = res.latitude; _this.latitude = res.latitude;
// 获取位置成功后，上传图片和其他数据 // 循环上传签字图片
uni.showLoading({ const uploadTasks = [];
title: '提交中...' _this.signImgList.forEach(signImg => {
uploadTasks.push(_this.uploadFilePromise(signImg.filePath, 'signPhoto', locationAddress));
}); });
Promise.all(uploadTasks).then(() => {
uni.uploadFile({ // 所有图片上传完成后的处理
url: basePath + '/app/safetymeeting/edit', uni.showToast({
filePath:_this.liveImgs[0].FILEPATH, title: '全部上传成功',
name: 'livePhoto', icon: 'success'
formData: { });
SAFETY_MEETING_ID: _this.SAFETY_MEETING_ID, // 重新加载或更新页面数据等
SIGNATUREPICTURE: _this.SIGNATUREPICTURE, _this.getData();
ATTENDANCE_STATUS: '1', _this.$refs.showHiddenWindow.close();
LATITUDE: _this.longitude, // 上传经度 }).catch(error => {
LONGITUDE: _this.latitude, // 上传纬度 uni.showToast({
LOCATIONADDRESS: locationAddress title: '上传出错: ' + error,
}, icon: 'none'
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();
}
}); });
}, },
fail: function () { fail: function () {
@ -299,49 +317,75 @@
} }
}); });
}, },
uploadFilePromise(filePath, name, locationAddress) {
// 封装一个上传数据的函数，包括位置信息、实时照片和签字图片 return new Promise((resolve, reject) => {
formData(latitude, longitude) { uni.uploadFile({
uni.showLoading({ url: basePath + '/app/safetymeeting/edit',
title: '提交中...' filePath: filePath,
}); name: name,
const livePhotoPath =baseImgPath + this.liveImgs[0].FILEPATH; formData: {
const signPhotoPath = this.signImgList[0].filePath; SAFETY_MEETING_ID: this.SAFETY_MEETING_ID,
ATTENDANCE_STATUS: '1',
uni.uploadFile({ LATITUDE: this.latitude,
url: basePath + '/app/safetymeeting/edit', LONGITUDE: this.longitude,
filePath: livePhotoPath, LOCATIONADDRESS: locationAddress
name: 'livePhoto', },
formData: { success: uploadRes => {
SAFETY_MEETING_ID: this.SAFETY_MEETING_ID, const data = JSON.parse(uploadRes.data);
SIGNATUREPICTURE: this.SIGNATUREPICTURE, if (data.result === 'success') {
ATTENDANCE_STATUS: '1', resolve(data);
}, } else {
success: uploadRes => { reject(data.message);
const data = JSON.parse(uploadRes.data); }
uni.hideLoading(); },
if (data.result === 'success') { fail: () => {
uni.showToast({ reject('上传失败');
title: '提交成功',
icon: 'success'
});
this.$refs.showHiddenWindow.close();
} else {
uni.showToast({
title: '提交失败: ' + data.message,
icon: 'none'
});
} }
}, });
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() { addMeeting() {
if (this.$refs.showHiddenWindow) { if (this.$refs.showHiddenWindow) {
// 清空实时照片和签字图片数组 // 清空实时照片和签字图片数组