|
|
@@ -32,6 +32,7 @@ const isShowHosList = ref(false)
|
|
|
|
|
|
const currentUnit = ref({} as any)
|
|
|
const currentHot = ref({} as any)
|
|
|
+const currentHotsUnit = ref({} as any)
|
|
|
const isReady = ref(false)
|
|
|
const pointInfo = ref('')
|
|
|
|
|
|
@@ -47,7 +48,6 @@ const changeUnit = (unit: any) => {
|
|
|
isShowExperienceGame.value = true
|
|
|
}
|
|
|
const hotspots = ref([] as any)
|
|
|
-
|
|
|
// 用Object.keys 和 reduce 方法过滤空值属性
|
|
|
const filterEmptyProps = (obj: any) => {
|
|
|
return Object.keys(obj).reduce((acc, key) => {
|
|
|
@@ -59,29 +59,54 @@ const filterEmptyProps = (obj: any) => {
|
|
|
}, {});
|
|
|
}
|
|
|
|
|
|
-// 批量去掉序号
|
|
|
const sortHotspots = (hotspots: any) => {
|
|
|
- const newHot = {}
|
|
|
- for (let key in hotspots) {
|
|
|
- const index = hotspots[key].title.indexOf('.')
|
|
|
- if (index != -1) {
|
|
|
- console.log('删除', index, hotspots[key])
|
|
|
- hotspots[key].title = hotspots[key].title.substring(index + 1)
|
|
|
- // @ts-ignore
|
|
|
- newHot[key] = hotspots[key]
|
|
|
-
|
|
|
- } else {
|
|
|
- // @ts-ignore
|
|
|
- newHot[key] = hotspots[key]
|
|
|
+ // 将数据对象转换成数组
|
|
|
+ let newHotspots = Object.values(hotspots)
|
|
|
+ let newShowHotspots = [] as any
|
|
|
+ newHotspots.forEach((item: any) => {
|
|
|
+ const nameArr = item.title.split('&')
|
|
|
+ if (nameArr[1] == 'show') {
|
|
|
+ newShowHotspots.push({
|
|
|
+ ...item,
|
|
|
+ title: nameArr[2],
|
|
|
+ sort: nameArr[0]
|
|
|
+ })
|
|
|
}
|
|
|
- }
|
|
|
- return newHot
|
|
|
+ })
|
|
|
+ return newShowHotspots.sort((a: any, b: any) => {
|
|
|
+ return Number(a.sort) - Number(b.sort)
|
|
|
+ })
|
|
|
}
|
|
|
+
|
|
|
+// // 批量去掉序号
|
|
|
+// const sortHotspots = (hotspots: any) => {
|
|
|
+// const newHot = {}
|
|
|
+// for (let key in hotspots) {
|
|
|
+// let index = hotspots[key].title.indexOf('.')
|
|
|
+
|
|
|
+// if (index != -1) {
|
|
|
+// hotspots[key].title = hotspots[key].title.substring(index + 1)
|
|
|
+// // @ts-ignore
|
|
|
+// newHot[key] = hotspots[key]
|
|
|
+
|
|
|
+// } else if (hotspots[key].title.indexOf(' ')) {
|
|
|
+// index = hotspots[key].title.indexOf(' ')
|
|
|
+// hotspots[key].title = hotspots[key].title.substring(index + 1)
|
|
|
+// // @ts-ignore
|
|
|
+// newHot[key] = hotspots[key]
|
|
|
+// } else {
|
|
|
+// // @ts-ignore
|
|
|
+// newHot[key] = hotspots[key]
|
|
|
+// }
|
|
|
+// }
|
|
|
+// return newHot
|
|
|
+// }
|
|
|
// 获取所有单元的热点列表
|
|
|
const getAllHotspot = () => {
|
|
|
store.dataAll.sceneList.forEach((item: any) => {
|
|
|
// https://super.4dage.com
|
|
|
axios.get(`https://super.4dage.com/data/${item.code}/data2.js?m=${new Date().getTime()}`).then((res: any) => {
|
|
|
+ console.log(sortHotspots)
|
|
|
//@ts-ignore
|
|
|
hotspots.value.push({
|
|
|
id: item.id,
|
|
|
@@ -90,7 +115,8 @@ const getAllHotspot = () => {
|
|
|
code: item.code,
|
|
|
xuliezhen: item.xuliezhen,
|
|
|
gameId: item.gameId,
|
|
|
- backPoint: item.backPoint
|
|
|
+ backPoint: item.backPoint,
|
|
|
+ sort: item.sort,
|
|
|
})
|
|
|
if (item.code == route.query.code) {
|
|
|
currentUnit.value = {
|
|
|
@@ -102,6 +128,7 @@ const getAllHotspot = () => {
|
|
|
gameId: item.gameId,
|
|
|
backPoint: item.backPoint
|
|
|
}
|
|
|
+ currentHotsUnit.value = currentUnit.value
|
|
|
store.currentUnit = currentUnit.value
|
|
|
if (route.query.name == '尾厅') pointInfo.value = '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1'
|
|
|
}
|
|
|
@@ -109,14 +136,9 @@ const getAllHotspot = () => {
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
// let newList = []
|
|
|
- hotspots.value.forEach((item: any, index: number) => {
|
|
|
- if (item.id == 1) {
|
|
|
- hotspots.value.unshift(hotspots.value.splice(index, 1)[0])
|
|
|
- } else if (item.id == 0) {
|
|
|
- hotspots.value.unshift(hotspots.value.splice(index, 1)[0])
|
|
|
- } else if (item.id == 9) {
|
|
|
- hotspots.value.push(hotspots.value.splice(index, 1)[0])
|
|
|
- }
|
|
|
+ // 场景排序
|
|
|
+ hotspots.value.sort((a: any, b: any) => {
|
|
|
+ return Number(a.sort) - Number(b.sort)
|
|
|
})
|
|
|
}, 500)
|
|
|
}
|
|
|
@@ -138,11 +160,20 @@ watch(isShowHosList, (newVal: any) => {
|
|
|
})
|
|
|
|
|
|
const goHotCamarer = (hot: any) => {
|
|
|
- const iframe = document.getElementById('sceneiframe') as HTMLIFrameElement
|
|
|
- //@ts-ignore
|
|
|
- iframe.contentWindow.initCamera(hot.sid)
|
|
|
- currentHot.value = hot
|
|
|
- isShowHosList.value = false
|
|
|
+ currentUnit.value = currentHotsUnit.value
|
|
|
+ store.currentUnit = currentHotsUnit.value
|
|
|
+ pointInfo.value = ''
|
|
|
+ // isShowExperienceGame.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ const iframe = document.getElementById('sceneiframe') as HTMLIFrameElement
|
|
|
+ //@ts-ignore
|
|
|
+ iframe.contentWindow.initCamera(hot.sid)
|
|
|
+
|
|
|
+ currentHot.value = hot
|
|
|
+ console.log(currentHot.value)
|
|
|
+ isShowHosList.value = false
|
|
|
+ isShowFigure.value = true
|
|
|
+ }, 1500)
|
|
|
}
|
|
|
|
|
|
// 形象状态 greeting-招呼 idle-静默 talk-说话
|
|
|
@@ -454,9 +485,8 @@ const changePassFu = () => {
|
|
|
src="@/assets/images/close-icon.png" alt="">
|
|
|
<div v-show="browser.mobile" class="show-title">行业公益力量展</div>
|
|
|
<div class="hots-box-left">
|
|
|
- <div class="left-item" :style="{ background: currentUnit.unit == item.unit ? '#66141885' : '' }"
|
|
|
- v-for="(item, index) in store.hotspots" :key="index"
|
|
|
- @click="() => { changeUnit(item); pointInfo = ''; isShowFigure = true }">{{
|
|
|
+ <div class="left-item" :style="{ background: currentHotsUnit.unit == item.unit ? '#66141885' : '' }"
|
|
|
+ v-for="(item, index) in store.hotspots" :key="index" @click="() => { currentHotsUnit = item }">{{
|
|
|
item.unit
|
|
|
}}</div>
|
|
|
</div>
|
|
|
@@ -465,9 +495,9 @@ const changePassFu = () => {
|
|
|
src="@/assets/images/close-icon.png" alt="">
|
|
|
<div class="right-content">
|
|
|
<div v-show="JSON.stringify(currentUnit.hots) == '{}'" class="right-item">暂无热点</div>
|
|
|
- <div class="right-item" :title="item.title" v-for="(item, index) in currentUnit.hots" :key="index"
|
|
|
- @click="goHotCamarer(item)" :style="{ color: currentHot.sid == item.sid ? '#C5A16C' : '' }">{{ item.title
|
|
|
- }}
|
|
|
+ <div class="right-item" :title="item.title" v-for="(item, index) in currentHotsUnit.hots" :key="index"
|
|
|
+ @click="goHotCamarer(item)" :style="{ color: currentHot.sid == item.sid ? '#C5A16C' : '' }">
|
|
|
+ <div :class="item.title.length > 8 ? 'gundong' : ''">{{ item.title }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -809,6 +839,24 @@ const changePassFu = () => {
|
|
|
text-overflow: ellipsis;
|
|
|
cursor: pointer;
|
|
|
|
|
|
+ .gundong {
|
|
|
+ width: 100%;
|
|
|
+ animation: identifier 8s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes identifier {
|
|
|
+
|
|
|
+ 30% {
|
|
|
+ transform: translateX(0%);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
&:hover {
|
|
|
color: #C5A16C;
|
|
|
background: rgba(114, 37, 37, 0.74);
|
|
|
@@ -1137,10 +1185,10 @@ const changePassFu = () => {
|
|
|
padding: 0 20px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
- .close-icon {}
|
|
|
+ // .close-icon {}
|
|
|
|
|
|
|
|
|
- .right-content {}
|
|
|
+ // .right-content {}
|
|
|
|
|
|
.right-item {
|
|
|
width: 100%;
|
|
|
@@ -1155,6 +1203,22 @@ const changePassFu = () => {
|
|
|
cursor: pointer;
|
|
|
font-family: 'Courier New';
|
|
|
|
|
|
+ .gundong {
|
|
|
+ width: 100%;
|
|
|
+ animation: identifier 8s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes identifier {
|
|
|
+
|
|
|
+ 0% {
|
|
|
+ transform: translateX(100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
&:hover {
|
|
|
color: #C5A16C;
|
|
|
background: rgba(114, 37, 37, 0.74);
|