|
|
@@ -0,0 +1,322 @@
|
|
|
+<template>
|
|
|
+ <div class="skww-view">
|
|
|
+ afdsdf
|
|
|
+ <div
|
|
|
+ class="swkk-wrap"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 右上地图 -->
|
|
|
+ <div
|
|
|
+ v-show="!isLoading && numSta === 2"
|
|
|
+ class="mini-map"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="radio-wrap"
|
|
|
+ :class="{ active: floor === '1' }"
|
|
|
+ @click="changeFloor('1')"
|
|
|
+ >
|
|
|
+ <div class="radio" />
|
|
|
+ <div class="rowrr">
|
|
|
+ 一层
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="radio-wrap"
|
|
|
+ :class="{ active: floor === '2' }"
|
|
|
+ @click="changeFloor('2')"
|
|
|
+ >
|
|
|
+ <div class="radio" />
|
|
|
+ <div class="rowrr">
|
|
|
+ 二层
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ kankan: null,
|
|
|
+ floor: 0,
|
|
|
+ isLoading: true,
|
|
|
+ title: true,
|
|
|
+ numSta: 2,
|
|
|
+ // -------
|
|
|
+ partId: 0,
|
|
|
+ frameId: null,
|
|
|
+ progress: 0,
|
|
|
+ disable: false,
|
|
|
+ playing: false,
|
|
|
+ sonInfo: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let floor = this.$route.query.floor
|
|
|
+ this.floor = floor
|
|
|
+ let sceneCode = ''
|
|
|
+ if (floor === "1") sceneCode = process.env.VUE_APP_SCENE_CODE_FLOOR_1
|
|
|
+ else if (floor === "2") sceneCode = process.env.VUE_APP_SCENE_CODE_FLOOR_2
|
|
|
+ console.assert(sceneCode, 'no sceneCode!')
|
|
|
+ let kankan = new KanKan({
|
|
|
+ dom: ".swkk-wrap",
|
|
|
+ num: sceneCode,
|
|
|
+ })
|
|
|
+
|
|
|
+ kankan.use("MinMap", {
|
|
|
+ theme: {
|
|
|
+ camera_fillStyle: "#930909",
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // kankan.use("TourPlayer").then((player) => {
|
|
|
+ // player.on("play", ({ partId, frameId }) => {
|
|
|
+ // this.playing = true
|
|
|
+ // })
|
|
|
+ // player.on("pause", ({ partId, frameId }) => {
|
|
|
+ // this.playing = false
|
|
|
+ // })
|
|
|
+ // player.on("end", async () => {
|
|
|
+ // this.playing = false
|
|
|
+ // this.progress = 0
|
|
|
+ // this.frameId = null
|
|
|
+ // this.$refs.RbottomRef.leftCut(-1)
|
|
|
+ // })
|
|
|
+
|
|
|
+ // player.on("progress", ({ partId, frameId, progress }) => {
|
|
|
+ // // 不让自动漫游多次点击
|
|
|
+ // if (frameId === 0) {
|
|
|
+ // // 防止多次点击自动漫游
|
|
|
+ // let mainApp = document.querySelector("#app")
|
|
|
+ // mainApp.style.pointerEvents = "auto"
|
|
|
+ // }
|
|
|
+ // // 画面进度
|
|
|
+ // this.partId = partId
|
|
|
+ // this.frameId = frameId
|
|
|
+ // this.progress = Number(progress * 100).toFixed(5)
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+
|
|
|
+ // // 有关球幕视频控制背景音乐
|
|
|
+ // kankan.Scene.on("panorama.videorenderer.startvideo", () => {
|
|
|
+ // // 点击热点的时候当前背景音乐的播放状态
|
|
|
+ // let dom = document.querySelector("#bacMusic")
|
|
|
+ // window.bacMusic = !dom.paused
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$refs.RbottomRef.opMusic(false)
|
|
|
+ // }, 200)
|
|
|
+ // // 暂停背景音乐
|
|
|
+ // })
|
|
|
+ // kankan.Scene.on("panorama.videorenderer.resumerender", () => {
|
|
|
+
|
|
|
+ // // 点击热点的时候当前背景音乐的播放状态
|
|
|
+ // let dom = document.querySelector("#bacMusic")
|
|
|
+ // window.bacMusic = !dom.paused
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$refs.RbottomRef.opMusic(false)
|
|
|
+ // }, 200)
|
|
|
+ // // 暂停背景音乐
|
|
|
+ // })
|
|
|
+ // kankan.Scene.on("panorama.videorenderer.suspendrender", () => {
|
|
|
+ // if (window.bacMusic) {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$refs.RbottomRef.opMusic(true)
|
|
|
+ // }, 100)
|
|
|
+ // }
|
|
|
+ // // 恢复背景音乐
|
|
|
+ // })
|
|
|
+
|
|
|
+ // // 导览数据
|
|
|
+ // kankan.TourManager.on("loaded", (tours) => {
|
|
|
+ // this.$refs.RbottomRef.baseSw(tours)
|
|
|
+ // })
|
|
|
+
|
|
|
+ // // 全部热点数据
|
|
|
+ // kankan.store.on("tags", (tags) => {
|
|
|
+ // this.baseHotData = tags.tags
|
|
|
+ // let temp = []
|
|
|
+ // tags.tags.forEach((v) => {
|
|
|
+ // let arrTitle = v.title.split("&")
|
|
|
+ // // 显示在页面的热点图标
|
|
|
+ // if (arrTitle[2]) {
|
|
|
+ // temp.push(v)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+
|
|
|
+ // // 热点
|
|
|
+ // kankan
|
|
|
+ // .use("TagView", {
|
|
|
+ // render(data) {
|
|
|
+ // let arrTitle = data.title.split("&")
|
|
|
+ // let flag = false
|
|
|
+ // if (arrTitle[2] || !data.title.includes("&")) flag = true
|
|
|
+
|
|
|
+ // let title = data.title.split("&")[0]
|
|
|
+
|
|
|
+ // return `<span class="tag-icon animate" title=${title} style="${
|
|
|
+ // flag ? "" : "display: none;"
|
|
|
+ // };background-image:url({{icon}})"></span><div class="tag-body"></div>`
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // .then((TagView) => {
|
|
|
+ // // 监听手动点击事件
|
|
|
+ // TagView.on("click", (e) => {
|
|
|
+ // // 点击热点的时候当前背景音乐的播放状态
|
|
|
+ // let dom = document.querySelector("#bacMusic")
|
|
|
+ // window.bacMusic = !dom.paused
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$refs.RbottomRef.opMusic(false)
|
|
|
+ // }, 200)
|
|
|
+
|
|
|
+ // let temp = []
|
|
|
+
|
|
|
+ // // 如果是多个热点合并
|
|
|
+ // if (e.data.title.split("&")[1]) {
|
|
|
+ // this.baseHotData.forEach((v) => {
|
|
|
+ // if (v.title.split("&")[1] === e.data.title.split("&")[1]) {
|
|
|
+ // temp.push(v)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // let obj = {
|
|
|
+ // image: [],
|
|
|
+ // audio: [],
|
|
|
+ // link: [],
|
|
|
+ // video: [],
|
|
|
+ // }
|
|
|
+ // temp.forEach((v) => {
|
|
|
+ // obj[v.type].push(v)
|
|
|
+ // })
|
|
|
+ // this.sonInfo = obj
|
|
|
+ // } else {
|
|
|
+ // // 单个热点
|
|
|
+ // this.sonInfo = { audio: [e.data] }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 如果只需监听热点点击，实现其他逻辑操作，下面的代码不需要调用
|
|
|
+
|
|
|
+ // // 聚焦当前点击的热点
|
|
|
+ // TagView.focus(e.data.sid)
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+
|
|
|
+ kankan.render()
|
|
|
+
|
|
|
+ kankan.Scene.on("loaded", () => {
|
|
|
+ console.log('loaded!')
|
|
|
+ this.isLoading = false
|
|
|
+ // //设置地面logo
|
|
|
+ // kankan.Scene.setFloorLogo({
|
|
|
+ // url: "img/diBiao.png",
|
|
|
+ // size: 40,
|
|
|
+ // })
|
|
|
+ })
|
|
|
+
|
|
|
+ // let obj = {
|
|
|
+ // floorplan: 4,
|
|
|
+ // dollhouse: 3,
|
|
|
+ // panorama: 2,
|
|
|
+ // }
|
|
|
+ // // 监听看看的模式
|
|
|
+ // kankan.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
|
|
|
+ // let num = obj[toMode]
|
|
|
+ // this.numSta = num
|
|
|
+ // if (this.$refs.RbottomRef && this.$refs.RbottomRef.leftCut) {
|
|
|
+ // this.$refs.RbottomRef.leftCut(num)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ this.kankan = kankan
|
|
|
+
|
|
|
+ // location.reload()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 切换楼层
|
|
|
+ changeFloor(val) {
|
|
|
+ // window.location.replace(`#/Swkk${val}`)
|
|
|
+ this.$router.replace({
|
|
|
+ name: 'SwkkView',
|
|
|
+ query: { floor: val }
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ location.reload(true)
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.skww-view {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .swkk-wrap {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ /deep/[xui_min_map] {
|
|
|
+ top: 6rem;
|
|
|
+ right: 1.67rem;
|
|
|
+ width: 11.67rem;
|
|
|
+ height: 11.25rem;
|
|
|
+ border: 0.08rem solid #D8B275;
|
|
|
+ background-color: rgba(81, 32, 32, 0.4);
|
|
|
+ border-radius: 0 0 0.42rem 0.42rem;
|
|
|
+ }
|
|
|
+ .mini-map {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ right: 20px;
|
|
|
+ top: 28px;
|
|
|
+ border: 2px solid #d8b275;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ color: #fff;
|
|
|
+ width: 180px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #930909;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 15px;
|
|
|
+ .radio-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ .radio {
|
|
|
+ margin-right: 6px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .rowrr {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #d8b275;
|
|
|
+ pointer-events: none;
|
|
|
+ .radio {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: #d8b275;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存