【概览】使用假数据，选中某一项后地图上显示截至那一项的所有项

src/App.vue

@@ -117,10 +117,6 @@ export default {
     const isShowFadeInMask = ref(process.env.VUE_APP_CLI_MODE === 'dev' ? false : true)
     const progress = ref(0)
     onMounted(() => {
-      // this.$mitt.on('test', e => {
-      //   console.log('test', e)
-      // })
-
       /**
      * 加载unity
      */

src/api.js

@@ -1,4 +1,5 @@
 import axios from "axios"
+import generalData from "@/assets/mock/general.json"
 
 // axios({
 //   method: 'post',
@@ -14,30 +15,45 @@ import axios from "axios"
 // })
 
 export default {
-  getGeneralList({
-    endTime = '',
-    pageNum = 0,
-    pageSize = 0,
-    searchKey = '',
-    startTime = '',
-  } = {}) {
-    return axios({
-      method: 'post',
-      url: `${process.env.VUE_APP_API_ORIGIN}/api/show/company/pageList`,
-      headers: {
-        "Content-Type": "application/json",
-      },
-      data: {
-        endTime,
-        pageNum,
-        pageSize,
-        searchKey,
-        startTime,
-      },
-    }).then((res) => {
-      return res.data.data.records
+  getGeneralList() {
+    const listKeyNameCorrected = generalData.data.map((item) => {
+      const ret = {
+        id: item.id,
+        name: item.name,
+        createDay: item.createTime,
+        description: item.content,
+      }
+      return ret
+    })
+    listKeyNameCorrected.sort((a, b) => {
+      return Date.parse(a.createDay.substring(0, 4)) - Date.parse(b.createDay.substring(0, 4))
     })
+    return Promise.resolve(listKeyNameCorrected)
   },
+  // getGeneralList({
+  //   endTime = '',
+  //   pageNum = 0,
+  //   pageSize = 0,
+  //   searchKey = '',
+  //   startTime = '',
+  // } = {}) {
+  //   return axios({
+  //     method: 'post',
+  //     url: `${process.env.VUE_APP_API_ORIGIN}/api/show/company/pageList`,
+  //     headers: {
+  //       "Content-Type": "application/json",
+  //     },
+  //     data: {
+  //       endTime,
+  //       pageNum,
+  //       pageSize,
+  //       searchKey,
+  //       startTime,
+  //     },
+  //   }).then((res) => {
+  //     return res.data.data.records
+  //   })
+  // },
   getHistoryList({
     pageNum = 0,
     pageSize = 0,

src/main.js

@@ -22,7 +22,8 @@ app.config.globalProperties.$config = config
 app.config.globalProperties.$env = process.env
 
 // 挂载消息发布订阅中心
-app.config.globalProperties.$mitt = mitt()
+window.gMitt = mitt()
+app.config.globalProperties.$mitt = window.gMitt
 
 // 解析、挂载浏览器信息
 const uaParser = new UAParser()

src/utils.js

@@ -107,11 +107,9 @@ export default {
       console.log('unity scene loaded')
     }
     window.onRequestApiSuccess = () => { // unity模型里拿到了后端数据
-      for (let index = 1; index <= 36; index++) {
-        window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', index) //显示id为index的企业
-        // window.gUnityInst.SendMessage('Panel1', 'HideEnterprise', index); //隐藏id为index的企业
-      }
+      window.gMitt.emit('RequestApiSuccess-general', {})
       loadingInstance.close()
+
     }	//场景加载完毕回调
   },
   loadUnitySceneMetaverse() {
@@ -124,7 +122,7 @@ export default {
       console.log('unity scene loaded')
     }
     window.onRequestApiSuccess = () => { // unity模型里拿到了后端数据
-      console.log('沙比 !!!!!!!!!!!!!!!!!!')
+      window.gMitt.emit('RequestApiSuccess-metaverse', {})
       loadingInstance.close()
     }
   },

src/views/General.vue

@@ -104,6 +104,7 @@
 import {
   computed,
   onMounted,
+  onUnmounted,
   watch,
   reactive,
   ref,
@@ -117,13 +118,11 @@ export default {
   setup () {
     const filterKeyword = ref('')
 
+    // 初始化数据列表
     const corpListRaw = reactive({ value: null })
     const corpListMap = reactive(new Map())
-    watch(filterKeyword, utils.debounce(async (vNew) => {
-      corpListRaw.value = await api.getGeneralList({
-        searchKey: filterKeyword.value
-      })
-      corpListMap.clear()
+    onMounted(async () => {
+      corpListRaw.value = await api.getGeneralList()
       corpListRaw.value.forEach(element => {
         let decade = ''
         if (element.createDay.substring(0, 2) === '18') {
@@ -140,10 +139,24 @@ export default {
         }
         corpListMap.get(decade).push(element)
       })
-    }, 500, false), {
-      immediate: true,
     })
 
+    // 自动选中第一个条目
+    function selectFirstItemAuto() {
+      onClickCorpItem(corpListRaw.value[0].id)
+    }
+    window.gMitt.on('RequestApiSuccess-general', selectFirstItemAuto)
+    onUnmounted(() => {
+      window.gMitt.off('RequestApiSuccess-general', selectFirstItemAuto)
+    })
+
+    // 搜索框功能
+    // watch(filterKeyword, utils.debounce(async (vNew) => {
+    // }, 500, false), {
+    //   immediate: true,
+    // })
+
+    // 被选中的数据
     const activeCorpId = ref(null)
     const isShowDesc = ref(true)
     const activeCorpInfo = computed(() => {
@@ -155,17 +168,24 @@ export default {
         return {}
       }
     })
+
     // 无论是网页里还是unity内部点击了企业，都调用这个
     function onClickCorpItem(id) {
-      if ((typeof activeCorpId.value === 'number')) {
-        gUnityInst.SendMessage('Panel1', 'SetEnterpriseUnSelected', activeCorpId.value) //设置id为1的企业为未选中状态(此id需要是已显示的)
+      let isFound = false
+      for (let index = 0; index < corpListRaw.value.length; index++) {
+        const element = corpListRaw.value[index]
+        if (element.id === id) {
+          isFound = true
+          window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', element.id) //显示某个企业
+          window.gUnityInst.SendMessage('Panel1', 'SetEnterpriseUnSelected', element.id) //高亮某个企业
+        } else if (!isFound) {
+          window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', element.id) //显示某个企业
+        } else {
+          window.gUnityInst.SendMessage('Panel1', 'HideEnterprise', element.id) //隐藏某个企业
+        }
       }
-      gUnityInst.SendMessage('Panel1', 'SetEnterpriseSelected', id) //设置id为1的企业为选中状态(此id需要是已显示的)
-
       activeCorpId.value = id
       isShowDesc.value = true
-
-      console.log(`corp-item-${id}`)
       const clickedElement = document.querySelector(`#corp-item-${id}`)
       if (clickedElement) {
         clickedElement.scrollIntoView()
@@ -173,6 +193,7 @@ export default {
     }
     window.handleClickEnterprise = onClickCorpItem
 
+    // loading mask相关
     const isShowLoadingMask = ref(true)
     onMounted(() => {
       setTimeout(() => {
@@ -202,7 +223,6 @@ export default {
     ]),
   },
   mounted() {
-    // this.$mitt.emit('test', { msg: 'home mounted' })
   },
   beforeUnmount() {
   },