校内机构等模块中弹框封装，及部分接口对接，及部分样式更改

shuishen

2021-12-21 0b9095227438cb35f5a8759aee8f3b32a732151c

校内机构等模块中弹框封装，及部分接口对接，及部分样式更改

 public/examples/images/icon/elec.png

 public/examples/images/icon/img.png

 public/examples/images/icon/ter.png

 public/img/icon/service-aed.png

 public/img/icon/service-cr.png

 public/img/icon/service-cs.png

 public/img/icon/service-fy.png

 public/img/icon/service-kd.png

 public/img/icon/service-st.png

 public/img/icon/service-tc.png

 public/img/icon/service-tx.png

 public/img/icon/service-yh.png

 public/img/icon/service-yl.png

 public/img/icon/service-ys.png

 public/img/navicon/audio.png

 src/api/pc/public/arc.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-15 11:57:20
 * @Last Modified time: 2021-12-21 14:31:00
 */
// 校区
import request from '@/router/axios'
@@ -30,3 +30,11 @@
        params: params
    })
}

export const getMechanismDetail = (params) => {
    return request({
        url: '/blade-mechanism/mechanism/detail',
        method: 'get',
        params: params
    })
}

 src/api/pc/service/index.js

New file
@@ -0,0 +1,96 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 09:59:43
 */
// 校区
import request from '@/router/axios'

export const getList = (params) => {
    return request({
        url: '/blade-system/dict-biz/dictionary?code=campus',
        method: 'get',
        params: params
    })
}

export const getCanteenList = (params) => {
    return request({
        url: '/blade-restaurant/restaurant/list',
        method: 'get',
        params: params
    })
}

export const getSupermarketList = (params) => {
    return request({
        url: '/blade-supermarket/supermarket/list',
        method: 'get',
        params: params
    })
}

export const getMedicalList = (params) => {
    return request({
        url: '/blade-medical/medical/list',
        method: 'get',
        params: params
    })
}

export const getExpressList = (params) => {
    return request({
        url: '/blade-mail/mail/list',
        method: 'get',
        params: params
    })
}

export const getShowersList = (params) => {
    return request({
        url: '/blade-bathroom/bathroom/list',
        method: 'get',
        params: params
    })
}

export const getCopyList = (params) => {
    return request({
        url: '/blade-duplicate/duplicate/list',
        method: 'get',
        params: params
    })
}

export const getBankList = (params) => {
    return request({
        url: '/blade-network/network/list',
        method: 'get',
        params: params
    })
}

export const getAedList = (params) => {
    return request({
        url: '/blade-aed/aed/list',
        method: 'get',
        params: params
    })
}

export const getServiceList = (params) => {
    return request({
        url: '/blade-signal/signal/list',
        method: 'get',
        params: params
    })
}

export const getParkList = (params) => {
    return request({
        url: '/blade-parking/parking/list',
        method: 'get',
        params: params
    })
}

 src/components/arcNavBar/index.vue

@@ -6,7 +6,7 @@
                 @mousedown="move"
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon"
                    <img class="icon deblurring"
                         src="/img/icon/xyjz.png"
                         alt="">
                    <span>
@@ -46,8 +46,6 @@
<script>
import { mapGetters } from 'vuex'
import { getList, getChildNavList, getChildNavDetail } from '@/api/pc/public/arc'

var $ = window.$

