冲突

liuyg

2022-01-25 117dc4cec546f830bc941ea314dcbdb9b370b211

冲突

 public/img/icon/bigScreen.png

 src/components/arcNavBar/index.vue

@@ -256,7 +256,7 @@
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    z-index: 99;
    font-size: 14px;
    .container {
        .header {
@@ -265,16 +265,16 @@
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
@@ -313,16 +313,16 @@
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;


 src/components/campusNav/index.vue

@@ -46,8 +46,8 @@
                            <ul>
                                <li v-for="(item, index) in toNameList"
                                    :key="index"
                                    @click="loadPopup(item)">
                                    {{item.name}}
                                    @click="originChange(item)">
                                    {{item.mechanismname}}
                                </li>
                            </ul>
                        </div>
@@ -64,8 +64,8 @@
                            <ul>
                                <li v-for="(item, index) in comeNameList"
                                    :key="index"
                                    @click="loadPopup(item)">
                                    {{item.name}}
                                    @click="terminusChange(item)">
                                    {{item.mechanismname}}
                                </li>
                            </ul>
                        </div>
@@ -114,7 +114,9 @@
            // 出发名称
            'getToName',
            // 到达名称
            'comeName'
            'comeName',
            // 点信息
            'pointPosition'
        ])
    },
    watch: {
@@ -275,7 +277,7 @@
                        routes += lineArr
                    })

                    routes = routes.substr(0, routes.length - 1)
                    routes = startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
@@ -287,7 +289,7 @@
                        clampToGround: true
                    })
                    this.routeLayer.addOverlay(polyline)
                    if (this.twoOrThree == '3 维') {
                    if (this.twoOrThree == '真三维') {
                        this.viewer.flyTo(this.routeLayer)
                    } else {
                        var longitude = null
@@ -310,7 +312,7 @@
                        this.viewer.camera.setView({
                            // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                            // fromDegrees()方法，将经纬度和高程转换为世界坐标
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 300),
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 600),
                            orientation: {
                                // 指向
                                heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
@@ -349,7 +351,7 @@
                        routes += lineArr
                    })

                    routes = routes.substr(0, routes.length - 1)
                    routes = startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
@@ -362,7 +364,7 @@
                    })
                    this.routeLayer.addOverlay(polyline)

                    if (this.twoOrThree == '3 维') {
                    if (this.twoOrThree == '真三维') {
                        this.viewer.flyTo(this.routeLayer)
                    } else {
                        var longitude = null
@@ -385,7 +387,7 @@
                        this.viewer.camera.setView({
                            // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                            // fromDegrees()方法，将经纬度和高程转换为世界坐标
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 300),
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 600),
                            orientation: {
                                // 指向
                                heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
@@ -449,6 +451,37 @@
                    this.comeNameShow = false
                }
            }
        },

        originChange (param) {
            console.log(param, 456)
            this.$store.commit('SET_POINTPOSITION', [
                Number(param.jd),
                Number(param.wd),
                Number(param.gd),
                Number(param.heading),
                Number(param.pitch),
                Number(param.roll)
            ])
            this.$store.commit('SET_GETTONAME', param.mechanismname)
            this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
            this.toNameShow = false
            this.toNameList = []
        },

        terminusChange (param) {
            this.$store.commit('SET_POINTPOSITION', [
                Number(param.jd),
                Number(param.wd),
                Number(param.gd),
                Number(param.heading),
                Number(param.pitch),
                Number(param.roll)
            ])
            this.$store.commit('SET_COMENAME', param.mechanismname)
            this.$store.commit('SET_TERMINUS', this.pointPosition)
            this.comeNameShow = false
            this.comeNameList = []
        }
    }
}

 src/components/map/components/campusBuildingSearch copy.vue

