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>
|