export default {
    name: 'ArcNavBar',
@@ -163,7 +161,7 @@
            getChildNavList({ campus: campus, type: this.arcCode }).then(res => {
                res.data.data.forEach(item => {
                    this.itemNavList.push({
                        navTitle: item.mechanismName,
                        navTitle: item.mechanismname,
                        icon: '/img/navicon/tag.png',
                        id: item.id
                    })
@@ -175,27 +173,36 @@
                var result = res.data.data[0].list
                this.$store.commit('CLEAR_ALL', null)

                this.$store.commit('SET_POPUPBGURL', result.tpUrl)
                this.$store.commit('SET_POPUPQRURL', result.codeUrl)
                var imgArr = result.tpurl.split(',')
                var tabOne = res.data.data[0].jx.split(',')

                this.$store.commit('SET_POPUPBGURL', imgArr[0])
                this.$store.commit('SET_POPUPQRURL', result.codeurl)
                this.$store.commit('SET_POINTPOSITION', [Number(result.jd), Number(result.wd), Number(result.gd), Number(result.heading), Number(result.pitch), Number(result.roll)])
                this.$store.commit('SET_STATENAME', result.mechanismName)
                this.$store.commit('SET_STATENAME', result.mechanismname)
                this.$store.commit('SET_SITENAME', result.address)
                this.$store.commit('SET_TELEPHONE', result.telephone)
                this.$store.commit('SET_INTRODUCETEXT', result.introduce)
                this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
                this.$store.commit('SET_POPUPIMGATLAS', imgArr)
                if (res.data.data[0].jx != '') {
                    this.$store.commit('SET_TEACHLIST', tabOne)
                } else {
                    this.$store.commit('SET_TEACHLIST', [])
                }
                this.$store.commit('SET_LIVELIST', [])

                var that = this
                // item.alt, item.heading, item.pitch, item.roll
                this.viewer.zoomToPosition(
                    new this.DC.Position(result.jd, result.wd, result.gd, result.heading, result.pitch, result.roll),
                this.newPopup(result)
                this.viewer.flyToPosition(
                    new this.DC.Position(Number(result.jd), Number(result.wd), 3000, Number(result.heading), Number(result.pitch), Number(result.roll)),
                    function () {
                        that.newPopup(result)
                    }
                    },
                    3
                )
                // res.data.data[0].jx
            })
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.jd, item.wd, item.gd, item.heading, item.pitch, item.roll))
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd), Number(item.heading), Number(item.pitch), Number(item.roll)))
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
@@ -219,7 +226,7 @@
    border-radius: 8px;
    top: 24%;
    left: 20%;
    background-color: #fff;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;
    .container {
@@ -229,12 +236,23 @@
            width: 100%;
            height: 36px;
            line-height: 36px;
            background-color: #020c17;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;
                img {
                    width: 18px;
                    height: 18px;
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }
                span {
@@ -265,8 +283,19 @@
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: url(/img/bg/nav-bg.jpeg) no-repeat;
            background-size: 100% 100%;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            .tab {
                height: 42px;
                border-bottom: 1px solid #ccc;

 src/components/campusNav/index.vue

@@ -5,7 +5,7 @@
             @mousedown="move"
             :class="{'move': moveFlag}">
            <div class="title">
                <img class="icon"
                <img class="icon deblurring"
                     src="/img/icon/jg.png"
                     alt="">
                <span>
@@ -264,8 +264,8 @@
            padding-left: 10px;

            img {
                width: 18px;
                height: 18px;
                width: 20px;
                height: 20px;
                vertical-align: middle;
            }


 src/components/map/component/mapPopup.vue

@@ -17,6 +17,14 @@
                                <div class="label-wrap">
                                    <div class="title">
                                        {{stateName}}
                                        <img @click="audioPlay"
                                             class="audio-control"
                                             src="/img/navicon/audio.png"
                                             alt="">
                                        <img @click="closeMapPopupBox"
                                             class="close-box"
                                             src="/img/navicon/close.png"
                                             alt="">
                                    </div>
                                    <div class="label-content">
                                        <div class="arc-bcg">
@@ -25,13 +33,19 @@
                                        </div>
                                        <div v-show="siteName != null && siteName != ''"
                                             class="site">
                                            <strong>地址:</strong>{{siteName}}
                                            <strong>地址：</strong>
                                            {{siteName}}
                                        </div>
                                        <div v-show="telephone != null && telephone != ''"
                                             class="phone">
                                            <strong>电话：</strong>
                                            {{telephone}}
                                        </div>
                                        <div v-show="introduceText != null && introduceText != ''"
                                             class="introduce">
                                            <p>
                                                <strong>介绍:</strong>
                                                {{introduceText}}
                                            <p ref="DomIntroduceText">
                                                <strong>介绍：</strong>
                                                <span v-html="introduceText"></span>
                                            </p>
                                        </div>
                                        <div class="popup-nav">
@@ -59,33 +73,33 @@
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="arc-box">
                                        <div v-show="teachList.length > 0 || liveList.length > 0"
                                             class="arc-box">
                                            <ul class="tab-btn">
                                                <li class="on">教学科研行政</li>
                                                <li>生活服务</li>
                                                <li v-show="teachList.length > 0"
                                                    :class="{'on': tabBtnFlag == '教学科研行政'}"
                                                    @click="tabBtnClick('教学科研行政')">教学科研行政</li>
                                                <li v-show="liveList.length > 0"
                                                    :class="{'on': tabBtnFlag == '生活服务'}"
                                                    @click="tabBtnClick('生活服务')">生活服务</li>
                                            </ul>
                                            <div class="btm-content">
                                                <div class="on">
                                                    <ul>
                                                        <li>
                                                        <li v-for="(item, index) in teachList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(item)">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            教学楼
                                                        </li>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            教学楼
                                                            {{item}}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div>
                                                    <ul>
                                                        <li>
                                                        <li v-for="(item, index) in liveList"
                                                            :key="index">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            生活楼
                                                        </li>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            生活楼
                                                            {{item}}
                                                        </li>
                                                    </ul>
                                                </div>
@@ -111,6 +125,10 @@
                            <div class="content-wrap">
                                <div class="title">
                                    {{stateName}}
                                    <img @click="closePanoramaPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="">
                                </div>
                                <div class="content">
                                    <iframe :src="panoramaUrl"
@@ -146,8 +164,8 @@

        <el-image v-show="false"
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="srcList"
                  :src="popupImgAtlas[0]"
                  :preview-src-list="popupImgAtlas"
                  ref="popupImgs">
        </el-image>

@@ -155,26 +173,32 @@
                   :comeName="comeName"
                   :getToName="getToName"
                   v-show="campusNavFlag" />

        <audio ref="audioControlPlay"
               style="position: fixed; left: 111111111px;"
               v-html="audioSource"
               @ended="overAudio">

        </audio>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getMechanismDetail } from '@/api/pc/public/arc'

export default {
    name: 'mapPopup',
    data () {
        return {
            DC: null,
            tabBtnFlag: '教学科研行政',
            campusNavFlag: false,
            comeName: '',
            getToName: '',
            QRCodeFlag: false,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
            audioSource: '',
            audioFlag: false
        }
    },
    computed: {
@@ -192,6 +216,8 @@
            'stateName',
            // 地址
            'siteName',
            // 电话
            'telephone',
            // 介绍
            'introduceText',
            // 全景地址
@@ -199,21 +225,23 @@
            // 详情弹框显示关闭
            'detailsPopup',
            // 全景弹框显示关闭
            'panoramaPopup'
            'panoramaPopup',

            'popupImgAtlas',
            // 教学
            'teachList',
            // 科研
            'liveList'
        ])
    },
    created () {
        this.DC = global.DC

        this.$nextTick(() => {
            $('#map_popup_content').on('click', '.tab-btn li', function (e) {
                $(this).addClass('on').siblings().removeClass('on')

                $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
            })
        })
    },
    methods: {
        tabBtnClick (param) {
            this.tabBtnFlag = param
        },

        closeCampusNav () {
            this.campusNavFlag = false
            this.$refs.campusNavRoute.clearLayer()
@@ -244,6 +272,10 @@
        },

        panoramaClick () {
            if (this.audioFlag == true) {
                this.$refs.audioControlPlay.pause()
                this.audioFlag = false
            }
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
            this.viewer.scene.globe.depthTestAgainstTerrain = false
@@ -256,6 +288,83 @@
            })
            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_PANORAMAPOPUP', true)
        },

        closeMapPopupBox () {
            if (this.audioFlag == true) {
                this.$refs.audioControlPlay.pause()
                this.audioFlag = false
            }
            this.audioSource = ''
            this.$store.commit('SET_DETAILSPOPUP', false)
        },

        closePanoramaPopupBox () {
            this.$store.commit('SET_PANORAMAURL', '')
            this.$store.commit('SET_PANORAMAPOPUP', false)
        },

        audioPlay () {
            if (this.audioSource == '') {
                var zhText = encodeURI(this.$refs.DomIntroduceText.innerText)
                this.audioSource = `<source src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=${zhText}" type="audio/mpeg"><embed height="0" width="0" src="http://tts.baidu.com/text2audio?text=${zhText}">`
                console.log(this.audioSource)
                this.$refs.audioControlPlay.play()
                this.audioFlag = true
            } else {
                if (this.audioFlag == true) {
                    this.$refs.audioControlPlay.pause()
                    this.audioFlag = false
                } else {
                    this.$refs.audioControlPlay.play()
                    this.audioFlag = true
                }
            }
        },

        overAudio () {
            this.audioFlag = false
        },

        mechanismDetailPopup (param) {
            getMechanismDetail({ mechanismname: param }).then(res => {
                console.log(res)
                var result = res.data.data
                this.$store.commit('CLEAR_ALL', null)

                var imgArr = result.tpurl.split(',')

                this.$store.commit('SET_POPUPBGURL', imgArr[0])
                this.$store.commit('SET_POPUPQRURL', result.codeurl)
                this.$store.commit('SET_POINTPOSITION', [Number(result.jd), Number(result.wd), Number(result.gd), Number(result.heading), Number(result.pitch), Number(result.roll)])
                this.$store.commit('SET_STATENAME', result.mechanismname)
                this.$store.commit('SET_SITENAME', result.address)
                this.$store.commit('SET_TELEPHONE', result.telephone)
                this.$store.commit('SET_INTRODUCETEXT', result.introduce)
                this.$store.commit('SET_POPUPIMGATLAS', imgArr)

                this.newPopup(result)
                this.viewer.flyToPosition(
                    new this.DC.Position(Number(result.jd), Number(result.wd), 3000, Number(result.heading), Number(result.pitch), Number(result.roll)),
                    function () {
                    },
                    3
                )
            })
        },

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd), Number(item.heading), Number(item.pitch), Number(item.roll)))
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    position
                ]
            })

            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        }
    }


 src/components/map/index.vue

