757 lines
28 KiB
Vue
757 lines
28 KiB
Vue
<template>
|
||
<div class="dialog-content map-box">
|
||
<div class="map-left">
|
||
<vue-scroll>
|
||
<div class="add-btn" @click="openAddImgDialog">
|
||
<i class="el-icon-circle-plus-outline"></i>
|
||
<div>
|
||
<!-- 添加布置图 -->
|
||
{{$t('message.highModulus.addImg')}}
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li v-for="(item,index) in deepImgList" :key="index" :class="{'img-active': activeImgIndex == index}">
|
||
<img :src="item.imageUrl" @click="checkImg(item,index)"/>
|
||
<div class="actions-box">
|
||
<span>{{item.planeFigureName}}</span>
|
||
<el-button type="text" icon="el-icon-delete" style="color: #F56C6C" @click="deleteDeepImg(item)">
|
||
<!-- 删除 -->
|
||
{{$t('message.highModulus.remove')}}
|
||
</el-button>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="map-right">
|
||
<div class="action-box" v-if="activeImgUrl">
|
||
<div v-show="!isEditPoint" class="btn-item" @click="editPoint">
|
||
<img src="@/assets/images/deepFoundationPitManage/address.png"/>
|
||
<!-- 布点 -->
|
||
{{$t('message.highModulus.movePoint')}}
|
||
</div>
|
||
<div v-show="isEditPoint" class="btn-item" @click="savePoint">
|
||
<img src="@/assets/images/deepFoundationPitManage/save.png"/>
|
||
<!-- 保存 -->
|
||
{{$t('message.highModulus.save')}}
|
||
</div>
|
||
<div class="btn-item" @click="changeImgSize(1)">
|
||
<i class="el-icon-zoom-in"></i>
|
||
<!-- 放大 -->
|
||
{{$t('message.highModulus.zoomIn')}}
|
||
</div>
|
||
<div class="btn-item" @click="changeImgSize(2)">
|
||
<i class="el-icon-zoom-out"></i>
|
||
<!-- 缩小 -->
|
||
{{$t('message.highModulus.zoomOut')}}
|
||
</div>
|
||
</div>
|
||
<div style="height: 100%" ref="mapbox">
|
||
<vue-scroll style="height:calc(100% - 30px);">
|
||
<div class="img-box" @mousewheel.prevent="rollImg" :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
|
||
<img ref="map" v-if="activeImgUrl" style="border: 1px solid #eee;" :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}" :src="activeImgUrl"/>
|
||
<ul class="point-list" v-if="activeImgUrl">
|
||
<li v-for="(item,index) in pointList" :key="index" :ref="'point'+index" :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}" >
|
||
<div class="point-dialog" :class="{'right_detail': item.mapY < 251 || item.mapX < 107}" :style="{'display': item.showDetail ? 'block':'none'}">
|
||
<i class="el-icon-error" @click="item.showDetail = false"></i>
|
||
<div class="point-title">{{item.measurePointName}}</div>
|
||
<div class="point-content">
|
||
<!-- 电量 -->
|
||
<p>{{$t('message.highModulus.electricQuantity')}}(%)：{{item.currentdata['electricPower']}}</p>
|
||
<!-- X轴 -->
|
||
<p>{{$t('message.highModulus.Xaxis')}}(°)：{{item.currentdata['angleXAxis']}}</p>
|
||
<!-- Y轴 -->
|
||
<p>{{$t('message.highModulus.Yaxis')}}(°)：{{item.currentdata['angleYAxis']}}</p>
|
||
<!-- 压力 -->
|
||
<p>{{$t('message.highModulus.pressure')}}(kN)：{{item.currentdata['pressure']}}</p>
|
||
<!-- 沉降 -->
|
||
<p>{{$t('message.highModulus.settling')}}(mm)：{{item.currentdata['subside']}}</p>
|
||
<!-- 状态 -->
|
||
<p>{{$t('message.highModulus.status')}}：{{item.currentdata['alarmState'] == 2 ? '预警':item.currentdata['alarmState'] == 3? '报警':'正常'}}</p>
|
||
<!-- <p v-for="(item2,index2) in item.detailList" :key="index2">{{item2.keyName}}：{{item.currentdata[item2.key]}}</p> -->
|
||
<!-- 采集时间 -->
|
||
<p>{{$t('message.highModulus.collectTime')}}：{{item.currentdata['collectTime']}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="point-dialog point-title2" :class="{'right_title': item.mapY < 47 || item.mapX < 22}" :style="{'display': item.showDetail ? 'none':'block'}" @click="item.showDetail = true">
|
||
<span>{{item.measurePointName}}</span>
|
||
</div>
|
||
<img @mousedown.prevent="move(index,$event)" @mouseup="up(index,$event)" style="width: 19px; height:29px; z-index: -1" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pointFixed" ref="pointFixed" :style="{'top': pointTop + 'px','left': pointLeft + 'px','display': pointStatus}">
|
||
<img style="width: 19px; height:29px;" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<!-- 添加平面图 -->
|
||
<el-dialog
|
||
width="35%"
|
||
title="添加布置图"
|
||
class="dialog-center"
|
||
:visible.sync="showAddImg"
|
||
@close="closeAddImg"
|
||
:modal-append-to-body="false">
|
||
<div class="dialog-content" style="height: 368px">
|
||
<el-form size="medium"
|
||
class="formBox"
|
||
style="margin-bottom: 68px"
|
||
:model="testPointImgForm"
|
||
ref="testPointImgForm"
|
||
label-width="120px"
|
||
:rules="$t('message.highModulus.rules3')">
|
||
<!-- 平面图名称 -->
|
||
<el-form-item label="布置图名称" prop="planeFigureName">
|
||
<el-input v-model="testPointImgForm.planeFigureName" :placeholder="$t('message.highModulus.placeholderText')"></el-input>
|
||
</el-form-item>
|
||
<!-- 测点 -->
|
||
<el-form-item :label="$t('message.highModulus.point')" prop="pointIds">
|
||
<el-select style="width: 100%;" v-model="testPointImgForm.pointIds" multiple :placeholder="$t('message.highModulus.placeholderText2')">
|
||
<el-option
|
||
v-for="item in testPointOptions"
|
||
:key="item.id"
|
||
:label="item.measurePointName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- 示意图 -->
|
||
<el-form-item :label="$t('message.highModulus.img')" prop="fileList">
|
||
<div class="img_box" v-for="(item,index) in testPointImgForm.fileList" :key="index">
|
||
<el-image
|
||
:src="item.url"
|
||
:preview-src-list="[item.url]"
|
||
style="width: 148px;height:148px;margin-right: 20px">
|
||
</el-image>
|
||
<i class="el-icon-error" @click="testPointImgForm.fileList.splice(index,1)"></i>
|
||
</div>
|
||
<el-upload
|
||
:action="$store.state.UPLOADURL"
|
||
name="files"
|
||
style="display: inline"
|
||
list-type="picture-card"
|
||
:show-file-list="false"
|
||
:on-remove="(file,fileList) => handleRemove(file,fileList)"
|
||
:on-success="(res,file) => handleSuccess(res,file)"
|
||
:file-list="testPointImgForm.fileList">
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="btn-box">
|
||
<!-- 确认 -->
|
||
<el-button type="primary" icon="el-icon-circle-check" @click="submitImgConfig">{{$t('message.highModulus.confirm')}}</el-button>
|
||
<!-- 取消 -->
|
||
<el-button icon="el-icon-circle-close" @click="closeAddImg">{{$t('message.highModulus.cancel')}}</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 提示 -->
|
||
<el-dialog
|
||
width="35%"
|
||
:title="$t('message.highModulus.hint')"
|
||
class="dialog-center"
|
||
:visible.sync="deleteInfo"
|
||
:modal-append-to-body="false">
|
||
<p style="font-size: 18px;display: flex;align-items:center">
|
||
<i class="el-icon-warning" style="color: #E6A23C;font-size: 28px;margin-right: 10px"></i>
|
||
<!-- 此操作将永久删除该文件, 是否继续? -->
|
||
{{$t('message.highModulus.hintText')}}
|
||
</p>
|
||
<span slot="footer" class="dialog-footer">
|
||
<!-- 取 消 -->
|
||
<el-button @click="closeMsg(1)">{{$t('message.highModulus.cancel')}}</el-button>
|
||
<!-- 确认 -->
|
||
<el-button type="primary" @click="checkMsg">{{$t('message.highModulus.confirm')}}</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { selectPointListApi,
|
||
addHighFormworkPlaneFigureApi,
|
||
deleteHighFormworkPlaneFigureApi,
|
||
selectHighFormworkPlaneFigureListApi,
|
||
selecthighFormworkPlaneFigureCoordinateListApi,
|
||
updateFigureCoordinateApi } from '@/assets/js/api/highModulus.js'
|
||
export default {
|
||
data(){
|
||
return{
|
||
deleteInfo: false,
|
||
deepImgList:[],
|
||
activeImgIndex: 0,
|
||
activeImgUrl: false,
|
||
isEditPoint: false,
|
||
imgWidth: 721,
|
||
imgHeight: 545,
|
||
activeImgUrl: false,
|
||
pointList: [],
|
||
detailList: [],
|
||
pointTop: 0,
|
||
pointLeft: 0,
|
||
imgZoom: 1,
|
||
pointStatus: 'none',
|
||
showAddImg: false,
|
||
testPointImgForm:{
|
||
planeFigureName: '',
|
||
pointIds: [],
|
||
fileList:[]
|
||
},
|
||
rules3:{
|
||
planeFigureName: [
|
||
{ required: true, message: '请输入平面图名称', trigger: 'blur' }
|
||
],
|
||
pointIds: [
|
||
{ type: 'array', required: true, message: '请至少选择一个测点', trigger: 'change' }
|
||
],
|
||
fileList: [
|
||
{ type: 'array', required: true, message: '请上传示意图', trigger: 'blur' },
|
||
{ type: 'array', required: true, message: '请上传示意图', trigger: 'change' }
|
||
]
|
||
},
|
||
testPointOptions:[],
|
||
|
||
}
|
||
},
|
||
created(){
|
||
this.selectPointList()
|
||
this.selectHighFormworkPlaneFigureList()
|
||
},
|
||
methods:{
|
||
selecthighFormworkPlaneFigureCoordinateList(val){
|
||
selecthighFormworkPlaneFigureCoordinateListApi({planeFigureId: val}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
res.result.forEach(item=>{
|
||
item.status = 'block'
|
||
item.transform = '',
|
||
item.showDetail = false
|
||
// let arr = []
|
||
// let obj = JSON.parse(item.dataField)
|
||
// for(let key in obj){
|
||
// arr.push({
|
||
// key: key,
|
||
// keyName: obj[key]
|
||
// })
|
||
// }
|
||
// item.detailList = arr
|
||
})
|
||
this.pointList = res.result
|
||
}
|
||
})
|
||
},
|
||
selectHighFormworkPlaneFigureList(){
|
||
selectHighFormworkPlaneFigureListApi({projectSn: this.$store.state.projectSn}).then(res=>{
|
||
console.log(res)
|
||
if(res.code){
|
||
this.deepImgList = res.result
|
||
if(res.result.length>0){
|
||
this.checkImg(res.result[0],0)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
selectPointList(){
|
||
selectPointListApi({projectSn: this.$store.state.projectSn}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.testPointOptions = res.result
|
||
}
|
||
})
|
||
},
|
||
checkMsg(){
|
||
this.deleteInfo = false
|
||
},
|
||
closeMsg(){
|
||
this.deleteInfo = false
|
||
},
|
||
closeAddImg(){
|
||
this.showAddImg = false
|
||
this.testPointImgForm = {
|
||
planeFigureName: "",
|
||
fileList: [],
|
||
pointIds: []
|
||
}
|
||
this.$refs['testPointImgForm'].resetFields()
|
||
},
|
||
submitImgConfig(){
|
||
this.$refs['testPointImgForm'].validate((valid) => {
|
||
if(valid){
|
||
let data = {
|
||
planeFigureName: this.testPointImgForm.planeFigureName,
|
||
pointIds: this.testPointImgForm.pointIds.join(','),
|
||
imageUrl: this.testPointImgForm.fileList[0].url,
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
// console.log(data)
|
||
addHighFormworkPlaneFigureApi(data).then(res=>{
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
// '添加成功！'
|
||
this.$message.success(this.$t('message.highModulus.addSuccessMsg'))
|
||
this.selectHighFormworkPlaneFigureList()
|
||
this.showAddImg = false
|
||
}
|
||
})
|
||
// addDeepExcavationPlaneFigureApi(data).then(res=>{
|
||
// console.log(res)
|
||
// if(res.code == 200){
|
||
// this.$message.success('添加成功！')
|
||
// this.selectDeepExcavationPlaneFigureList()
|
||
// this.showAddImg = false
|
||
// }
|
||
// })
|
||
|
||
}
|
||
})
|
||
},
|
||
handleRemove(file, fileList,type){
|
||
this.testPointImgForm.fileList = fileList
|
||
},
|
||
handleSuccess(res,file){
|
||
this.testPointImgForm.fileList = [{
|
||
name: file.name,
|
||
url:this.$store.state.FILEURL + file.response.data[0].imageUrl
|
||
}]
|
||
this.$refs['testPointImgForm'].clearValidate()
|
||
},
|
||
openAddImgDialog(){
|
||
this.showAddImg = true
|
||
// this.selectDeepExcavationAllMeasurePointList()
|
||
},
|
||
checkImg(val,index){
|
||
// console.log('移动',val)
|
||
this.imgZoom = 1
|
||
this.activeImgIndex = index
|
||
this.activeImgUrl = val.imageUrl
|
||
this.isEditPoint = false
|
||
this.selecthighFormworkPlaneFigureCoordinateList(val.id)
|
||
this.$nextTick(()=>{
|
||
this.getNaturalSize()
|
||
})
|
||
},
|
||
// 获取基坑布置图图片大小
|
||
getNaturalSize (callback) {
|
||
let Domlement = this.$refs['map']
|
||
console.dir(Domlement)
|
||
var natureSize = {};
|
||
if(window.naturalWidth && window.naturalHeight) {
|
||
natureSize.width = Domlement.naturalWidth;
|
||
natureSize.height = Domlement.naturalHeight;
|
||
// let heightRatio = natureSize.height / 569
|
||
// this.mapDate.width = natureSize.width*heightRatio
|
||
} else {
|
||
console.log(213)
|
||
let _this = this
|
||
var img = new Image();
|
||
img.src = Domlement.src;
|
||
img.onload = function(){
|
||
natureSize.width = img.width;
|
||
natureSize.height = img.height;
|
||
console.log('------', natureSize)
|
||
// _this.imgWidth = natureSize.width
|
||
// _this.imgHeight = natureSize.height
|
||
_this.imgStartWidth = img.width;
|
||
_this.imgStartHeight = img.width;
|
||
console.log(_this.$refs['mapbox'].clientWidth, _this.$refs['mapbox'].clientHeight)
|
||
|
||
// let heightRatio = 780 / natureSize.height
|
||
// let widthRatio = _this.$refs['mapbox'].clientWidth / natureSize.width
|
||
// if(heightRatio < widthRatio){
|
||
// // _this.imgWidth = natureSize.width*heightRatio
|
||
// // _this.imgHeight = natureSize.height*heightRatio
|
||
// _this.imgZoom = heightRatio
|
||
// } else {
|
||
// // _this.imgWidth = natureSize.width*widthRatio
|
||
// // _this.imgHeight = natureSize.height*widthRatio
|
||
// _this.imgZoom = widthRatio
|
||
// }
|
||
// _this.mapDate.width = natureSize.width*heightRatio
|
||
if(callback){
|
||
return callback(natureSize)
|
||
}
|
||
}
|
||
|
||
}
|
||
console.log(natureSize)
|
||
// return natureSize;
|
||
},
|
||
deleteDeepImg(val){
|
||
// this.removeType = 1
|
||
// this.removeData = val
|
||
// this.deleteInfo = true
|
||
// '此操作将永久删除该文件, 是否继续?' '提示'
|
||
this.$confirm(this.$t('message.highModulus.hintText'), this.$t('message.highModulus.hint'), {
|
||
confirmButtonText: this.$t('message.highModulus.confirm'),
|
||
cancelButtonText: this.$t('message.highModulus.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteHighFormworkPlaneFigureApi({id: val.id}).then(res=>{
|
||
if(res.code == 200){
|
||
// '删除成功！'
|
||
this.$message.success(this.$t('message.highModulus.removeSuccessMsg'))
|
||
this.selectHighFormworkPlaneFigureList()
|
||
this.activeImgUrl = ''
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
// '已取消删除'
|
||
this.$message({
|
||
type: 'info',
|
||
message: this.$t('message.highModulus.cancelRemove')
|
||
});
|
||
});
|
||
},
|
||
editPoint(){
|
||
this.isEditPoint = true
|
||
this.$notify({
|
||
// '成功'
|
||
title: this.$t('message.highModulus.success'),
|
||
// '请开始移动点位！'
|
||
message: this.$t('message.highModulus.hintText2'),
|
||
type: 'success',
|
||
});
|
||
},
|
||
savePoint(){
|
||
let arr = []
|
||
this.pointList.forEach(item=>{
|
||
arr.push({
|
||
id: item.id,
|
||
mapX: item.mapX,
|
||
mapY: item.mapY,
|
||
measurePointId: item.measurePointId,
|
||
planeFigureId: item.planeFigureId
|
||
})
|
||
})
|
||
let data ={
|
||
list: arr
|
||
}
|
||
updateFigureCoordinateApi(arr).then(res=>{
|
||
console.log(res)
|
||
if(res.code && res.success){
|
||
// '保存成功！'
|
||
this.$message.success(this.$t('message.highModulus.saveSuccessMsg'))
|
||
}
|
||
})
|
||
// editDeepExcavationPlaneFigureCoordinateApi(arr).then(res=>{
|
||
// console.log(res)
|
||
// if(res.code && res.success){
|
||
// this.$message.success('保存成功！')
|
||
// }
|
||
// })
|
||
this.isEditPoint = false
|
||
},
|
||
changeImgSize(val){
|
||
if(val == 1){
|
||
this.imgZoom = this.imgZoom + 0.2
|
||
console.log(this.imgZoom)
|
||
}else if(val == 2){
|
||
this.imgZoom = (this.imgZoom - 0.5) <= 0 ? this.imgZoom:this.imgZoom - 0.5
|
||
console.log(this.imgZoom)
|
||
}
|
||
},
|
||
|
||
|
||
// 缩放图片
|
||
rollImg() {
|
||
/* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
|
||
var zoom = parseInt(this.$refs.map.style.zoom) || 100;
|
||
/* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
|
||
zoom += event.wheelDelta / 12;
|
||
/* 最小范围 和 最大范围 的图片缩放尺度 */
|
||
if (zoom >= 80 && zoom <500) {
|
||
this.$refs.map.style.zoom = zoom + "%";
|
||
}
|
||
return false;
|
||
},
|
||
|
||
// 添加鼠标监听事件
|
||
move(val,e){
|
||
console.log(val,e.pageX,e.pageY)
|
||
this.ratio = window.localStorage.getItem('zoom')
|
||
this.startX = e.pageX
|
||
this.startY = e.pageY
|
||
this.pointIndex = val
|
||
// console.dir(this.$refs['point'+val])
|
||
// this.$refs['point'+val].style.opacity = '0'
|
||
let _this = this
|
||
console.log(this.pointList[val])
|
||
if(this.isEditPoint){
|
||
this.pointList[val].status = 'none'
|
||
// this.$refs['point'+ val].style.display = 'none'
|
||
document.body.addEventListener('mousemove',this.movePoint,false)
|
||
document.body.addEventListener('mouseup',this.removeUp,false)
|
||
}
|
||
},
|
||
// 清除鼠标监听时间
|
||
removeUp(e){
|
||
let top = (e.pageY - this.startY)/this.imgZoom ,
|
||
left = (e.pageX - this.startX)/this.imgZoom
|
||
console.log(top,left)
|
||
this.pointStatus = 'none'
|
||
let x = Math.ceil(Number(this.pointList[this.pointIndex].mapX ? this.pointList[this.pointIndex].mapX:0) + left/this.ratio),
|
||
y = Math.ceil(Number(this.pointList[this.pointIndex].mapY ? this.pointList[this.pointIndex].mapY:0) + top/this.ratio)
|
||
console.log(x,y,this.imgWidth,this.imgHeight)
|
||
if(y <= this.imgHeight && y >= 0){
|
||
this.pointList[this.pointIndex].mapY = y
|
||
}
|
||
if(x <= this.imgWidth && x >= 0){
|
||
this.pointList[this.pointIndex].mapX = x
|
||
}
|
||
this.pointList[this.pointIndex].status = 'block'
|
||
console.log(this.pointList)
|
||
this.$forceUpdate()
|
||
|
||
document.body.removeEventListener('mousemove',this.movePoint,false)
|
||
document.body.removeEventListener('mouseup',this.removeUp,false)
|
||
},
|
||
// 移动鼠标
|
||
movePoint(target){
|
||
let bodyWidth = document.body.clientWidth,
|
||
bodyHeight = document.body.clientHeight,
|
||
appWidth = document.getElementById('app').clientWidth*this.ratio,
|
||
appHeight = document.getElementById('app').clientHeight*this.ratio,
|
||
a = bodyWidth - appWidth,
|
||
b = bodyHeight - appHeight
|
||
|
||
if(this.ratio != 1){
|
||
this.$refs['pointFixed'].style.transform = 'translate(0px, -75px)'
|
||
this.pointTop = ((target.pageY)/this.ratio - (b*0.5)/this.ratio) + 62
|
||
this.pointLeft = ((target.pageX)/this.ratio - (a*0.5)/this.ratio) - 10
|
||
} else{
|
||
this.pointTop = target.pageY
|
||
this.pointLeft = target.pageX
|
||
}
|
||
this.pointStatus = 'block'
|
||
},
|
||
up(val,e){
|
||
let _this = this
|
||
if(this.isEditPoint){
|
||
window.removeEventListener('mousemove',function(e){
|
||
_this.movePoint()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.dialog-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
// background: #fff;
|
||
}
|
||
.map-box{
|
||
display: flex;
|
||
height: 100%;
|
||
.map-left{
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
width: 300px;
|
||
height: 100%;
|
||
background: #fff;
|
||
.uploadBox{
|
||
width: 250px;
|
||
margin: 0 auto;
|
||
margin-bottom: 16px;
|
||
}
|
||
.add-btn{
|
||
width: 250px;
|
||
margin: 0 auto;
|
||
margin-bottom: 16px;
|
||
text-align: center;
|
||
background: rgba(#D8D8D8, 0.3);
|
||
height: 132px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.el-icon-circle-plus-outline{
|
||
margin-bottom: 8px;
|
||
font-size: 26px;
|
||
color: #B4C8F3;
|
||
}
|
||
}
|
||
ul{
|
||
width: 250px;
|
||
margin: 0 auto;
|
||
li{
|
||
width: 100%;
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
border: 1px solid #CDCDCD;
|
||
padding: 0 10px;
|
||
padding-top: 10px;
|
||
box-sizing: border-box;
|
||
img{
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
display: block;
|
||
height: 132px;
|
||
// border: 1px solid #CDCDCD;
|
||
}
|
||
.actions-box{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 10px;
|
||
span{
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
.img-active{
|
||
border-color: #4A8BFF;
|
||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
|
||
}
|
||
}
|
||
}
|
||
.map-right{
|
||
// flex: 1;
|
||
width: calc(100% - 300px);
|
||
border: 1px solid #E6E6E6;
|
||
padding: 14px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
margin-left: 10px;
|
||
background: #fff;
|
||
.action-box{
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.btn-item{
|
||
margin-right: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #5181F6;
|
||
border: 1px solid #5181F6;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
width: 62px;
|
||
height: 24px;
|
||
img{
|
||
margin-right: 4px;
|
||
}
|
||
i{
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
.img-box{
|
||
// margin: 0 auto;
|
||
// height: 100%;
|
||
// position: relative;
|
||
// top: 50%;
|
||
// transform: translateY(-50%);
|
||
transform-origin: left top;
|
||
position: relative;
|
||
.point-list{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
li{
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.point-dialog{
|
||
background: rgba(#2A2E3F, 0.9);
|
||
color: #fff;
|
||
width: 238px;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
padding-bottom: 18px;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -8px;
|
||
transform: translate(-50%, -100%);
|
||
font-size: 12px;
|
||
.el-icon-error{
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.point-title{
|
||
// height: 40px;
|
||
line-height: 20px;
|
||
border-bottom: 1px solid rgba(254, 255, 255, 1);
|
||
margin-bottom: 13px;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
padding: 10px 0;
|
||
}
|
||
.point-content{
|
||
font-size: 14px;
|
||
p{
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
}
|
||
.right_detail{
|
||
left: 30px;
|
||
top: 0;
|
||
transform: translate(0,0);
|
||
bottom: -205px;
|
||
}
|
||
.right_title{
|
||
left: 30px;
|
||
top: -8px;
|
||
transform: translate(0,0);
|
||
}
|
||
|
||
.point-title2{
|
||
width: auto;
|
||
height: auto;
|
||
white-space: nowrap;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
}
|
||
img{
|
||
// display: block;
|
||
// margin: 0 auto;
|
||
// position: relative;
|
||
// top: 50%;
|
||
// transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn-box{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.img_box{
|
||
width: 148px;
|
||
height:148px;
|
||
margin-right: 20px;
|
||
display: inline-block;
|
||
position: relative;
|
||
.el-icon-error{
|
||
position: absolute;
|
||
right: -9px;
|
||
top: -9px;
|
||
font-size: 18px;
|
||
color: #F56C6C;
|
||
cursor: pointer;
|
||
}
|
||
.el-image{
|
||
width: 100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
.pointFixed{
|
||
position: fixed;
|
||
}
|
||
|
||
|
||
|
||
</style> |