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

行车三检带水印实时拍照

dev
chenxinying 2024-03-22 17:43:13 +08:00
parent 644b805ea1
commit c0fc40cb94
1 changed files with 195 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

267
pages/application/driving-inspections/driving-item-check-list.vue
View File

@ -33,25 +33,46 @@
</view> </view>
</view> </view>
<view class="check-items"> <view class="check-items">
<view class="cu-bar bg-white margin-top"> <!-- <view class="cu-bar bg-white margin-top">-->
<view class="action"> <!-- <view class="action">-->
检查照片 <!-- 检查照片-->
<!-- </view>-->
<!-- <view class="action">-->
<!-- {{ checkimgList.length }}/4-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="cu-form-group">-->
<!-- <view class="grid col-4 grid-square flex-sub">-->
<!-- <view class="bg-img" v-for="(item,index) in checkimgList" :key="index" @tap="viewImage(index,'checkimgList')">-->
<!-- <image :src="baseImgPath + item.filePath" mode="aspectFill"></image>-->
<!-- <view class="cu-tag bg-red" @tap.stop="delImg" data-type="2" :data-index="index">-->
<!-- <text class='cuIcon-close'></text>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="solids" @tap="chooseImage()" v-if="checkimgList.length<4">-->
<!-- <text class='cuIcon-cameraadd'></text>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<view class="de-drawer">
<view class="cu-bar bg-white">
<view class="action">实时照片</view>
</view> </view>
<view class="action"> <view class="cu-form-group">
{{ checkimgList.length }}/4 <view class="grid col-4 grid-square flex-sub">
</view> <view class="bg-img" v-for="(item,index) in liveImgs" :key="index">
</view> <image :src="baseImgPath + item.filePath" mode="aspectFill"></image>
<view class="cu-form-group"> <!-- 删除图片按钮 -->
<view class="grid col-4 grid-square flex-sub"> <view class="cu-tag bg-red" @tap.stop="DelImg(index)" data-type="0">
<view class="bg-img" v-for="(item,index) in checkimgList" :key="index" @tap="viewImage(index,'checkimgList')"> <text class='cuIcon-close'></text>
<image :src="baseImgPath + item.filePath" mode="aspectFill"></image> </view>
<view class="cu-tag bg-red" @tap.stop="delImg" data-type="2" :data-index="index"> </view>
<text class='cuIcon-close'></text> <!-- 上传图片按钮，仅当没有图片时显示 -->
<view class="solids" @tap="ChooseImage"
v-if="liveImgs.length < 4">
<text class='cuIcon-cameraadd'></text>
</view> </view>
</view> </view>
<view class="solids" @tap="chooseImage()" v-if="checkimgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -77,6 +98,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>
<view class="bottom-fixed" @tap.stop="openAuth('ACCESS_FINE_LOCATION')"> <view class="bottom-fixed" @tap.stop="openAuth('ACCESS_FINE_LOCATION')">
<button :loading="buttonloading" class="cu-btn bg-green" @click="$noMultipleClicks(goSubmit)">提交</button> <button :loading="buttonloading" class="cu-btn bg-green" @click="$noMultipleClicks(goSubmit)">提交</button>
</view> </view>
@ -104,6 +126,7 @@
checkimgList:[], checkimgList:[],
modalName:null, modalName:null,
imgList:[], imgList:[],
liveImgs: [],
} }
}, },
onLoad(e){ onLoad(e){
@ -123,74 +146,174 @@
} }
}, },
methods: { methods: {
delImg(e) { ChooseImage() {
var _this = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['camera'],
success: (res) => {
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(`当前时间: ${_this.todayDate}`, 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.uploadFilePromise(img.FILEPATH, 'file')
// _this.liveImgs.push(img)
console.log(_this.liveImgs)
// .then(() => {
// uni.showToast({
// title: '实时照片上传成功',
// icon: 'success'
// });
// }).catch(error => {
// uni.showToast({
// title: '实时照片上传失败: ' + error,
// icon: 'none'
// });
// });
}
}, _this);
});
},
fail: function () {
uni.showToast({
title: '获取位置信息失败',
icon: 'none'
});
}
});
}
});
},
DelImg(index) {
var _this = this; var _this = this;
uni.showModal({ uni.showModal({
title: '秦安双控',
content: '确定要删除这张图片吗？', content: '确定要删除这张图片吗？',
cancelColor: "#000000", cancelColor: "#000000",
cancelText: '取消', cancelText: '取消',
confirmText: '确定', confirmText: '确定',
success: res => { success: res => {
if (res.confirm) { if (res.confirm) {
uni.request({ _this.liveImgs.splice(index,1)
url: basePath+'/app/eightwork/deleteFile',
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
FILE_PATH:_this.checkimgList[e.currentTarget.dataset.index].filePath
},
success: (res) => {
uni.showToast({
icon: 'none',
title: '删除成功',
duration: 1500
});
this.checkimgList.splice(e.currentTarget.dataset.index, 1)
},
fail: (err) => {
uni.showModal({
content: "删除失败",
showCancel: false
});
}
})
} }
} }
}) })
}, },
chooseImage() {
uni.chooseImage({ uploadFilePromise(filePath, name) {
count: 1, //默认9 return new Promise((resolve, reject) => {
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 uni.uploadFile({
sourceType: ['camera', 'album'], //从相册选择 url: basePath + '/app/drivingtype/saveFile',
success: (res) => { filePath: filePath,
uni.uploadFile({ name: name,
url: basePath+'/app/eightwork/saveFile', formData: {
filePath: res.tempFilePaths[0], CORPINFO_ID:loginUser.CORPINFO_ID,
name: 'file', },
formData: { success: ({data}) => {
CORPINFO_ID:loginUser.CORPINFO_ID, let img = {};
}, img.filePath = JSON.parse(data).FILE_PATH;
success: ({data}) => { this.liveImgs.push(img)
let img = {}; console.log(this.liveImgs)
img.filePath = JSON.parse(data).FILE_PATH; },
this.checkimgList.push(img) fail: (err) => {
console.log(this.checkimgList) uni.showModal({
}, content: "图片上传失败",
fail: (err) => { showCancel: false
uni.showModal({ });
content: "图片上传失败", }
showCancel: false });
});
}
})
}
}); });
}, },
// delImg(e) {
// var _this = this;
// uni.showModal({
// title: '秦安双控',
// content: '确定要删除这张图片吗？',
// cancelColor: "#000000",
// cancelText: '取消',
// confirmText: '确定',
// success: res => {
// if (res.confirm) {
// uni.request({
// url: basePath+'/app/eightwork/deleteFile',
// method: 'POST',
// dataType: 'json',
// header: {
// 'Content-type':'application/x-www-form-urlencoded'
// },
// data: {
// FILE_PATH:_this.checkimgList[e.currentTarget.dataset.index].filePath
// },
// success: (res) => {
// uni.showToast({
// icon: 'none',
// title: '删除成功',
// duration: 1500
// });
// this.checkimgList.splice(e.currentTarget.dataset.index, 1)
// },
// fail: (err) => {
// uni.showModal({
// content: "删除失败",
// showCancel: false
// });
// }
// })
// }
// }
// })
// },
// chooseImage() {
// uni.chooseImage({
// count: 1, //默认9
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
// sourceType: ['camera', 'album'], //从相册选择
// success: (res) => {
// uni.uploadFile({
// url: basePath+'/app/eightwork/saveFile',
// filePath: res.tempFilePaths[0],
// name: 'file',
// formData: {
// CORPINFO_ID:loginUser.CORPINFO_ID,
// },
// success: ({data}) => {
// let img = {};
// img.filePath = JSON.parse(data).FILE_PATH;
// this.checkimgList.push(img)
// console.log(this.checkimgList)
// },
// fail: (err) => {
// uni.showModal({
// content: "图片上传失败",
// showCancel: false
// });
// }
// })
// }
// });
// },
/* /*
*手写板 *手写板
*/ */
@ -385,7 +508,7 @@
title: '请稍候' title: '请稍候'
}) })
if (_this.checkimgList.length <= 0) { if (_this.liveImgs.length <= 0) {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '请上传车辆检查照片', title: '请上传车辆检查照片',
@ -411,7 +534,7 @@
formData.USER_ID = loginUser.USER_ID formData.USER_ID = loginUser.USER_ID
formData.USER_NAME = loginUser.USERNAME formData.USER_NAME = loginUser.USERNAME
formData.CHECKTYPE_ID = this.CHECKTYPE_ID formData.CHECKTYPE_ID = this.CHECKTYPE_ID
formData.IMG_PATH = this.checkimgList.map(item => { formData.IMG_PATH = this.liveImgs.map(item => {
return item.filePath return item.filePath
}).join(",") }).join(",")
formData.checklist = JSON.stringify(this.list) formData.checklist = JSON.stringify(this.list)