弹窗中功能添加完善

shuishen

2021-12-14 9aeb7ac3a98ba0d568e1aef21a8a31294ac093c7

弹窗中功能添加完善

 public/img/bg/nav-bg.jpeg

 public/img/navicon/drive-one.png

 public/img/navicon/drive-two.png

 public/img/navicon/walk-one.png

 public/img/navicon/walk-two.png

 src/api/pc/orgnav/index.js

New file
@@ -0,0 +1,16 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-14 08:58:30
 */
// 党群机构
import request from '@/router/axios'

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

 src/components/arcNavBar/index.vue

@@ -140,7 +140,7 @@
            width: 100%;
            height: 36px;
            line-height: 36px;
            background-color: #2196f3;
            background-color: #020c17;
            .title {
                padding-left: 10px;
                img {

 src/components/campusNav/index.vue

New file
@@ -0,0 +1,276 @@
<template>
    <div class="campus-nav-box"
         ref="campusNavBox">
        <div class="header"
             @mousedown="move"
             :class="{'move': moveFlag}">
            <div class="title">
                <img class="icon"
                     src="/img/icon/jg.png"
                     alt="">
                <span>
                    校内导航
                </span>
            </div>
            <img class="close"
                 src="/img/navicon/close.png"
                 alt=""
                 @click="closeModel">
        </div>
        <div class="container">
            <div class="tab">
                <ul>
                    <li @click="tabClick"
                        :class="{on:tabOneFlag}">
                        <i></i>
                        步行
                    </li>
                    <li @click="tabClick"
                        :class="{on:tabTwoFlag}">
                        <i></i>
                        驾车
                    </li>
                </ul>
            </div>
            <div class="content">
                <div>
                    <div>
                        <el-input v-model="getToName"
                                  placeholder="起点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: green;"></i></template>
                        </el-input>
                    </div>
                    <div>
                        <el-input v-model="comeName"
                                  placeholder="终点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: red;"></i></template>
                        </el-input>
                    </div>
                </div>
                <div>
                    <el-button type="danger">导航</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'campusNav',
    data () {
        return {
            moveFlag: false,
            tabOneFlag: true,
            tabTwoFlag: false
        }
    },
    props: {
        comeName: {
            type: String
        },
        getToName: {
            type: String
        }
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.campusNavBox // 获取目标元素
            // 算出鼠标相对元素的位置
            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.closeCampusNav()
        },
        tabClick () {
            this.tabOneFlag = !this.tabOneFlag
            this.tabTwoFlag = !this.tabTwoFlag
        }
    }
}
</script>

