Преглед изворни кода

'平面图添加展示图例页面'

zhangyu пре 4 година
родитељ
комит
c80fa1dd38
1 измењених фајлова са 68 додато и 9 уклоњено
  1. 68 9
      src/views/overview/MapView.vue

+ 68 - 9
src/views/overview/MapView.vue

@@ -4,10 +4,21 @@
       <template #left>
         <van-icon name="arrow-left" size="18" color="#333333" />
       </template>
-      <template #right>
+      <template #right v-if="legendList.length">
         <span style="color:#333333;">图例</span>
       </template>
     </van-nav-bar>
+    <transition name="van-slide-down">
+      <div class="legendBox" v-show="show" @touchmove="show=false">
+        <ul class="legend-list">
+          <li class="legend-item" v-for="(item, index) in legendList" :key="`legend${index}`">
+            <img :src="`/serve/topology-wanda/Picture/query/${item.Url}`" alt>
+            {{`${item.Name}×${item.Num}`}}
+          </li>
+        </ul>
+        <p class="legend-close" @click="show = false"></p>
+      </div>
+    </transition>
     <div id="bind-map-content">
       <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
       <!-- 地图底部操作按钮 -->
@@ -65,6 +76,7 @@ export default {
       topologyParser: null, // 解析器数据
       fParser: null, // 底图解析器
       direction: '竖屏',
+      show: false,
       legendList: [], // 图例列表
     }
   },
@@ -100,7 +112,9 @@ export default {
     },
     // 展示图例
     showLegend() {
-      console.log("显示图例");
+      if(this.legendList.length) {
+        this.show = true;
+      }
     },
     // 获取图例数据
     getLegendData(floorObj) {
@@ -110,14 +124,15 @@ export default {
         ProjectID: this.plazaId,
         Floors: [{FloorId: floorObj.gname, FloorName: floorObj.code}]
       }
+      this.legendList = [];
       if (this.categoryId !== "SCPZ") {
-        //数据处理
-        // appGraphElementQuery(params).then(res => {
-        //   this.floorData = res.Data.map(floor => {
-        //     floor.Open = false;
-        //     return floor;
-        //   });
-        // })
+        appGraphElementQuery(params).then(res => {
+          if(res.Data[0] && res.Data[0].Statistics && res.Data[0].Statistics.length) {
+            this.legendList = res.Data[0].Statistics.filter(item => {
+              return item.Url && item.Type === "Image"
+            });
+          }
+        })
       }
     },
     // 切换楼层
@@ -532,6 +547,50 @@ export default {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  /deep/ .van-nav-bar {
+    z-index: 999;
+  }
+  .legendBox {
+    position: fixed;
+    top: 46px;
+    width: 100%;
+    height: auto;
+    padding: 16px 10px 0;
+    z-index: 99;
+    background: #FFFFFF;
+    box-shadow: 0px 6px 15px 0px rgba(31, 36, 41, 0.08);
+    .legend-list {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .legend-item {
+        padding: 0 8px;
+        height: 24px;
+        font-size: 12px;
+        color: #1F2429;
+        line-height: 24px;
+        background: #E4E6E7;
+        border-radius: 12px;
+        margin: 0 5px 12px;
+          img {
+            display: inline-block;
+            max-width: 16px;
+            max-height: 16px;
+            vertical-align: text-bottom;
+          }
+      }
+      .legend-item:last-child {
+        margin-right: auto;
+      }
+    }
+    .legend-close {
+      margin: 10px auto 7px;
+      width: 56px;
+      height: 4px;
+      border-radius: 5px;
+      background: #D8D8D8;
+    }
+  }
   #bind-map-content {
     width: 100%;
     height: calc(100% - 50px);