607 lines
18 KiB
Vue
607 lines
18 KiB
Vue
<template>
|
||
<view class="selectPage">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
{{isAdd?'选择测量位置':'已测量'}}
|
||
</view>
|
||
<view class="save_btn" v-if="isNetwork" @click="saveImg">缓存</view>
|
||
</headers>
|
||
<view class="content">
|
||
<view class="flex type">
|
||
<view class="title">测量楼栋：</view>
|
||
<picker class="picker" @change="pickerChangeBuild" :value="buildIndex" :range="buildList"
|
||
range-key="buildName">
|
||
<view class="placeholder" v-if="buildIndex===''">请选择</view>
|
||
<view v-else class="uni-input">{{buildList[buildIndex].buildName}}#</view>
|
||
<uni-icons2 class="arrowdown" type="arrowdown"></uni-icons2>
|
||
</picker>
|
||
</view>
|
||
<view class="flex type">
|
||
<view class="title">选择楼层：</view>
|
||
<picker class="picker" @change="pickerChangeFloor" :value="floorIndex" :range="floorList"
|
||
range-key="floorName">
|
||
<view class="placeholder" v-if="floorIndex==='' || floorList.length==0">请选择</view>
|
||
<view v-else class="uni-input">{{floorList[floorIndex].floorName}}F</view>
|
||
<uni-icons2 class="arrowdown" type="arrowdown"></uni-icons2>
|
||
</picker>
|
||
</view>
|
||
<!-- <view class="type">
|
||
<view class="title">测试区域：</view>
|
||
<view class="drawing_wrap" @click="clickDraw">
|
||
<view class="drawing_bg drawing_bg2" id="drawing_bg" ref="drawing"
|
||
:style="{'background-image':'url('+url_config+'image/'+imgUrl+')'}"></view>
|
||
<view class="marker" v-for="(item,index) in markerList" :key="index"
|
||
:style="{top:item.y+'px',left:item.x+'px'}" @click.stop="goDetails(item.id)">
|
||
<image class="addrImg" v-if="item.resultType==1" src="/static/addr_green.png"></image>
|
||
<image class="addrImg" v-else src="/static/addr_red.png"></image>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<movable-area class="movableBox" ref="movableBox">
|
||
<movable-view direction="all" @scale="onScale" @change="changePosFn" :x="changePos.x" :y="changePos.y" :friction="100" scale="true" scale-min="0.1" scale-max="10" :scale-value="changePos.scale">
|
||
<view class="drawing_wrap" @click="clickDraw2">
|
||
<!-- <img-cache class="drawing_bg" ref="drawing" :src="url_config+'image/'+imgUrl" :style="{width:imgOriginW+'px',height:imgOriginH+'px'}"></img-cache> -->
|
||
<!-- <image class="drawing_bg" ref="drawing" src="_doc/uniapp_save/16377541225310.png" :style="{width:imgOriginW+'px',height:imgOriginH+'px'}"></image> -->
|
||
<image class="drawing_bg" ref="drawing" :src="smImg(url_config+'image/'+imgUrl)" :style="{width:imgOriginW+'px',height:imgOriginH+'px'}"></image>
|
||
<!-- @click.stop="goDetails(item.id)" -->
|
||
<view class="marker" v-for="(item,index) in markerList" :key="index" :style="{top:(item.coordinateY - 20)+'px',left:item.coordinateX+'px'}" >
|
||
<!-- <view class="marker" v-for="(item,index) in markerList" :key="index" :style="{top:item.y+'px',left:item.x+'px'}" > -->
|
||
<view style="text-align: center;color: red;">{{item.surveyNo}}</view>
|
||
<image class="addrImg" v-if="item.resultType==1" src="/static/addr_green.png"></image>
|
||
<image class="addrImg" v-else src="/static/addr_red.png"></image>
|
||
</view>
|
||
</view>
|
||
</movable-view>
|
||
</movable-area>
|
||
<view class="start_wrap">
|
||
<view class="start_btn" v-if="isCheck" @click="goDetails('')">确认</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { resolveFile, getDirSize, removeDir, formatSize, storage } from '@/components/img-cache';
|
||
let offsetHeight = 0;
|
||
let offsetWidth = 0;
|
||
export default {
|
||
data() {
|
||
return {
|
||
projectSn: '',
|
||
buildIndex: '',
|
||
buildList: [],
|
||
floorList: [],
|
||
floorIndex: '',
|
||
imgUrl: '',
|
||
preserveX: 0,
|
||
preserveY: 0,
|
||
coordinateX: 0, //实际位置
|
||
coordinateY: 0, //实际位置
|
||
markerList: [],
|
||
isAdd: true,
|
||
changePos: {
|
||
"y": 0,
|
||
"scale": 0.5,
|
||
"x": 0
|
||
},
|
||
imgRatioX:1,
|
||
imgRatioY:1,
|
||
imgOriginW:0,
|
||
imgOriginH:0,
|
||
movableBoxTop:0,
|
||
imgScale: 0.5,
|
||
isTest: false,
|
||
isCheck: false,
|
||
isNetwork: true
|
||
}
|
||
},
|
||
mounted(){
|
||
let that = this
|
||
uni.getSystemInfo({
|
||
success: function(res) { // res - 各种参数
|
||
let obj = uni.createSelectorQuery().select('.movableBox')
|
||
obj.boundingClientRect(function(data) { // data - 各种参数
|
||
|
||
console.log('各种参数')
|
||
console.log(JSON.stringify(data))
|
||
that.movableBoxTop = data.top;
|
||
}).exec()
|
||
}
|
||
})
|
||
},
|
||
onLoad(options) {
|
||
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
if (options.isAdd == 'true') {
|
||
this.isAdd = true
|
||
} else {
|
||
this.isAdd = false
|
||
}
|
||
if (options.isTest == 'true') {
|
||
this.isTest = true
|
||
} else {
|
||
this.isTest = false
|
||
}
|
||
|
||
},
|
||
onShow() {
|
||
console.log('onShow selectPage')
|
||
|
||
setTimeout(()=>{
|
||
this.changePos.scale=0.5
|
||
this.getFloorList();
|
||
},200)
|
||
if(uni.getStorageSync('outLineData') && !this.isNetwork){
|
||
this.markerList = JSON.parse(uni.getStorageSync('outLineData'))
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
saveImg(){
|
||
console.log(12)
|
||
let i = 0
|
||
this.buildList.forEach(item=>{
|
||
i++;
|
||
item.floorList.forEach(item2=>{
|
||
if(item2.drawingUrl){
|
||
let url = this.url_config+'image/'+item2.drawingUrl
|
||
let that = this
|
||
setTimeout(() => {
|
||
uni.downloadFile({
|
||
url: url
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res[1].statusCode == 200) {
|
||
uni.saveFile({
|
||
tempFilePath: res[1].tempFilePath,
|
||
success: function(res) {
|
||
console.log('下载完成：' + res.savedFilePath);
|
||
console.log(that.url_config+'image/'+item2.drawingUrl)
|
||
uni.setStorageSync(that.url_config+'image/'+item2.drawingUrl, res.savedFilePath)
|
||
}
|
||
});
|
||
if(i == (that.buildList.length - 1)){
|
||
uni.showToast({
|
||
title: '保存成功'
|
||
})
|
||
}
|
||
} else {
|
||
return Promise.reject('下载临时文件失败')
|
||
}
|
||
}).catch(info => {
|
||
console.log(info);
|
||
})
|
||
}, 1000)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
smImg(url){
|
||
// console.log(url,this.imgUrl)
|
||
|
||
let real_img = url
|
||
console.log(url)
|
||
const cached = uni.getStorageSync(real_img)
|
||
console.log(cached)
|
||
let result = ''
|
||
if (cached) {
|
||
console.log(url + "已缓存为：" + cached)
|
||
result = cached
|
||
} else {
|
||
// console.log("未缓存,延迟下载", url)
|
||
result = real_img
|
||
}
|
||
console.log(result)
|
||
return result
|
||
},
|
||
changePosFn(e) {
|
||
console.log('移动')
|
||
console.log(e.detail)
|
||
this.changePos.x = e.detail.x
|
||
this.changePos.y = e.detail.y
|
||
},
|
||
onScale(e) {
|
||
console.log('缩放')
|
||
// this.changePos = e.detail
|
||
this.imgScale = e.detail.scale
|
||
this.changePos.x = this.changePos.x+e.detail.x
|
||
this.changePos.y = this.changePos.y+e.detail.y
|
||
// this.scale=e
|
||
console.log(e.detail)
|
||
},
|
||
//获取楼层信息
|
||
getFloorList() {
|
||
let that = this
|
||
uni.getNetworkType({
|
||
success: function (res) {
|
||
// console.log(res.networkType);
|
||
if(res.networkType == 'none'){
|
||
let data = uni.getStorageSync('foolrListData');
|
||
that.buildIndex = 0;
|
||
that.buildList = data;
|
||
that.floorList = data[0].floorList;
|
||
that.floorIndex = 0;
|
||
console.log(data)
|
||
that.imgUrl = that.floorList.length > 0 ? data[0].floorList[0].drawingUrl : '';
|
||
if(uni.getStorageSync('buildObj')){
|
||
let obj = uni.getStorageSync('buildObj')
|
||
// that.buildIndex = obj.buildIndex
|
||
// that.floorIndex = obj.floorIndex
|
||
that.pickerChangeBuild({detail:{
|
||
value: obj.buildIndex
|
||
}})
|
||
|
||
that.pickerChangeFloor({
|
||
detail:{
|
||
value: obj.floorIndex
|
||
}
|
||
})
|
||
}
|
||
console.log(that.imgUrl)
|
||
let imageLength = that.buildList[that.buildIndex].floorList[that.floorIndex]
|
||
.imageLength; //获取图片高度
|
||
let imageWidth = that.buildList[that.buildIndex].floorList[that.floorIndex]
|
||
.imageWidth; //获取图片宽度
|
||
that.imgOriginW=imageWidth
|
||
that.imgOriginH=imageLength
|
||
that.isNetwork = false
|
||
} else {
|
||
that.isNetwork = true
|
||
that.sendRequest({
|
||
url: 'xmgl/massReboundBuild/getBuildFloorList',
|
||
method: 'post',
|
||
data: {
|
||
projectSn: that.projectSn
|
||
},
|
||
success: res => {
|
||
that.buildIndex = 0;
|
||
that.buildList = res.result;
|
||
that.floorList = res.result[0].floorList;
|
||
that.floorIndex = 0;
|
||
that.imgUrl = that.floorList.length > 0 ? res.result[0].floorList[0].drawingUrl : '';
|
||
if(uni.getStorageSync('buildObj')){
|
||
let obj = uni.getStorageSync('buildObj')
|
||
// that.buildIndex = obj.buildIndex
|
||
// that.floorIndex = obj.floorIndex
|
||
that.pickerChangeBuild({detail:{
|
||
value: obj.buildIndex
|
||
}})
|
||
|
||
that.pickerChangeFloor({
|
||
detail:{
|
||
value: obj.floorIndex
|
||
}
|
||
})
|
||
}
|
||
// console.log('getFloorList 成功')
|
||
// this.$nextTick(() => {
|
||
// this.getMarkerList();
|
||
// })
|
||
uni.setStorageSync('foolrListData', res.result);
|
||
setTimeout(()=>{
|
||
that.getMarkerList();
|
||
},500)
|
||
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
|
||
},
|
||
|
||
//获取选择的楼栋
|
||
pickerChangeBuild(e) {
|
||
this.buildIndex = e.detail.value;
|
||
this.floorList = this.buildList[this.buildIndex].floorList;
|
||
this.floorIndex = 0; //回显第一层
|
||
if(this.floorList.length>0){
|
||
this.imgUrl = this.floorList[0].drawingUrl;
|
||
this.getMarkerList();
|
||
}else{
|
||
this.imgUrl=''
|
||
this.markerList=[]
|
||
}
|
||
|
||
|
||
},
|
||
//选择楼层
|
||
pickerChangeFloor(e) {
|
||
this.floorIndex = e.detail.value;
|
||
this.imgUrl = this.floorList[this.floorIndex].drawingUrl;
|
||
this.getMarkerList();
|
||
},
|
||
//进入详情
|
||
goDetails(id) {
|
||
let obj = {
|
||
floorIndex: this.floorIndex,
|
||
buildIndex: this.buildIndex
|
||
}
|
||
uni.setStorageSync('buildObj', obj);
|
||
if(this.buildList[this.buildIndex].floorList.length>0){
|
||
uni.navigateTo({
|
||
url: './detail?buildName=' + this.buildList[this.buildIndex].buildName + '&floorName=' +
|
||
this.buildList[this.buildIndex].floorList[this.floorIndex].floorName + '&floorId=' +
|
||
this.buildList[this.buildIndex].floorList[this.floorIndex].floorId + '&coordinateX=' + this
|
||
.coordinateX +
|
||
'&coordinateY=' + this.coordinateY + '&id=' + id + '&isTest=' + this.isTest
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title:'请选择楼层'
|
||
})
|
||
}
|
||
|
||
},
|
||
//计算点击的位置
|
||
clickDraw(e) {
|
||
if (!this.isAdd) {
|
||
return
|
||
}
|
||
let offsetLeft = e.currentTarget.offsetLeft; //图片所在位置
|
||
let offsetTop = e.currentTarget.offsetTop; //图片所在位置
|
||
let clientX = e.touches[0].clientX; //点击位置
|
||
let clientY = e.touches[0].clientY; //点击位置
|
||
this.preserveY = clientY - offsetTop - 10;
|
||
this.preserveX = clientX - offsetLeft - 9;
|
||
let imageLength = this.buildList[this.buildIndex].floorList[this.floorIndex].imageLength;
|
||
let imageWidth = this.buildList[this.buildIndex].floorList[this.floorIndex].imageWidth;
|
||
// let imgEl = this.$refs.drawing.$el
|
||
// let offsetHeight = imgEl.offsetHeight;
|
||
// let offsetWidth = imgEl.offsetWidth;
|
||
|
||
if (offsetHeight && offsetWidth) {
|
||
let ratioX = (offsetWidth / imageWidth).toFixed(2); //比例
|
||
let ratioY = (offsetHeight / imageLength).toFixed(2); //比例
|
||
this.coordinateX = (clientX - offsetLeft) / Number(ratioX); //实际位置
|
||
this.coordinateY = (clientY - offsetTop) / Number(ratioY); //实际位置
|
||
console.log(this.coordinateX,this.coordinateY)
|
||
// this.coordinateY=(this.coordinateY/this.changePos.scale)-(this.changePos.y/this.changePos.scale)
|
||
// this.coordinateX=(this.coordinateX/this.changePos.scale)-(this.changePos.x/this.changePos.scale)
|
||
// console.log(this.coordinateX,this.coordinateY)
|
||
// this.goDetails('');
|
||
}
|
||
},
|
||
//计算点击的位置
|
||
clickDraw2(e) {
|
||
console.log(e)
|
||
console.log(e.detail.x,e.detail.y,this.imgScale,this.movableBoxTop)
|
||
console.log(this.changePos.x,this.changePos.y)
|
||
|
||
this.coordinateX = ((e.detail.x-this.changePos.x)/this.imgScale)-20/this.imgScale
|
||
this.coordinateY = ((e.detail.y-this.changePos.y-this.movableBoxTop)/this.imgScale)-50/this.imgScale
|
||
|
||
console.log(this.coordinateX,this.coordinateY)
|
||
// console.log(this.imgRatioX+'_'+this.imgRatioY)
|
||
// alert(this.coordinateX+'_'+this.coordinateY+'_'+this.changePos.scale+'_'+this.imgRatioX+'_'+this.imgRatioY)
|
||
|
||
if(this.markerList.length>0){
|
||
if(this.markerList[this.markerList.length-1].isNewPoint){
|
||
this.markerList.splice(this.markerList.length-1,1)
|
||
}
|
||
} else {
|
||
this.markerList.splice(0,1)
|
||
}
|
||
this.markerList.push({
|
||
coordinateX: this.coordinateX,
|
||
coordinateY: this.coordinateY,
|
||
resultType: 1,
|
||
isNewPoint: true
|
||
})
|
||
this.isCheck = true
|
||
// this.goDetails('');
|
||
},
|
||
//获取已测量点位
|
||
getMarkerList() {
|
||
console.log('获取已测量点位')
|
||
// setTimeout(()=>{
|
||
// console.log('this.$refs.drawing')
|
||
// console.log(this.$refs.drawing.$el.offsetHeight)
|
||
// },1000)
|
||
|
||
// uni.getSystemInfo({
|
||
// success: function(res) { // res - 各种参数
|
||
// let obj = uni.createSelectorQuery().select('.drawing_bg')
|
||
// obj.boundingClientRect(function(data) { // data - 各种参数
|
||
|
||
// console.log('各种参数')
|
||
// console.log(JSON.stringify(data))
|
||
// offsetHeight = data.height;
|
||
// offsetWidth = data.width
|
||
// }).exec()
|
||
// }
|
||
// })
|
||
if(this.isNetwork){
|
||
this.sendRequest({
|
||
url: 'xmgl/massReboundSurveyArea/getMassReboundSurveyAreaList',
|
||
method: 'post',
|
||
data: {
|
||
floorId: this.buildList[this.buildIndex].floorList[this.floorIndex].floorId
|
||
},
|
||
success: res => {
|
||
// console.log(res)
|
||
let imageLength = this.buildList[this.buildIndex].floorList[this.floorIndex]
|
||
.imageLength; //获取图片高度
|
||
let imageWidth = this.buildList[this.buildIndex].floorList[this.floorIndex]
|
||
.imageWidth; //获取图片宽度
|
||
this.imgOriginW=imageWidth
|
||
this.imgOriginH=imageLength
|
||
// let data = res.result;
|
||
// let markerList = [];
|
||
// if (offsetHeight && offsetWidth) {
|
||
// let ratioX = (offsetWidth / imageWidth).toFixed(2); //比例
|
||
// let ratioY = (offsetHeight / imageLength).toFixed(2); //比例
|
||
// this.imgRatioX=ratioX
|
||
// this.imgRatioY=ratioY
|
||
// console.log(ratioX,ratioY)
|
||
// if (data.length > 0) {
|
||
// data.forEach((item, index) => {
|
||
// let x = item.coordinateX * Number(ratioX) - 12;
|
||
// let y = item.coordinateY * Number(ratioY) - 12;
|
||
// let obj = {
|
||
// x: x.toFixed(),
|
||
// y: y.toFixed(),
|
||
// resultType: item.resultType,
|
||
// id: item.id
|
||
// };
|
||
// markerList.push(obj)
|
||
// })
|
||
// }
|
||
// }
|
||
// this.markerList = markerList;
|
||
this.markerList = res.result;
|
||
}
|
||
})
|
||
} else{
|
||
let imageLength = this.buildList[this.buildIndex].floorList[this.floorIndex]
|
||
.imageLength; //获取图片高度
|
||
let imageWidth = this.buildList[this.buildIndex].floorList[this.floorIndex]
|
||
.imageWidth; //获取图片宽度
|
||
this.imgOriginW=imageWidth
|
||
this.imgOriginH=imageLength
|
||
this.markerList = []
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex3 {
|
||
display: flex;
|
||
}
|
||
|
||
.content {
|
||
padding: 40rpx 30rpx 0;
|
||
}
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: rgba(55, 45, 102, 1);
|
||
line-height: 42rpx;
|
||
margin-right: 16rpx;
|
||
width: 180rpx;
|
||
font-weight: 400;
|
||
|
||
}
|
||
|
||
.picker {
|
||
border: 1px solid rgba(91, 95, 102, 0.5);
|
||
padding: 6px 30rpx;
|
||
font-size: 30rpx;
|
||
border-radius: 60rpx;
|
||
width: calc(100% - 90px);
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.drawing_wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.drawing_bg {
|
||
/* width: 100%; */
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 100% auto;
|
||
/* height: 0px; */
|
||
|
||
|
||
}
|
||
|
||
.drawing_bg2 {
|
||
padding-top: 65%;
|
||
}
|
||
|
||
.drawing_wrap .marker {
|
||
position: absolute;
|
||
/* background-color: red; */
|
||
width: 36rpx;
|
||
height: 40rpx;
|
||
z-index: 111;
|
||
}
|
||
|
||
.arrowdown {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 30rpx;
|
||
color: #262D47;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.mapMarker {
|
||
position: absolute;
|
||
top: 40rpx;
|
||
left: 40rpx;
|
||
z-index: 999;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #999;
|
||
}
|
||
|
||
.type {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
movable-view {
|
||
width: auto;
|
||
height: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.movableBox {
|
||
height: calc(100% - 300px);
|
||
width: 100%;
|
||
position: fixed;
|
||
overflow: hidden;
|
||
}
|
||
.addrImg {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
.start_wrap {
|
||
/* margin-top: 80rpx;
|
||
margin-bottom: 80rpx; */
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100px;
|
||
}
|
||
|
||
.start_btn {
|
||
text-align: center;
|
||
pos-bottom: 40rpx;
|
||
line-height: 90rpx;
|
||
width: 60%;
|
||
margin: 0 auto;
|
||
background-color: rgba(72, 141, 236, 1);
|
||
color: #fff;
|
||
border-radius: 70rpx;
|
||
box-shadow: 0 4rpx 4px 0 rgba(43, 141, 243, 0.42);
|
||
|
||
}
|
||
.save_btn{
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 24rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
</style>
|