New file
@@ -0,0 +1,440 @@
<template>
    <div>
        <div class="map-campus-search"
             id="CampusSearchPanel">
            <el-input class="search-input"
                      placeholder="社区搜索…"
                      v-model="searchInput"
                      @input="searchValueChange"
                      @focus="shortcutFlag = true">
            </el-input>
            <el-button-group>
                <el-button @click="navigationShow"
                           class="deblurring"
                           icon="el-icon-my-path"></el-button>
                <el-button class="deblurring"
                           type="primary"
                           icon="el-icon-my-search"></el-button>
            </el-button-group>
            <div v-show="searchValShow"
                 class="search-value-box">
                <ul>
                    <li v-for="(item, index) in searchValList"
                        :key="index"
                        @click="loadPopup(item)">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <div class="map-campus-shortcut"
                 v-show="shortcutFlag">
                <div class="shortcut-box">
                    <ul>
                        <li v-for="(item, index) in shortcutList"
                            :key="index">
                            <el-button @click="openModelPopup(item)">
                                <img :src="item.bgimg"
                                     alt="">
                                <span>{{item.title}}</span>
                            </el-button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { mapGetters } from 'vuex'

import { getList } from '@/api/pc/orgnav/index'
import { getSearchList } from '@/api/pc/public/search'

export default {
    name: 'campusBuildingSearch',
    data () {
        return {
            DC: null,
            shortcutList: [
                // {
                //     bgimg: '/img/search/org.png',
                //     title: '党群机构',
                //     type: 'orgnav',
                //     path: '/pcLayout/default/orgnav/masses',
                //     code: 1
                // },
                // {
                //     bgimg: '/img/search/ofc.png',
                //     title: '职能部处',
                //     type: 'orgnav',
                //     path: '/pcLayout/default/orgnav/ofc',
                //     code: 2
                // },
                // {
                //     bgimg: '/img/search/teach.png',
                //     title: '教学科研',
                //     type: 'arc',
                //     path: '/pcLayout/default/arc/teaching',
                //     code: 2
                // },
                {
                    bgimg: '/img/search/venue.png',
                    title: '社区场馆',
                    type: 'arc',
                    path: '/pcLayout/default/arc/venue',
                    code: 3
                }
                // {
                //     bgimg: '/img/search/dorm.png',
                //     title: '社区宿舍',
                //     type: 'arc',
                //     path: '/pcLayout/default/arc/dorm',
                //     code: 4
                // },
                // {
                //     bgimg: '/img/search/scenery.png',
                //     title: '文化风景',
                //     type: 'arc',
                //     path: '/pcLayout/default/arc/culture',
                //     code: 5
                // }
            ],
            shortcutFlag: false,
            searchInput: '',
            searchValShow: false,
            searchValList: []
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            // 社区内导航的显示关闭
            'campusNavFlag',
            'orgNavBarFlag',
            'arcNavBarFlag'
        ])
    },
    created () {
        this.DC = global.DC
    },
    methods: {
        searchValueChange () {
            if (this.searchInput == '') {
                this.searchValList = []
                this.searchValShow = false
                return
            }
            getSearchList({ mechanismName: this.searchInput }).then(res => {
                if (res.data.data.length > 0) {
                    this.searchValList = res.data.data
                    this.searchValShow = true
                }
            })
        },

        navigationShow () {
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
            }
        },

        openModelPopup (param) {
            var list = []
            if (this.$route.path.indexOf('/service') != -1) {
                this.$store.dispatch('delVisitedViews', this.$route)
                this.$router.push('/pcLayout/default')
            }

            if (param.type == 'orgnav') {
                var path = this.$route.path
                if (path.indexOf('/arc') != -1) {
                    this.$store.dispatch('delVisitedViews', this.$route)
                    this.$router.push('/pcLayout/default')
                    this.$store.commit('SET_ARCNAVBARTITLE', '')
                    this.$store.commit('SET_ARCNAVBARCODE', '')
                    this.$store.commit('SET_ARCNAVBARFLAG', false)
                }

                if (this.arcNavBarFlag == true) {
                    this.$store.commit('SET_ARCNAVBARTITLE', '')
                    this.$store.commit('SET_ARCNAVBARCODE', '')
                    this.$store.commit('SET_ARCNAVBARFLAG', false)
                }

                this.$store.commit('SET_ORGNAVBARTITLE', param.title)
                this.$store.commit('SET_ORGNAVBARLIST', [])

                this.$store.commit('SET_ORGNAVBARFLAG', true)

                getList({ type: param.code }).then(res => {
                    res.data.data.records.forEach(item => {
                        list.push({
                            navTitle: item.mechanismname,
                            icon: '/img/navicon/tag.png',
                            longitude: item.jd,
                            latitude: item.wd,
                            alt: item.gd,
                            heading: item.heading,
                            pitch: item.pitch,
                            roll: item.roll,
                            bgImg: item.tpurl,
                            QRImg: item.codeurl,
                            address: item.address,
                            telephone: item.telephone,
                            introduce: item.introduce,
                            videourl: item.videourl
                        })
                    })

                    this.$store.commit('SET_ORGNAVBARLIST', list)
                })
            } else if (param.type == 'arc') {
                if (this.$route.path.indexOf('/orgnav') != -1) {
                    this.$store.dispatch('delVisitedViews', this.$route)
                    this.$router.push('/pcLayout/default')
                    this.$store.commit('SET_ORGNAVBARTITLE', '')
                    this.$store.commit('SET_ORGNAVBARLIST', [])
                    this.$store.commit('SET_ORGNAVBARFLAG', false)
                }

                if (this.orgNavBarFlag == true) {
                    this.$store.commit('SET_ORGNAVBARTITLE', '')
                    this.$store.commit('SET_ORGNAVBARLIST', [])
                    this.$store.commit('SET_ORGNAVBARFLAG', false)
                }

                this.$store.commit('SET_ARCNAVBARTITLE', param.title)
                this.$store.commit('SET_ARCNAVBARCODE', param.code)
                this.$store.commit('SET_ARCNAVBARFLAG', true)
            }
        },

        shortcutShow (event) {
            var sp = document.getElementById('CampusSearchPanel')

            if (sp) {
                if (!sp.contains(event.target)) { // 这句是说如果我们点击到了id为myPanel以外的区域
                    this.shortcutFlag = false
                }
            }
        },

        loadPopup (param) {
            var that = this

            that.searchInput = ''
            that.searchValList = []
            that.searchValShow = false

            this.$store.commit('CLEAR_ALL', null)

            var result = param.list

            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)
            if (result.panoramaurl != '') {
                this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
            }
            if (result.videourl && result.videourl != '') {
                this.$store.commit('SET_MONITORURL', result.videourl)
            }
            this.$store.commit('SET_POPUPIMGATLAS', imgArr)
            if (param.jx != undefined && param.jx != '') {
                var tabOne = param.jx.split(',')
                this.$store.commit('SET_TEACHLIST', tabOne)
            } else {
                this.$store.commit('SET_TEACHLIST', [])
            }

            if (param.sh != undefined && param.sh != '') {
                var tabTwo = param.sh.split(',')
                this.$store.commit('SET_LIVELIST', tabTwo)
            } else {
                this.$store.commit('SET_LIVELIST', [])
            }

            this.newPopup(result)
            this.viewer.flyToPosition(
                new this.DC.Position(Number(result.jd), Number(result.wd), 300, Number(result.heading), Number(result.pitch), Number(result.roll)),
                () => {

                },
                3
            )
        },

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd)))
            // 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_MONITORPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        }
    }

}
</script>

