实体添加及弹窗样式修改

shuishen

2021-12-13 425faac492167c72803d30c96704a4d7df102675

实体添加及弹窗样式修改

 public/img/icon/atlas.png

 public/img/icon/come.png

 public/img/icon/live-action.png

 public/img/icon/location.png

 public/img/icon/qr-code.png

 public/img/icon/start.png

 public/img/leftnav/map-activity.png

 public/img/leftnav/map-aed.png

 public/img/leftnav/map-panorama.png

 src/components/leftNav/index.vue

New file
@@ -0,0 +1,284 @@
<template>
    <div class="left-nav">
        <ul>
            <li v-for="(item, index) in leftNavData"
                :key="index"
                @click="leftNavClick(item)">
                <img :src="item.img"
                     alt="">
                <span>{{item.label}}</span>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name: 'leftNav',
    computed: {},
    data () {
        return {
            leftNavData: [
                {
                    flag: false,
                    label: '标签',
                    img: '/img/leftnav/tag.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer'
                },
                {
                    flag: false,
                    label: '道路',
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer'
                },
                {
                    flag: false,
                    label: '实景',
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
                },
                {
                    flag: false,
                    label: '活动',
                    img: '/img/leftnav/activity.png',
                    normal: '/img/leftnav/activity.png',
                    checked: '/img/leftnav/activity-checked.png',
                    layer: 'activityLayer'
                },
                {
                    flag: false,
                    label: 'AED',
                    img: '/img/leftnav/aed.png',
                    normal: '/img/leftnav/aed.png',
                    checked: '/img/leftnav/aed-checked.png',
                    layer: 'aedLayer'
                },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                }
            ],
            viewer: null,
            DC: null,
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
        }
    },
    created () {
        this.DC = global.DC
    },
    mounted () {

    },
    methods: {
        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
                list.push(new this.DC.Position(lng, lat, 0))
            }
            return list
        },
        leftNavClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
            } else {
                item.img = item.normal
                this[item.layer].show = false
            }
        },
        initialize (viewer) {
            viewer.scene.globe.depthTestAgainstTerrain = false
            this.viewer = viewer
            this.tagLayer = new this.DC.HtmlLayer('tagLayer')
            viewer.addLayer(this.tagLayer)
            this.wayLayer = new this.DC.HtmlLayer('wayLayer')
            viewer.addLayer(this.wayLayer)
            this.sceneLayer = new this.DC.VectorLayer('sceneLayer')
            viewer.addLayer(this.sceneLayer)

            this.aedLayer = new this.DC.VectorLayer('aedLayer')
            viewer.addLayer(this.aedLayer)

            this.parkLayer = new this.DC.HtmlLayer('parkLayer')
            viewer.addLayer(this.parkLayer)
            this.comeLayer = new this.DC.VectorLayer('comeLayer')
            viewer.addLayer(this.comeLayer)

            const positions1 = this.generatePosition(50)
            positions1.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                南门口
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                            </div>
                        </div>
                    `
                )
                this.tagLayer.addOverlay(divIcon)
            })

            const positions2 = this.generatePosition(50)
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                                工建街
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
                )
                this.wayLayer.addOverlay(divIcon)
            })

            const positions3 = this.generatePosition(50)
            positions3.forEach(item => {
                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-panorama.png')
                billboard.size = [16, 16]
                this.sceneLayer.addOverlay(billboard)
            })

            const positions4 = this.generatePosition(10)
            positions4.forEach((item, index) => {
                const label = new this.DC.Label(item, '建筑AED')
                label.setStyle({
                    fillColor: this.DC.Color.ORANGERED,
                    font: '10px sans-serif',
                    pixelOffset: { x: 0, y: -16 }
                })
                this.aedLayer.addOverlay(label)

                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-aed.png')
                billboard.size = [16, 16]

                this.aedLayer.addOverlay(billboard)
            })

            const positions5 = this.generatePosition(120)
            positions5.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="校外街路侧停车场">
                            </div>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </div>
                    `
                )
                this.parkLayer.addOverlay(divIcon)
            })

            const positions6 = this.generatePosition(10)
            positions6.forEach((item, index) => {
                const label = new this.DC.Label(item, '数字视觉')
                label.setStyle({
                    fillColor: this.DC.Color.PURPLE,
                    outlineColor: this.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 2, // 边框大小，
                    font: '10px sans-serif',
                    pixelOffset: { x: 0, y: -16 }
                })
                this.comeLayer.addOverlay(label)

                const billboard = new this.DC.Billboard(item, '/img/leftnav/map-activity.png')
                billboard.size = [16, 16]

                this.comeLayer.addOverlay(billboard)
            })

            this.tagLayer.show = false
            this.wayLayer.show = false
            this.sceneLayer.show = false
            this.aedLayer.show = false
            this.parkLayer.show = false
            this.comeLayer.show = false
        }
    }
}
</script>

