swkk: 热点列表

src/components/HotspotDetail.vue

@@ -345,11 +345,9 @@ export default {
     },
   },
   mounted() {
-    this.$msgCenter.publish('swkk-guide-bar-show')
     this.mustMute()
   },
   beforeDestroy() {
-    this.$msgCenter.publish('swkk-guide-bar-hide')
     this.cancelMustMute()
   },
   methods: {

src/components/HotspotList.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="hotspot-list">
+    <div class="top-bar">
+      <button
+        class="back"
+        @click="$emit('back')"
+      >
+        <img
+          src="@/assets/images/swkk/back-simple.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <div class="search-wrap">
+        <input
+          v-model.trim="keyword"
+          maxlength="30"
+          type="text"
+          placeholder="请输入关键字"
+          @keydown.enter="onClickSearch"
+        >
+        <button
+          class="search"
+          @click="onClickSearch"
+        >
+          搜索
+        </button>
+      </div>
+    </div>
+    <div
+      v-if="historyList.length"
+      class="search-history"
+    >
+      <div class="title-bar">
+        <h2>历史搜索</h2>
+        <button
+          class="clear"
+          @click="onClickDelete"
+        >
+          <img
+            src="@/assets/images/swkk/delete.png"
+            alt=""
+            draggable="false"
+          >
+        </button>
+      </div>
+      <ul class="history-list">
+        <li
+          v-for="(item, index) in historyList"
+          :key="index"
+          @click="onClickHistoryItem(item)"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <ul class="search-result">
+      <li
+        v-for="(item, index) in resultList"
+        :key="index"
+        @click="$emit('click-hotspot', item)"
+        v-html="highlightKeyword(item.title.split('&')[0])"
+      />
+      <div
+        v-if="!resultList.length"
+        class="no-data"
+      >
+        <img
+          src="@/assets/images/swkk/no-data-gray.png"
+          alt=""
+          draggable="false"
+        >
+        <div class="text">
+          暂无内容
+        </div>
+      </div>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    hotspotData: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      keyword: '',
+      historyList: [],
+      resultList: [],
+    }
+  },
+  computed: {
+    hotspotsCombiled() {
+      return this.hotspotData.filter(v => v.title.split("&")[2] || !v.title.includes("&"))
+    },
+  },
+  mounted() {
+    this.historyList = JSON.parse(localStorage.getItem('hotspot-search-history'))
+    this.onClickSearch()
+  },
+  destroyed() {
+    localStorage.setItem('hotspot-search-history', JSON.stringify(this.historyList))
+  },
+  methods: {
+    onClickSearch() {
+      if (this.keyword && !this.historyList.includes(this.keyword)) {
+        this.historyList.unshift(this.keyword)
+        if (this.keyword.length === 31) {
+          this.keyword.pop()
+        }
+      }
+      this.resultList = this.hotspotsCombiled.filter(v => v.title.split("&")[0].includes(this.keyword))
+    },
+    onClickDelete() {
+      this.historyList = []
+    },
+    onClickHistoryItem(historyItem) {
+      this.keyword = historyItem
+      this.onClickSearch()
+    },
+    highlightKeyword(title) {
+      if (this.keyword) {
+        const reg = new RegExp(`(${this.keyword})`, 'gi')
+        const replace = '<span style="color:#930909;">$1</span>'
+        return title.replace(reg, replace)
+      } else {
+        return title
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,251,245,0.9);
+  backdrop-filter: blur(4px);
+  display: flex;
+  flex-direction: column;
+  > .top-bar {
+    flex: 0 0 auto;
+    margin-top: 3.67rem;
+    margin-left: 0.33rem;
+    margin-right: 1.33rem;
+    display: flex;
+    align-items: center;
+    > button.back {
+      width: 1.08rem;
+      height: 2.46rem;
+      box-sizing: content-box;
+      padding: 1rem;
+      flex: 0 0 auto;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > .search-wrap {
+      margin-left: 0.71rem;
+      height: 5rem;
+      flex: 1 0 1px;
+      background: #FFFFFF;
+      border-radius: 4.17rem 4.17rem 4.17rem 4.17rem;
+      border: 0.08rem solid #930909;
+      display: flex;
+      padding: 0.54rem 0.54rem 0.54rem 1.21rem;
+      > input {
+        flex: 1 0 1px;
+        height: 100%;
+        color: #666666;
+        font-size: 1.67rem;
+      }
+      > button.search {
+        height: 100%;
+        width: 8.33rem;
+        font-size: 1.67rem;
+        color: #D8B275;
+        background: #930909;
+        border-radius: 2.08rem 2.08rem 2.08rem 2.08rem;
+        margin-left: 0.54rem;
+      }
+    }
+  }
+  > .search-history {
+    flex: 0 0 auto;
+    margin-top: 2.92rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+    > .title-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > h2 {
+        font-size: 1.83rem;
+        font-weight: bold;
+        color: #333333;
+      }
+      > button.clear {
+        width: 2.08rem;
+        height: 2.15rem;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    > .history-list {
+      margin-top: 1.46rem;
+      display: flex;
+      flex-wrap: wrap;
+      margin-right: -1.25rem;
+      > li {
+        height: 3.33rem;
+        line-height: 3.33rem;
+        background-color: #fff;
+        border-radius: 1.67rem;
+        padding: 0 1.71rem;
+        display: inline-block;
+        margin-right: 1.25rem;
+        margin-bottom: 1rem;
+        font-size: 1.5rem;
+        color: #666666;
+        max-width: 20rem;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  > .search-result {
+    flex: 1 0 1px;
+    margin-top: 1.92rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+    overflow: auto;
+    position: relative;
+    > li {
+      display: block;
+      color: #666666;
+      font-size: 1.67rem;
+      padding: 1em 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    > .no-data {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      > img {
+        width: 18.21rem;
+        height: 16.54rem;
+      }
+      > .text {
+        margin-top: 1.88rem;
+        font-size: 1.83rem;
+        color: #666666;
+      }
+    }
+  }
+}
+</style>

src/config.js

@@ -8,6 +8,14 @@ export default {
       self: '6',
       children: {},
     },
+    swkkHotspotDetail: {
+      self: '6',
+      children: {},
+    },
+    swkkHotspotList: {
+      self: '6',
+      children: {},
+    },
     pano: {
       self: '1',
       children: {},

src/views/SwkkView.vue

@@ -98,6 +98,24 @@
         >
         <div>顶部俯视</div>
       </button>
+      <button
+        :class="{active: isShowHotspotList}"
+        @click="isShowHotspotList = true"
+      >
+        <img
+          v-show="!isShowHotspotList"
+          src="@/assets\images\swkk\hotspot-list.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-show="isShowHotspotList"
+          src="@/assets\images\swkk\hotspot-list-active.png"
+          alt=""
+          draggable="false"
+        >
+        <div>热点列表</div>
+      </button>
     </menu>
 
     <!-- 右上地图 -->
@@ -168,40 +186,63 @@
     <HotspotDetail
       v-if="isShowDetail"
       class="hotspot-detail"
+      :style="{
+        zIndex: $globalConfig.zIndex.swkkHotspotDetail.self
+      }"
       :hotspot-list="relatedHotspotList"
       @close="isShowDetail = false"
     />
+
+    <HotspotList
+      v-if="isShowHotspotList"
+      class="hotspot-list"
+      :style="{
+        zIndex: $globalConfig.zIndex.swkkHotspotList.self
+      }"
+      :hotspot-data="baseHotData"
+      @back="isShowHotspotList = false"
+      @click-hotspot="onClickHotspot"
+    />
   </div>
 </template>
 
 <script>
 import HotspotDetail from "@/components/HotspotDetail.vue"
+import HotspotList from "@/components/HotspotList.vue"
+
 export default {
   components: {
     HotspotDetail,
+    HotspotList,
   },
   data() {
-    //这里存放数据
     return {
+      // 四维看看库相关
       kankan: null,
+      tagView: null,
+      mode: 2,
+
       isLoading: true,
 
+      // 楼层
       floor: 0,
 
+      // 自动巡游相关
       canClickAutoMoving: false,
       isAutoMoving: false,
       isChangingAutoMovingStatus: false,
       autoMovingProgress: 0,
 
+      // 自动导览与切换场景相关
       isShowTourGuide: false,
       tourList: [],
       isChangingScene: false,
       curSceneIdx: null,
 
-      mode: 2,
-
+      // 热点相关
       baseHotData: null,
       isShowDetail: false,
+      isShowHotspotList: false,
     }
   },
   computed: {
@@ -335,6 +376,8 @@ export default {
             `
       },
     }).then((TagView) => {
+      this.tagView = TagView
+
       // 监听手动点击事件
       TagView.on("click", (e) => {
 
@@ -345,7 +388,6 @@ export default {
               this.relatedHotspotList.push(item)
             }
           })
-          console.log(this.relatedHotspotList)
         } else { // 单个热点
           this.relatedHotspotList.push(e.data)
         }
@@ -463,6 +505,24 @@ export default {
       await player.selectPart(index)
       this.isChangingScene = false
     },
+    onClickHotspot(hotspot) {
+      this.isShowHotspotList = false
+      this.relatedHotspotList = []
+      if (hotspot.title.split("&")[1]) { // 如果是多个热点合并
+        this.baseHotData.forEach((item) => {
+          if (item.title.split("&")[1] === hotspot.title.split("&")[1]) {
+            this.relatedHotspotList.push(item)
+          }
+        })
+      } else { // 单个热点
+        this.relatedHotspotList.push(hotspot)
+      }
+
+      // 聚焦当前点击的热点
+      this.tagView && this.tagView.focus(hotspot.sid)
+
+      this.isShowDetail = true
+    }
   },
 }
 </script>
@@ -472,7 +532,6 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  z-index: 0;
   .swkk-wrap {
     position: absolute;
     top: 0;