|
|
@@ -1,18 +1,11 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- class="home"
|
|
|
- :class="{ homeOther: state !== 'home' }"
|
|
|
- :style="{ backgroundImage: `url(${getSceneImg()})` }"
|
|
|
- >
|
|
|
+ <div class="home" :class="{ homeOther: state !== 'home' }" :style="{ backgroundImage: `url(${getSceneImg()})` }">
|
|
|
<div class="baiyun">
|
|
|
<img class="baiyun2" src="@/assets/images/home/baiyun2.png" alt="" />
|
|
|
<img class="baiyun4" src="@/assets/images/home/baiyun4.png" alt="" />
|
|
|
</div>
|
|
|
<!-- :style="{ 'width': state == 'product' ? '100%' : '' }" -->
|
|
|
- <div
|
|
|
- class="left-box"
|
|
|
- :style="{ width: state == 'video' || state == 'route' ? '100%' : '' }"
|
|
|
- >
|
|
|
+ <div class="left-box" :style="{ width: state == 'video' || state == 'route' ? '100%' : '' }">
|
|
|
<img class="gridding" src="@/assets/images/home/gridding.png" alt="" />
|
|
|
<div v-show="state == 'home'" class="home-page">
|
|
|
<div class="title">
|
|
|
@@ -68,15 +61,7 @@
|
|
|
"
|
|
|
>
|
|
|
<div class="content" :class="{ contentAc: state === 'product' }">
|
|
|
- <img
|
|
|
- class="number-img"
|
|
|
- :src="
|
|
|
- require(`@/assets/images/home/0${dataAll.product.id + 1}${
|
|
|
- state === 'product' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.product.id + 1}${state === 'product' ? '_Ac' : ''}.png`)" alt="" />
|
|
|
<div class="item-right">
|
|
|
<div class="top">{{ dataAll.product.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.product.disc }}</div>
|
|
|
@@ -96,15 +81,7 @@
|
|
|
"
|
|
|
>
|
|
|
<div class="content" :class="{ contentAc: state === 'full' }">
|
|
|
- <img
|
|
|
- class="number-img"
|
|
|
- :src="
|
|
|
- require(`@/assets/images/home/0${dataAll.full.id + 1}${
|
|
|
- state === 'full' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.full.id + 1}${state === 'full' ? '_Ac' : ''}.png`)" alt="" />
|
|
|
<div class="item-right">
|
|
|
<div class="top">{{ dataAll.full.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.full.disc }}</div>
|
|
|
@@ -123,15 +100,7 @@
|
|
|
"
|
|
|
>
|
|
|
<div class="content" :class="{ contentAc: state === 'route' }">
|
|
|
- <img
|
|
|
- class="number-img"
|
|
|
- :src="
|
|
|
- require(`@/assets/images/home/0${dataAll.route.id + 1}${
|
|
|
- state === 'route' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.route.id + 1}${state === 'route' ? '_Ac' : ''}.png`)" alt="" />
|
|
|
<div class="item-right">
|
|
|
<div class="top">{{ dataAll.route.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.route.disc }}</div>
|
|
|
@@ -151,15 +120,7 @@
|
|
|
"
|
|
|
>
|
|
|
<div class="content" :class="{ contentAc: state === 'scene' }">
|
|
|
- <img
|
|
|
- class="number-img"
|
|
|
- :src="
|
|
|
- require(`@/assets/images/home/0${dataAll.scenes.id + 1}${
|
|
|
- state === 'scene' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.scenes.id + 1}${state === 'scene' ? '_Ac' : ''}.png`)" alt="" />
|
|
|
<div
|
|
|
class="item-right"
|
|
|
@click="
|
|
|
@@ -185,15 +146,7 @@
|
|
|
"
|
|
|
>
|
|
|
<div class="content" :class="{ contentAc: state === 'video' }">
|
|
|
- <img
|
|
|
- class="number-img"
|
|
|
- :src="
|
|
|
- require(`@/assets/images/home/0${dataAll.video.id + 1}${
|
|
|
- state === 'video' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.video.id + 1}${state === 'video' ? '_Ac' : ''}.png`)" alt="" />
|
|
|
<div
|
|
|
class="item-right"
|
|
|
@click="
|
|
|
@@ -214,12 +167,7 @@
|
|
|
<div class="babar-content" v-show="state != 'home'">
|
|
|
<!-- 简介 -->
|
|
|
<!-- introData.rtf || -->
|
|
|
- <div
|
|
|
- class="info-box"
|
|
|
- id="scroll-box"
|
|
|
- v-show="state == 'info'"
|
|
|
- v-html="introData.rtf || dataAll.info.content.info"
|
|
|
- ></div>
|
|
|
+ <div class="info-box" id="scroll-box" v-show="state == 'info'" v-html="introData.rtf || dataAll.info.content.info"></div>
|
|
|
<!-- 全景 -->
|
|
|
<div class="full-box" v-show="state == 'full'">
|
|
|
<div class="v-list">
|
|
|
@@ -257,24 +205,9 @@
|
|
|
}
|
|
|
"
|
|
|
>
|
|
|
- <img
|
|
|
- style="min-height: 15.5%"
|
|
|
- :src="` ${
|
|
|
- item.coverImg.includes('https')
|
|
|
- ? item.coverImg
|
|
|
- : baseUrl +
|
|
|
- '/images/panorama/' +
|
|
|
- currentV.id +
|
|
|
- '/' +
|
|
|
- item.coverImg
|
|
|
- }`"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img style="min-height: 15.5%" :src="` ${item.coverImg.includes('https') ? item.coverImg : baseUrl + '/images/panorama/' + currentV.id + '/' + item.coverImg}`" alt="" />
|
|
|
<img class="border" src="@/assets/images/new/qjbg.png" alt="" />
|
|
|
- <div
|
|
|
- class="shade-box"
|
|
|
- v-show="isShade && currentHoverName === item.name"
|
|
|
- >
|
|
|
+ <div class="shade-box" v-show="isShade && currentHoverName === item.name">
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
<!-- <img v-if="currentHoverName != item.name" src="@/assets/images/new/qjbg.png" alt=""> -->
|
|
|
@@ -283,18 +216,7 @@
|
|
|
</div>
|
|
|
<!-- 展馆 -->
|
|
|
<div class="scene-box" v-show="state == 'scene'" id="scroll-scenes">
|
|
|
- <div
|
|
|
- class="box-item"
|
|
|
- v-for="item in [
|
|
|
- dataAll.scenes.content[0],
|
|
|
- ...dataAll.scenes.content[0]?.scene,
|
|
|
- dataAll.scenes?.content[1],
|
|
|
- ...dataAll.scenes?.content[1]?.scene,
|
|
|
- ]"
|
|
|
- :key="item.id"
|
|
|
- :id="`scene${item.id}`"
|
|
|
- @click="openHtml(item.link, item.id)"
|
|
|
- >
|
|
|
+ <div class="box-item" v-for="item in [dataAll.scenes.content[0], ...dataAll.scenes.content[0]?.scene, dataAll.scenes?.content[1], ...dataAll.scenes?.content[1]?.scene]" :key="item.id" :id="`scene${item.id}`" @click="openHtml(item.link, item.id)">
|
|
|
<div class="box-item-info">
|
|
|
<div class="text title">{{ item.title1 }}</div>
|
|
|
<div class="text" :class="{ textlange: item.title2.length > 10 }">
|
|
|
@@ -317,12 +239,7 @@
|
|
|
<div class="select-box">
|
|
|
<!-- 类别选择 -->
|
|
|
<div class="category-box">
|
|
|
- <div
|
|
|
- class="box-item"
|
|
|
- v-for="item in introduction"
|
|
|
- :key="item.id"
|
|
|
- @click="changeType(item)"
|
|
|
- >
|
|
|
+ <div class="box-item" v-for="item in introduction" :key="item.id" @click="changeType(item)">
|
|
|
{{ item.name }}
|
|
|
<div class="bottomAc" v-show="productActive == item.name"></div>
|
|
|
</div>
|
|
|
@@ -331,26 +248,13 @@
|
|
|
<div class="result-box" id="result-box-div">
|
|
|
<!-- 日期排布 -->
|
|
|
<div v-show="productActive === '大事记'" class="category-box">
|
|
|
- <div
|
|
|
- class="box-item"
|
|
|
- v-for="item in daShiJiList"
|
|
|
- :key="item.id"
|
|
|
- @click="changeYear(item)"
|
|
|
- >
|
|
|
+ <div class="box-item" v-for="item in daShiJiList" :key="item.id" @click="changeYear(item)">
|
|
|
{{ item.year }}
|
|
|
<div class="bottomAc" v-show="productYearActive == item"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="result-html"
|
|
|
- v-if="productActive === '大事记'"
|
|
|
- :style="{ marginTop: productActive === '大事记' ? '80px' : '' }"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-html="item.text"
|
|
|
- v-for="item in productYearActive.list"
|
|
|
- :key="item.text"
|
|
|
- ></div>
|
|
|
+ <div class="result-html" v-if="productActive === '大事记'" :style="{ marginTop: productActive === '大事记' ? '80px' : '' }">
|
|
|
+ <div v-html="item.text" v-for="item in productYearActive.list" :key="item.text"></div>
|
|
|
</div>
|
|
|
<div v-else class="result-html" v-html="productHtml"></div>
|
|
|
</div>
|
|
|
@@ -384,20 +288,9 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="video-content">
|
|
|
- <swiper
|
|
|
- class="swiper"
|
|
|
- :style="{ '--swiper-navigation-size': 0 }"
|
|
|
- :options="swiperOptions"
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- class="slide-item"
|
|
|
- v-for="(item, index) in currentV.list"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="content-item"
|
|
|
- @click="(isOpenVideo = true), (curOpenVideoItem = item)"
|
|
|
- >
|
|
|
+ <swiper class="swiper" :style="{ '--swiper-navigation-size': 0 }" :options="swiperOptions">
|
|
|
+ <swiper-slide class="slide-item" v-for="(item, index) in currentV.list" :key="index">
|
|
|
+ <div class="content-item" @click="(isOpenVideo = true), (curOpenVideoItem = item)">
|
|
|
<img src="@/assets/images/home/play.png" alt="" />
|
|
|
<img class="line" src="@/assets/images/new/qjbg.png" alt="" />
|
|
|
<video :src="item.link || ''"></video>
|
|
|
@@ -420,14 +313,7 @@
|
|
|
<!-- 视频播放页面 -->
|
|
|
<div class="openVideo-box" v-if="isOpenVideo">
|
|
|
<!-- <video :src="curOpenVideoItem.link" controls></video> -->
|
|
|
- <videoBox
|
|
|
- @play="changeBgMusic(false)"
|
|
|
- @pause="changeBgMusic(true)"
|
|
|
- class="videoBox"
|
|
|
- :src="curOpenVideoItem.link"
|
|
|
- :name="curOpenVideoItem.name"
|
|
|
- :baseUrl="baseUrl"
|
|
|
- />
|
|
|
+ <videoBox @play="changeBgMusic(false)" @pause="changeBgMusic(true)" class="videoBox" :src="curOpenVideoItem.link" :name="curOpenVideoItem.name" :baseUrl="baseUrl" />
|
|
|
<!-- <div>{{ curOpenVideoItem.name }}</div> -->
|
|
|
<img
|
|
|
@click="
|
|
|
@@ -441,39 +327,14 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<!-- 村庄标签 -->
|
|
|
- <div
|
|
|
- class="v-labels info"
|
|
|
- :class="{ active: item.id == activeStep }"
|
|
|
- v-show="state == 'info'"
|
|
|
- v-for="item in dataAll.vLabels"
|
|
|
- @click="goAnchor(item.id)"
|
|
|
- :key="item.id + 'info'"
|
|
|
- :style="{ top: item.top, right: item.right }"
|
|
|
- >
|
|
|
+ <div class="v-labels info" :class="{ active: item.id == activeStep }" v-show="state == 'info'" v-for="item in dataAll.vLabels" @click="goAnchor(item.id)" :key="item.id + 'info'" :style="{ top: item.top, right: item.right }">
|
|
|
<img :src="item.id == activeStep ? lable3a : lable3" alt="" />
|
|
|
<div style="width: 100%">{{ item.name }}</div>
|
|
|
</div>
|
|
|
<!-- quanjing -->
|
|
|
- <div
|
|
|
- class="v-labels full"
|
|
|
- :class="{ active: item.id == activequanjing, mxd: item.class == 'mxd' }"
|
|
|
- v-show="state == 'full'"
|
|
|
- v-for="item in dataAll.full.vLabels"
|
|
|
- @click="handlequanjing(item)"
|
|
|
- :key="item.id + 'full'"
|
|
|
- :style="{ top: item.top, right: item.right }"
|
|
|
- >
|
|
|
- <img
|
|
|
- v-if="item.class == 'mxd'"
|
|
|
- :src="item.id == activequanjing ? mxda : mxd"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else-if="item.class == 'youke'"
|
|
|
- style="transform: scale(1.1); margin-top: 10px"
|
|
|
- :src="item.id == activequanjing ? youkea : youke"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <div class="v-labels full" :class="{ active: item.id == activequanjing, mxd: item.class == 'mxd' }" v-show="state == 'full'" v-for="item in dataAll.full.vLabels" @click="handlequanjing(item)" :key="item.id + 'full'" :style="{ top: item.top, right: item.right }">
|
|
|
+ <img v-if="item.class == 'mxd'" :src="item.id == activequanjing ? mxda : mxd" alt="" />
|
|
|
+ <img v-else-if="item.class == 'youke'" style="transform: scale(1.1); margin-top: 10px" :src="item.id == activequanjing ? youkea : youke" alt="" />
|
|
|
<img v-else :src="item.id == activequanjing ? lable3a : lable3" alt="" />
|
|
|
<div style="width: 100%">
|
|
|
{{ item.displayName ? item.displayName : item.name }}
|
|
|
@@ -496,37 +357,13 @@
|
|
|
:style="{ top: item.top, right: item.right }"
|
|
|
@click="goSceneAnchor(item.id)"
|
|
|
>
|
|
|
- <img
|
|
|
- v-if="item.class == 'mxd'"
|
|
|
- :src="item.id == activeScene ? mxda : mxd"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else-if="item.class == 'znzhmz'"
|
|
|
- :src="item.id == activeScene ? changurla : changurl"
|
|
|
- style="width: 320px"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else-if="item.class == 'fyx'"
|
|
|
- style="transform: rotate(180deg)"
|
|
|
- :src="item.id == activeScene ? mxda : mxd"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else-if="item.class == 'chenlie'"
|
|
|
- :src="item.id == activeScene ? chenliea : chenlie"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else-if="item.class == 'cunbu'"
|
|
|
- :src="item.id == activeScene ? cunbua : cunbu"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img v-if="item.class == 'mxd'" :src="item.id == activeScene ? mxda : mxd" alt="" />
|
|
|
+ <img v-else-if="item.class == 'znzhmz'" :src="item.id == activeScene ? changurla : changurl" style="width: 320px" alt="" />
|
|
|
+ <img v-else-if="item.class == 'fyx'" style="transform: rotate(180deg)" :src="item.id == activeScene ? mxda : mxd" alt="" />
|
|
|
+ <img v-else-if="item.class == 'chenlie'" :src="item.id == activeScene ? chenliea : chenlie" alt="" />
|
|
|
+ <img v-else-if="item.class == 'cunbu'" :src="item.id == activeScene ? cunbua : cunbu" alt="" />
|
|
|
<img v-else :src="item.id == activeScene ? lable3a : lable3" alt="" />
|
|
|
- <div
|
|
|
- :class="{ chenlie: item.class == 'chenlie' || item.class == 'cunbu' }"
|
|
|
- >
|
|
|
+ <div :class="{ chenlie: item.class == 'chenlie' || item.class == 'cunbu' }">
|
|
|
{{ item.title3 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -655,26 +492,18 @@ export default {
|
|
|
methods: {
|
|
|
initVideos() {
|
|
|
console.log("123");
|
|
|
- this.showVideoList[0].list = this.dataAll.video.content.flatMap(
|
|
|
- (item) => {
|
|
|
- return item.list;
|
|
|
- }
|
|
|
- );
|
|
|
+ this.showVideoList[0].list = this.dataAll.video.content.flatMap((item) => {
|
|
|
+ return item.list;
|
|
|
+ });
|
|
|
this.dataAll.video.content.forEach((item) => {
|
|
|
this.showVideoList.push(item);
|
|
|
});
|
|
|
|
|
|
- console.log(
|
|
|
- this.showVideoList,
|
|
|
- "this.showVideoList",
|
|
|
- this.dataAll.video.content
|
|
|
- );
|
|
|
+ console.log(this.showVideoList, "this.showVideoList", this.dataAll.video.content);
|
|
|
},
|
|
|
handlequanjing(item) {
|
|
|
this.activequanjing = item.id;
|
|
|
- let ele = this.dataAll.full.content.find(
|
|
|
- (items) => items.name == item.name
|
|
|
- );
|
|
|
+ let ele = this.dataAll.full.content.find((items) => items.name == item.name);
|
|
|
console.log(ele, "ele", item);
|
|
|
if (ele) {
|
|
|
this.currentV = ele;
|
|
|
@@ -781,23 +610,18 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
prevItem() {
|
|
|
- const currentIndex = this.showVideoList.findIndex(
|
|
|
- (item) => item.name === this.currentV.name
|
|
|
- );
|
|
|
+ const currentIndex = this.showVideoList.findIndex((item) => item.name === this.currentV.name);
|
|
|
if (currentIndex > 0) {
|
|
|
this.currentV = this.showVideoList[currentIndex - 1];
|
|
|
this.activeshiping = this.showVideoList[currentIndex - 1].id;
|
|
|
} else {
|
|
|
// 如果当前是第一个，切换到最后一个
|
|
|
this.currentV = this.showVideoList[this.showVideoList.length - 1];
|
|
|
- this.activeshiping =
|
|
|
- this.showVideoList[this.showVideoList.length - 1].id;
|
|
|
+ this.activeshiping = this.showVideoList[this.showVideoList.length - 1].id;
|
|
|
}
|
|
|
},
|
|
|
nextItem() {
|
|
|
- const currentIndex = this.showVideoList.findIndex(
|
|
|
- (item) => item.name === this.currentV.name
|
|
|
- );
|
|
|
+ const currentIndex = this.showVideoList.findIndex((item) => item.name === this.currentV.name);
|
|
|
if (currentIndex < this.showVideoList.length - 1) {
|
|
|
this.currentV = this.showVideoList[currentIndex + 1];
|
|
|
this.activeshiping = this.showVideoList[currentIndex + 1].id;
|
|
|
@@ -825,208 +649,192 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
getFullData() {
|
|
|
- this.$request
|
|
|
- .post("/show/content/pageList", { module: "pano" })
|
|
|
- .then((res) => {
|
|
|
- // 由两层遍历进行优化
|
|
|
- // 1. 先将content转为以name为键的映射，方便快速查找
|
|
|
- const contentMap = {};
|
|
|
- this.dataAll.full.content.forEach((item) => {
|
|
|
- item.scenes = []; // 初始化数组
|
|
|
- contentMap[item.name] = item; // 建立name到item的映射
|
|
|
- });
|
|
|
+ this.$request.post("/show/content/pageList", { module: "pano", pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ // 由两层遍历进行优化
|
|
|
+ // 1. 先将content转为以name为键的映射，方便快速查找
|
|
|
+ const contentMap = {};
|
|
|
+ this.dataAll.full.content.forEach((item) => {
|
|
|
+ item.scenes = []; // 初始化数组
|
|
|
+ contentMap[item.name] = item; // 建立name到item的映射
|
|
|
+ });
|
|
|
|
|
|
- // 2. 遍历records，直接通过映射查找对应项
|
|
|
- res.data.records.forEach((item) => {
|
|
|
- const fullItem = contentMap[item.type];
|
|
|
- if (fullItem) {
|
|
|
- // 只有存在对应项时才执行操作
|
|
|
- fullItem.scenes.push({
|
|
|
- ...item,
|
|
|
- coverImg: baseURL + item.thumb,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+ // 2. 遍历records，直接通过映射查找对应项
|
|
|
+ res.data.records.forEach((item) => {
|
|
|
+ const fullItem = contentMap[item.type];
|
|
|
+ if (fullItem) {
|
|
|
+ // 只有存在对应项时才执行操作
|
|
|
+ fullItem.scenes.push({
|
|
|
+ ...item,
|
|
|
+ coverImg: baseURL + item.thumb,
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
+ });
|
|
|
},
|
|
|
getRouteData() {
|
|
|
- this.$request
|
|
|
- .post("/show/content/pageList", { module: "line" })
|
|
|
- .then((res) => {
|
|
|
- if (res.data.records.length == 0) {
|
|
|
- this.dataAll.route.content = [
|
|
|
- {
|
|
|
- id: 0,
|
|
|
- name: "梨子寨寨口",
|
|
|
- contents: [
|
|
|
- {
|
|
|
- id: 0,
|
|
|
- disc: "暂无数据",
|
|
|
- panoramaLink: "",
|
|
|
- coverImg: "",
|
|
|
- },
|
|
|
- ],
|
|
|
- position: {
|
|
|
- item: {
|
|
|
- top: "54%",
|
|
|
- left: "27%",
|
|
|
- },
|
|
|
- icon: {
|
|
|
- top: "0px",
|
|
|
- left: "0px",
|
|
|
- },
|
|
|
- name: {
|
|
|
- top: "-5vh",
|
|
|
- left: "-2vw",
|
|
|
- },
|
|
|
+ this.$request.post("/show/content/pageList", { module: "line", pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.data.records.length == 0) {
|
|
|
+ this.dataAll.route.content = [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ name: "梨子寨寨口",
|
|
|
+ contents: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ disc: "暂无数据",
|
|
|
+ panoramaLink: "",
|
|
|
+ coverImg: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ position: {
|
|
|
+ item: {
|
|
|
+ top: "54%",
|
|
|
+ left: "27%",
|
|
|
+ },
|
|
|
+ icon: {
|
|
|
+ top: "0px",
|
|
|
+ left: "0px",
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ top: "-5vh",
|
|
|
+ left: "-2vw",
|
|
|
},
|
|
|
},
|
|
|
- ];
|
|
|
- console.log(this.dataAll.route.content);
|
|
|
- return;
|
|
|
- }
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ console.log(this.dataAll.route.content);
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- const contentMap = {};
|
|
|
- this.dataAll.route.content.forEach((item) => {
|
|
|
- item.contents = [];
|
|
|
- contentMap[item.name] = item;
|
|
|
- });
|
|
|
+ const contentMap = {};
|
|
|
+ this.dataAll.route.content.forEach((item) => {
|
|
|
+ item.contents = [];
|
|
|
+ contentMap[item.name] = item;
|
|
|
+ });
|
|
|
|
|
|
- res.data.records.forEach((item) => {
|
|
|
- const routeItem = contentMap[item.type];
|
|
|
- if (routeItem) {
|
|
|
- routeItem.contents.push({
|
|
|
- ...item,
|
|
|
- disc: item.content,
|
|
|
- panoramaLink: item.link,
|
|
|
- audioSrc: baseURL + item.mediaPath,
|
|
|
- coverImg: baseURL + item.thumb,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- this.dataAll.route.content = this.dataAll.route.content.filter(
|
|
|
- (item) => item.contents.length > 0
|
|
|
- );
|
|
|
+ res.data.records.forEach((item) => {
|
|
|
+ const routeItem = contentMap[item.type];
|
|
|
+ if (routeItem) {
|
|
|
+ routeItem.contents.push({
|
|
|
+ ...item,
|
|
|
+ disc: item.content,
|
|
|
+ panoramaLink: item.link,
|
|
|
+ audioSrc: baseURL + item.mediaPath,
|
|
|
+ coverImg: baseURL + item.thumb,
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
+ this.dataAll.route.content = this.dataAll.route.content.filter((item) => item.contents.length > 0);
|
|
|
+ });
|
|
|
},
|
|
|
getScenesData() {
|
|
|
- this.$request
|
|
|
- .post("/show/content/pageList", { module: "scene" })
|
|
|
- .then((res) => {
|
|
|
- if (res.data.records.length == 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const grouped = {};
|
|
|
- res.data.records.forEach((item) => {
|
|
|
- if (!grouped[item.type]) {
|
|
|
- grouped[item.type] = [];
|
|
|
- }
|
|
|
- grouped[item.type].push(item);
|
|
|
- });
|
|
|
-
|
|
|
- console.log(grouped, "grouped");
|
|
|
+ this.$request.post("/show/content/pageList", { module: "scene", pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.data.records.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- this.sceneCount = grouped["精准扶贫主题陈列展览"].length;
|
|
|
+ const grouped = {};
|
|
|
+ res.data.records.forEach((item) => {
|
|
|
+ if (!grouped[item.type]) {
|
|
|
+ grouped[item.type] = [];
|
|
|
+ }
|
|
|
+ grouped[item.type].push(item);
|
|
|
+ });
|
|
|
|
|
|
- // 处理第一个类型
|
|
|
- const firstType = "精准扶贫主题陈列展览";
|
|
|
- if (grouped[firstType] && grouped[firstType].length > 0) {
|
|
|
- // 取第一个元素填充content[0]
|
|
|
- const firstItem = grouped[firstType][0];
|
|
|
- this.activeScene = firstItem.id;
|
|
|
- this.dataAll.scenes.content[0] = {
|
|
|
- id: firstItem.id,
|
|
|
- name: firstItem.name,
|
|
|
+ console.log(grouped, "grouped");
|
|
|
+
|
|
|
+ this.sceneCount = grouped["精准扶贫主题陈列展览"].length;
|
|
|
+
|
|
|
+ // 处理第一个类型
|
|
|
+ const firstType = "精准扶贫主题陈列展览";
|
|
|
+ if (grouped[firstType] && grouped[firstType].length > 0) {
|
|
|
+ // 取第一个元素填充content[0]
|
|
|
+ const firstItem = grouped[firstType][0];
|
|
|
+ this.activeScene = firstItem.id;
|
|
|
+ this.dataAll.scenes.content[0] = {
|
|
|
+ id: firstItem.id,
|
|
|
+ name: firstItem.name,
|
|
|
+ title1: "村",
|
|
|
+ title2: firstItem.name,
|
|
|
+ title3: "精准扶贫主题陈列展览",
|
|
|
+ class: "chenlie",
|
|
|
+ coverImg: baseURL + firstItem.thumb,
|
|
|
+ link: firstItem.link,
|
|
|
+ top: "0%",
|
|
|
+ right: "26%",
|
|
|
+ // 剩下的元素作为scenes
|
|
|
+ scene: grouped[firstType].slice(1).map((item) => ({
|
|
|
+ ...item,
|
|
|
title1: "村",
|
|
|
- title2: firstItem.name,
|
|
|
- title3: "精准扶贫主题陈列展览",
|
|
|
- class: "chenlie",
|
|
|
- coverImg: baseURL + firstItem.thumb,
|
|
|
- link: firstItem.link,
|
|
|
- top: "0%",
|
|
|
- right: "26%",
|
|
|
- // 剩下的元素作为scenes
|
|
|
- scene: grouped[firstType].slice(1).map((item) => ({
|
|
|
- ...item,
|
|
|
- title1: "村",
|
|
|
- title2: item.name,
|
|
|
- coverImg: baseURL + item.thumb,
|
|
|
- link: item.link,
|
|
|
- })),
|
|
|
- };
|
|
|
- }
|
|
|
+ title2: item.name,
|
|
|
+ coverImg: baseURL + item.thumb,
|
|
|
+ link: item.link,
|
|
|
+ })),
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
- // 处理第二个类型
|
|
|
- const secondType = "铸牢中华民族体意识研究与教育基地";
|
|
|
- if (grouped[secondType] && grouped[secondType].length > 0) {
|
|
|
- // 取第一个元素填充content[1]
|
|
|
- const secItem = grouped[secondType][0];
|
|
|
- this.dataAll.scenes.content[1] = {
|
|
|
- name: secItem.name,
|
|
|
+ // 处理第二个类型
|
|
|
+ const secondType = "铸牢中华民族体意识研究与教育基地";
|
|
|
+ if (grouped[secondType] && grouped[secondType].length > 0) {
|
|
|
+ // 取第一个元素填充content[1]
|
|
|
+ const secItem = grouped[secondType][0];
|
|
|
+ this.dataAll.scenes.content[1] = {
|
|
|
+ name: secItem.name,
|
|
|
+ title1: "村",
|
|
|
+ id: secItem.id,
|
|
|
+ title2: secItem.name,
|
|
|
+ title3: "铸牢中华民族体意识研究与教育基地",
|
|
|
+ coverImg: baseURL + secItem.thumb,
|
|
|
+ link: secItem.link,
|
|
|
+ class: "znzhmz",
|
|
|
+ top: "4%",
|
|
|
+ right: "23%",
|
|
|
+ // 剩下的元素作为scenes
|
|
|
+ scene: grouped[secondType].slice(1).map((item) => ({
|
|
|
+ ...item,
|
|
|
title1: "村",
|
|
|
- id: secItem.id,
|
|
|
- title2: secItem.name,
|
|
|
- title3: "铸牢中华民族体意识研究与教育基地",
|
|
|
- coverImg: baseURL + secItem.thumb,
|
|
|
- link: secItem.link,
|
|
|
- class: "znzhmz",
|
|
|
- top: "4%",
|
|
|
- right: "23%",
|
|
|
- // 剩下的元素作为scenes
|
|
|
- scene: grouped[secondType].slice(1).map((item) => ({
|
|
|
- ...item,
|
|
|
- title1: "村",
|
|
|
- title2: item.name,
|
|
|
- coverImg: baseURL + item.thumb,
|
|
|
- link: item.link,
|
|
|
- })),
|
|
|
- };
|
|
|
- }
|
|
|
+ title2: item.name,
|
|
|
+ coverImg: baseURL + item.thumb,
|
|
|
+ link: item.link,
|
|
|
+ })),
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
- console.log(
|
|
|
- this.dataAll.scenes.content,
|
|
|
- "this.dataAll.scenes.content[0]"
|
|
|
- );
|
|
|
- });
|
|
|
+ console.log(this.dataAll.scenes.content, "this.dataAll.scenes.content[0]");
|
|
|
+ });
|
|
|
},
|
|
|
getVideoData() {
|
|
|
- this.$request
|
|
|
- .post("/show/content/pageList", { module: "video" })
|
|
|
- .then((res) => {
|
|
|
- // 由两层遍历进行优化
|
|
|
- // 1. 先将content转为以name为键的映射，方便快速查找
|
|
|
- this.$request.get("/show/video/getList").then((listData) => {
|
|
|
- const recordsMap = {};
|
|
|
- res.data.records.forEach((item) => {
|
|
|
- // 以type为键，存储同类型的所有item
|
|
|
- if (!recordsMap[item.type]) {
|
|
|
- recordsMap[item.type] = [];
|
|
|
- }
|
|
|
- recordsMap[item.type].push({
|
|
|
- id: item.id,
|
|
|
- name: item.name,
|
|
|
- link: baseURL + item.mediaPath,
|
|
|
- img: baseURL + item.thumb,
|
|
|
- });
|
|
|
+ this.$request.post("/show/content/pageList", { module: "video", pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ // 由两层遍历进行优化
|
|
|
+ // 1. 先将content转为以name为键的映射，方便快速查找
|
|
|
+ this.$request.get("/show/video/getList").then((listData) => {
|
|
|
+ const recordsMap = {};
|
|
|
+ res.data.records.forEach((item) => {
|
|
|
+ // 以type为键，存储同类型的所有item
|
|
|
+ if (!recordsMap[item.type]) {
|
|
|
+ recordsMap[item.type] = [];
|
|
|
+ }
|
|
|
+ recordsMap[item.type].push({
|
|
|
+ id: item.id,
|
|
|
+ name: item.name,
|
|
|
+ link: baseURL + item.mediaPath,
|
|
|
+ img: baseURL + item.thumb,
|
|
|
});
|
|
|
+ });
|
|
|
|
|
|
- // 映射视频内容
|
|
|
- this.dataAll.video.content = listData.data.map((i) => ({
|
|
|
- id: i.id,
|
|
|
- name: i.name,
|
|
|
- // 直接从分组中获取对应数据，避免内层map产生undefined
|
|
|
- list: recordsMap[i.id] || [],
|
|
|
- }));
|
|
|
+ // 映射视频内容
|
|
|
+ this.dataAll.video.content = listData.data.map((i) => ({
|
|
|
+ id: i.id,
|
|
|
+ name: i.name,
|
|
|
+ // 直接从分组中获取对应数据，避免内层map产生undefined
|
|
|
+ list: recordsMap[i.id] || [],
|
|
|
+ }));
|
|
|
|
|
|
- this.initVideos();
|
|
|
+ this.initVideos();
|
|
|
|
|
|
- console.log(
|
|
|
- this.dataAll.video.content,
|
|
|
- "this.dataAll.video.content"
|
|
|
- );
|
|
|
- });
|
|
|
+ console.log(this.dataAll.video.content, "this.dataAll.video.content");
|
|
|
});
|
|
|
+ });
|
|
|
},
|
|
|
getProductData() {
|
|
|
this.$request.get("/show/history/list").then((res) => {
|
|
|
@@ -1066,9 +874,7 @@ export default {
|
|
|
changeType(item) {
|
|
|
console.log("changeType", item);
|
|
|
this.productActive = item.name;
|
|
|
- item.name === "大事记"
|
|
|
- ? ((this.daShiJiList = item.list), this.changeYear(item.list[0]))
|
|
|
- : "";
|
|
|
+ item.name === "大事记" ? ((this.daShiJiList = item.list), this.changeYear(item.list[0])) : "";
|
|
|
// this.productHtml = item.rtf?decodeURIComponent(item.rtf): item.text;
|
|
|
this.productHtml = unescape(item.rtf || item.text);
|
|
|
let parent = document.getElementById("result-box-div");
|
|
|
@@ -1083,29 +889,18 @@ export default {
|
|
|
if (this.curCategoryType == "全部") {
|
|
|
return item.type === this.curDimension;
|
|
|
} else {
|
|
|
- return (
|
|
|
- item.type === this.curDimension &&
|
|
|
- item.category === this.curCategoryType
|
|
|
- );
|
|
|
+ return item.type === this.curDimension && item.category === this.curCategoryType;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
changeDimension(dimension) {
|
|
|
this.curDimension = dimension;
|
|
|
- dimension == "2d"
|
|
|
- ? (this.curCategoryType = this.categoryType2D[0])
|
|
|
- : (this.curCategoryType = this.categoryType3D[0]);
|
|
|
+ dimension == "2d" ? (this.curCategoryType = this.categoryType2D[0]) : (this.curCategoryType = this.categoryType3D[0]);
|
|
|
this.getResultProduces();
|
|
|
},
|
|
|
getCategoryType() {
|
|
|
- console.log(
|
|
|
- "productActive",
|
|
|
- this.productActive,
|
|
|
- this.dataAll.product.list
|
|
|
- );
|
|
|
- let CategoryTypeitem = this.dataAll.product.list.find(
|
|
|
- (item) => item.name == this.productActive
|
|
|
- );
|
|
|
+ console.log("productActive", this.productActive, this.dataAll.product.list);
|
|
|
+ let CategoryTypeitem = this.dataAll.product.list.find((item) => item.name == this.productActive);
|
|
|
this.productHtml = CategoryTypeitem && CategoryTypeitem.text;
|
|
|
// // 区分出2d 和 3d
|
|
|
// var product2Ds = this.dataAll.product.content.filter((item) => {
|
|
|
@@ -1146,11 +941,7 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
// this.getCategoryType();
|
|
|
- window.addEventListener(
|
|
|
- "scroll",
|
|
|
- this.debounce(this.scrollFn, 200, true),
|
|
|
- true
|
|
|
- );
|
|
|
+ window.addEventListener("scroll", this.debounce(this.scrollFn, 200, true), true);
|
|
|
window.changeBgMusic = this.changeBgMusic;
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
@@ -1158,12 +949,7 @@ export default {
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {
|
|
|
- window.removeEventListener(
|
|
|
- "scroll",
|
|
|
- "scroll",
|
|
|
- this.debounce(this.scrollFn, 200, true),
|
|
|
- false
|
|
|
- );
|
|
|
+ window.removeEventListener("scroll", "scroll", this.debounce(this.scrollFn, 200, true), false);
|
|
|
}, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
@@ -1436,11 +1222,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.contentAc {
|
|
|
- background: linear-gradient(
|
|
|
- 270deg,
|
|
|
- #2cd19760 0%,
|
|
|
- rgba(44, 209, 150, 0) 100%
|
|
|
- );
|
|
|
+ background: linear-gradient(270deg, #2cd19760 0%, rgba(44, 209, 150, 0) 100%);
|
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.6);
|
|
|
|
|
|
.item-right {
|
|
|
@@ -1840,11 +1622,7 @@ export default {
|
|
|
height: 100%;
|
|
|
margin-left: 20px;
|
|
|
margin-right: 10px;
|
|
|
- background: linear-gradient(
|
|
|
- to bottom,
|
|
|
- #ffffff98 0%,
|
|
|
- #ffffff00 100%
|
|
|
- );
|
|
|
+ background: linear-gradient(to bottom, #ffffff98 0%, #ffffff00 100%);
|
|
|
}
|
|
|
}
|
|
|
|
lanxin