Merge branch 'dev-yjl' into 'shenzhen-dev'

修改人员定位系统页面-(点位配置、人员定位)平面图显示图标

See merge request !60
This commit is contained in:
yjlHub 2022-11-19 17:48:26 +08:00
commit 3df5e71c49
5 changed files with 141 additions and 126 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -138,8 +138,8 @@
<img
@mousedown.prevent="move(index,$event)"
@mouseup="up(index,$event)"
style="width: 70px; height:70px;"
src="@/assets/images/deepFoundationPitManage/ljz.png"
style="width: 30px; height:30px;"
src="@/assets/images/deepFoundationPitManage/ld.png"
/>
</li>
</ul>

View File

@ -154,8 +154,8 @@
<img
@mousedown.prevent="move(index,$event)"
@mouseup="up(index,$event)"
style="width: 70px; height:70px;"
src="@/assets/images/deepFoundationPitManage/zc.png"
style="width: 30px; height:30px;"
src="@/assets/images/deepFoundationPitManage/jz.png"
/>
</li>
</ul>

View File

@ -20,9 +20,7 @@
</div>
<div ref="mapbox">
<vue-scroll style="height: 780px">
<div
class="img-box"
>
<div class="img-box">
<img
ref="map"
v-if="mapUrl"
@ -42,26 +40,36 @@
'scale(' + 1 / imgZoom + ')' + ' ' + item.transform,
}"
>
<el-tooltip :content="item.name" effect="dark" placement="top" v-if="item.type == 1">
<el-tooltip
:content="item.name"
effect="dark"
placement="top"
v-if="item.type == 1"
>
<img
@click="detailsBtn(item)"
style="width: 70px; height: 70px"
src="@/assets/images/deepFoundationPitManage/ljz.png"
@click="detailsBtn(item)"
style="width: 30px; height: 30px"
src="@/assets/images/deepFoundationPitManage/ld.png"
/>
</el-tooltip>
<el-tooltip :content="item.name" effect="dark" placement="top" v-if="item.type != 1">
<el-tooltip
:content="item.name"
effect="dark"
placement="top"
v-if="item.type != 1"
>
<img
@click="detailsBtn(item)"
style="width: 70px; height: 70px"
src="@/assets/images/deepFoundationPitManage/zc.png"
style="width: 30px; height: 30px"
src="@/assets/images/deepFoundationPitManage/jz.png"
/>
</el-tooltip>
</li>
</ul>
</div>
</vue-scroll>
</div>
</div>
<!-- 点位详情弹框 -->
@ -149,8 +157,8 @@ export default {
if (item.id == val) {
this.mapUrl = item.imageUrl;
this.$nextTick(() => {
this.getNaturalSize();
});
this.getNaturalSize();
});
}
});
console.log("this.mapUrl", this.mapUrl);
@ -191,7 +199,7 @@ export default {
let _this = this;
var img = new Image();
img.src = Domlement.src;
console.log("getNaturalSize 图片地址",img.src);
console.log("getNaturalSize 图片地址", img.src);
img.onload = function () {
natureSize.width = img.width;
natureSize.height = img.height;
@ -233,7 +241,7 @@ export default {
}).then((res) => {
console.log("点位信息", res);
if ((res.code = 200)) {
this.PointSummary = []
this.PointSummary = [];
this.baseStationList = res.result.baseStationList;
this.figureBuildingList = res.result.figureBuildingList;
@ -242,15 +250,14 @@ export default {
this.PointSummary.push(item);
});
this.figureBuildingList.forEach((item) => {
console.log("item hotspot--",item.hotspot);
if(item.hotspot != null) {
let hstspot = JSON.parse(item.hotspot)
item.mapX = hstspot[0]
item.mapY = hstspot[1]
console.log("item hotspot--", item.hotspot);
if (item.hotspot != null) {
let hstspot = JSON.parse(item.hotspot);
item.mapX = hstspot[0];
item.mapY = hstspot[1];
}
item.type = 1;
item.name = item.buildingName
item.name = item.buildingName;
this.PointSummary.push(item);
});
this.pointList = this.PointSummary;
@ -268,10 +275,9 @@ export default {
type: val.type,
}).then((res) => {
console.log("查看点位信息详情 数据", res);
this.tableData = res.result
this.tableData = res.result;
});
},
},
};
</script>
@ -287,113 +293,122 @@ export default {
justify-content: space-between;
align-items: center;
}
height: 80%;
width: 100%;
position: relative;
// text-align: center;
.tag-box {
// position: absolute;
// top: 0;
// right: 0;
margin-top: 3px;
margin-bottom: 6px;
height: 80%;
width: 100%;
position: relative;
// text-align: center;
.tag-box {
// position: absolute;
// top: 0;
// right: 0;
margin-top: 3px;
margin-bottom: 6px;
display: flex;
justify-content: flex-end;
.tag-item {
display: flex;
justify-content: flex-end;
.tag-item {
display: flex;
align-items: center;
margin-right: 76px;
span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
align-items: center;
margin-right: 76px;
span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
}
.img-box {
// margin: 0 auto;
// height: 100%;
// width: 100%;
// top: 50%;
transform: translateY(-50%);
transform-origin: left top;
position: relative;
img {
}
.img-box {
// margin: 0 auto;
// height: 100%;
// width: 100%;
// top: 50%;
transform: translateY(-50%);
transform-origin: left top;
position: relative;
img {
position: absolute;
width: 96%;
height: 755px;
display: block;
margin: 0 0 0 28px;
margin-top: 20px;
}
.point-list {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
li {
display: inline-block;
position: absolute;
width: 100% ;
height: 800px ;
display: block;
margin: 0 auto;
margin-top: 20px;
}
.point-list {
width: 100%;
height: 100%;
.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;
}
}
}
.point-title2 {
width: auto;
height: auto;
white-space: nowrap;
font-size: 16px;
padding: 10px 20px;
}
.right_detail {
left: 30px;
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;
}
}
}
.point-title2 {
width: auto;
height: auto;
white-space: nowrap;
font-size: 16px;
padding: 10px 20px;
}
.right_detail {
left: 30px;
top: 0;
transform: translate(0, 0);
}
.right_title {
left: 30px;
top: -8px;
transform: translate(0, 0);
}
transform: translate(0, 0);
}
.right_title {
left: 30px;
top: -8px;
transform: translate(0, 0);
}
}
}
.el-select {
margin-right: 20px;
}
.el-select {
margin-right: 20px;
}
.noDataImgBox {
img {
width: 250px;
margin-bottom: 200px;
}
p {
font-size: 20px;
}
}
</style>