忽略模型文件

shuishen

2022-01-13 05e12ffc0cd7ca5cc0469cc7b69f9a524d722d1c

 src/pcviews/specialmap/welcome.vue

@@ -3,55 +3,299 @@
 * @Name: 社区迎新
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-01-05 14:06:20
 * @Last Modified time: 2022-01-13 17:39:35
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
        <div class="welcome-container">
            <div class="header">
                <div class="title">
                    {{ title }}
                    <a href="javascript:void(0);" title="语音介绍">
                         <img @click="audioPlay"
                         class="audio-control"
                         src="/img/navicon/audio.png"
                         alt="">
                    </a>
                    <a href="javascript:void(0);" title="关闭">
                        <img @click="closeMapPopupBox"
                         class="close-box"
                         src="/img/navicon/close.png"
                         alt="">
                    </a>
                </div>
            </div>
            <div class="content-box">
                <div class="text-introduce">
                    <div class="title">
                        相关介绍：
                    </div>
                    <div class="content">
                        <p v-text="introduce">

                        </p>
                    </div>
                </div>
                <div class="organizer">
                    主办：{{}}
                </div>
                <div class="undertake">
                    承办：{{}}
                </div>
                <div class="img-exhibition">
                    <div class="title">
                        相关图片：
                    </div>
                    <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-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="operating-btn">
                    <ul>
                        <li>全景</li>
                        <li>视频</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { getWelcome } from '@/api/pc/public/specialmap'
import { mapGetters } from 'vuex'

export default {
    data () {
        return {
            title: '圈存机',
            code: 6,
            headerLog: '/img/icon/service-qcj.png'
            data: [],
            time: '',
            num: 0,
            title: '',
            introduce: '',
            list: [],
            pathList: [],
            pointNameList: [],
            pointList: [],
            DC: null,
            pathLayer: null,
            pointLayer: null
        }
    },
    created () {
        if (this.orgNavBarFlag == true) {
            this.$store.commit('SET_ORGNAVBARTITLE', '')
            this.$store.commit('SET_ORGNAVBARLIST', [])
            this.$store.commit('SET_ORGNAVBARFLAG', false)
        }
        if (this.arcNavBarFlag == true) {
            this.$store.commit('SET_ARCNAVBARTITLE', '')
            this.$store.commit('SET_ARCNAVBARCODE', '')
            this.$store.commit('SET_ARCNAVBARFLAG', false)
        }

    },
    mounted () {
        this.DC = global.DC
        getWelcome({ hdname: '社区迎新' }).then((res) => {
            var result = res.data.data
            this.title = result.hdname
            this.introduce = result.context
            this.list = result.tpurl.split(',')
            this.pointNameList = result.addressname.split(',')
            this.pointList = result.address.split(';')

            this.list.forEach((item, index) => {
                var a = index + 1
                this.data.push(a)
            })

            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])
            })
        })
    },
    computed: {
        ...mapGetters([
            'viewer',
            // 社区内导航的显示关闭
            'campusNavFlag',
            'orgNavBarFlag',
            'arcNavBarFlag'
        ])
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        drawPolyline (item) {
            const polyline = new this.DC.Polyline(item)

            polyline.setStyle({
                width: 6,
                arcType: true,
                material: new this.DC.PolylineImageTrailMaterialProperty({
                    color: new this.DC.Color(255, 0, 0),
                    speed: 60,
                    image: '/img/icon/right.png',
                    repeat: { x: 320, y: 1 }
                }),
                clampToGround: true
            })

            this.pathLayer.addOverlay(polyline)
        },
        drawPoint (item, name) {
            console.log(item, name)
            const divIcon = new this.DC.DivIcon(
                new this.DC.Position(Number(item[0]), Number(item[1]), 0),
                `
                    <div class="point-entitys-box">
                        <div class="point-logo">
                            <img src="/img/icon/activity.png">
                        </div>
                        <div class="point-title">
                            ${name}
                        </div>
                    </div>
                `
            )
            this.pointLayer.addOverlay(divIcon)
        }
    }
}
</script>

<style>
<style lang='scss' scope>
.welcome-container {
    padding: 10px;
    position: fixed;
    top: 132px;
    left: 132px;
    width: 480px;
    height: 620px;
    background: #2196f3;
    border-radius: 10px;
    color: #fff;

    .header {
        height: 36px;
        line-height: 36px;
        text-align: center;
        position: relative;

        .title {
            .audio-control {
                position: absolute;
                top: 0;
                right: 34px;
                bottom: 0;
                left: auto;
                margin: auto;
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

            .close-box {
                position: absolute;
                top: 0;
                right: 8px;
                bottom: 0;
                left: auto;
                margin: auto;
                width: 16px;
                height: 16px;
                cursor: pointer;
            }
        }
    }

    .content-box {
        height: calc(100% - 36px);
        .text-introduce {
            height: calc(100% - 408px);

            .title {
                height: 36px;
                line-height: 36px;
            }

            .content {
                height: calc(100% - 36px);

                p {
                    height: 100%;
                    text-indent: 2em;
                    font-size: 16px;
                    letter-spacing: 2px;
                    line-height: 24px;
                    overflow-y: auto;
                }
            }
        }

        .organizer,
        .undertake {
            height: 36px;
            line-height: 36px;
        }

        .img-exhibition {
            height: 336px;

            .title {
                height: 36px;
                line-height: 36px;
            }

            .content {
                .el-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    // width: 100%;
                    height: 100%;

                    img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>