<style lang='scss' scope>
.map-campus-search {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
    width: 330px;
    min-height: 40px;
    max-height: 360px;
    height: auto;
    z-index: 11;
    border-radius: 5px;
    box-shadow: 0 0 14px 2px rgb(221, 221, 221);

    .search-input {
        float: left;
        width: 250px;
        height: 40px;
        border-radius: 5px 0 0 5px;

        input {
            box-sizing: border-box;
            border-radius: 5px 0 0 5px;
        }
    }

    .el-button-group {
        float: left;
        width: 80px;

        .el-button {
            margin: 0;
            padding: 0;
            width: 40px;
            height: 40px !important;
            position: relative;
            border-radius: 0;
            border: 1px solid #dcdfe6;

            i {
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        }

        .el-button:nth-child(1) {
            border-left: none;
            border-right: none;
        }

        .el-button:nth-child(2) {
            border-left: none;
            border-right: none;
            border-radius: 0 5px 5px 0;
        }
    }

    .search-value-box {
        position: absolute;
        top: 41px;
        left: 0;
        width: auto;
        min-width: 250px;
        max-height: 520px;
        background: #fff;
        overflow-y: auto;
        box-shadow: 0 0 14px 2px rgb(221, 221, 221);
        border-radius: 5px;

        ul {
            li {
                padding-left: 20px;
                height: 36px;
                line-height: 36px;
                cursor: pointer;
            }

            li:hover {
                background: #f5f5f5;
            }
        }
    }

    .map-campus-shortcut {
        margin-top: 20px;
        width: 100%;
        height: 330px;
        background: #fff;
        border-radius: 5px;

        .shortcut-box {
            padding-top: 36px;
            ul {
                display: flex;
                width: 100%;
                height: 120px;
                justify-content: flex-start;
                flex-wrap: wrap;

                li {
                    margin: 0 13px;
                    width: 84px;
                    height: 76px;

                    .el-button {
                        width: 80px;
                        height: 70px;
                        padding: 6px 12px;
                        background: #efefef;
                        border: none;
                        border-radius: 5px;
                        box-sizing: border-box;
                        text-align: center;

                        & > span {
                            width: auto;
                            height: auto;

                            img {
                                margin-top: 4px;
                                width: 26px;
                                height: 26px;
                            }

                            span {
                                display: block;
                                font-size: 14px;
                                line-height: 28px;
                            }
                        }
                    }

                    .el-button:focus {
                        border: 1px solid #000;
                    }
                }
            }
        }
    }
}
</style>

 src/components/map/components/campusBuildingSearch.vue

@@ -12,7 +12,8 @@
                <el-button @click="navigationShow"
                           class="deblurring"
                           icon="el-icon-my-path"></el-button>
                <el-button class="deblurring"
                <el-button @click="fuzzyQuery"
                           class="deblurring"
                           type="primary"
                           icon="el-icon-my-search"></el-button>
            </el-button-group>
@@ -22,7 +23,7 @@
                    <li v-for="(item, index) in searchValList"
                        :key="index"
                        @click="loadPopup(item)">
                        {{item.name}}
                        {{item.mechanismname}}
                    </li>
                </ul>
            </div>
@@ -140,6 +141,26 @@
            }
        },

        fuzzyQuery () {
            if (this.searchInput == '') {
                this.searchValList = []
                this.searchValShow = false

                this.$message({
                    message: '请输入关键字',
                    type: 'warning'
                })
                return
            }
            getSearchList({ mechanismName: this.searchInput }).then(res => {
                if (res.data.data.length > 0) {
                    this.$store.commit('SET_SEARCHPOPUPFLAG', true)
                    this.$store.commit('SET_SEARCHPOPUPLIST', res.data.data)
                    this.searchValShow = false
                }
            })
        },

        openModelPopup (param) {
            var list = []
            if (this.$route.path.indexOf('/service') != -1) {
@@ -230,22 +251,20 @@

            this.$store.commit('CLEAR_ALL', null)

            var result = param.list

            var imgArr = result.tpurl.split(',')
            var imgArr = param.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)
            if (result.panoramaurl != '') {
                this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
            this.$store.commit('SET_POPUPQRURL', param.codeurl)
            this.$store.commit('SET_POINTPOSITION', [Number(param.jd), Number(param.wd), Number(param.gd), Number(param.heading), Number(param.pitch), Number(param.roll)])
            this.$store.commit('SET_STATENAME', param.mechanismname)
            this.$store.commit('SET_SITENAME', param.address)
            this.$store.commit('SET_TELEPHONE', param.telephone)
            this.$store.commit('SET_INTRODUCETEXT', param.introduce)
            if (param.panoramaurl != '') {
                this.$store.commit('SET_PANORAMAURL', param.panoramaurl)
            }
            if (result.videourl && result.videourl != '') {
                this.$store.commit('SET_MONITORURL', result.videourl)
            if (param.videourl && param.videourl != '') {
                this.$store.commit('SET_MONITORURL', param.videourl)
            }
            this.$store.commit('SET_POPUPIMGATLAS', imgArr)
            if (param.jx != undefined && param.jx != '') {
@@ -262,9 +281,9 @@
                this.$store.commit('SET_LIVELIST', [])
            }

            this.newPopup(result)
            this.newPopup(param)
            this.viewer.flyToPosition(
                new this.DC.Position(Number(result.jd), Number(result.wd), 300, Number(result.heading), Number(result.pitch), Number(result.roll)),
                new this.DC.Position(Number(param.jd), Number(param.wd), 300, Number(param.heading), Number(param.pitch), Number(param.roll)),
                () => {

                },

 src/components/map/components/dimension.vue

@@ -3,8 +3,8 @@
        <el-radio-group v-model="dimensionValue"
                        size="medium"
                        @change="dimensionChange">
            <el-radio-button label="2.5维"></el-radio-button>
            <el-radio-button label="3 维"></el-radio-button>
            <el-radio-button label="三 维"></el-radio-button>
            <el-radio-button label="真三维"></el-radio-button>
        </el-radio-group>
    </div>
</template>
@@ -20,7 +20,7 @@
    data () {
        return {
            DC: null,
            dimensionValue: '2.5维',
            dimensionValue: '三 维',
            // 建筑2.5D地图
            newLayer: null,
            baseLayer: null,
@@ -224,9 +224,7 @@

                    var provider = new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: '/wp/{z}/{x}/{y}.png',
                        fileExtension: 'png',
                        tileHeight: 52,
                        tileWidth: 52
                        fileExtension: 'png'
                        // minimumLevel: 19
                    })

@@ -239,7 +237,7 @@
                    that.newLayer = that.viewer.imageryLayers.addImageryProvider(provider)

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

                    that.wallArr.forEach(item => {
                        item = item.join(',')
@@ -255,7 +253,7 @@
                            speed: 10
                        })
                    })
                    that.wallLayer.addOverlay(wall)
                    // that.wallLayer.addOverlay(wall)

                    // that.viewer.camera.setView({
                    //     // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
@@ -314,7 +312,7 @@
                    that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1000

                    // 设置相机缩小时的速率
                    // that.viewer.scene.screenSpaceCameraController._minimumZoomRate = 10000
                    that.viewer.scene.screenSpaceCameraController._minimumZoomRate = 10000
                    // 设置相机放大时的速率
                    that.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000
                    // 视角平移
@@ -392,13 +390,12 @@
                    that.viewer.on(that.DC.MouseEventType.CLICK, e => {
                        if (e.overlay != undefined && e.layer.id == 'areaLayer') {
                            var rid = e.overlay.attr['楼栋号'] == '8栋' ? '9栋' : e.overlay.attr['楼栋号'] == '9栋' ? '8栋' : e.overlay.attr['楼栋号']
                            this.$store.commit('CLEAR_ALL', null)
                            getDetail({ mechanismname: '香琴湾' + rid }).then((res) => {
                                that.viewer.scene.globe.depthTestAgainstTerrain = false
                                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)
                                that.$store.commit('SET_POINTPOSITION', [Number(e.wgs84Position.lng), Number(e.wgs84Position.lat), Number(e.wgs84Position.alt), Number(0), Number(0), Number(0)])
@@ -438,11 +435,15 @@
                                this.$store.commit('SET_MONITORPOPUP', false)
                                this.$store.commit('SET_DETAILSPOPUP', true)
                            })

                            this.viewer.flyToPosition(
                                new this.DC.Position(Number(e.wgs84Position.lng), Number(e.wgs84Position.lat), 300, Number(0), Number(-90), Number(0))
                            )
                        }
                    })

                    document.querySelector('.dc-zoom-controller').children[1].onclick = function () {
                        if (that.dimensionValue == '3 维') {
                        if (that.dimensionValue == '真三维') {
                            that.viewer.camera.setView({
                                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                                // fromDegrees()方法，将经纬度和高程转换为世界坐标
@@ -478,7 +479,7 @@
        dimensionChange () {
            var that = this
            that.$store.commit('SET_TWOORTHREE', that.dimensionValue)
            if (that.dimensionValue == '3 维') {
            if (that.dimensionValue == '真三维') {
                // that.wallLayer.show = false
                that.areaLayer.show = false
                that.viewer.imageryLayers.remove(that.newLayer)

 src/components/map/components/mapPopup.vue

@@ -59,7 +59,8 @@
                                                    <i class="popup-icon start-nav deblurring"></i>
                                                    出发
                                                </li>
                                                <li v-show="false" @click="qrCodeClick">
                                                <li v-show="false"
                                                    @click="qrCodeClick">
                                                    <i class="popup-icon qr-code-nav deblurring"></i>
                                                    二维码
                                                </li>
@@ -131,25 +132,26 @@

            <div v-if="panoramaPopup"
                 class="panorama-dom"
                 :class="{'change-full': fullscreen}"
                 id="PanoramaBox">
                <div style="width: 100%; height: 100%;">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div class="content-wrap">
                            <div class="content-wrap"
                                 :class="{'change-full': fullscreen}"
                                 id="FullScreenBox">
                                <div class="title">
                                    {{ stateName }}
                                    <img @click="screen"
                                         class="full-srceen-btn"
                                         :src="fullScreenUrl"
                                         alt="" />
                                    <img @click="closePanoramaPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="" />
                                </div>
                                <div class="content"
                                     id="FullScreenBox">
                                    <button type="button"
                                            @click="screen">
                                        <img :src="fullScreenUrl"
                                             alt="" />
                                    </button>
                                <div class="content">
                                    <iframe allowfullscreen="true"
                                            :src="panoramaUrl"
                                            frameborder="0"></iframe>
@@ -291,31 +293,7 @@
        }
    },
    mounted () {
        var that = this
        this.$nextTick(() => {
            window.onresize = function () {
                if (!checkFull()) {
                    // 要执行的动作
                    that.fullScreenUrl = '/img/icon/bigScreen.png'

                    if (document.documentElement.requestFullScreen) {
                        document.exitFullScreen()
                    } else if (document.documentElement.webkitRequestFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.mozCancelFullScreen()
                    }
                    that.fullscreen = false
                }
            }

            function checkFull () {
                return document.fullscreenElement ||
                    document.msFullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement || false
            }
        })
    },
    watch: {
        introduceText: {
@@ -364,29 +342,16 @@
    },
    methods: {
        screen () {
            const element = document.getElementById('FullScreenBox')
            if (this.fullscreen) {
                this.fullScreenUrl = '/img/icon/bigScreen.png'
                this.fullscreen = !this.fullscreen

                if (document.documentElement.requestFullScreen) {
                    document.exitFullScreen()
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen()
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.mozCancelFullScreen()
                }
                document.getElementById('pcElHeader').style.zIndex = 9999
            } else {
                this.fullScreenUrl = '/img/icon/smallScreen.png'
                this.fullscreen = !this.fullscreen

                if (element.requestFullScreen) {
                    element.requestFullScreen()
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen()
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen()
                }
                document.getElementById('pcElHeader').style.zIndex = 9
            }
        },


 src/components/map/index.vue

@@ -31,6 +31,7 @@
        <campusNav ref="campusNavRoute"
                   v-show="campusNavFlag" />

        <search-details v-if="searchPopupFlag"></search-details>
        <org-nav-bar v-if="orgNavBarFlag"></org-nav-bar>
        <arc-nav-bar v-if="arcNavBarFlag"></arc-nav-bar>
    </div>
@@ -82,7 +83,8 @@
            // 社区内导航的显示关闭
            'campusNavFlag',
            'orgNavBarFlag',
            'arcNavBarFlag'
            'arcNavBarFlag',
            'searchPopupFlag'
        ])
    },
    mounted () {

 src/components/orgNavBar/index.vue

@@ -193,16 +193,16 @@
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
@@ -246,16 +246,16 @@
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;


 src/components/searchDetails/index.vue

New file
@@ -0,0 +1,303 @@
<template>
    <div class="search-nav-bar"
         ref="searchNavBar">
        <div class="container">
            <div class="header"
                 @mousedown="move"
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon deblurring"
                         src="/img/icon/search.png"
                         alt="">
                    <span>
                        查询结果
                    </span>
                </div>
                <img class="close"
                     src="/img/navicon/close.png"
                     alt=""
                     @click="closeModel">
            </div>
            <div class="content">
                <ul>
                    <li v-for="(item, index) in searchPopupList"
                        :key="index"
                        @click="mapPopup(item)">
                        <img src="/img/navicon/tag.png"
                             alt="">
                        <span>
                            {{item.mechanismname}}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'searchDetails',
    data () {
        return {
            moveFlag: false,
            DC: null
        }
    },
    created () {
        this.DC = global.DC
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            'searchPopupList'
        ])
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.searchNavBar // 获取目标元素
            // 算出鼠标相对元素的位置
            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
            }
        },

        mapPopup (item) {
            this.$store.commit('CLEAR_ALL', null)

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

            this.$store.commit('SET_POPUPBGURL', imgArr[0])
            this.$store.commit('SET_POPUPQRURL', item.codeurl)
            this.$store.commit('SET_POINTPOSITION', [Number(item.jd), Number(item.wd), Number(item.gd), Number(item.heading), Number(item.pitch), Number(item.roll)])
            this.$store.commit('SET_STATENAME', item.mechanismname)
            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_PANORAMAURL', item.panoramaurl)
            this.$store.commit('SET_POPUPIMGATLAS', imgArr)
            if (item.videourl && item.videourl != '') {
                this.$store.commit('SET_MONITORURL', item.videourl)
            }
            if (item.jx != undefined && item.jx != '') {
                var tabOne = item.jx.split(',')
                this.$store.commit('SET_TEACHLIST', tabOne)
            } else {
                this.$store.commit('SET_TEACHLIST', [])
            }

            if (item.sh != undefined && item.sh != '') {
                var tabTwo = item.sh.split(',')
                this.$store.commit('SET_LIVELIST', tabTwo)
            } else {
                this.$store.commit('SET_LIVELIST', [])
            }

            this.newPopup(item)
            this.viewer.flyToPosition(
                new this.DC.Position(Number(item.jd), Number(item.wd), Number(300), Number(item.heading), Number(item.pitch), Number(item.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_MONITORPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        },

        closeModel () {
            this.$store.commit('SET_SEARCHPOPUPFLAG', false)

            this.$store.commit('SET_SEARCHPOPUPLIST', [])
        }
    }
}
</script>

<style scoped lang='scss'>
.search-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    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.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* 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;
                cursor: pointer;
            }
        }

        .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.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* 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;
                    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/components/serviceNavBar/index.vue

@@ -238,16 +238,16 @@
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
@@ -286,16 +286,16 @@
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.9),
                rgba(0, 131, 176, 0.9)
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;


 src/pcLayout/index.vue

@@ -1,7 +1,7 @@
<template>
    <div class="layout-container">
        <el-container>
            <el-header>
            <el-header id="pcElHeader">
                <img src="/img/logo.png"
                     alt="">
                <div class="header-title">智慧社区大数据三维可视化平台</div>
@@ -20,7 +20,7 @@
                        <template slot="title"> <i class='custom-icon menu-jg'></i> 社区内机构导览</template>
                        <!-- <el-menu-item index="/pcLayout/default/orgnav/masses">党群机构</el-menu-item> -->
                        <!-- <el-menu-item index="/pcLayout/default/orgnav/ofc">职能部处</el-menu-item> -->
                        <!-- <el-menu-item index="/pcLayout/default/orgnav/directly">直属及附属单位</el-menu-item> -->
                        <el-menu-item index="/pcLayout/default/orgnav/directly">直属及附属单位</el-menu-item>
                        <!-- <el-menu-item index="/pcLayout/default/orgnav/teaching">教学与科研机构</el-menu-item> -->
                        <el-menu-item index="/pcLayout/default/orgnav/rest">其他机构</el-menu-item>
                    </el-submenu>
@@ -40,7 +40,7 @@
                        <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/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> -->

 src/pcviews/specialmap/welcome.vue

@@ -3,7 +3,7 @@
 * @Name: 社区迎新
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-01-17 11:25:32
 * @Last Modified time: 2022-01-21 16:01:43
 */
<template>
    <div>
@@ -80,7 +80,7 @@
                        </a>
                    </div>
                    <div class="content">
                        <iframe :src="panoramaUrl" frameborder="0"></iframe>
                        <iframe style="width: 100%; height: 100%" :src="panoramaUrl" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
@@ -108,13 +108,13 @@
            DC: null,
            pathLayer: null,
            pointLayer: null,

            panoramaUrlOne: '',
            panoramaUrl: '',
            audioSource: '',
            audioFlag: false,
            audioCourse: false,
            audioSynth: null,
            audioMsg: null,

            panoramaShow: false
        }
    },