<style scoped lang='scss'>
.left-nav {
    position: fixed;
    top: 15%;
    right: 6%;
    z-index: 1;
    li {
        margin-bottom: 8px;
        font-weight: 400;
        display: block;
        width: 98px;
        height: 33px;
        line-height: 33px;
        background-color: #fff;
        border-radius: 17px;
        text-align: center;
        font-size: 0;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 10px;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }

        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            color: #2f2f2f;
        }
    }
}
</style>

 src/components/map/index.vue

@@ -35,19 +35,84 @@
        <div id="map_popup_content">
        </div>

        <div ref="mapContentContent" v-show="false" id="map_content_content">
            <div class="arc-bcg">
                <img src="/img/job/one.jpg"
                     alt=""
                     @click="alert(1)">
        <div ref="mapContentContent"
             v-show="false"
             id="map_content_content">
            <div id="mapChildContent">
                <div class="arc-bcg">
                    <img src="/img/job/one.jpg"
                         alt=""
                         @click="alert(1)">
                </div>
                <div class="popup-nav">
                    <ul>
                        <li>
                            <i class="popup-icon come-nav deblurring"></i>
                            到这
                        </li>
                        <li>
                            <i class="popup-icon start-nav deblurring"></i>
                            出发
                        </li>
                        <li>
                            <i class="popup-icon qr-code-nav deblurring"></i>
                            二维码
                        </li>
                        <li>
                            <i class="popup-icon atlas-nav deblurring"></i>
                            图集
                        </li>
                        <li>
                            <i class="popup-icon live-action-nav deblurring"></i>
                            实景
                        </li>
                    </ul>
                </div>
                <div class="arc-box">
                    <ul class="tab-btn">
                        <li class="on">教学科研行政</li>
                        <li>生活服务</li>
                    </ul>
                    <div class="btm-content">
                        <div class="on">
                            <ul>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    教学楼
                                </li>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    教学楼
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    生活楼
                                </li>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    生活楼
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="btm-box"></div>
            </div>
        </div>

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

    </div>
</template>
<script>

import { mapGetters } from 'vuex'

var $ = window.$

export default {
    name: 'mapBox',
@@ -62,6 +127,19 @@
        ])
    },
    mounted () {
        this.$nextTick(() => {
            // 动态添加dom元素，并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素，放置在父元素.pdf-body下)
            $('#map_popup_content').on('click', '.arc-bcg', function () {
                alert(1)
            })

            $('#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')
            })
        })

        var DC = global.DC

        var that = this
@@ -136,13 +214,13 @@
                }
            })

            console.log(DC, 456)
            that.$store.commit('SET_VIEWER', viewer)

            that.$refs.leftNav.initialize(viewer)

            const popup = viewer.popup

            popup.hide()

            that.$store.commit('SET_VIEWER', viewer)

            const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
@@ -215,14 +293,12 @@

                viewer.scene.globe.depthTestAgainstTerrain = false

                console.log(document.getElementById('map_content_content'))

                // 定制化窗体
                var divForms = new DC.divForms(viewer, {
                    domId: 'div1',
                    title: '成教楼  ',
                    className: 'divForms-dom',
                    content: document.getElementById('map_content_content'),
                    content: document.getElementById('mapChildContent'),
                    position: [
                        e.position
                    ]

 src/pcviews/home/index.vue

@@ -13,17 +13,6 @@
            </div>
        </div>

        <div class="left-nav">
            <ul>
                <li v-for="(item, index) in leftNavData"
                    :key="index"
                    @click="leftNavClick(item)">
                    <img :src="item.img"
                         alt="">
                    <span>{{item.label}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

@@ -32,60 +21,11 @@
export default {
    name: 'Main',
    components: {

    },
    data () {
        return {
            leftNavData: [
                {
                    flag: false,
                    label: '标签',
                    img: '/img/leftnav/tag.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png'
                },
                {
                    flag: false,
                    label: '道路',
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png'
                },
                {
                    flag: false,
                    label: '实景',
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png'
                },
                {
                    flag: false,
                    label: '活动',
                    img: '/img/leftnav/activity.png',
                    normal: '/img/leftnav/activity.png',
                    checked: '/img/leftnav/activity-checked.png'
                },
                {
                    flag: false,
                    label: 'AED',
                    img: '/img/leftnav/aed.png',
                    normal: '/img/leftnav/aed.png',
                    checked: '/img/leftnav/aed-checked.png'
                },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png'
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png'
                }
            ]

        }
    },
    created () {
@@ -94,55 +34,11 @@

    },
    methods: {
        leftNavClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
            } else {
                item.img = item.normal
            }
        }

    }
}
</script>