@@ -170,59 +170,94 @@
                name: '地形'
            })

            const layer = new that.DC.TilesetLayer('layer')
            viewer.addLayer(layer)
            const tileset = new that.DC.Tileset(
                'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
            // const tilesetLayer = new that.DC.TilesetLayer('tilesetLayer')
            // viewer.addLayer(tilesetLayer)
            // const tileset = new that.DC.Tileset(
            //     'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
            // )
            // const style = new that.DC.TilesetStyle()
            // style.color = {
            //     conditions: [
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['${Height} >= 200', 'rgb(102, 71, 151)'],
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['${Height} >= 100', 'rgb(170, 162, 204)'],
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['${Height} >= 50', 'rgb(224, 226, 238)'],
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['${Height} >= 25', 'rgb(252, 230, 200)'],
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['${Height} >= 10', 'rgb(248, 176, 87)'],
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['${Height} >= 5', 'rgb(198, 106, 11)'],
            //         // eslint-disable-next-line no-template-curly-in-string
            //         ['true', 'rgb(127, 59, 8)']
            //     ]
            // }
            // tileset.setStyle(style)
            // tilesetLayer.addOverlay(tileset)
            // viewer.flyTo(tileset)
            // tileset.on(that.DC.MouseEventType.CLICK, e => {
            //     // that.popupFlag = true

            //     viewer.scene.globe.depthTestAgainstTerrain = false

            //     // 定制化窗体
            //     // eslint-disable-next-line no-unused-vars
            //     var popup = new that.DC.DivForms(that.viewer, {
            //         domId: 'divFormsDomBox',
            //         position: [
            //             e.position
            //         ]
            //     })

            //     that.$store.commit('SET_PANORAMAPOPUP', false)
            //     that.$store.commit('SET_DETAILSPOPUP', true)
            // })

            const wallLayer = new that.DC.VectorLayer('wallLayer')
            viewer.addLayer(wallLayer)

            var arr = [
                [115.87597219, 28.74628526, 100],
                [115.87556558, 28.74415792, 100],
                [115.87459782, 28.74197687, 100],
                [115.87371834, 28.74219927, 100],
                [115.87210924, 28.74182217, 100],
                [115.86469971, 28.73630725, 100],
                [115.86387107, 28.73620123, 100],
                [115.86274498, 28.73616026, 100],
                [115.86173699, 28.74241350, 100],
                [115.86105468, 28.74643934, 100],
                [115.86609240, 28.74642593, 100],
                [115.87597219, 28.74628526, 100]
            ]

            arr.forEach(item => {
                item = item.join(',')
            })

            arr = arr.join(';')

            const wall = new that.DC.Wall(
                arr
            )
            const style = new that.DC.TilesetStyle()
            style.color = {
                conditions: [
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 200', 'rgb(102, 71, 151)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 100', 'rgb(170, 162, 204)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 50', 'rgb(224, 226, 238)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 25', 'rgb(252, 230, 200)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 10', 'rgb(248, 176, 87)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 5', 'rgb(198, 106, 11)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['true', 'rgb(127, 59, 8)']
                ]
            }
            wall.setStyle({
                material: new that.DC.WallTrailMaterialProperty({
                    color: that.DC.Color.GREEN,
                    speed: 4
                })
            })
            wallLayer.addOverlay(wall)

            viewer.use(new that.DC.Measure())

            tileset.setStyle(style)
            layer.addOverlay(tileset)
            viewer.flyTo(tileset)

            tileset.on(that.DC.MouseEventType.CLICK, e => {
                // that.popupFlag = true

                viewer.scene.globe.depthTestAgainstTerrain = false

                // 定制化窗体
                // eslint-disable-next-line no-unused-vars
                var popup = new that.DC.DivForms(that.viewer, {
                    domId: 'divFormsDomBox',
                    position: [
                        e.position
                    ]
                })

                that.$store.commit('SET_PANORAMAPOPUP', false)
                that.$store.commit('SET_DETAILSPOPUP', true)
            })
            viewer.flyTo(wallLayer)

            // viewer.zoomToPosition(
            //     new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
            //     new that.DC.Position(115.87186406, 28.74449337, 1200, 0, -90)
            // )

            viewer.compass.enable = true

 src/components/orgNavBar/index.vue

@@ -6,7 +6,7 @@
                 @mousedown="move"
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon"
                    <img class="icon deblurring"
                         src="/img/icon/jg.png"
                         alt="">
                    <span>
@@ -37,8 +37,6 @@

<script>
import { mapGetters } from 'vuex'

var $ = window.$

export default {
    name: 'OrgNavBar',
@@ -129,22 +127,27 @@
        mapPopup (item) {
            this.$store.commit('CLEAR_ALL', null)

            this.$store.commit('SET_POPUPBGURL', item.bgImg)
            var imgArr = item.bgImg.split(',')

            this.$store.commit('SET_POPUPBGURL', imgArr[0])
            this.$store.commit('SET_POPUPQRURL', item.QRImg)
            this.$store.commit('SET_POINTPOSITION', [Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)])
            this.$store.commit('SET_STATENAME', item.navTitle)
            this.$store.commit('SET_SITENAME', item.address)
            this.$store.commit('SET_TELEPHONE', item.telephone)
            this.$store.commit('SET_INTRODUCETEXT', item.introduce)
            this.$store.commit('SET_POPUPIMGATLAS', imgArr)

            var that = this

            this.viewer.zoomToPosition(
                new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll),
            this.newPopup(item)
            this.viewer.flyToPosition(
                new this.DC.Position(Number(item.longitude), Number(item.latitude), 3000, Number(item.heading), Number(item.pitch), Number(item.roll)),
                function () {
                    that.newPopup(item)
                }
                },
                3
            )
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll))
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)))
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
@@ -168,9 +171,10 @@
    border-radius: 8px;
    top: 24%;
    left: 20%;
    background-color: #fff;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;

    .container {
        .header {
            position: relative;
@@ -178,14 +182,27 @@
            width: 100%;
            height: 36px;
            line-height: 36px;
            background-color: #020c17;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;

                img {
                    width: 18px;
                    height: 18px;
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

                span {
                    margin-left: 6px;
                    display: inline-block;
@@ -193,6 +210,7 @@
                    color: #fff;
                }
            }

            .close {
                position: absolute;
                right: 6px;
@@ -204,9 +222,11 @@
                height: 14px;
            }
        }

        .move {
            cursor: move;
        }

        .content {
            clear: both;
            width: 100%;
@@ -214,12 +234,23 @@
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: url(/img/bg/nav-bg.jpeg) no-repeat;
            background-size: 100% 100%;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            ul {
                padding: 15px;
                padding-top: 4px;

                li {
                    padding-left: 24px;
                    position: relative;
@@ -228,6 +259,7 @@
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;

                    img {
                        position: absolute;
                        left: 0;
@@ -237,10 +269,12 @@
                        margin: auto;
                        width: 14px;
                    }

                    span {
                        color: #fff;
                        cursor: pointer;
                    }

                    span:hover {
                        text-decoration: underline;
                    }

 src/components/serviceNavBar/index.vue

New file
@@ -0,0 +1,443 @@
<template>
    <div class="public-org-nav-bar"
         ref="publicOrgNavBar">
        <div class="container">
            <div class="header"
                 @mousedown="move"
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon deblurring"
                         :src="headerLog"
                         alt="">
                    <span>
                        {{title}}
                    </span>
                </div>
                <img class="close"
                     src="/img/navicon/close.png"
                     alt=""
                     @click="closeModel">
            </div>
            <div class="content">
                <div class="tab">
                    <ul>
                        <li :class="{'on': item.flag}"
                            v-for="(item, index) in titleList"
                            :key="index"
                            @click="topNavClick(item, index)">{{ item.title }}</li>
                    </ul>
                </div>
                <ul>
                    <li v-for="(item, index) in itemNavList"
                        :key="index"
                        @click="mapPopup(item.details)">
                        <img :src="item.icon"
                             alt="">
                        <span>
                            {{item.navTitle}}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    getList, getCanteenList, getSupermarketList, getMedicalList,
    getExpressList, getShowersList, getCopyList, getBankList, getAedList, getServiceList, getParkList
} from '@/api/pc/service/index'

export default {
    name: 'ServiceNavBar',
    data () {
        return {
            moveFlag: false,
            itemNavList: [],
            DC: null
        }
    },
    props: {
        title: {
            type: String
        },
        headerLog: {
            type: String
        },
        arcCode: {
            type: Number
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl'
        ])
    },
    created () {
        this.DC = global.DC
        this.titleList = []
        getList().then(res => {
            res.data.data.forEach(item => {
                this.titleList.push({ title: item.dictValue, flag: false, key: item.dictKey })
            })

            this.titleList[0].flag = true

            this.getChilsNavs(this.titleList[0].key)
        })
    },
    mounted () {
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.publicOrgNavBar // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },
        closeModel () {
            this.$parent.closeModel()
        },
        topNavClick (item, index) {
            this.titleList.forEach(item => {
                item.flag = false
            })

            this.titleList[index].flag = true

            this.getChilsNavs(item.key)
        },
        getChilsNavs (campus) {
            this.itemNavList = []

            if (this.arcCode == 1) {
                getCanteenList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 2) {
                getSupermarketList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 3) {
                getMedicalList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 4) {
                getExpressList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 5) {
                getShowersList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 7) {
                getCopyList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 8) {
                getBankList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 9) {
                getAedList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 10) {
                getServiceList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            } else if (this.arcCode == 11) {
                getParkList({ campus: campus }).then(res => {
                    res.data.data.records.forEach(item => {
                        this.itemNavList.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            details: item
                        })
                    })
                })
            }
        },
        mapPopup (param) {
            var result = param
            this.$store.commit('CLEAR_ALL', null)

            var imgArr = result.tpurl.split(',')

            this.$store.commit('SET_POPUPBGURL', imgArr[0])
            this.$store.commit('SET_POPUPQRURL', result.codeurl)
            this.$store.commit('SET_POINTPOSITION', [Number(result.jd), Number(result.wd), Number(result.gd), Number(result.heading), Number(result.pitch), Number(result.roll)])
            this.$store.commit('SET_STATENAME', result.mechanismname)
            this.$store.commit('SET_SITENAME', result.address)
            this.$store.commit('SET_TELEPHONE', result.telephone)
            this.$store.commit('SET_INTRODUCETEXT', result.introduce)
            this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
            this.$store.commit('SET_POPUPIMGATLAS', imgArr)

            this.newPopup(result)
            this.viewer.flyToPosition(
                new this.DC.Position(Number(result.jd), Number(result.wd), 3000, Number(result.heading), Number(result.pitch), Number(result.roll)),
                function () {
                },
                3
            )
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd), Number(item.heading), Number(item.pitch), Number(item.roll)))
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    position
                ]
            })

            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        }
    }
}
</script>

