You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
446 lines
10 KiB
446 lines
10 KiB
<template>
|
|
<view class="addRecord">
|
|
<navbar title="拍照/验收" :isCenter="true" :back="true"></navbar>
|
|
<u-loading-page bg-color="#aaaaaa" loading-text="上传中" loading-mode="spinner" color="#fff":loading="loading"></u-loading-page>
|
|
<view style="border-top:1px solid #EAEAEA;padding:40rpx 44rpx;">
|
|
<u--form
|
|
labelPosition="left"
|
|
:model="form"
|
|
:borderBottom="false"
|
|
:rules="rules"
|
|
ref="uForm"
|
|
labelWidth="70"
|
|
|
|
>
|
|
<u-form-item
|
|
label="验收项:"
|
|
prop="form.acceptance"
|
|
@click="showoption = true;"
|
|
ref="item1"
|
|
:borderBottom="false"
|
|
>
|
|
<view class="selectStyle">
|
|
<u--input
|
|
v-model="form.acceptance"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择"
|
|
border="none"
|
|
></u--input>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</view>
|
|
</u-form-item>
|
|
<!-- <u-form-item
|
|
:borderBottom="false"
|
|
label="调试记录:"
|
|
prop="record.record"
|
|
|
|
ref="item1"
|
|
>
|
|
<u--textarea v-model="form.record" placeholder="请输入内容" ></u--textarea>
|
|
|
|
</u-form-item> -->
|
|
<u-form-item
|
|
label="拍照指南:"
|
|
prop="form.instr"
|
|
ref="item1"
|
|
:borderBottom="false"
|
|
>
|
|
<view>
|
|
水处理及定压补水、流量开关、水管路、水泵、电控柜、基础支架、机房整体、化霜水排放等图片。
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="上传图片:"
|
|
ref="item1"
|
|
:borderBottom="false"
|
|
>
|
|
<view class="contentItem">
|
|
<view class="imgContainer" v-for="(item,index) in imageList" :key="index">
|
|
<image mode="aspectFill" :src="item.url" @click="prevwImage(item)">
|
|
</image>
|
|
<view class="close" @click="deletePic(index)">
|
|
<u-icon name="close" color="#aaaaaa" size="10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="plus" @click="imageRecording" v-if="imageList.length<6">
|
|
<u-icon name="plus" color="#8EC31F" size="30"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 水印 -->
|
|
<canvas style="border: 1px solid green;position: absolute;left: -5000px;" :style="{'width':w,'height': h}"
|
|
canvas-id="firstCanvas" ref="mycanvas"></canvas>
|
|
|
|
</u-form-item>
|
|
|
|
</u--form>
|
|
<view class="btn" @click="addLogHandle">
|
|
保存
|
|
</view>
|
|
|
|
</view>
|
|
<u-action-sheet
|
|
:show="showoption"
|
|
:actions="actions"
|
|
@close="showoption = false"
|
|
@select="selectHandle"
|
|
>
|
|
</u-action-sheet>
|
|
<u-toast ref="uToast"></u-toast>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/navbar.vue'
|
|
import {addLogHandle} from '@/common/api.js'
|
|
import {getToken} from '@/common/auth.js'
|
|
|
|
export default {
|
|
components:{navbar},
|
|
data() {
|
|
return {
|
|
id:null,
|
|
showoption: false,
|
|
form:{
|
|
acceptance:'',
|
|
record:'',
|
|
instr:''
|
|
},
|
|
actions: [
|
|
|
|
],
|
|
rules: {
|
|
// 'form.record': {
|
|
// required: true,
|
|
// message: '请填写调试记录',
|
|
// trigger: ['blur', 'change']
|
|
// },
|
|
'form.acceptance': {
|
|
required: true,
|
|
message: '请选择验收项',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
},
|
|
//水印
|
|
w: 0,
|
|
h: 0,
|
|
imgPath: "",
|
|
imageList: [],
|
|
type: "tpurl",
|
|
loading:false,
|
|
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id=option.id
|
|
|
|
let arr = uni.getStorageSync('acceptance')
|
|
console.log(arr)
|
|
this.actions=[]
|
|
arr.forEach(item=>{
|
|
this.actions.push({name:item.title})
|
|
|
|
})
|
|
},
|
|
methods: {
|
|
|
|
|
|
addLogHandle(){
|
|
let image;
|
|
if(this.imageList.length>0){
|
|
let arr = this.imageList.map(item=>{
|
|
return item.path
|
|
})
|
|
image=arr.join(',')
|
|
}else{
|
|
image=''
|
|
}
|
|
let params={
|
|
wordorder_id:this.id.toString(),
|
|
acceptance:this.form.acceptance,
|
|
record:this.form.record,
|
|
image:image,
|
|
custom: { auth: true },
|
|
}
|
|
addLogHandle(params).then(res=>{
|
|
console.log(res,"iiiii")
|
|
if(res.code==1){
|
|
this.$refs.uToast.show({
|
|
message:'添加成功'
|
|
});
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
}
|
|
})
|
|
},
|
|
selectHandle(val){
|
|
this.form.acceptance = val.name
|
|
},
|
|
//拍照:压缩
|
|
imageRecording() {
|
|
let that = this;
|
|
uni.chooseMedia({
|
|
count: 1,
|
|
mediaType: ['image'],
|
|
sizeType: ['compressed'],
|
|
quality: 0.8,
|
|
sourceType: ['camera'], //选择图片的来源
|
|
success: res => {
|
|
//图片数组
|
|
let tempFilePath = res.tempFiles[0].tempFilePath;
|
|
console.log(res)
|
|
uni.compressImage({
|
|
src: tempFilePath,
|
|
quality: 30,
|
|
width: '40%',
|
|
height: '40%',
|
|
success: res2 => {
|
|
console.log(res2,"000")
|
|
that.getImageInfo(res2.tempFilePath);
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
})
|
|
},
|
|
//获取压缩图片信息
|
|
getImageInfo(e) {
|
|
this.loading = true;
|
|
let that = this;
|
|
uni.getImageInfo({
|
|
src: e,
|
|
success: (res) => {
|
|
that.canvasWather(res)
|
|
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
})
|
|
},
|
|
//水印
|
|
canvasWather(res) {
|
|
let that = this;
|
|
let ctx = uni.createCanvasContext('firstCanvas', this);
|
|
that.imgPath = res.path
|
|
that.w = res.width / 2 + 'px';
|
|
that.h = res.height / 2 + 'px';
|
|
// let userInfo = uni.getStorageSync('USER_INFO');
|
|
let nowTime = that.newDate(Date.now());
|
|
setTimeout(() => {
|
|
// this.ymd = this.$refs.ymdHms.dateShow;
|
|
//初始化画布
|
|
ctx.fillRect(0, 0, res.width / 2, res.height / 2);
|
|
// //将图片src放到cancas内，宽高为图片大小
|
|
ctx.drawImage(res.path, 0, 0, res.width / 2, res.height / 2);
|
|
ctx.beginPath()
|
|
ctx.setFontSize(8)
|
|
ctx.setFillStyle('red');
|
|
let firstY = res.height / 2 - 60;
|
|
// ctx.fillText(realName, 10, res.height / 2 - 60)
|
|
ctx.fillText(`时间${nowTime}`, 5, res.height / 2 - 10)
|
|
ctx.draw(false, () => {
|
|
uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
|
|
canvasId: 'firstCanvas',
|
|
success: (res) => {
|
|
// that.saveFile(res);
|
|
uni.uploadFile({
|
|
url: that.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
|
|
filePath: res.tempFilePath,
|
|
name: 'file',
|
|
formData: {
|
|
user: 'test',
|
|
token:getToken()
|
|
},
|
|
success: (res) => {
|
|
if(JSON.parse(res.data).code==1){
|
|
setTimeout(() => {
|
|
this.imageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
|
|
this.loading = false;
|
|
}, 1000)
|
|
}else{
|
|
uni.$u.toast(JSON.parse(res.data).msg)
|
|
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
console.log(res,"rrr")
|
|
}
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
|
|
}
|
|
})
|
|
})
|
|
}, 500)
|
|
},
|
|
//保存本地
|
|
saveFile(res) {
|
|
let that = this;
|
|
uni.saveFile({
|
|
tempFilePath: res.tempFilePath,
|
|
success: (res2) => {
|
|
//图片列表获取
|
|
that.imageList.push(res2.savedFilePath)
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
})
|
|
},
|
|
newDate(time) {
|
|
var date = new Date(time)
|
|
var y = date.getFullYear()
|
|
var m = date.getMonth() + 1
|
|
m = m < 10 ? '0' + m : m
|
|
var d = date.getDate()
|
|
d = d < 10 ? '0' + d : d
|
|
var h = date.getHours()
|
|
h = h < 10 ? '0' + h : h
|
|
var minute = date.getMinutes()
|
|
minute = minute < 10 ? '0' + minute : minute
|
|
var s = date.getSeconds()
|
|
s = s < 10 ? '0' + s : s
|
|
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
|
|
},
|
|
prevwImage(path) {
|
|
console.log("888",path)
|
|
let url = [path.url]
|
|
uni.previewImage({
|
|
urls: url,
|
|
success: (res) => {
|
|
},
|
|
fail: () => {
|
|
|
|
}
|
|
});
|
|
},
|
|
//上传照片
|
|
// uploadFilePromise(url) {
|
|
// return new Promise((resolve, reject) => {
|
|
// let a = uni.uploadFile({
|
|
// url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
|
|
// filePath: url,
|
|
// name: 'file',
|
|
// formData: {
|
|
// user: 'test',
|
|
// token:getToken()
|
|
// },
|
|
// success: (res) => {
|
|
// if(JSON.parse(res.data).code==1){
|
|
// setTimeout(() => {
|
|
// this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
|
|
// resolve(res.data)
|
|
// }, 1000)
|
|
// }else{
|
|
// uni.$u.toast(JSON.parse(res.data).msg)
|
|
|
|
// resolve(res.data)
|
|
// }
|
|
// },
|
|
// fail: (res) => {
|
|
// console.log(res,"rrr")
|
|
// }
|
|
// });
|
|
// })
|
|
// },
|
|
//删除图片
|
|
deletePic(index) {
|
|
// this[`fileList${event.name}`].splice(event.index, 1)
|
|
this.imageList.splice(index, 1)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.addRecord{
|
|
min-height: calc(100vh);
|
|
background-color: #ffffff;
|
|
|
|
}
|
|
/deep/.u-upload__deletable{
|
|
height: 50rpx !important;
|
|
width: 50rpx !important;
|
|
z-index:999 !important;
|
|
.u-icon__icon{
|
|
font-size: 40rpx !important;
|
|
line-height: 40rpx !important;
|
|
|
|
}
|
|
}
|
|
|
|
.btn{
|
|
line-height: 98rpx;
|
|
height: 98rpx;
|
|
background: #8EC31F;
|
|
border-radius: 10px;
|
|
// margin:0 24rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-top:80rpx;
|
|
}
|
|
.selectStyle{
|
|
display: flex;
|
|
padding: 30rpx;
|
|
background: #FFFFFF;
|
|
border: 1px solid #E5E7EA;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
|
|
|
|
.contentItem{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.plus{
|
|
width:200rpx;
|
|
height:200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #FFFFFF;
|
|
border: 1px solid #E5E7EA;
|
|
border-radius: 10rpx;
|
|
margin:0rpx 10rpx;
|
|
}
|
|
.imgContainer{
|
|
margin:0rpx 10rpx;
|
|
position: relative;
|
|
image{
|
|
width:200rpx;
|
|
height:200rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.close{
|
|
position: absolute;
|
|
z-index:99;
|
|
top:10rpx;
|
|
right:10rpx;
|
|
background-color: #fff;
|
|
border-radius:50%;
|
|
padding:10rpx;
|
|
}
|
|
}
|
|
}
|
|
/deep/.u-transition{
|
|
z-index:1000;
|
|
}
|
|
|
|
</style>
|
|
|