mirror of
https://gitee.com/java110/PropertyApp.git
synced 2026-02-24 05:46:09 +08:00
优化巡检图片功能
This commit is contained in:
wuxw
parent
cc4ffcb259
commit
bd7cf76402
@ -64,6 +64,9 @@ const listInspectionTasks = baseUrl + "app/inspectionTask.listInspectionTasks";
|
||||
//巡检任务详情
|
||||
const listInspectionTaskDetails = baseUrl + 'app/inspectionTaskDetail.listInspectionTaskDetails';
|
||||
|
||||
//巡检
|
||||
const updateInspectionTaskDetail = baseUrl + 'app/inspectionTaskDetail.updateInspectionTaskDetail'
|
||||
|
||||
|
||||
module.exports = {
|
||||
baseUrl: baseUrl,
|
||||
@ -96,5 +99,6 @@ module.exports = {
|
||||
listAdvertPhoto: listAdvertPhoto,
|
||||
saveOwnerRepair:saveOwnerRepair,
|
||||
listInspectionTasks:listInspectionTasks,
|
||||
listInspectionTaskDetails:listInspectionTaskDetails
|
||||
listInspectionTaskDetails:listInspectionTaskDetails,
|
||||
updateInspectionTaskDetail:updateInspectionTaskDetail
|
||||
};
|
||||
@ -4,43 +4,92 @@
|
||||
* add by wuxw 2020-01-01 美丽的夏都西宁
|
||||
*/
|
||||
class Base64Factory {
|
||||
constructor() {}
|
||||
constructor() {}
|
||||
|
||||
static urlTobase64(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: url,
|
||||
method:'GET',
|
||||
responseType: 'arraybuffer',
|
||||
success: ress => {
|
||||
let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64
|
||||
base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
|
||||
console.log(base64);
|
||||
resolve(base64);
|
||||
},
|
||||
fail: function (e) {
|
||||
console.log(e);
|
||||
reject(e);
|
||||
}
|
||||
});
|
||||
/* wx.getFileSystemManager().readFile({
|
||||
filePath: url,
|
||||
//选择图片返回的相对路径
|
||||
encoding: 'base64',
|
||||
//编码格式
|
||||
success: res => {
|
||||
//成功的回调
|
||||
//console.log('data:image/png;base64,' + res.data);
|
||||
let base64 = 'data:image/png;base64,' + res.data;
|
||||
resolve(base64);
|
||||
},
|
||||
fail: function (e) {
|
||||
console.log(e);
|
||||
reject(e);
|
||||
}
|
||||
}); */
|
||||
});
|
||||
}
|
||||
static getLocalFilePath(path) {
|
||||
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf(
|
||||
'_downloads') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('file://') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('/storage/emulated/0/') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('/') === 0) {
|
||||
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
|
||||
if (localFilePath !== path) {
|
||||
return localFilePath
|
||||
} else {
|
||||
path = path.substr(1)
|
||||
}
|
||||
}
|
||||
return '_www/' + path
|
||||
}
|
||||
|
||||
static urlTobase64(url) {
|
||||
//url = Base64Factory.getLocalFilePath(url);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log('url', url);
|
||||
// #ifdef H5
|
||||
let imgData;
|
||||
let reader = new FileReader();
|
||||
getImageBlob(url, function(blob) {
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
reader.onload = function(e) {
|
||||
imgData = e.target.result;
|
||||
resolve(imgData);
|
||||
};
|
||||
|
||||
function getImageBlob(_url, cb) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open("get", _url, true);
|
||||
xhr.responseType = "blob";
|
||||
xhr.onload = function() {
|
||||
if (this.status == 200) {
|
||||
if (cb) cb(this.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
let _imageBase64List = '';
|
||||
plus.io.resolveLocalFileSystemURL(url,
|
||||
function(entry) {
|
||||
// 可通过entry对象操作test.html文件
|
||||
entry.file(function(file) {
|
||||
var fileReader = new plus.io.FileReader();
|
||||
fileReader.readAsDataURL(file);
|
||||
fileReader.onloadend = function(evt) {
|
||||
_imageBase64List = _imageBase64List.concat(evt.target.result);
|
||||
resolve(_imageBase64List);
|
||||
}
|
||||
})
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.getFileSystemManager().readFile({
|
||||
filePath: url, //选择图片返回的相对路径
|
||||
encoding: 'base64', //编码格式
|
||||
success: res => { //成功的回调
|
||||
//console.log('data:image/png;base64,' + res.data);
|
||||
let base64 = 'data:image/png;base64,' + res.data;
|
||||
resolve(base64);
|
||||
},
|
||||
fail: function(e) {
|
||||
console.log(e);
|
||||
reject(e);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -11,9 +11,26 @@
|
||||
<button class="cu-btn line-green block margin-tb-sm lg " @click="_excuteInspection(item)">
|
||||
<text class="cuIcon-upload"></text>巡检</button>
|
||||
</view>
|
||||
<view v-else class="margin-top-sm margin-right grid text-center col-3 grid-square">
|
||||
<view class="" v-for="(_item,index) in item.photos" :key="index">
|
||||
<image mode="scaleToFill" :src="_item.url" @tap="preview(_item.url)"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="cu-modal" :class="viewImage?'show':''">
|
||||
<view class="cu-dialog">
|
||||
<view class="bg-img" :style="'background-image: url('+ viewImageSrc +');height:800rpx;'">
|
||||
<view class="cu-bar justify-end text-white">
|
||||
<view class="action" @tap="closeViewImage()">
|
||||
<text class="cuIcon-close "></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -27,7 +44,9 @@
|
||||
communityId:'',
|
||||
userId:'',
|
||||
userName:'',
|
||||
taskDetails:[]
|
||||
taskDetails:[],
|
||||
viewImage:false,
|
||||
viewImageSrc:''
|
||||
|
||||
}
|
||||
},
|
||||
@ -38,6 +57,9 @@
|
||||
let _userInfo = this.java110Context.getUserInfo();
|
||||
this.userName = _userInfo.userName;
|
||||
this.userId = _userInfo.userId;
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this._queryTaskDetail();
|
||||
},
|
||||
methods: {
|
||||
@ -60,7 +82,16 @@
|
||||
// res.data.inspectionTaskDetails.forEach(function(item, index) {
|
||||
// item.timeStr = item.planInsTime.replace(/:\d{1,2}$/, ' ');
|
||||
// });
|
||||
_that.taskDetails = res.data.inspectionTaskDetails;
|
||||
let _inspectionTaskDetails = res.data.inspectionTaskDetails;
|
||||
_inspectionTaskDetails.forEach(function(_item){
|
||||
if(_item.state == '20200407'){
|
||||
_item.photos.forEach(function(_photoTmp) {
|
||||
_photoTmp.url = _that.java110Constant.url.hcBaseUrl + _photoTmp.url;
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
_that.taskDetails = _inspectionTaskDetails;
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -73,6 +104,13 @@
|
||||
uni.navigateTo({
|
||||
url:'/pages/excuteOneInspection/excuteOneInspection?taskDetailId='+_item.taskDetailId+"&taskId="+_item.taskId+"&inspectionId="+_item.inspectionId+"&inspectionName="+_item.inspectionName
|
||||
});
|
||||
},
|
||||
preview: function(_src) {
|
||||
this.viewImage = true;
|
||||
this.viewImageSrc = _src;
|
||||
},
|
||||
closeViewImage: function() {
|
||||
this.viewImage = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,18 +19,18 @@
|
||||
巡检图片
|
||||
</view>
|
||||
<view class="action">
|
||||
{{photoList.length}}/4
|
||||
{{imgList.length}}/4
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<view class="bg-img" v-for="(img,index) in photoList" :key= "index" bindtap="ViewImage" :data-url="photoList[index]">
|
||||
<image :src='photoList[index]' mode='aspectFill'></image>
|
||||
<view class="bg-img" v-for="(img,index) in imgList" :key= "index" bindtap="ViewImage" :data-url="imgList[index]">
|
||||
<image :src='imgList[index]' mode='aspectFill'></image>
|
||||
<view class="cu-tag bg-red" @tap="removePhoto(index)" :data-index="index">
|
||||
<text class="cuIcon-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="solids" @tap="ChooseImage" v-if="photoList.length<4">
|
||||
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
|
||||
<text class="cuIcon-cameraadd"></text>
|
||||
</view>
|
||||
</view>
|
||||
@ -59,7 +59,6 @@
|
||||
description:'',
|
||||
photos:[],
|
||||
imgList:[],
|
||||
photoList:[],
|
||||
patrolIndex:0,
|
||||
communityId:'',
|
||||
userId:'',
|
||||
@ -82,23 +81,27 @@
|
||||
this.patrolTypeName = this.patrols[e.detail.value];
|
||||
this.patrolType = this.patrolTypes[e.detail.value];
|
||||
},
|
||||
afterRead: function(event) {
|
||||
const {
|
||||
file
|
||||
} = event.detail;
|
||||
|
||||
let _that = this;
|
||||
|
||||
const {
|
||||
photoList = []
|
||||
} = this;
|
||||
photoList.push(file);
|
||||
this.photoList = photoList;
|
||||
|
||||
factory.base64.urlTobase64(file.path).then(function(_baseInfo) {
|
||||
_that.photos.push(_baseInfo);
|
||||
removePhoto: function(e) {
|
||||
console.log(e.detail.index);
|
||||
let _imgList = [];
|
||||
this.imgList.forEach(function(item, index) {
|
||||
if (index != e.detail.index) {
|
||||
_imgList.push(item);
|
||||
}
|
||||
});
|
||||
console.log("data信息：", this);
|
||||
let _photos = [];
|
||||
this.photos.forEach(function(item, index) {
|
||||
if (index != e.detail.index) {
|
||||
_photos.push(item);
|
||||
}
|
||||
});
|
||||
this.photos = _photos;
|
||||
this.imgList = _imgList;
|
||||
},
|
||||
deleteImage: function(e) {
|
||||
console.log(e);
|
||||
let imageArr = this.$data.imgList;
|
||||
imageArr.splice(e, 1);
|
||||
},
|
||||
ChooseImage: function(e) {
|
||||
let that = this;
|
||||
@ -108,19 +111,16 @@
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
if (that.$data.photoList.length) {
|
||||
that.$data.photoList.push(res.tempFilePaths[0]);
|
||||
} else {
|
||||
that.$data.photoList = res.tempFilePaths;
|
||||
}
|
||||
that.$data.imgList.push(res.tempFilePaths[0]);
|
||||
let _base64Photo = '';
|
||||
that.java110Factory.base64.urlTobase64(res.tempFilePaths[0]).then(function(_res) {
|
||||
_base64Photo = _res;
|
||||
console.log('base64', _base64Photo);
|
||||
that.photos.push(_base64Photo);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
removePhoto: function(e) {
|
||||
console.log(e);
|
||||
let imageArr = this.$data.photoList;
|
||||
imageArr.splice(e, 1);
|
||||
},
|
||||
_submitExcuteInspection: function() {
|
||||
/**
|
||||
* taskId:'',
|
||||
@ -174,7 +174,7 @@
|
||||
});
|
||||
} else {
|
||||
this.java110Context.request({
|
||||
url: this.java110Constant.url.saveOwnerRepair, // http://hc.demo.winqi.cn:8012/appApi/ownerRepair.saveOwnerRepair
|
||||
url: this.java110Constant.url.updateInspectionTaskDetail, // http://hc.demo.winqi.cn:8012/appApi/ownerRepair.saveOwnerRepair
|
||||
header: this.java110Context.getHeaders(),
|
||||
method: "POST",
|
||||
data: obj, //动态数据
|
||||
|
||||
Loading…
Reference in New Issue
Block a user