<style scoped lang='scss'>
.public-org-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 24%;
    left: 20%;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;
    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;
                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }
                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }
            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
            }
        }
        .move {
            cursor: move;
        }
        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            .tab {
                height: 42px;
                border-bottom: 1px solid #ccc;
                ul {
                    display: flex;
                    padding: 0;
                    li {
                        padding: 0;
                        flex: 1;
                        height: 42px;
                        line-height: 42px;
                        color: #fff;
                        text-align: center;
                        border: none;
                        cursor: pointer;
                    }

                    li.on {
                        border-bottom: 1px solid yellow;
                        color: yellow;
                    }
                }
            }
            ul {
                padding: 15px;
                padding-top: 4px;
                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;
                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }
                    span {
                        color: #fff;
                        cursor: pointer;
                    }
                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>

 src/pcLayout/index.vue

@@ -36,11 +36,25 @@
                        <el-menu-item index="/pcLayout/default/arc/rest">其他楼宇</el-menu-item>
                    </el-submenu>

                    <el-menu-item index="/pcLayout/default/service"> <i class='custom-icon menu-shfw'></i> 生活服务设施</el-menu-item>
                    <el-submenu index="service">
                        <template slot="title"> <i class='custom-icon menu-shfw'></i> 生活服务设施</template>
                        <el-menu-item index="/pcLayout/default/service/canteen">食堂餐厅</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/supermarket">购物超市</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/medical">校内医疗</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/express">邮寄快递</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/showers">学生浴室</el-menu-item>
                        <!-- <el-menu-item index="/pcLayout/default/service/transfer">圈存机</el-menu-item> -->
                        <el-menu-item index="/pcLayout/default/service/copy">打字复印</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/bank">银行网点</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/aed">AED</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/service">通信营业厅</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/park">停车场</el-menu-item>
                        <el-menu-item index="/pcLayout/default/service/alleyway">出入口</el-menu-item>
                    </el-submenu>

                    <el-menu-item index="/pcLayout/default/allquery"> <i class='custom-icon menu-zhcx'></i> 综合查询</el-menu-item>

                    <el-menu-item index="/pcLayout/default/campusnav"> <i class='custom-icon menu-xydl'></i> 校园导览</el-menu-item>
                    <!-- <el-menu-item index="/pcLayout/default/campusnav"> <i class='custom-icon menu-xydl'></i> 校园导览</el-menu-item> -->

                    <el-menu-item index="/pcLayout/default/campusnavi"> <i class='custom-icon menu-xydh'></i> 校园导航</el-menu-item>


 src/pcviews/orgnav/directly.vue

