128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
Vue
<template>
|
|
<div class="survey-point-position-drawer" v-if="isOpen" style="padding:0px 10px">
|
|
<el-drawer v-if="isOpen" v-model="isOpen" direction="rtl" size="960px"
|
|
style="padding-left: 20px" title="项目基坑标注">
|
|
<div style="width:940px;height:560px;" class="main-div" :style="'background-image:url('+imgUrl+')'">
|
|
<span v-for="(it,idx) in pts" :key="idx" class="pt-item"
|
|
v-move
|
|
:style="'top:'+it.y+'px;left:'+it.x+'px;'">
|
|
<i class="el-icon-location-outline pt-icon" ></i>
|
|
<span class="pt-name">{{ it.name }}</span>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getSurProject} from "@/api/project/surProject";
|
|
import {updatePitSurveyPoint } from "@/api/device/pitSurveyPoint";
|
|
import axios from 'axios'
|
|
export default {
|
|
name: 'RuoyiUiPitImageDrawer',
|
|
data() {
|
|
return {
|
|
isOpen:false,
|
|
pts:null,
|
|
query:null,
|
|
imgUrl:'',
|
|
dragging:false,
|
|
dragItem:null,
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
methods: {
|
|
submitForm(){
|
|
let pts=this.$el.querySelectorAll(".pt-item");
|
|
let ajaxs=[];
|
|
for(let i=0;i<pts.length;i++){
|
|
let pt=pts[i];
|
|
let top=pt.style.top.replace("px","");
|
|
let left=pt.style.left.replace("px","");
|
|
let obj={
|
|
x:left,y:top
|
|
}
|
|
this.pts[i].position=JSON.stringify(obj);
|
|
ajaxs.push(updatePitSurveyPoint({id:this.pts[i].id,position:this.pts[i].position}))
|
|
}
|
|
if(ajaxs.length>0){
|
|
axios.all(ajaxs).then(res=>{
|
|
if(res[0].code==200){
|
|
this.$modal.msgSuccess("修改成功!");
|
|
this.$emit("success")
|
|
}else{
|
|
this.$modal.msgError("修改失败!");
|
|
}
|
|
this.isOpen=false;
|
|
});
|
|
}else{
|
|
this.isOpen=false;
|
|
}
|
|
},
|
|
cancel(){
|
|
this.isOpen=false;
|
|
},
|
|
show(pts,query) {
|
|
this.pts = (pts||[]).map(it=>{
|
|
let pt=this.$tryToJson(it.position,{x:0,y:0});
|
|
it.x=pt.x||0;
|
|
it.y=pt.y||0;
|
|
return it;
|
|
});
|
|
this.query=query;
|
|
this.isOpen = true;
|
|
this.loadPitImage();
|
|
},
|
|
loadPitImage(){
|
|
getSurProject(this.query.projectId).then(d=>{
|
|
let url=d.data?.prjPlanUrl||"";
|
|
if(!url){
|
|
this.$modal.msgError("请配置项目的基坑图片[项目管理->更多操作->基坑图片管理]")
|
|
}else{
|
|
this.imgUrl=process.env.VUE_APP_BASE_API+url;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.survey-point-position-drawer{
|
|
.el-drawer__body{
|
|
padding:0px 10px;
|
|
.main-div{
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
.pt-item{
|
|
position: absolute;
|
|
cursor: pointer;
|
|
.pt-icon{
|
|
color:#2962FF;
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
text-shadow: 1px 1px 0px #F3E5F5;
|
|
}
|
|
.pt-name{
|
|
display: block;
|
|
color: #2962FF;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
text-shadow: 1px 1px 0px #F3E5F5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |