浏览代码

辅助屏-空间照片

yangjunjing 5 年之前
父节点
当前提交
cade28a70d
共有 1 个文件被更改,包括 42 次插入6 次删除
  1. 42 6
      src/views/screen/splitscreen/spaceledger/index.vue

+ 42 - 6
src/views/screen/splitscreen/spaceledger/index.vue

@@ -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>