@@ -140,6 +140,8 @@
            this.time = result.time
            this.sponsor = result.sponsor
            this.undertake = result.undertake
            this.panoramaUrl = result.panoramaurl
            this.panoramaUrlOne = result.panoramaurl
            this.introduce = result.context
            this.audioSource = result.context
            this.list = result.tpurl.split(',')
@@ -250,6 +252,7 @@
        },
        panoramaPlay () {
            this.panoramaShow = true
            this.panoramaUrl = this.panoramaUrlOne
        }
    }


 src/store/getters.js

@@ -48,6 +48,8 @@
  arcNavBarFlag: (state) => state.search.arcNavBarFlag,
  arcNavBarTitle: (state) => state.search.arcNavBarTitle,
  arcNavBarCode: (state) => state.search.arcNavBarCode,
  searchPopupFlag: (state) => state.search.searchPopupFlag,
  searchPopupList: (state) => state.search.searchPopupList,
};

const getters = {

 src/store/modules/popupParams.js

@@ -78,6 +78,7 @@
            state.telephone = param
            state.panoramaUrl = param
            state.monitorUrl = param
            state.popupBgUrl = param
            state.teachList = []
            state.liveList = []
        }

 src/store/modules/search.js

@@ -3,9 +3,13 @@
        orgNavBarFlag: false,
        orgNavBarTitle: [],
        orgNavBarList: [],

        arcNavBarFlag: false,
        arcNavBarTitle: [],
        arcNavBarCode: []
        arcNavBarCode: [],

        searchPopupFlag: false,
        searchPopupList: []
    },
    mutations: {
        SET_ORGNAVBARFLAG (state, orgNavBarFlag) {
@@ -26,7 +30,15 @@
        },
        SET_ARCNAVBARCODE (state, arcNavBarCode) {
            state.arcNavBarCode = arcNavBarCode
        },

        SET_SEARCHPOPUPFLAG (state, searchPopupFlag) {
            state.searchPopupFlag = searchPopupFlag
        },
        SET_SEARCHPOPUPLIST (state, searchPopupList) {
            state.searchPopupList = searchPopupList
        }

    },
    actions: {


 src/store/modules/viewer.js

@@ -3,7 +3,7 @@
        viewer: null,
        visitedViews: [],
        cachedViews: [],
        twoOrThree: '2.5维'
        twoOrThree: '三 维'
    },
    mutations: {
        SET_VIEWER (state, viewer) {

 src/styles/divforms/panoramaBox.scss

@@ -1,3 +1,5 @@


.panorama-dom {
    position: fixed;
    left: 0;
@@ -8,6 +10,8 @@
        overflow: hidden;
        padding: 30px;

       

        .content-wrap {
            padding: 0 20px 20px 20px;

@@ -15,12 +19,26 @@
            border: 1px solid #29baf1;
            box-shadow: 0 0px 12px #29b8f1e5;

            box-sizing: border-box;

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

                .full-srceen-btn {
                    position: absolute;
                    top: 0;
                    right: 34px;
                    bottom: 0;
                    left: auto;
                    margin: auto;
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                }

                .close-box {
                    position: absolute;
@@ -39,6 +57,7 @@
                position: relative;
                min-width: 460px;
                min-height: 320px;
                height: calc(100% - 36px);

                button {
                    padding: 2px;
@@ -79,6 +98,28 @@
        transform: rotate(-45deg) translate(5px, -15px);
        background-color: #28bbf0;
    }

    .change-full {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: #fff;
        transform: translate3d(0, 0, 0) !important;
    }

    &.change-full {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        transform: translate3d(0, 0, 0) !important;
        z-index: 22 !important;
    }
}

.monitor-dom {

 src/styles/entitys/text-entitys.scss

@@ -47,7 +47,6 @@
    }
}
.tag-entitys-box {
    transform: translate(24px, -44px);
    height: 28px;

    .tag-content {
@@ -92,7 +91,6 @@
}

.way-entitys-box {
    transform: translate(8px, -136px);

    .way-title {
        border: white 1px solid;
@@ -113,7 +111,6 @@
}

.park-entitys-box {
    transform: translate(0, -26px);

    .park-title {
        position: relative;

 src/styles/pcpage/element-ui.scss

@@ -87,7 +87,7 @@
}

.el-message--warning {
    top: 120px !important;
    top: 146px !important;
}

.el-image-viewer__wrapper {