shuishen
2022-03-18 bf58722dfd03ea1513f3acc7331d4d4403fca76e
src/pcviews/specialmap/welcome.vue
@@ -1,86 +1,74 @@
/*
 * @Author: Morpheus
 * @Name: 社区迎新
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-01-26 10:51:24
 */
/* * @Author: Morpheus * @Name: 校区迎新 * @Date: 2021-11-15 17:14:47 * @Last
Modified by: Morpheus * @Last Modified time: 2022-01-26 10:51:24 */
<template>
    <div>
        <div class="welcome-container">
            <div class="header">
                <div class="title">
                    {{ title }}
                    <a href="javascript:void(0);"
                       title="全景浏览">
                        <img @click="panoramaPlay"
                             class="panorama-control"
                             src="/img/icon/panorama.png"
                             alt="">
                    <a href="javascript:void(0);" title="全景浏览">
                        <img
                            @click="panoramaPlay"
                            class="panorama-control deblurring"
                            src="/img/icon/panorama.png"
                            alt
                        />
                    </a>
                    <a href="javascript:void(0);"
                       title="语音介绍">
                        <img @click="audioPlay"
                             class="audio-control"
                             src="/img/navicon/audio.png"
                             alt="">
                    <a href="javascript:void(0);" title="语音介绍">
                        <img
                            @click="audioPlay"
                            class="audio-control deblurring"
                            src="/img/navicon/audio.png"
                            alt
                        />
                    </a>
                    <a href="javascript:void(0);"
                       title="关闭">
                        <img @click="closeModel"
                             class="close-box"
                             src="/img/navicon/close.png"
                             alt="">
                    <a href="javascript:void(0);" title="关闭">
                        <img
                            @click="closeModel"
                            class="close-box deblurring"
                            src="/img/navicon/close.png"
                            alt
                        />
                    </a>
                </div>
            </div>
            <div class="content-box">
                <div class="img-exhibition">
                    <div class="content">
                        <el-carousel :interval="5000"
                                     arrow="always"
                                     height="300px">
                            <el-carousel-item v-for="item in list"
                                              :key="item">
                                <el-image :src="item"
                                          :preview-src-list="[item]">
                                </el-image>
                        <el-carousel :interval="5000" arrow="always" height="300px">
                            <el-carousel-item v-for="item in list" :key="item">
                                <el-image :src="item" :preview-src-list="[item]"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="organizer">
                    主办:{{ sponsor }}
                </div>
                <div class="undertake">
                    承办:{{ undertake }}
                </div>
                <div class="time-box">
                    时间:{{ time }}
                </div>
                <div class="organizer">主办:{{ sponsor }}</div>
                <div class="undertake">承办:{{ undertake }}</div>
                <div class="time-box">时间:{{ time }}</div>
                <div class="text-introduce">
                    <div class="title">
                        相关介绍:
                    </div>
                    <div class="title">相关介绍:</div>
                    <div class="content">
                        <p v-text="introduce">
                        </p>
                        <p v-text="introduce"></p>
                    </div>
                </div>
                <div class="panorama-box" v-show="panoramaShow">
                    <div class="title">
                        全景浏览
                        <a href="javascript:void(0);"
                           title="关闭">
                            <img @click="panoramaShow = false, panoramaUrl = ''"
                                 class="close-box"
                                 src="/img/navicon/close.png"
                                 alt="">
                        <a href="javascript:void(0);" title="关闭">
                            <img
                                @click="(panoramaShow = false), (panoramaUrl = '')"
                                class="close-box"
                                src="/img/navicon/close.png"
                                alt
                            />
                        </a>
                    </div>
                    <div class="content">
                        <iframe style="width: 100%; height: 100%" :src="panoramaUrl" frameborder="0"></iframe>
                        <iframe
                            style="width: 100%; height: 100%"
                            :src="panoramaUrl"
                            frameborder="0"
                        ></iframe>
                    </div>
                </div>
            </div>