<style scoped lang='scss'>
.left-nav {
    position: fixed;
    top: 15%;
    right: 6%;
    z-index: 1;
    li {
        margin-bottom: 8px;
        font-weight: 400;
        display: block;
        width: 98px;
        height: 33px;
        line-height: 33px;
        background-color: #fff;
        border-radius: 17px;
        text-align: center;
        font-size: 0;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 10px;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }

        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            color: #2f2f2f;
        }
    }
}
</style>

 src/styles/common.scss

@@ -1,3 +1,5 @@
@import './index.scss';

// 布局
@import './layout/pc.scss';
@import './layout/mobile.scss';
@@ -11,6 +13,12 @@

// page
@import './divforms/divForms.scss';
@import './divforms/popup.scss';


// 实体样式
@import './entitys/text-entitys.scss';



.custom-icon {

 src/styles/divforms/divForms.scss

@@ -20,7 +20,7 @@

.divForms .area {
  position: relative;
  min-width: 366px;
  min-width: 420px;
}

.divForms-wrap {
@@ -111,7 +111,7 @@
}

.divForms .label-content {
  padding: 15px 0;
  padding: 4px 0;
}

.divForms-theme .arrow, .divForms-theme .title::before {

 src/styles/divforms/popup.scss

New file
@@ -0,0 +1,124 @@
.popup-nav {

    ul {
        display: flex;
        height: 40px;
        justify-content: center;
        align-items: center;
        background: #03a9f4;

        li {
            margin: 0 4px;
            flex: 1;
            height: 30px;
            line-height: 30px;
            list-style: none;
            font-size: .875rem;
            text-align: center;
            border: 1px solid #ffc107;
            border-radius: 15px;
            cursor: pointer;

            .popup-icon {
                display: inline-block;
                width: .875rem;
                height: .875rem;
                vertical-align: middle;
            }

            .come-nav {
                background: url(/img/icon/come.png) no-repeat;
                background-size: 100% 100%;
            }

            .start-nav {
                background: url(/img/icon/start.png) no-repeat;
                background-size: 100% 100%;
            }

            .qr-code-nav {
                background: url(/img/icon/qr-code.png) no-repeat;
                background-size: 100% 100%;
            }

            .atlas-nav {
                background: url(/img/icon/atlas.png) no-repeat;
                background-size: 100% 100%;
            }

            .live-action-nav {
                background: url(/img/icon/live-action.png) no-repeat;
                background-size: 100% 100%;
            }

        }
    }
}

.btm-box {
    height: 30px;
}

.arc-box {


    .tab-btn {
        display: flex;
        height: 36px;
        line-height: 36px;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #dee2e6;
        box-sizing: border-box;


        li {
            height: 100%;
            flex: 1;
            text-align: center;
            cursor: pointer;
        }

        li.on {
            color: rgb(255, 251, 0);
            border-bottom: 1px solid rgb(255, 251, 0);
        }
    }

    .btm-content {
        max-height: 180px;
        overflow-y: auto;

        div {
            display: none;
        }

        div.on {
            display: block;
        }

        li {
            padding-left: 4px;
            height: 32px;
            line-height: 32px;
            border-bottom: 1px solid #dee2e6;
            cursor: pointer;

            .popup-icon {
                display: inline-block;
                width: 12px;
                height: 12px;
                vertical-align: middle;
            }

            .location-icon {
                background: url(/img/icon/location.png) no-repeat;
                background-size: 100% 100%;
            }
        }

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

 src/styles/entitys/text-entitys.scss

New file
@@ -0,0 +1,66 @@
.tag-entitys-box {
    height: 28px;

    .tag-content {
        display: inline;
        height: 20px;
        line-height: 20px;
        border: #FFFFFF solid 1px;
        padding: 1px 4px 1px 4px;
        color: #FFFFFF;
        text-align: center;
        background-color: #cc0000;
        border-radius: 4px;
        box-shadow: 2px 2px 10px white;
        font-size: 0.875rem;
    }

    .tag-angle-content {
        height: 9px;
        text-align: center;
        margin: -6px 26px 0px 10px;
    }
}

.way-entitys-box {

    .way-title {
        border: white 1px solid;
        padding-left: 2px;
        font-size: 12px;
        background: #0066ff;
        width: 12px;
        line-height: 13px;
        padding: 2px 1px 2px 1px;
        color: white;
        font-size: 0.875rem;
    }

    .way-sign-box {
        width: 22;
        text-align: center
    }
}

.park-entitys-box {

    .park-title {
        position: relative;
        left: -8px;
        background-color: #ccff00;
        margin-bottom: 2px;
        white-space: nowrap;
    }

    .park-sign-box {
        width: 22;
        text-align: center
    }
}

.html-layer {

    .div-icon {
        background: transparent;
    }
}

 src/styles/index.scss

@@ -13,261 +13,11 @@
    }
}

.ol-zoom {
    padding: 0;
    top: 170px !important;
    left: auto !important;
    right: 10px !important;
    border-radius: 5px;

    button {
        margin: 1px;
        width: 30px;
        height: 30px;
        background: #fff;
        color: #666;
        box-shadow: 0px 0px 4px 1px #ccc;
        border-radius: 5px;
    }

    button:hover,
    button:focus {
        background: #666;
        color: #fff;
    }
}

.ol-full-screen {
    padding: 0;
    border-radius: 5px;
    top: 50px !important;
    left: auto !important;
    right: 10px !important;

    button {
        margin: 1px;
        width: 30px;
        height: 30px;
        background: #fff;
        color: #666;

        box-shadow: 0px 0px 4px 1px #ccc;
        border-radius: 5px;
    }

    button:hover,
    button:focus {
        background: #666;
        color: #fff;
    }
}


.ol-rotate {
    button {
        margin: 1px;
        width: 30px;
        height: 30px;
        background: #fff;
        color: #666;
        box-shadow: 0px 0px 4px 1px #ccc;
        border-radius: 5px;
    }

    button:hover,
    button:focus {
        background: #666;
        color: #fff;
    }
}

.ol-scale-line {
    background: #fff;
    box-shadow: 0px 0px 4px 1px #ccc;

    div {
        color: #666;
        border: 1px solid #666;
        border-top: none;
    }
}

.text-green {
    color: #44cc44;
}

.text-red {
    color: #ff0909;
}

.water-rain-box {
    .el-dialog {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
        width: 920px !important;
        height: 540px !important;
        background: #C1E6F3;

        color: #606266;

        .el-dialog__header {
            padding: 10px 20px;

            .el-dialog__title {

                color: #606266 !important;
            }

            .el-dialog__close {
                color: #606266 !important;

            }

            .el-dialog__headerbtn {
                top: 14px;

            }

        }

        .el-dialog__body {
            padding: 2px 20px 10px 20px;
            background: #fff;
            color: #606266;

            height: calc(100% - 44px);

            .risk-text {

                height: calc(100% - 12px);

                div.header {
                    display: flex;
                    align-items: center;
                    height: 48px;





                    .el-button {
                        margin: 0 5px !important;
                    }

                    .search {
                        margin: 0 !important;
                    }

                }

                div.content {
                    position: relative;
                    height: calc(100% - 48px);

                    p {
                        position: absolute;
                        top: 0;
                        left: 0;
                        padding: 5px;
                        margin: 0;
                        height: 100%;
                        word-wrap: break-word;
                        box-sizing: border-box;
                        overflow-y: auto;


                        scrollbar-width: thin;
                        font-size: 16px;
                        line-height: 32px;
                        letter-spacing: 1.2px;
                        word-break: break-all;

                        span {
                            color: #011dff;

                            i {
                                font-style: normal;
                                color: #606266;
                            }

                            strong {
                                font-weight: normal;
                                cursor: pointer;
                            }
                        }

                        span[ii="0"],
                        span[ii="1"],
                        span[ii="2"],
                        span[ii="3"],
                        span[ii="4"] {
                            cursor: pointer;
                        }

                        .text-tab {
                            color: red;
                            cursor: pointer;
                            font-weight: normal;
                        }

                        .text-tab:hover {
                            border-bottom: 1px solid red;
                        }
                    }
                }
            }
        }
    }
}

.retail-popup {
    .el-dialog {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
        width: 920px !important;
        height: 540px !important;
        background: #C1E6F3;

        color: #606266;

        .el-dialog__header {
            padding: 10px 20px;

            .el-dialog__title {

                color: #606266 !important;
            }

            .el-dialog__close {
                color: #606266 !important;

            }

            .el-dialog__headerbtn {
                top: 14px;

            }

        }

        .el-dialog__body {
            padding: 0;
            height: calc(100% - 30px);
            background: #fff;
            color: #606266;

            iframe {
                width: 100%;
                height: 100%;
            }
        }
    }
.deblurring {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

 src/styles/layout/pc.scss

@@ -28,6 +28,7 @@
        .el-header,
        .el-main {
            padding: 0;
            overflow: hidden;
        }

        .el-header {