|
@@ -4,10 +4,21 @@
|
|
<template #left>
|
|
<template #left>
|
|
<van-icon name="arrow-left" size="18" color="#333333" />
|
|
<van-icon name="arrow-left" size="18" color="#333333" />
|
|
</template>
|
|
</template>
|
|
- <template #right>
|
|
|
|
|
|
+ <template #right v-if="legendList.length">
|
|
<span style="color:#333333;">图例</span>
|
|
<span style="color:#333333;">图例</span>
|
|
</template>
|
|
</template>
|
|
</van-nav-bar>
|
|
</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">
|
|
<div id="bind-map-content">
|
|
<canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
|
|
<canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
|
|
<!-- 地图底部操作按钮 -->
|
|
<!-- 地图底部操作按钮 -->
|
|
@@ -65,6 +76,7 @@ export default {
|
|
topologyParser: null, // 解析器数据
|
|
topologyParser: null, // 解析器数据
|
|
fParser: null, // 底图解析器
|
|
fParser: null, // 底图解析器
|
|
direction: '竖屏',
|
|
direction: '竖屏',
|
|
|
|
+ show: false,
|
|
legendList: [], // 图例列表
|
|
legendList: [], // 图例列表
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -100,7 +112,9 @@ export default {
|
|
},
|
|
},
|
|
// 展示图例
|
|
// 展示图例
|
|
showLegend() {
|
|
showLegend() {
|
|
- console.log("显示图例");
|
|
|
|
|
|
+ if(this.legendList.length) {
|
|
|
|
+ this.show = true;
|
|
|
|
+ }
|
|
},
|
|
},
|
|
// 获取图例数据
|
|
// 获取图例数据
|
|
getLegendData(floorObj) {
|
|
getLegendData(floorObj) {
|
|
@@ -110,14 +124,15 @@ export default {
|
|
ProjectID: this.plazaId,
|
|
ProjectID: this.plazaId,
|
|
Floors: [{FloorId: floorObj.gname, FloorName: floorObj.code}]
|
|
Floors: [{FloorId: floorObj.gname, FloorName: floorObj.code}]
|
|
}
|
|
}
|
|
|
|
+ this.legendList = [];
|
|
if (this.categoryId !== "SCPZ") {
|
|
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;
|
|
overflow: hidden;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
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 {
|
|
#bind-map-content {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: calc(100% - 50px);
|
|
height: calc(100% - 50px);
|