@@ -3,7 +3,7 @@
 * @Name: 直属及附属单位
 * @Date: 2021-11-15 10:02:12
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-14 16:30:52
 * @Last Modified time: 2021-12-21 15:11:39
 */
 <template>
    <div>
@@ -22,7 +22,7 @@
        }
    },
    created () {
        getList({ type: 2 }).then(res => {
        getList({ type: 3 }).then(res => {
            res.data.data.records.forEach(item => {
                this.list.push({
                    navTitle: item.mechanismname,
@@ -34,7 +34,10 @@
                    pitch: item.pitch,
                    roll: item.roll,
                    bgImg: item.tpurl,
                    QRImg: item.codeurl
                    QRImg: item.codeurl,
                    address: item.address,
                    telephone: item.telephone,
                    introduce: item.introduce
                })
            })
        })

 src/pcviews/orgnav/masses.vue

@@ -3,7 +3,7 @@
 * @Name: 党群机构
 * @Date: 2021-11-15 10:02:12
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-15 14:42:59
 * @Last Modified time: 2021-12-20 11:26:52
 */
 <template>
    <div>
@@ -34,7 +34,10 @@
                    pitch: item.pitch,
                    roll: item.roll,
                    bgImg: item.tpurl,
                    QRImg: item.codeurl
                    QRImg: item.codeurl,
                    address: item.address,
                    telephone: item.telephone,
                    introduce: item.introduce
                })
            })
        })

 src/pcviews/orgnav/ofc.vue