<style lang='scss' scope>
.campus-nav-box {
    position: fixed;
    top: 20%;
    left: 20%;
    width: 320px;
    height: 186px;
    z-index: 99;
    color: #fff;
    background: #fff;
    border-radius: 8px;

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #020c17;

        .title {
            padding-left: 10px;

            img {
                width: 18px;
                height: 18px;
                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;
    }

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

        .tab {
            height: 44px;
            line-height: 44px;

            ul {
                display: flex;

                li {
                    text-align: center;
                    flex: 1;
                    color: #337ab7;
                    cursor: pointer;
                    border-bottom: 1px solid #ccc;

                    i {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        vertical-align: text-bottom;
                    }
                }

                li:nth-child(1) {
                    border-right: 1px solid #ccc;

                    i {
                        background: url(/img/navicon/walk-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on {
                    color: #a40000;
                    border-bottom: none;
                }

                li.on:nth-child(1) {
                    i {
                        background: url(/img/navicon/walk-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }

        .content {
            padding: 0 10px;
            display: flex;
            align-items: center;
            height: calc(100% - 44px);

            & > div:nth-child(1) {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;

                & > div {
                    flex: 1;
                    line-height: 53px;
                }
            }

            & > div:nth-child(2) {
                width: 100px;
                text-align: center;
            }
        }
    }
}
</style>

 src/components/leftNav/index.vue

@@ -98,8 +98,8 @@
        generatePosition (num) {
            const list = []
            for (let i = 0; i < num; i++) {
                const lng = 121.0493 + Math.random() * 0.5
                const lat = 31.2583 + Math.random() * 0.5
                const lng = 121.1372 + Math.random() * 0.5
                const lat = 31.0129 + Math.random() * 0.5
                list.push(new this.DC.Position(lng, lat, 0))
            }
            return list

 src/components/map/index.vue

@@ -40,25 +40,24 @@
             id="map_content_content">
            <div id="mapChildContent">
                <div class="arc-bcg">
                    <img src="/img/job/one.jpg"
                         alt=""
                         @click="alert(1)">
                    <img :src="popupBgUrl"
                         alt="">
                </div>
                <div class="popup-nav">
                    <ul>
                        <li>
                        <li class="come-here-fun">
                            <i class="popup-icon come-nav deblurring"></i>
                            到这
                        </li>
                        <li>
                        <li class="get-to-fun">
                            <i class="popup-icon start-nav deblurring"></i>
                            出发
                        </li>
                        <li>
                        <li class="qr-code-fun">
                            <i class="popup-icon qr-code-nav deblurring"></i>
                            二维码
                        </li>
                        <li>
                        <li class="imgs-fun">
                            <i class="popup-icon atlas-nav deblurring"></i>
                            图集
                        </li>
@@ -104,7 +103,39 @@
            </div>
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   width='44%'
                   :before-close="handleClose">
            <div style="margin: 0; position: relative; width: 100%; height: 352px;">
                <img width="260"
                     :src="pupupQRUrl"
                     alt=""
                     style="position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto">
                <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
                    (右键另存为图片)
                </div>
            </div>
        </el-dialog>

        <left-nav ref="leftNav"></left-nav>

        <campusNav :comeName="comeName"
                   :getToName="getToName"
                   v-show="campusNavFlag" />

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

    </div>
</template>
@@ -118,15 +149,28 @@
    name: 'mapBox',
    data () {
        return {
            popupFlag: false
            popupFlag: false,
            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'
            ]
        }
    },
    computed: {
        ...mapGetters([
            'viewer'
            'viewer',
            'popupBgUrl',
            'pupupQRUrl'
        ])
    },
    mounted () {
        var that = this

        this.$nextTick(() => {
            // 动态添加dom元素，并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素，放置在父元素.pdf-body下)
            $('#map_popup_content').on('click', '.arc-bcg', function () {
@@ -138,11 +182,28 @@

                $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
            })

            $('#map_popup_content').on('click', '.popup-nav .come-here-fun', function (e) {
                that.comeName = '成交楼'
                if (that.campusNavFlag == false) that.campusNavFlag = true
            })

            $('#map_popup_content').on('click', '.popup-nav .get-to-fun', function (e) {
                that.getToName = '活动中心'
                if (that.campusNavFlag == false) that.campusNavFlag = true
            })

            $('#map_popup_content').on('click', '.popup-nav .qr-code-fun', function (e) {
                that.QRCodeFlag = true
            })

            $('#map_popup_content').on('click', '.popup-nav .imgs-fun', function (e) {
                console.log(that.$refs.popupImgs)
                that.$refs.popupImgs.clickHandler()
            })
        })

        var DC = global.DC

        var that = this

        let viewer

@@ -322,7 +383,9 @@
        DC.ready(initViewer)
    },
    methods: {

        closeCampusNav () {
            this.campusNavFlag = false
        }
    }
}
</script>

 src/components/orgNavBar/index.vue

@@ -21,7 +21,8 @@
            <div class="content">
                <ul>
                    <li v-for="(item, index) in navList"
                        :key="index">
                        :key="index"
                        @click="mapPopup(item)">
                        <img :src="item.icon"
                             alt="">
                        <span>
@@ -35,11 +36,13 @@
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'OrgNavBar',
    data () {
        return {
            moveFlag: false
            moveFlag: false,
            DC: null
        }
    },
    props: {
@@ -49,6 +52,16 @@
        title: {
            type: String
        }
    },
    created () {
        this.DC = global.DC
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl'
        ])
    },
    methods: {
        move (e) {
@@ -99,6 +112,33 @@
        },
        closeModel () {
            this.$parent.closeModel()
        },
        mapPopup (item) {
            this.$store.commit('SET_POPUPBGURL', item.bgImg)
            this.$store.commit('SET_POPUPQRURL', item.QRImg)

            console.log(this.popupBgUrl)
            var that = this
            // item.alt, item.heading, item.pitch, item.roll
            this.viewer.zoomToPosition(
                new this.DC.Position(item.longitude, item.latitude, item.alt, 35, -45, 0),
                function () {
                    that.newPopup(item)
                }
            )
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.longitude, item.latitude, item.alt, 35, -45, 0))
            // eslint-disable-next-line new-cap
            var popup = new this.DC.divForms(this.viewer, {
                domId: 'div1',
                title: item.navTitle,
                className: 'divForms-dom',
                content: document.getElementById('mapChildContent'),
                position: [
                    position
                ]
            })
        }
    }
}
@@ -122,7 +162,7 @@
            width: 100%;
            height: 36px;
            line-height: 36px;
            background-color: #2196f3;
            background-color: #020c17;
            .title {
                padding-left: 10px;
                img {
@@ -160,6 +200,7 @@
            overflow-y: auto;
            background: url(/img/bg/nav-bg.jpeg) no-repeat;
            background-size: 100% 100%;
            border-radius: 0 0 8px 8px;
            ul {
                padding: 15px;
                padding-top: 4px;

 src/divForms/divForms.js

@@ -132,15 +132,17 @@
    }

    positionPopUp (windowCoord, id) {
        const x = windowCoord.x
        const y = windowCoord.y - document.getElementById(id).offsetHeight
        // x = windowCoord.x - document.getElementById(id).offsetWidth
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
            // x = windowCoord.x - document.getElementById(id).offsetWidth

        document.getElementById(id).style.cssText = `
        visibility:visible;
        z-index:1;
        transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
        `
            document.getElementById(id).style.cssText = `
            visibility:visible;
            z-index:1;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}


 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-11-15 17:07:35
 * @Last Modified time: 2021-12-14 15:38:17
 */
 <template>
    <div>
@@ -13,6 +13,7 @@
</template>

<script>
import { getList } from '@/api/pc/orgnav/index'
export default {
    data () {
        return {
@@ -21,52 +22,19 @@
        }
    },
    created () {
        this.list = [
            {
                navTitle: '学校办公室',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '组织部',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '宣传部',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '博物馆',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '统战部',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '纪委办公室',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '巡查办公室',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '学生工作部（处）/团委',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '研究生工作部',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '保卫部',
                icon: '/img/navicon/tag.png'
            },
            {
                navTitle: '工会',
                icon: '/img/navicon/tag.png'
            }
        ]
        getList({ type: 1462593559077318657 }).then(res => {
            res.data.data.records.forEach(item => {
                this.list.push({
                    navTitle: item.mechanismname,
                    icon: '/img/navicon/tag.png',
                    longitude: item.jd,
                    latitude: item.wd,
                    alt: item.gd,
                    bgImg: item.tpurl,
                    QRImg: item.codeurl
                })
            })
        })
    },
    methods: {
        closeModel () {

 src/router/axios.js

@@ -9,7 +9,7 @@

const service = axios.create({
//   baseURL: 'http://192.168.0.107:83',
  baseURL: 'http://localhost',
  baseURL: 'http://192.168.0.107:80',
//   baseURL: 'http://192.168.0.107:83',
  timeout: 600000 // request timeout
})

 src/store/getters.js

@@ -1,4 +1,6 @@
const getters = {
    viewer: state => state.viewer.viewer
    viewer: state => state.viewer.viewer,
    popupBgUrl: state => state.popupParams.popupBgUrl,
    pupupQRUrl: state => state.popupParams.pupupQRUrl
}
export default getters

 src/store/index.js

@@ -2,13 +2,15 @@
import Vuex from 'vuex'

import viewer from './modules/viewer'
import popupParams from './modules/popupParams'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        viewer
        viewer,
        popupParams
    },
    getters
})

 src/store/modules/popupParams.js

New file
@@ -0,0 +1,19 @@
const popupParams = {
    state: {
        popupBgUrl: null,
        pupupQRUrl: null
    },
    mutations: {
        SET_POPUPBGURL (state, popupBgUrl) {
            state.popupBgUrl = popupBgUrl
        },
        SET_POPUPQRURL (state, pupupQRUrl) {
            state.pupupQRUrl = pupupQRUrl
        }
    },
    actions: {

    }
}

export default popupParams

 src/store/modules/viewer.js

@@ -4,7 +4,6 @@
    },
    mutations: {
        SET_VIEWER (state, viewer) {
            console.log(viewer, 456)
            state.viewer = viewer
        }
    },

 src/styles/index.scss

@@ -20,4 +20,32 @@
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}



/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 16px;
    /*滚动条宽度*/
    height: 16px;
    /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    /*滚动条的背景区域的圆角*/
    background-color: #fff;
    /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .9);
    background-color: green;
    /*滚动条的背景颜色*/
}

 src/styles/layout/pc.scss

@@ -51,25 +51,22 @@

            .el-menu {



                li {
                    font-size: 18px;
                    font-size: 16px !important;
                }

                li.el-menu-item {
                    border: 0px !important;

                }

                li.el-menu-item.is-active {
                    border: 0px !important;
                    background: #000 !important;
                    background: #3f51b5 !important;
                }

                li:hover {
                    border: 0px !important;
                    background: #000 !important;
                    background: #3f51b5 !important;
                }
            }
        }
@@ -83,6 +80,7 @@

.el-menu--horizontal {
    .el-menu-item {
        font-size: 12px !important;
        text-align: center;
        background: transparent !important;

@@ -100,22 +98,26 @@
    min-width: 132px !important;
}

.el-submenu__title i {
    color: #fff;
.el-submenu__title {

    font-size: 16px !important;

    i {
        color: #fff;
    }
}


.dialog-fade-enter-active .el-dialog.way {
    animation: anim-open 1s;
    animation: anim-open 1.5s;
}

.dialog-fade-leave-active .el-dialog.way {
    animation: anim-close 1s;
    animation: anim-close 1.5s;
}

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

@@ -127,19 +129,19 @@

@keyframes dialog-fade-out {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 1;
    }

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

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

@@ -151,12 +153,12 @@

@keyframes anim-close {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 1;
    }

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

 src/styles/pcpage/element-ui.scss

@@ -26,4 +26,8 @@
            font-size: 14px !important;
        }
    }
}

.el-image-viewer__wrapper {
    background: #000;
}