|
@@ -27,10 +27,25 @@
|
|
|
<p><b>位置图片:</b></p>
|
|
|
<canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
|
|
|
</div>
|
|
|
- <div class="space-img">
|
|
|
- <!-- 业务空间图片,后台未提供 -->
|
|
|
- <img src="" alt="">
|
|
|
+ <div class="space-img" v-if="spaceDetails.Pic">
|
|
|
+ <div class="img-box" v-for="(item) in spaceDetails.Pic" :key='item'>
|
|
|
+ <img :src="'/image-service/common/file_get?systemId=revit&key=${item}'" alt="空间图片">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- <div class="space-img" v-if="!spaceDetails.Pic">
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="https://hbimg.huabanimg.com/bac4414614279b3f7bef2d92d6d918bba7b556f82c501-NkQLir_fw658" alt="空间图片">
|
|
|
+ </div>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="https://hbimg.huabanimg.com/249e4a816fbc02bc50afbb04a82488f8f096937c27b66-pEQMMO_fw658" alt="空间图片">
|
|
|
+ </div>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="https://hbimg.huabanimg.com/bac4414614279b3f7bef2d92d6d918bba7b556f82c501-NkQLir_fw658" alt="空间图片">
|
|
|
+ </div>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="https://hbimg.huabanimg.com/249e4a816fbc02bc50afbb04a82488f8f096937c27b66-pEQMMO_fw658" alt="空间图片">
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
</el-aside>
|
|
|
<el-main>
|
|
|
<el-tabs v-model="activeTab" type='card'>
|
|
@@ -175,7 +190,7 @@ export default {
|
|
|
this.getGraphy();
|
|
|
})
|
|
|
},
|
|
|
- getGraphy() {
|
|
|
+ getGraphy() {// 绘制空间位置图片
|
|
|
let that = this;
|
|
|
that.clearGraphy()
|
|
|
that.scene = new DivideFloorScene();
|
|
@@ -196,7 +211,7 @@ export default {
|
|
|
Color: "#a384fc",
|
|
|
}
|
|
|
that.scene.addZoneList([tempArr]);
|
|
|
- this.scene.isSpaceSelectable = true;
|
|
|
+ this.scene.isSpaceSelectable = false;
|
|
|
})
|
|
|
},
|
|
|
clearGraphy() {
|
|
@@ -248,7 +263,7 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
// 监听路由地址,并判断有RoomID和zone,重新请求空间数据
|
|
|
- "$route"(to,from) {
|
|
|
+ "$route"(to, from) {
|
|
|
if (this.$route.query.RoomID && this.$route.query.zone) {
|
|
|
this.getData();
|
|
|
window.location.reload();
|
|
@@ -287,6 +302,8 @@ export default {
|
|
|
margin: 20px 0 0 20px;
|
|
|
padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
.aside-top {
|
|
|
overflow: hidden;
|
|
|
.aside-top-left {
|
|
@@ -302,6 +319,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .space-img {
|
|
|
+ width: 100%;
|
|
|
+ .img-box {
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ height: 180px;
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.el-main {
|
|
|
color: #333;
|
|
@@ -327,4 +360,7 @@ export default {
|
|
|
.unit {
|
|
|
color: rgb(167, 167, 167);
|
|
|
}
|
|
|
+#floorCanvas{
|
|
|
+ position: static;
|
|
|
+}
|
|
|
</style>
|