@@ -89,9 +77,11 @@
</template>
<script>
import { getWelcome } from '@/api/pc/public/specialmap'
import { mapGetters } from 'vuex'
let pathLayer = null
let pointLayer = null
export default {
    data () {
@@ -105,9 +95,6 @@
            pathList: [],
            pointNameList: [],
            pointList: [],
            DC: null,
            pathLayer: null,
            pointLayer: null,
            panoramaUrlOne: '',
            panoramaUrl: '',
            audioSource: '',
@@ -118,85 +105,102 @@
            panoramaShow: false
        }
    },
    created () {
    },
    created () { },
    mounted () {
        this.DC = global.DC
        this.audioSynth = window.speechSynthesis
        this.audioMsg = new window.SpeechSynthesisUtterance()
        this.audioMsg.onend = function () {
            this.audioSynth.cancel()
            // this.audioSynth.cancel();
            this.audioFlag = false
            this.audioCourse = false
        }
        this.getData()
        getWelcome({ hdname: '社区迎新' }).then((res) => {
            var result = res.data.data
            this.title = result.hdname
            this.time = result.time
            this.sponsor = result.sponsor
            this.undertake = result.undertake
            this.panoramaUrl = result.panoramaurl
            this.panoramaUrlOne = result.panoramaurl
            this.introduce = result.context
            this.audioSource = result.context
            this.list = result.tpurl.split(',')
            this.pointNameList = result.addressname.split(',')
            this.pointList = result.address.split(';')
            var a = result.lx.split(';')
            a.forEach(item => {
                var b = item.split('(')
                var c = b[1].substr(0, b[1].length - 1)
                var d = c.split(',')
                var j = []
                d.forEach(it => {
                    var e = it.split(' ')
                    var f = e.join(',')
                    j.push(f)
                })
                var k = j.join(';')
                this.pathList.push(k)
            })
            this.pathLayer = new this.DC.VectorLayer('pathLayer')
            this.viewer.addLayer(this.pathLayer)
            this.pointLayer = new this.DC.HtmlLayer('pointLayer')
            this.viewer.addLayer(this.pointLayer)
            this.pathList.forEach(item => {
                this.drawPolyline(item)
            })
            this.pointList.forEach((item, index) => {
                this.drawPoint(item.split(','), this.pointNameList[index])
            })
        })
        window.onbeforeunload = e => { // 刷新时弹出提示
            this.audioSynth.cancel()
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            // 社区内导航的显示关闭
            // 校区内导航的显示关闭
            'campusNavFlag',
            'orgNavBarFlag',
            'arcNavBarFlag'
        ])
    },
    methods: {
        getData () {
            getWelcome({ hdname: '校区迎新' }).then((res) => {
                var result = res.data.data
                this.title = result.hdname
                this.time = result.time
                this.sponsor = result.sponsor
                this.undertake = result.undertake
                this.panoramaUrl = result.panoramaurl
                this.panoramaUrlOne = result.panoramaurl
                this.introduce = result.context
                this.audioSource = result.context
                this.audioPlay()
                this.list = result.tpurl.split(',')
                this.pointNameList = result.addressname.split(',')
                this.pointList = result.address.split(';')
                var a = result.lx.split(';')
                a.forEach((item) => {
                    var b = item.split('(')
                    var c = b[1].substr(0, b[1].length - 1)
                    var d = c.split(',')
                    var j = []
                    d.forEach((it) => {
                        var e = it.split(' ')
                        var f = e.join(',')
                        j.push(f)
                    })
                    var k = j.join(';')
                    this.pathList.push(k)
                })
                pathLayer = new global.DC.VectorLayer('pathLayer')
                global.viewer.addLayer(pathLayer)
                pointLayer = new global.DC.HtmlLayer('pointLayer')
                global.viewer.addLayer(pointLayer)
                this.pathList.forEach((item) => {
                    this.drawPolyline(item)
                })
                this.pointList.forEach((item, index) => {
                    this.drawPoint(item.split(','), this.pointNameList[index])
                })
                if (this.pointList.length > 0) {
                    this.$store.dispatch('pcMoveView', {
                        viewer: global.viewer,
                        jd: +this.pointList[0].split(',')[0] - 0.0005,
                        wd: this.pointList[0].split(',')[1]
                    })
                } else {
                    this.$store.dispatch('pcMoveView', {
                        viewer: global.viewer,
                        jd: +this.pathList[0].split(';')[0].split(',')[0] - 0.0005,
                        wd: this.pathList[0].split(';')[0].split(',')[1]
                    })
                }
            })
        },
        drawPolyline (item) {
            const polyline = new this.DC.Polyline(item)
            const polyline = new global.DC.Polyline(item)
            polyline.setStyle({
                width: 6,
                arcType: true,
                material: new this.DC.PolylineImageTrailMaterialProperty({
                    color: new this.DC.Color(255, 0, 0),
                material: new global.DC.PolylineImageTrailMaterialProperty({
                    color: new global.DC.Color(255, 0, 0),
                    speed: 60,
                    image: '/img/icon/right.png',
                    repeat: { x: 320, y: 1 }
@@ -204,11 +208,11 @@
                clampToGround: true
            })
            this.pathLayer.addOverlay(polyline)
            pathLayer.addOverlay(polyline)
        },
        drawPoint (item, name) {
            const divIcon = new this.DC.DivIcon(
                new this.DC.Position(Number(item[0]), Number(item[1]), 0),
            const divIcon = new global.DC.DivIcon(
                new global.DC.Position(Number(item[0]), Number(item[1]), 0),
                `
                    <div class="point-entitys-box">
                        <div class="point-logo">
@@ -220,7 +224,7 @@
                    </div>
                `
            )
            this.pointLayer.addOverlay(divIcon)
            pointLayer.addOverlay(divIcon)
        },
        audioPlay () {
            if (this.audioFlag == false) {
@@ -239,8 +243,8 @@
            }
        },
        closeModel () {
            this.viewer.removeLayer(this.pathLayer)
            this.viewer.removeLayer(this.pointLayer)
            global.viewer.removeLayer(pathLayer)
            global.viewer.removeLayer(pointLayer)
            this.audioSynth.cancel()
            this.audioFlag = false
@@ -253,12 +257,17 @@
            this.panoramaShow = true
            this.panoramaUrl = this.panoramaUrlOne
        }
    },
    destroyed () {
        this.audioSynth.cancel()
        global.viewer.removeLayer(pathLayer)
        global.viewer.removeLayer(pointLayer)
        // console.log("关闭", "see1");
    }
}
</script>
<style lang='scss' scope>
<style lang="scss" scope>
.welcome-container {
    padding: 10px;
    position: fixed;
@@ -416,41 +425,41 @@
                position: relative;
                background: #29baf1;
                    .panorama-control {
                        position: absolute;
                        top: 0;
                        right: 56px;
                        bottom: 0;
                        left: auto;
                        margin: auto;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }
                .panorama-control {
                    position: absolute;
                    top: 0;
                    right: 56px;
                    bottom: 0;
                    left: auto;
                    margin: auto;
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
                    .audio-control {
                        position: absolute;
                        top: 0;
                        right: 32px;
                        bottom: 0;
                        left: auto;
                        margin: auto;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }
                .audio-control {
                    position: absolute;
                    top: 0;
                    right: 32px;
                    bottom: 0;
                    left: auto;
                    margin: auto;
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
                    .close-box {
                        position: absolute;
                        top: 0;
                        right: 8px;
                        bottom: 0;
                        left: auto;
                        margin: auto;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }
                .close-box {
                    position: absolute;
                    top: 0;
                    right: 8px;
                    bottom: 0;
                    left: auto;
                    margin: auto;
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
            }
            .content {