@@ -3,7 +3,7 @@
 * @Name: 职能部处
 * @Date: 2021-11-15 10:02:12
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-15 14:44:26
 * @Last Modified time: 2021-12-20 11:26:49
 */
 <template>
    <div>
@@ -34,7 +34,10 @@
                    pitch: item.pitch,
                    roll: item.roll,
                    bgImg: item.tpurl,
                    QRImg: item.codeurl
                    QRImg: item.codeurl,
                    address: item.address,
                    telephone: item.telephone,
                    introduce: item.introduce
                })
            })
        })

 src/pcviews/orgnav/rest.vue

@@ -3,7 +3,7 @@
 * @Name: 其他机构
 * @Date: 2021-11-15 10:02:12
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-15 14:44:30
 * @Last Modified time: 2021-12-21 15:13:31
 */
 <template>
    <div>
@@ -22,7 +22,7 @@
        }
    },
    created () {
        getList({ type: 2 }).then(res => {
        getList({ type: 5 }).then(res => {
            res.data.data.records.forEach(item => {
                this.list.push({
                    navTitle: item.mechanismname,
@@ -34,7 +34,10 @@
                    pitch: item.pitch,
                    roll: item.roll,
                    bgImg: item.tpurl,
                    QRImg: item.codeurl
                    QRImg: item.codeurl,
                    address: item.address,
                    telephone: item.telephone,
                    introduce: item.introduce
                })
            })
        })

 src/pcviews/orgnav/teaching.vue

@@ -3,7 +3,7 @@
 * @Name: 教学与科研机构
 * @Date: 2021-11-15 10:02:12
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-15 14:44:35
 * @Last Modified time: 2021-12-21 15:12:33
 */
 <template>
    <div>
@@ -22,7 +22,7 @@
        }
    },
    created () {
        getList({ type: 2 }).then(res => {
        getList({ type: 4 }).then(res => {
            res.data.data.records.forEach(item => {
                this.list.push({
                    navTitle: item.mechanismname,
@@ -34,7 +34,10 @@
                    pitch: item.pitch,
                    roll: item.roll,
                    bgImg: item.tpurl,
                    QRImg: item.codeurl
                    QRImg: item.codeurl,
                    address: item.address,
                    telephone: item.telephone,
                    introduce: item.introduce
                })
            })
        })

 src/pcviews/service/aed.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: AED
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:41:47
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: 'AED',
            code: 9,
            headerLog: '/img/icon/service-aed.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/alleyway.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 出入口
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:41:46
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '出入口',
            code: 12,
            headerLog: '/img/icon/service-cr.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/bank.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 银行网点
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:41:52
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '银行网点',
            code: 8,
            headerLog: '/img/icon/service-yh.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/canteen.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 食堂餐厅
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:41:55
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '食堂餐厅',
            code: 1,
            headerLog: '/img/icon/service-st.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/copy.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 打字复印
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:41:56
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '打字复印',
            code: 7,
            headerLog: '/img/icon/service-fy.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/express.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 邮寄快递
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:43:27
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '邮寄快递',
            code: 4,
            headerLog: '/img/icon/service-kd.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/index.vue

@@ -1,14 +1,10 @@
<template>
    <div>
        生活服务设施
    </div>
    <router-view></router-view>
</template>

<script>
export default {
    created () {
        alert(1)
    }

}
</script>


 src/pcviews/service/medical.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 校内医疗
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:42:06
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '校内医疗',
            code: 3,
            headerLog: '/img/icon/service-yl.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/park.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 停车场
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:42:09
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '停车场',
            code: 11,
            headerLog: '/img/icon/service-tc.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/service.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 通信营业厅
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:42:12
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '通信营业厅',
            code: 10,
            headerLog: '/img/icon/service-tx.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/showers.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 学生浴室
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:42:15
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '学生浴室',
            code: 5,
            headerLog: '/img/icon/service-ys.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/supermarket.vue

New file
@@ -0,0 +1,37 @@
/*
 * @Author: Morpheus
 * @Name: 购物超市
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:42:18
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"
                         :headerLog="headerLog"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '购物超市',
            code: 2,
            headerLog: '/img/icon/service-cs.png'
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/pcviews/service/transfer.vue

New file
@@ -0,0 +1,35 @@
/*
 * @Author: Morpheus
 * @Name: 圈存机
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:42:21
 */
<template>
    <div>
        <service-nav-bar :title="title"
                         :arcCode="code"></service-nav-bar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: '圈存机',
            code: 6
        }
    },
    created () {
    },
    methods: {
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    }
}
</script>

<style>
</style>

 src/router/page/index.js

@@ -1,8 +1,8 @@
/*
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-13 14:53:06
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-21 11:42:32
 */

import Vue from 'vue'
@@ -26,170 +26,251 @@
                title: '系统首页'
            },
            children: [{
                path: 'mapnav',
                component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
                meta: {
                    title: '地图导览'
                }
            },
            {
                path: 'orgnav',
                component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
                meta: {
                    title: '校内机构导览'
                },
                children: [{
                    path: 'masses',
                    component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
                    path: 'mapnav',
                    component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
                    meta: {
                        title: '党群机构'
                        title: '地图导览'
                    }
                },
                {
                    path: 'ofc',
                    component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
                    path: 'orgnav',
                    component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
                    meta: {
                        title: '职能部处'
                    }
                }, {
                    path: 'directly',
                    component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
                        title: '校内机构导览'
                    },
                    children: [{
                            path: 'masses',
                            component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
                            meta: {
                                title: '党群机构'
                            }
                        },
                        {
                            path: 'ofc',
                            component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
                            meta: {
                                title: '职能部处'
                            }
                        }, {
                            path: 'directly',
                            component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
                            meta: {
                                title: '直属及附属单位'
                            }
                        },
                        {
                            path: 'teaching',
                            component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
                            meta: {
                                title: '教学与科研机构'
                            }
                        }, {
                            path: 'rest',
                            component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
                            meta: {
                                title: '其他机构'
                            }
                        }
                    ]
                },
                {
                    path: 'arc',
                    component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
                    meta: {
                        title: '直属及附属单位'
                        title: '校内建筑'
                    },
                    children: [{
                            path: 'edifact',
                            component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
                            meta: {
                                title: '行政办公'
                            }
                        },
                        {
                            path: 'teaching',
                            component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
                            meta: {
                                title: '教学科研'
                            }
                        }, {
                            path: 'venue',
                            component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
                            meta: {
                                title: '校内场馆'
                            }
                        },
                        {
                            path: 'dorm',
                            component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
                            meta: {
                                title: '学生宿舍'
                            }
                        }, {
                            path: 'culture',
                            component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
                            meta: {
                                title: '文化风景'
                            }
                        },
                        {
                            path: 'family',
                            component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
                            meta: {
                                title: '家属住宅'
                            }
                        }, {
                            path: 'rest',
                            component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
                            meta: {
                                title: '其他楼宇'
                            }
                        }
                    ]
                },
                {
                    path: 'service',
                    component: resolve => require(['../../pcviews/service/index.vue'], resolve),
                    meta: {
                        title: '生活服务设施'
                    },
                    children: [{
                            path: 'canteen',
                            component: resolve => require(['../../pcviews/service/canteen.vue'], resolve),
                            meta: {
                                title: '食堂餐厅'
                            }
                        },
                        {
                            path: 'supermarket',
                            component: resolve => require(['../../pcviews/service/supermarket.vue'], resolve),
                            meta: {
                                title: '购物超市'
                            }
                        }, {
                            path: 'medical',
                            component: resolve => require(['../../pcviews/service/medical.vue'], resolve),
                            meta: {
                                title: '校内医疗'
                            }
                        },
                        {
                            path: 'express',
                            component: resolve => require(['../../pcviews/service/express.vue'], resolve),
                            meta: {
                                title: '邮寄快递'
                            }
                        }, {
                            path: 'showers',
                            component: resolve => require(['../../pcviews/service/showers.vue'], resolve),
                            meta: {
                                title: '学生浴室'
                            }
                        },
                        // {
                        //     path: 'transfer',
                        //     component: resolve => require(['../../pcviews/service/transfer.vue'], resolve),
                        //     meta: {
                        //         title: '圈存机'
                        //     }
                        // },
                        {
                            path: 'copy',
                            component: resolve => require(['../../pcviews/service/copy.vue'], resolve),
                            meta: {
                                title: '打字复印'
                            }
                        },
                        {
                            path: 'bank',
                            component: resolve => require(['../../pcviews/service/bank.vue'], resolve),
                            meta: {
                                title: '银行网点'
                            }
                        }, {
                            path: 'aed',
                            component: resolve => require(['../../pcviews/service/aed.vue'], resolve),
                            meta: {
                                title: 'AED'
                            }
                        },
                        {
                            path: 'service',
                            component: resolve => require(['../../pcviews/service/service.vue'], resolve),
                            meta: {
                                title: '通信营业厅'
                            }
                        }, {
                            path: 'park',
                            component: resolve => require(['../../pcviews/service/park.vue'], resolve),
                            meta: {
                                title: '停车场'
                            }
                        },
                        {
                            path: 'alleyway',
                            component: resolve => require(['../../pcviews/service/alleyway.vue'], resolve),
                            meta: {
                                title: '出入口'
                            }
                        }
                    ]
                },
                {
                    path: 'allquery',
                    component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
                    meta: {
                        title: '综合查询'
                    }
                },
                {
                    path: 'teaching',
                    component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
                    path: 'campusnav',
                    component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
                    meta: {
                        title: '教学与科研机构'
                    }
                }, {
                    path: 'rest',
                    component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
                    meta: {
                        title: '其他机构'
                    }
                }
                ]
            },
            {
                path: 'arc',
                component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
                meta: {
                    title: '校内建筑'
                },
                children: [{
                    path: 'edifact',
                    component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
                    meta: {
                        title: '行政办公'
                        title: '校园导览'
                    }
                },
                {
                    path: 'teaching',
                    component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
                    path: 'campusnavi',
                    component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
                    meta: {
                        title: '教学科研'
                    }
                }, {
                    path: 'venue',
                    component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
                    meta: {
                        title: '校内场馆'
                        title: '校园导航'
                    }
                },
                {
                    path: 'dorm',
                    component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
                    path: 'specialmap',
                    component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
                    meta: {
                        title: '学生宿舍'
                    }
                }, {
                    path: 'culture',
                    component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
                    meta: {
                        title: '文化风景'
                        title: '专题地图'
                    }
                },
                {
                    path: 'family',
                    component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
                    path: 'tool',
                    component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
                    meta: {
                        title: '家属住宅'
                    }
                }, {
                    path: 'rest',
                    component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
                    meta: {
                        title: '其他楼宇'
                    }
                        title: '工具'
                    },
                    children: [{
                            path: 'download',
                            component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
                            meta: {
                                title: '地图下载'
                            }
                        }, {
                            path: 'sign',
                            component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
                            meta: {
                                title: '地图标记'
                            }
                        },
                        {
                            path: 'ranging',
                            component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
                            meta: {
                                title: '地图测距'
                            }
                        }
                    ]
                }
                ]
            },
            {
                path: 'service',
                component: resolve => require(['../../pcviews/service/index.vue'], resolve),
                meta: {
                    title: '生活服务设施'
                }
            },
            {
                path: 'allquery',
                component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
                meta: {
                    title: '综合查询'
                }
            },
            {
                path: 'campusnav',
                component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
                meta: {
                    title: '校园导览'
                }
            },
            {
                path: 'campusnavi',
                component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
                meta: {
                    title: '校园导航'
                }
            },
            {
                path: 'specialmap',
                component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
                meta: {
                    title: '专题地图'
                }
            },
            {
                path: 'tool',
                component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
                meta: {
                    title: '工具'
                },
                children: [{
                    path: 'download',
                    component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
                    meta: {
                        title: '地图下载'
                    }
                }, {
                    path: 'sign',
                    component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
                    meta: {
                        title: '地图标记'
                    }
                },
                {
                    path: 'ranging',
                    component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
                    meta: {
                        title: '地图测距'
                    }
                }
                ]
            }
            ]
        }]
    },

 src/store/getters.js

