1372 lines
59 KiB
Vue
1372 lines
59 KiB
Vue
<template>
|
||
<div class="fullHeight positionPage">
|
||
<div class="left fullHeight whiteBlock">
|
||
<div class="title">
|
||
<span>基坑列表</span>
|
||
</div>
|
||
<div class="list_content">
|
||
<vue-scroll v-if="buildList.length>0">
|
||
<div
|
||
class="flex content_data"
|
||
v-for="(item,index) in buildList"
|
||
:key="index"
|
||
:class="{'active':activeBuildIndex==index }"
|
||
@click="changeBuildFn(item,index)"
|
||
>
|
||
<div>{{item.buildName}}</div>
|
||
<div class="flex2">
|
||
<img
|
||
@click.stop="editBuildFn(item)"
|
||
src="@/assets/images/icon-edit.png"
|
||
style="margin-right:16px"
|
||
class="icon"
|
||
/>
|
||
<img
|
||
@click.stop="deleteBuildFn(item)"
|
||
src="@/assets/images/icon-delete.png"
|
||
class="icon"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-else>{{$t('message.personnelPosition.mapManage.no_data')}}</div>
|
||
</div>
|
||
<div class="addFirm" @click="addBuildDialog=true;isAdd=true;addBuildForm.buildName=''">
|
||
新增基坑
|
||
</div>
|
||
</div>
|
||
<div class="right fullHeight">
|
||
<!-- <div class="floorBox whiteBlock">
|
||
<ul>
|
||
<li class="addFloorBox" @click="addFloorFn">
|
||
<i class="el-icon-plus"></i>
|
||
<p>{{$t('message.personnelPosition.mapManage.new_floor')}}</p>
|
||
</li>
|
||
<li
|
||
v-show="canAddRoom && (index<=showFloorNum-2||showAllFloor)||(floorList.length==showFloorNum)"
|
||
v-for="(item,index) in floorList"
|
||
:key="index"
|
||
:class="{'active':currentFloorDetail.floorId==item.floorId}"
|
||
@click="floorIndex=index;changeFloor(item)"
|
||
>
|
||
<p class="floorName">
|
||
{{item.floorName}}{{$t('message.personnelPosition.mapManage.floorName')}}</p>
|
||
<el-popover
|
||
popper-class="projectPopoverBox"
|
||
placement="bottom"
|
||
width="80"
|
||
trigger="click"
|
||
>
|
||
<ul class="operateList">
|
||
<li @click.stop="editFloorFn(item)">
|
||
<img src="@/assets/images/icon-edit.png"/>{{$t('message.personnelPosition.mapManage.edit')}}
|
||
</li>
|
||
<li class="last" @click.stop="deleteFloorFn(item)">
|
||
<img src="@/assets/images/icon-delete.png"/>{{$t('message.personnelPosition.mapManage.delete')}}
|
||
</li>
|
||
</ul>
|
||
<div slot="reference">
|
||
<p class="caretIcon">
|
||
<i class="el-icon-caret-bottom"></i>
|
||
</p>
|
||
</div>
|
||
</el-popover>
|
||
</li>
|
||
<li
|
||
v-show="canAddRoom && floorList.length>showFloorNum&&!showAllFloor"
|
||
class="more"
|
||
@click="showAllFloor=true"
|
||
>...
|
||
</li>
|
||
</ul>
|
||
</div> -->
|
||
<div class="mapContainer whiteBlock" id="mapContainer" v-show="mapUrl">
|
||
<!-- v-if="currentFloorDetail" -->
|
||
<div class="infoDetail" style="height:30px">
|
||
<!-- <span>{{$t('message.personnelPosition.mapManage.floorWidth')}}{{currentFloorDetail.floorWidth}}:{{currentFloorDetail.imageWidth}}</span> -->
|
||
<!-- <span>{{$t('message.personnelPosition.mapManage.floorLength')}}{{currentFloorDetail.floorLength}}:{{currentFloorDetail.imageLength}}</span> -->
|
||
<div class="operateBox">
|
||
<img src="@/assets/images/personPosition/zoomin.png" @click="shrink" v-show="!isadding"/>
|
||
<img src="@/assets/images/personPosition/zoomout.png" @click="magnify" v-show="!isadding"/>
|
||
<img
|
||
src="@/assets/images/personPosition/addPoint.png"
|
||
class="add"
|
||
v-show="!isadding"
|
||
@click="isadding=!isadding;multiples = 1"
|
||
/>
|
||
<img
|
||
src="@/assets/images/personPosition/addPointing.png"
|
||
class="add"
|
||
v-show="isadding"
|
||
@click="isadding=!isadding"
|
||
/>
|
||
|
||
</div>
|
||
<el-upload
|
||
class="uploadBtn"
|
||
ref="upload"
|
||
name="files"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="uploadMapSuccess"
|
||
accept=".png, .jpg, .jpeg"
|
||
:show-file-list="false"
|
||
>
|
||
<el-button slot="trigger" type="primary" size="medium">
|
||
{{$t('message.personnelPosition.mapManage.re_upload')}}
|
||
</el-button>
|
||
</el-upload>
|
||
</div>
|
||
|
||
<div class="mapBox" id="mapBox">
|
||
<div
|
||
class="mapContent"
|
||
id="mapContent"
|
||
:style="{transform:'scale('+multiples+')',transformOrigin:'top left'}"
|
||
>
|
||
<img
|
||
id="map"
|
||
:src="mapUrl"
|
||
class="map"
|
||
:style="{transform:'rotateZ('+deg+'deg)'}"
|
||
@click="addPoint($event)"
|
||
/>
|
||
<div
|
||
v-drag="item"
|
||
class="personBox"
|
||
v-for="(item,index) in pointList"
|
||
:key="index"
|
||
:style="{left:item.coordinateX+'px',top:item.coordinateY+'px'}"
|
||
>
|
||
<el-popover placement="top" width="auto" trigger="click">
|
||
<div class="devDetail">
|
||
<p>名称：{{item.name}}</p>
|
||
<p>倾角：{{item.angle}}°</p>
|
||
<p>倾斜X角度：{{item.angleX}}°</p>
|
||
<p>倾斜Y角度：{{item.angleY}}°</p>
|
||
<p>倾斜X位移：{{item.placeX}}mm</p>
|
||
<p>倾斜Y位移：{{item.placeY}}mm</p>
|
||
<!-- <p>
|
||
<span class="primaryText hovers" @click="editPoint(item,index)">{{$t('message.personnelPosition.mapManage.edit')}}</span>
|
||
<span class="redText hovers" @click="removePoint(item,index)">{{$t('message.personnelPosition.mapManage.delete')}}</span>
|
||
</p> -->
|
||
</div>
|
||
<img slot="reference" src="@/assets/images/personPosition/monitorPoint.png" alt/>
|
||
</el-popover>
|
||
</div>
|
||
<!-- <div class="personBox" v-for="item in personLocation" :key="item.id" :style="{left:item.longitude+'px',top:item.latitude+'px'}">
|
||
<el-popover
|
||
placement="top"
|
||
width="auto"
|
||
trigger="click">
|
||
<div class="devDetail">
|
||
<p>姓名：{{item.workerName}}</p>
|
||
<p>标签SN：{{item.readDevSn}}</p>
|
||
<p>读卡设备SN：{{item.readDevSn}}</p>
|
||
<p>
|
||
<span class="primaryText hovers" @click="editPoint(item,index)">编辑</span>
|
||
<span class="redText hovers" @click="removePoint(item,index)">删除</span>
|
||
</p>
|
||
</div>
|
||
<img slot="reference" src="@/assets/images/personPosition/personLocation.png" alt="">
|
||
</el-popover>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mapContainer whiteBlock" v-show="!mapUrl">
|
||
<div class="placeholderBox">
|
||
<img src="@/assets/images/noData.png" alt srcset/>
|
||
<p>
|
||
{{$t('message.personnelPosition.mapManage.no_drawings')}}
|
||
<el-upload
|
||
style="display:inline-block"
|
||
ref="upload"
|
||
name="files"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="uploadMapSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
accept=".png, .jpg, .jpeg"
|
||
:show-file-list="false"
|
||
>
|
||
<span slot="trigger">{{$t('message.personnelPosition.mapManage.click_upload')}}</span>
|
||
<!--点击上传-->
|
||
</el-upload>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 添加楼栋弹框 -->
|
||
<el-dialog :modal-append-to-body="false" :title="isAdd?'新增基坑':'编辑基坑'" :visible.sync="addBuildDialog" width="667px">
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="addBuildForm"
|
||
ref="addBuildForm"
|
||
:rules="addBuildFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item :label="'名称'"
|
||
prop="buildName">
|
||
<el-input v-model="addBuildForm.buildName"
|
||
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="addBuildDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveBuildFn"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加楼层弹框 -->
|
||
<el-dialog :modal-append-to-body="false" :title="floorDialogTitle" :visible.sync="addFloorDialog" width="667px">
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="floorForm"
|
||
ref="floorForm"
|
||
:rules="floorFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item :label="$t('message.personnelPosition.mapManage.dialog_floor.floorName')"
|
||
prop="floorName">
|
||
<el-input v-model="floorForm.floorName"
|
||
:placeholder="$t('message.personnelPosition.please_enter')">
|
||
<template slot="append">{{$t('message.personnelPosition.mapManage.floorName')}}</template>
|
||
<!--层-->
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.personnelPosition.mapManage.dialog_floor.floorLength')"
|
||
prop="floorLength">
|
||
<el-input v-model="floorForm.floorLength"
|
||
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.personnelPosition.mapManage.dialog_floor.floorWidth')"
|
||
prop="floorWidth">
|
||
<el-input v-model="floorForm.floorWidth"
|
||
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="addFloorDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveFloorFn"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 图片裁剪弹框 -->
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.personnelPosition.mapManage.dialog_KJNova_Clipper.title')"
|
||
:visible.sync="cropperDialog" width="1200px">
|
||
<div class="dialog_content" style="height: 600px">
|
||
<!-- <vue-scroll> -->
|
||
<vueCropper
|
||
ref="cropper"
|
||
:img="cropperOption.img"
|
||
:outputType="cropperOption.outputType"
|
||
:autoCrop="true"
|
||
></vueCropper>
|
||
<!-- </vue-scroll> -->
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="cropperDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveMapUrlFn"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 项目配置弹框 -->
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.personnelPosition.mapManage.dialog_Project_config.title')" :show-close="false"
|
||
:close-on-press-escape="false"
|
||
:visible.sync="editProjectSettingDialog" width="667px" :close-on-click-modal="false">
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="projectSettingForm"
|
||
ref="projectSettingForm"
|
||
:rules="projectSettingRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item :label="$t('message.personnelPosition.mapManage.dialog_Project_config.positionType')"
|
||
prop="positionType">
|
||
<el-select v-model="projectSettingForm.positionType" :placeholder="$t('message.personnelPosition.please_select')">
|
||
<el-option :label="$t('message.personnelPosition.mapManage.dialog_Project_config.option_1')"
|
||
value="1"></el-option>
|
||
<el-option :label="$t('message.personnelPosition.mapManage.dialog_Project_config.option_2')"
|
||
value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<p class="redText">
|
||
{{$t('message.personnelPosition.mapManage.dialog_Project_config.redText')}}{{projectSettingForm.positionType==1?$t('message.personnelPosition.mapManage.dialog_Project_config.option_2'):$t('message.personnelPosition.mapManage.dialog_Project_config.option_1')}}</p>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="editProjectSettingDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="editProjectSetting"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加卡片弹框 -->
|
||
<el-dialog :modal-append-to-body="false" :title="cardDialogTitle" :visible.sync="cardDialog" width="667px">
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="cardForm"
|
||
ref="cardForm"
|
||
:rules="cardFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item :label="$t('message.personnelPosition.mapManage.dialog_card.cardNo')" prop="cardNo">
|
||
<el-input v-model="cardForm.cardNo"
|
||
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="cardDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveCardFn"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加信标弹框 beaconDialogTitle-->
|
||
<el-dialog :modal-append-to-body="false" :title="'新增点位'" :visible.sync="beaconDialog" width="667px">
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="beaconForm"
|
||
ref="beaconForm"
|
||
:rules="beaconFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item :label="'名称'"
|
||
prop="beaconMinor">
|
||
<el-input v-model="beaconForm.beaconMinor"
|
||
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item :label="$t('message.personnelPosition.mapManage.dialog_beacon.beaconMajor')"
|
||
prop="beaconMajor">
|
||
<el-input v-model="beaconForm.beaconMajor"
|
||
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
|
||
</el-form-item> -->
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="beaconDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveBeaconFn"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
addPositionBuildApi,
|
||
getPositionBuildListApi,
|
||
editPositionBuildApi,
|
||
deletePositionBuildApi,
|
||
addPositionFloorApi,
|
||
editPositionFloorApi,
|
||
deletePositionFloorApi,
|
||
getPositionFloorListApi,
|
||
addPositionCardApi,
|
||
editPositionCardApi,
|
||
deletePositionCardApi,
|
||
getAllPositionCardListApi,
|
||
addPositionBeaconApi,
|
||
editPositionBeaconApi,
|
||
deletePositionBeaconApi,
|
||
getAllPositionBeaconListApi,
|
||
} from "@/assets/js/api/personnelPosition.js";
|
||
import {
|
||
getProjectConfigListApi,
|
||
editProjectConfigListApi,
|
||
} from "@/assets/js/api/project.js";
|
||
import {VueCropper} from "vue-cropper";
|
||
|
||
var VUE = null;
|
||
export default {
|
||
components: {
|
||
VueCropper,
|
||
},
|
||
directives: {
|
||
drag: function (el, binding) {
|
||
// console.log('binding,',binding)
|
||
var json = binding.value;
|
||
let oDiv = el; //当前元素
|
||
var _this = this;
|
||
oDiv.onmousedown = function (e) {
|
||
// console.log(oDiv)
|
||
e.preventDefault();
|
||
let bw = document.body.clientWidth;
|
||
let bh = document.body.clientHeight;
|
||
//鼠标按下，计算当前元素距离可视区的距离
|
||
let disX = e.clientX - oDiv.offsetLeft;
|
||
let disY = e.clientY - oDiv.offsetTop;
|
||
// let w2 = oDiv.offsetLeft
|
||
// let h2 = oDiv.offsetTop
|
||
// 计算两边坐标
|
||
document.onmousemove = function (e) {
|
||
let l = 0;
|
||
let t = 0;
|
||
// 拖动边界
|
||
if (e.clientX >= bw) {
|
||
l = bw - disX;
|
||
} else if (e.clientX <= 0) {
|
||
l = 0 - disX;
|
||
} else {
|
||
l = e.clientX - disX;
|
||
}
|
||
if (e.clientY >= bh) {
|
||
t = bh - disY;
|
||
} else if (e.clientY <= 0) {
|
||
t = 0 - disY;
|
||
} else {
|
||
t = e.clientY - disY;
|
||
}
|
||
// console.log(l,t)
|
||
//移动当前元素
|
||
oDiv.style.left = l + "px";
|
||
oDiv.style.top = t + "px";
|
||
|
||
json.coordinateX = l;
|
||
json.coordinateY = t;
|
||
|
||
//获取移动的相对距离
|
||
// let w1 = w2 - l
|
||
// let h1 = h2 - t
|
||
// //如果是拖动图片
|
||
// if(oDiv.getAttribute('id')=='map'){
|
||
// let els = document.getElementsByClassName('personBox')
|
||
// console.log(w1,h1)
|
||
// console.log(els[0].style.left.substring(0,els[0].style.left.length-2))
|
||
// console.log(els[0].style.top)
|
||
// console.log(els[0].style.top.substring(0,els[0].style.top.length-2))
|
||
// for (var i = 0; i < els.length; i++) {
|
||
// els[i].style.left = (parseFloat(els[i].style.left.substring(0,els[i].style.left.length-2))+parseFloat(w1))+'px'
|
||
// els[i].style.top = (parseFloat(els[i].style.top.substring(0,els[i].style.top.length-2))+parseFloat(h1))+'px'
|
||
// }
|
||
// }
|
||
};
|
||
|
||
// 鼠标停止移动时，事件移除
|
||
document.onmouseup = function (e) {
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
// console.log(VUE.projectSettingForm)
|
||
// console.log(VUE.cardForm)
|
||
if (VUE.projectSettingForm.positionType == 1) {
|
||
editPositionCardApi(json).then((res) => {
|
||
// VUE.cardDialog = false;
|
||
// VUE.loadCardData();
|
||
// VUE.$message.success("保存位置成功！");
|
||
});
|
||
} else {
|
||
editPositionBeaconApi(json).then((res) => {
|
||
// VUE.cardDialog = false;
|
||
// VUE.loadCardData();
|
||
// VUE.$message.success("保存位置成功！");
|
||
});
|
||
}
|
||
};
|
||
};
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
buildList: [
|
||
{buildName:'一号深基坑',id:19}
|
||
],
|
||
currentBuildInfo: null,
|
||
activeBuildIndex: 0,
|
||
floorDialogTitle: this.$t('message.personnelPosition.mapManage.new_floor'),//新增楼层
|
||
floorIndex: 0,
|
||
floorForm: {
|
||
floorName: "",
|
||
buildId: "",
|
||
},
|
||
floorFormRules: {
|
||
floorName: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.required'),
|
||
trigger: "blur"
|
||
}],
|
||
floorLength: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.required'),
|
||
trigger: "blur"
|
||
}],
|
||
floorWidth: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.required'),
|
||
trigger: "blur"
|
||
}],
|
||
},
|
||
floorList: [],
|
||
currentFloorDetail: null,
|
||
addFloorDialog: false,
|
||
showAllFloor: false,
|
||
deleteFloorId: "",
|
||
showFloorNum: 0,
|
||
canAddRoom: false,
|
||
searchForm: {
|
||
buildId: "",
|
||
companySn: "",
|
||
floorId: "",
|
||
},
|
||
dialogTitle: this.$t('message.personnelPosition.mapManage.add_build'),//添加楼栋
|
||
addBuildDialog: false,
|
||
addBuildForm: {
|
||
buildName: "",
|
||
projectSn: this.$store.state.projectSn,
|
||
},
|
||
addBuildFormRules: {
|
||
buildName: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.required'),
|
||
trigger: "blur"
|
||
}],
|
||
},
|
||
isAdd: false,
|
||
cropperDialog: false,
|
||
cropperOption: {
|
||
outputType: "png",
|
||
img: "",
|
||
},
|
||
mapUrl: null,
|
||
isadding: false,
|
||
multiples: 1,
|
||
pointList: [
|
||
{coordinateX:600,coordinateY:600,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
|
||
{coordinateX:150,coordinateY:150,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
|
||
{coordinateX:260,coordinateY:260,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
|
||
{coordinateX:470,coordinateY:550,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
|
||
{coordinateX:56,coordinateY:100,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
|
||
{coordinateX:380,coordinateY:390,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'},
|
||
{coordinateX:700,coordinateY:470,name:'测试',angle:'0',angleX:'0',angleY:'0',placeX:'0',placeY:'0'}
|
||
],
|
||
deg: 0,
|
||
mapEL: null,
|
||
mapBoxEL: null,
|
||
mapBoxTop: 0,
|
||
mapBoxLeft: 0,
|
||
editProjectSettingDialog: false,
|
||
projectSettingForm: {
|
||
positionType: "",
|
||
projectSn: this.$store.state.projectSn,
|
||
},
|
||
projectSettingRules: {
|
||
positionType: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.mandatory'),
|
||
trigger: "blur"
|
||
}],
|
||
},
|
||
cardDialogTitle: "",
|
||
cardDialog: false,
|
||
cardForm: {
|
||
cardNo: "",
|
||
coordinateX: "",
|
||
coordinateY: "",
|
||
// "electricity": "",
|
||
floorId: 0,
|
||
// "personType": 0,
|
||
projectSn: this.$store.state.projectSn,
|
||
// "workerId": 0,
|
||
// "workerName": ""
|
||
},
|
||
cardFormRules: {
|
||
cardNo: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.mandatory'),
|
||
trigger: "blur"
|
||
}],
|
||
},
|
||
beaconDialogTitle: "",
|
||
beaconDialog: false,
|
||
beaconForm: {
|
||
beaconMinor: "",
|
||
coordinateX: "",
|
||
coordinateY: "",
|
||
beaconMajor: "",
|
||
floorId: 0,
|
||
// "personType": 0,
|
||
projectSn: this.$store.state.projectSn,
|
||
// "workerId": 0,
|
||
// "workerName": ""
|
||
},
|
||
beaconFormRules: {
|
||
beaconMinor: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.mandatory'),
|
||
trigger: "blur"
|
||
}],
|
||
beaconMajor: [{
|
||
required: true,
|
||
message: this.$t('message.personnelPosition.mandatory'),
|
||
trigger: "blur"
|
||
}],
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
VUE = this;
|
||
// this.mapEL = document.getElementById("mapContent");
|
||
// this.mapBoxEL = document.getElementById("mapBox");
|
||
// this.mapBoxTop = this.mapBoxEL.offsetTop;
|
||
// this.mapBoxLeft = this.mapBoxEL.offsetLeft;
|
||
// var searchWidth = document.getElementsByClassName("floorBox")[0]
|
||
// .offsetWidth;
|
||
// this.showFloorNum = parseInt((searchWidth - 40) / 90) - 1;
|
||
// console.log("this.showFloorNum", this.showFloorNum);
|
||
// this.loadBuildData();
|
||
// this.getProjectSetting();
|
||
},
|
||
methods: {
|
||
|
||
//获取项目配置信息
|
||
getProjectSetting() {
|
||
getProjectConfigListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
if (res.result.length == 0 || !res.result[0].positionType) {
|
||
this.editProjectSettingDialog = true;
|
||
} else {
|
||
this.projectSettingForm = res.result[0];
|
||
}
|
||
});
|
||
},
|
||
//编辑项目配置信息
|
||
editProjectSetting() {
|
||
editProjectConfigListApi(this.projectSettingForm).then((res) => {
|
||
this.editProjectSettingDialog = false;
|
||
this.getProjectSetting();
|
||
});
|
||
},
|
||
loadBuildData() {
|
||
getPositionBuildListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
this.buildList = res.result;
|
||
this.activeBuildIndex = 0;
|
||
this.canAddRoom = false;
|
||
if (this.buildList.length > 0) {
|
||
this.currentBuildInfo = this.buildList[0];
|
||
this.canAddRoom = true;
|
||
this.loadFloorData();
|
||
}
|
||
});
|
||
},
|
||
loadFloorData() {
|
||
getPositionFloorListApi({
|
||
buildId: this.currentBuildInfo.id,
|
||
}).then((res) => {
|
||
this.floorList = res.result;
|
||
this.mapUrl = null;
|
||
if (this.floorIndex >= this.floorList.length && this.floorIndex != 0) {
|
||
this.floorIndex--
|
||
}
|
||
if (this.floorList.length > 0) {
|
||
this.currentFloorDetail = this.floorList[this.floorIndex];
|
||
if (this.currentFloorDetail.drawingUrl) {
|
||
this.mapUrl =
|
||
this.$store.state.FILEURL + this.currentFloorDetail.drawingUrl;
|
||
this.getPointList();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
addFloorFn() {
|
||
if (!this.currentBuildInfo) {
|
||
this.$message.error(this.$t('message.personnelPosition.mapManage.please_add_build_infoMsg'));//请先添加楼栋信息
|
||
} else {
|
||
this.floorDialogTitle = this.$t('message.personnelPosition.mapManage.new_floor');//新增楼层
|
||
this.addFloorDialog = true;
|
||
this.isAdd = true;
|
||
}
|
||
},
|
||
editFloorFn(item) {
|
||
this.floorForm = JSON.parse(JSON.stringify(item));
|
||
this.floorDialogTitle = this.$t('message.personnelPosition.mapManage.edit_floor');//编辑楼层
|
||
this.isAdd = false;
|
||
this.addFloorDialog = true;
|
||
},
|
||
changeFloor(item) {
|
||
this.currentFloorDetail = item;
|
||
|
||
this.showAllFloor = false;
|
||
if (this.currentFloorDetail.drawingUrl) {
|
||
this.mapUrl =
|
||
this.$store.state.FILEURL + this.currentFloorDetail.drawingUrl;
|
||
this.getPointList();
|
||
} else {
|
||
this.mapUrl = null;
|
||
}
|
||
},
|
||
changeBuildFn(item, index) {
|
||
this.activeBuildIndex = index;
|
||
this.currentBuildInfo = item;
|
||
this.loadFloorData();
|
||
},
|
||
//新增或编辑楼栋
|
||
saveBuildFn() {
|
||
this.$refs["addBuildForm"].validate((valid) => {
|
||
if (valid) {
|
||
if (this.isAdd) {
|
||
addPositionBuildApi(this.addBuildForm).then((res) => {
|
||
this.addBuildDialog = false;
|
||
this.loadBuildData();
|
||
this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
|
||
});
|
||
} else {
|
||
editPositionBuildApi(this.addBuildForm).then((res) => {
|
||
this.addBuildDialog = false;
|
||
this.loadBuildData();
|
||
this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
|
||
});
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
editBuildFn(item) {
|
||
this.isAdd = false;
|
||
this.addBuildDialog = true;
|
||
this.addBuildForm = JSON.parse(JSON.stringify(item));
|
||
},
|
||
deleteBuildFn(item) {
|
||
this.$confirm(this.$t('message.personnelPosition.mapManage.confirm_buildText') + "【" + item.buildName + "】?", this.$t('message.personnelPosition.mapManage.Tips'), {//确定删除楼栋
|
||
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
|
||
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
|
||
type: "warning",
|
||
}).then(() => {
|
||
deletePositionBuildApi({id: item.id}).then((res) => {
|
||
this.loadBuildData();
|
||
this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
|
||
});
|
||
});
|
||
},
|
||
deleteFloorFn(item) {
|
||
this.$confirm(this.$t('message.personnelPosition.mapManage.confirmText') + "【" +
|
||
this.currentBuildInfo.buildName + ">" + item.floorName + this.$t('message.personnelPosition.mapManage.floorName') + "?",
|
||
// "确定删除【" +
|
||
// this.currentBuildInfo.buildName +
|
||
// "】下的【第" +
|
||
// item.floorName +
|
||
// "层】吗?",
|
||
this.$t('message.personnelPosition.mapManage.Tips'),
|
||
{
|
||
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
|
||
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
|
||
type: "warning",
|
||
}
|
||
).then(() => {
|
||
deletePositionFloorApi({id: item.floorId}).then((res) => {
|
||
this.loadFloorData();
|
||
this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
|
||
});
|
||
});
|
||
},
|
||
//新增或编辑楼层
|
||
saveFloorFn() {
|
||
this.$refs["floorForm"].validate((valid) => {
|
||
if (valid) {
|
||
if (this.isAdd) {
|
||
this.floorForm.buildId = this.currentBuildInfo.id;
|
||
addPositionFloorApi(this.floorForm).then((res) => {
|
||
this.addFloorDialog = false;
|
||
this.loadFloorData();
|
||
this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
|
||
});
|
||
} else {
|
||
editPositionFloorApi(this.floorForm).then((res) => {
|
||
this.addFloorDialog = false;
|
||
this.loadFloorData();
|
||
this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
|
||
});
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
showUploadDialog() {
|
||
},
|
||
//保存地图
|
||
saveMapUrlFn() {
|
||
this.$refs.cropper.startCrop();
|
||
var _this = this;
|
||
this.$refs.cropper.getCropBlob((data) => {
|
||
var param = new FormData();
|
||
param.append("files", data, "image.png");
|
||
_this.$http
|
||
.post("/upload/image", param, {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log("aaaaa", res);
|
||
if (res.data.status == "SUCCESS") {
|
||
_this.mapUrl =
|
||
_this.$store.state.FILEURL + res.data.data[0].imageUrl;
|
||
_this.cropperDialog = false;
|
||
_this.$nextTick(() => {
|
||
_this.currentFloorDetail.drawingUrl = res.data.data[0].imageUrl;
|
||
var oImg = document.getElementById("map"),
|
||
w,
|
||
h;
|
||
if (oImg.naturalWidth) {
|
||
// HTML5 browsers
|
||
oImg.onload = function () {
|
||
w = oImg.naturalWidth;
|
||
h = oImg.naturalHeight;
|
||
console.log(w + " " + h);
|
||
_this.submitMapData(w, h);
|
||
};
|
||
} else {
|
||
// IE 6/7/8
|
||
var nImg = new Image();
|
||
// nImg.src = oImg.src;
|
||
nImg.onload = function () {
|
||
w = nImg.width;
|
||
h = nImg.height;
|
||
console.log(w + " " + h);
|
||
_this.submitMapData(w, h);
|
||
};
|
||
nImg.src = oImg.src;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
},
|
||
submitMapData(w, h) {
|
||
this.currentFloorDetail.imageWidth = w;
|
||
this.currentFloorDetail.imageLength = h;
|
||
editPositionFloorApi(this.currentFloorDetail).then((res) => {
|
||
this.loadFloorData();
|
||
});
|
||
},
|
||
beforeAvatarUpload(file) {
|
||
if (this.floorList.length == 0) {
|
||
this.$message.error(this.$t('message.personnelPosition.mapManage.please_add_floor_first'));//请先添加楼层！
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
},
|
||
uploadMapSuccess(res) {
|
||
this.cropperOption.img = this.$store.state.FILEURL + res.data[0].imageUrl;
|
||
this.cropperDialog = true;
|
||
console.log("uploadMapSuccess");
|
||
},
|
||
//获取鼠标位置
|
||
getMousePos(event) {
|
||
var e = event || window.event;
|
||
var scrollX =
|
||
document.documentElement.scrollLeft || document.body.scrollLeft;
|
||
var scrollY =
|
||
document.documentElement.scrollTop || document.body.scrollTop;
|
||
var x = e.pageX || e.clientX + scrollX;
|
||
var y = e.pageY || e.clientY + scrollY;
|
||
//alert('x: ' + x + '\ny: ' + y);
|
||
return {x: x, y: y};
|
||
},
|
||
addPoint(event) {
|
||
this.isAdd = true;
|
||
if (this.projectSettingForm.positionType == 1) {
|
||
this.cardDialog = this.isadding;
|
||
if (this.cardDialog) {
|
||
this.cardForm.cardNo = "";
|
||
this.cardDialogTitle = this.$t('message.personnelPosition.mapManage.add_cardText');//新增卡片
|
||
// console.log(this.mapEL.offsetTop);
|
||
// console.log(this.mapEL.offsetLeft);
|
||
|
||
// console.log(this.getMousePos(event));
|
||
let clickPoint = this.getMousePos(event);
|
||
// this.cardForm.coordinateX =
|
||
// clickPoint.x - this.mapBoxLeft - this.mapEL.offsetLeft;
|
||
this.cardForm.coordinateX = clickPoint.x - 262;
|
||
// this.cardForm.coordinateY =
|
||
// clickPoint.y - this.mapBoxTop - this.mapEL.offsetTop;
|
||
this.cardForm.coordinateY = clickPoint.y - 320;
|
||
}
|
||
} else {
|
||
this.beaconDialog = this.isadding;
|
||
if (this.beaconDialog) {
|
||
this.beaconForm.beaconMinor = "";
|
||
this.beaconForm.beaconMajor = "";
|
||
this.beaconDialogTitle = this.$t('message.personnelPosition.mapManage.add_beaconText');//新增信标
|
||
// console.log(this.mapEL.offsetTop);
|
||
// console.log(this.mapEL.offsetLeft);
|
||
|
||
// console.log(this.getMousePos(event));
|
||
let clickPoint = this.getMousePos(event);
|
||
// this.cardForm.coordinateX =
|
||
// clickPoint.x - this.mapBoxLeft - this.mapEL.offsetLeft;
|
||
this.beaconForm.coordinateX = clickPoint.x - 262;
|
||
// this.cardForm.coordinateY =
|
||
// clickPoint.y - this.mapBoxTop - this.mapEL.offsetTop;
|
||
this.beaconForm.coordinateY = clickPoint.y - 320;
|
||
}
|
||
}
|
||
},
|
||
editPoint(item) {
|
||
this.isAdd = false;
|
||
if (this.projectSettingForm.positionType == 1) {
|
||
this.cardDialogTitle = this.$t('message.personnelPosition.mapManage.edit_cardText');//编辑卡片
|
||
this.cardForm = JSON.parse(JSON.stringify(item));
|
||
this.cardDialog = true;
|
||
} else {
|
||
this.beaconDialogTitle = this.$t('message.personnelPosition.mapManage.edit_beaconText');//编辑信标
|
||
this.beaconForm = JSON.parse(JSON.stringify(item));
|
||
this.beaconDialog = true;
|
||
}
|
||
},
|
||
removePoint(item) {
|
||
if (this.projectSettingForm.positionType == 1) {
|
||
this.$confirm(this.$t('message.personnelPosition.mapManage.confirmText') + "【" + item.cardNo + "】?", this.$t('message.personnelPosition.mapManage.Tips'), {
|
||
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
|
||
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
|
||
type: "warning",
|
||
}).then(() => {
|
||
deletePositionCardApi({id: item.id}).then((res) => {
|
||
this.loadCardData();
|
||
this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
|
||
});
|
||
});
|
||
} else {
|
||
this.$confirm(this.$t('message.personnelPosition.mapManage.confirmText') + "【" + item.beaconMinor + "】?", this.$t('message.personnelPosition.mapManage.Tips'), {
|
||
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
|
||
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
|
||
type: "warning",
|
||
}).then(() => {
|
||
deletePositionBeaconApi({id: item.id}).then((res) => {
|
||
this.loadBeaconData();
|
||
this.$message.success(this.$t('message.personnelPosition.delete_success'));//删除成功!
|
||
});
|
||
});
|
||
}
|
||
},
|
||
// 放大
|
||
magnify() {
|
||
if (this.multiples >= 3) {
|
||
return;
|
||
}
|
||
this.multiples += 0.25;
|
||
},
|
||
// 缩小
|
||
shrink() {
|
||
if (this.multiples <= 0.5) {
|
||
return;
|
||
}
|
||
this.multiples -= 0.25;
|
||
},
|
||
// 旋转
|
||
rotate() {
|
||
this.deg += 90;
|
||
if (this.deg >= 360) {
|
||
this.deg = 0;
|
||
}
|
||
},
|
||
//获取点位
|
||
getPointList() {
|
||
if (this.projectSettingForm.positionType == 1) {
|
||
this.loadCardData();
|
||
} else {
|
||
this.loadBeaconData();
|
||
}
|
||
},
|
||
//获取卡片列表
|
||
loadCardData() {
|
||
getAllPositionCardListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
floorId: this.currentFloorDetail.floorId
|
||
}).then((res) => {
|
||
this.pointList = res.result;
|
||
});
|
||
},
|
||
//添加或编辑卡片
|
||
saveCardFn() {
|
||
this.$refs["cardForm"].validate((valid) => {
|
||
if (valid) {
|
||
if (this.isAdd) {
|
||
this.cardForm.floorId = this.currentFloorDetail.floorId;
|
||
addPositionCardApi(this.cardForm).then((res) => {
|
||
this.cardDialog = false;
|
||
this.loadCardData();
|
||
this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
|
||
});
|
||
} else {
|
||
editPositionCardApi(this.cardForm).then((res) => {
|
||
this.cardDialog = false;
|
||
this.loadCardData();
|
||
this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
|
||
});
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
//获取信标列表
|
||
loadBeaconData() {
|
||
getAllPositionBeaconListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
floorId: this.currentFloorDetail.floorId
|
||
}).then((res) => {
|
||
this.pointList = res.result;
|
||
});
|
||
},
|
||
//添加或编辑信标
|
||
saveBeaconFn() {
|
||
this.$refs["beaconForm"].validate((valid) => {
|
||
if (valid) {
|
||
if (this.isAdd) {
|
||
this.beaconForm.floorId = this.currentFloorDetail.floorId;
|
||
addPositionBeaconApi(this.beaconForm).then((res) => {
|
||
this.beaconDialog = false;
|
||
this.loadBeaconData();
|
||
this.$message.success(this.$t('message.personnelPosition.add_success'));//添加成功！
|
||
});
|
||
} else {
|
||
editPositionBeaconApi(this.beaconForm).then((res) => {
|
||
this.beaconDialog = false;
|
||
this.loadBeaconData();
|
||
this.$message.success(this.$t('message.personnelPosition.edit_success'));//编辑成功！
|
||
});
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.title {
|
||
border-bottom: 1px solid rgba(220, 230, 253, 1);
|
||
color: @--color-primary;
|
||
padding-left: 24px;
|
||
font-size: 14px;
|
||
|
||
span {
|
||
position: relative;
|
||
padding: 16px 0 5px;
|
||
display: inline-block;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: @--color-primary;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left {
|
||
width: 212px;
|
||
float: left;
|
||
}
|
||
|
||
.right {
|
||
float: left;
|
||
width: calc(100% - 222px);
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.addFirm {
|
||
height: 45px;
|
||
line-height: 45px;
|
||
color: @--color-primary;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
background: #fff;
|
||
border-top: 1px solid #dce6fd;
|
||
font-family: PingFangSC-Regular;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.list_content {
|
||
padding: 10px 0;
|
||
height: calc(100% - 87px - 20px);
|
||
position: relative;
|
||
}
|
||
|
||
.content_data {
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
height: 43px;
|
||
line-height: 43px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
&.active {
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
background-color: @--color-primary;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.floorBox {
|
||
margin-bottom: 10px;
|
||
// background-color: rgba(251, 251, 251, 1);
|
||
padding: 20px 20px 10px;
|
||
|
||
.addFloorBox {
|
||
line-height: 20px;
|
||
border: 1px solid @--color-primary;
|
||
|
||
i {
|
||
font-size: 25px;
|
||
margin-top: 20px;
|
||
color: @--color-primary;
|
||
}
|
||
|
||
p {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
li {
|
||
border: 1.2px solid rgba(0, 0, 0, 0.25);
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
// background-color: rgba(41, 216, 180, 0.25);
|
||
display: inline-block;
|
||
margin: 0 10px 10px 0;
|
||
line-height: 60px;
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
vertical-align: top;
|
||
|
||
&.more {
|
||
font-size: 1.6rem;
|
||
line-height: 65px;
|
||
}
|
||
|
||
&.active {
|
||
background-color: #d8e2f9;
|
||
// color: #fff;
|
||
border-color: @--color-primary-deep;
|
||
}
|
||
|
||
.floorName {
|
||
height: 50px;
|
||
line-height: 70px;
|
||
}
|
||
|
||
.caretIcon {
|
||
height: 20px;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mapContainer {
|
||
height: calc(100% - 0px - 40px);
|
||
padding: 20px;
|
||
position: relative;
|
||
|
||
.infoDetail {
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
|
||
span:first-child {
|
||
margin-right: 165px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.uploadBtn {
|
||
float: right;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
|
||
.mapBox {
|
||
border: 1px solid rgba(151, 151, 151, 0.5);
|
||
height: calc(100% - 40px);
|
||
position: relative;
|
||
overflow: auto;
|
||
}
|
||
|
||
.mapContent {
|
||
position: relative;
|
||
// left: 0;
|
||
// top: 0;
|
||
// z-index: 3;
|
||
}
|
||
|
||
// .mapContent2{
|
||
// position: relative;
|
||
// }
|
||
.personBox {
|
||
position: absolute;
|
||
transition: 0.2s all;
|
||
|
||
img {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.redText {
|
||
margin-left: 20px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.devDetail {
|
||
p {
|
||
margin-bottom: 10px;
|
||
|
||
.primaryText {
|
||
margin-right: 20px;
|
||
display: inline-block;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.operateBox {
|
||
// margin-bottom: 10px;
|
||
position: absolute;
|
||
right: 112px;
|
||
top: 11px;
|
||
|
||
img {
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.operateList {
|
||
font-size: 12px;
|
||
|
||
li {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
justify-content: center;
|
||
|
||
img {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
&.last {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |