412 lines
11 KiB
Vue
412 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="selectPage">
|
|||
|
|
<headers :showBack="true">
|
|||
|
|
<view class="headerName">
|
|||
|
|
{{isAdd?'选择测量位置':'已测量'}}
|
|||
|
|
</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" :friction="100" scale="true" scale-min="0.1" scale-max="10" :scale-value="changePos.scale">
|
|||
|
|
<view class="drawing_wrap" @click="clickDraw2">
|
|||
|
|
<image class="drawing_bg" ref="drawing" :src="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+'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'}" > -->
|
|||
|
|
<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>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
console.log('onShow selectPage')
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
this.changePos.scale=0.5
|
|||
|
|
this.getFloorList();
|
|||
|
|
},200)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
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.scale=e
|
|||
|
|
console.log(e.detail)
|
|||
|
|
},
|
|||
|
|
//获取楼层信息
|
|||
|
|
getFloorList() {
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/massReboundBuild/getBuildFloorList',
|
|||
|
|
method: 'post',
|
|||
|
|
data: {
|
|||
|
|
projectSn: this.projectSn
|
|||
|
|
},
|
|||
|
|
success: res => {
|
|||
|
|
this.buildIndex = 0;
|
|||
|
|
this.buildList = res.result;
|
|||
|
|
this.floorList = res.result[0].floorList;
|
|||
|
|
this.floorIndex = 0;
|
|||
|
|
this.imgUrl = this.floorList.length > 0 ? res.result[0].floorList[0].drawingUrl : '';
|
|||
|
|
// console.log('getFloorList 成功')
|
|||
|
|
// this.$nextTick(() => {
|
|||
|
|
// this.getMarkerList();
|
|||
|
|
// })
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
this.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) {
|
|||
|
|
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
|
|||
|
|
})
|
|||
|
|
}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.detail.x,e.detail.y)
|
|||
|
|
console.log(this.changePos.x,this.changePos.y)
|
|||
|
|
|
|||
|
|
this.coordinateX = ((e.detail.x-this.changePos.x)/this.changePos.scale)-9
|
|||
|
|
this.coordinateY = ((e.detail.y-this.changePos.y-this.movableBoxTop)/this.changePos.scale)-10
|
|||
|
|
|
|||
|
|
console.log(this.coordinateX,this.coordinateY)
|
|||
|
|
// console.log(this.imgRatioX+'_'+this.imgRatioY)
|
|||
|
|
// alert(this.coordinateX+'_'+this.coordinateY+'_'+this.changePos.scale+'_'+this.imgRatioX+'_'+this.imgRatioY)
|
|||
|
|
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()
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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% - 200px);
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.addrImg {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|