@@ -22,9 +22,13 @@
    startingPoint: state => state.popupParams.startingPoint,
    stateName: state => state.popupParams.stateName,
    siteName: state => state.popupParams.siteName,
    telephone: state => state.popupParams.telephone,
    introduceText: state => state.popupParams.introduceText,
    panoramaUrl: state => state.popupParams.panoramaUrl,
    detailsPopup: state => state.popupParams.detailsPopup,
    panoramaPopup: state => state.popupParams.panoramaPopup
    panoramaPopup: state => state.popupParams.panoramaPopup,
    popupImgAtlas: state => state.popupParams.popupImgAtlas,
    teachList: state => state.popupParams.teachList,
    liveList: state => state.popupParams.liveList
}
export default getters

 src/store/modules/popupParams.js

@@ -7,16 +7,21 @@
        pointPosition: null,
        stateName: null,
        siteName: null,
        telephone: null,
        introduceText: null,
        panoramaUrl: null,
        detailsPopup: false,
        panoramaPopup: false
        panoramaPopup: false,
        // 图集
        popupImgAtlas: [],
        teachList: [],
        liveList: []
    },
    mutations: {
        SET_POPUPBGURL(state, popupBgUrl) {
        SET_POPUPBGURL (state, popupBgUrl) {
            state.popupBgUrl = popupBgUrl
        },
        SET_POPUPQRURL(state, pupupQRUrl) {
        SET_POPUPQRURL (state, pupupQRUrl) {
            state.pupupQRUrl = pupupQRUrl
        },
        SET_TERMINUS (state, terminus) {
@@ -34,6 +39,9 @@
        SET_SITENAME (state, siteName) {
            state.siteName = siteName
        },
        SET_TELEPHONE (state, telephone) {
            state.telephone = telephone
        },
        SET_INTRODUCETEXT (state, introduceText) {
            state.introduceText = introduceText
        },
@@ -46,11 +54,22 @@
        SET_PANORAMAPOPUP (state, panoramaPopup) {
            state.panoramaPopup = panoramaPopup
        },
        SET_POPUPIMGATLAS (state, popupImgAtlas) {
            state.popupImgAtlas = popupImgAtlas
        },
        SET_TEACHLIST (state, teachList) {
            state.teachList = teachList
        },
        SET_LIVELIST (state, liveList) {
            state.liveList = liveList
        },

        CLEAR_ALL (state, param) {
            state.siteName = param
            state.introduceText = param
            state.panoramaUrl = param
            state.teachList = []
            state.liveList = []
        }
    },
    actions: {

 src/styles/divforms/panoramaBox.scss

@@ -16,9 +16,21 @@
            box-shadow: 0 0px 12px #29b8f1e5;

            .title {
                position: relative;
                line-height: 36px;
                color: #fff;
                text-align: center;

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


 src/styles/divforms/popup.scss

@@ -56,7 +56,7 @@
}

.btm-box {
    height: 30px;
    height: 36px;
}

.arc-box {
@@ -123,7 +123,8 @@
    }
}

.site {
.site,
.phone {
    font-size: 0.875rem;
    line-height: 24px;

@@ -145,4 +146,34 @@
        font-size: 0.875rem;
        line-height: 24px;
    }
}
}

.label-wrap {

    .title {

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

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



 src/styles/layout/pc.scss

@@ -61,12 +61,12 @@

                li.el-menu-item.is-active {
                    border: 0px !important;
                    background: #3f51b5 !important;
                    background: rgba(1, 64, 112, 0.494) !important;
                }

                li:hover {
                    border: 0px !important;
                    background: #3f51b5 !important;
                    background: #1A78C2 !important;
                }
            }
        }
@@ -117,7 +117,7 @@

@keyframes dialog-fade-in {
    0% {
        transform: scale(0.1) translate3d(0, -100%, 0);
        transform: scale(0.1) translate3d(0, 0, 0);
        opacity: 0;
    }

@@ -134,14 +134,14 @@
    }

    100% {
        transform: scale(0.1) translate3d(0, -100%, 0);
        transform: scale(0.1) translate3d(0, 0, 0);
        opacity: 0;
    }
}

@keyframes anim-open {
    0% {
        transform: scale(0.1) translate3d(0, -100%, 0);
        transform: scale(0.1) translate3d(0, 0%, 0);
        opacity: 0;
    }

@@ -158,7 +158,7 @@
    }

    100% {
        transform: scale(0.1) translate3d(0, -100%, 0);
        transform: scale(0.1) translate3d(0, 0%, 0);
        opacity: 0;
    }
}

 src/styles/pcpage/dc-ui.scss

New file
@@ -0,0 +1,13 @@
#viewer-container {

    .dc-compass {
        top: 20px;
        transform: scale(1.6);
    }

    .dc-zoom-controller {
        top: 120px;
        transform: scale(1.6);
    }

}

 src/styles/pcpage/index.scss

@@ -1,3 +1,4 @@
@import './element-ui.scss';
@import './dc-ui.scss';

@import './tool/ranging.scss';