图片及部分样式更改

shuishen

2021-12-24 95a1c8ca00f42eb9887b7bc04661595bd7ff518b

图片及部分样式更改

 public/img/icon/dtcj.png

 public/img/icon/path.png

 public/img/icon/search.png

 src/api/pc/leftNav/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-22 16:01:37
 * @Last Modified time: 2021-12-23 14:09:00
 */
// 右侧nav栏相关
import request from '@/router/axios'
@@ -39,6 +39,14 @@
    })
}

export const getWayList = (params) => {
    return request({
        url: '/blade-road/road/selectList',
        method: 'get',
        params: params
    })
}

export const getTagList = (params) => {
    return request({
        url: '/blade-architecture/architecture/selectArchALL',

 src/components/arcNavBar/index.vue

@@ -224,8 +224,8 @@
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 16%;
    left: 5%;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;

 src/components/campusNav/index.vue

@@ -75,10 +75,12 @@
    },
    props: {
        comeName: {
            type: String
            type: String,
            default: ''
        },
        getToName: {
            type: String
            type: String,
            default: ''
        }
    },
    computed: {

 src/components/leftNav/index.vue

@@ -14,7 +14,7 @@

<script>

import { getAEDkList, getParkList, getComeList, getSceneList, getTagList } from '@/api/pc/leftNav/index'
import { getAEDkList, getParkList, getComeList, getSceneList, getWayList, getTagList } from '@/api/pc/leftNav/index'

export default {
    name: 'leftNav',
@@ -46,22 +46,22 @@
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
                },
                {
                    flag: false,
                    label: '监控',
                    img: '/img/leftnav/monitor.png',
                    normal: '/img/leftnav/monitor.png',
                    checked: '/img/leftnav/monitor-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: '监控',
                //     img: '/img/leftnav/monitor.png',
                //     normal: '/img/leftnav/monitor.png',
                //     checked: '/img/leftnav/monitor-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',
@@ -163,22 +163,24 @@
                this.tagLayer.show = false
            })

            const positions2 = this.generatePosition(5)
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
            getWayList().then(res => {
                res.data.data.forEach(item => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <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;">
                                工建街
                                 ${item.roadname}
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
                )
                this.wayLayer.addOverlay(divIcon)
                    )
                    this.wayLayer.addOverlay(divIcon)
                })
                this.wayLayer.show = false
            })

            getSceneList().then(res => {
@@ -267,39 +269,45 @@
<style scoped lang='scss'>
.left-nav {
    position: fixed;
    top: 15%;
    right: 6%;
    top: 100px;
    right: 20px;
    // bottom: 20px;
    // left: 0;
    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;
    ul {
        // display: flex;
        li {
            // margin: 0 8px;
            margin-bottom: 12px;
            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;
        }
            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;
            span {
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                color: #2f2f2f;
            }
        }
    }
}

 src/components/map/components/campusBuildingSearch.vue

New file
@@ -0,0 +1,93 @@
<template>
    <div>
        <campusNav ref="campusNavRoute"
                   v-show="campusNavFlag" />
        <div class="map-campus-serarch">
            <el-input class="search-input"
                      placeholder="校园搜索…"
                      v-model="input3">
            </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>
    </div>
</template>

<script>

export default {
    name: 'campusBuildingSearch',
    data () {
        return {
            campusNavFlag: false
        }
    },

    methods: {
        navigationShow () {
            this.campusNavFlag = true
        },
        closeCampusNav () {
            this.campusNavFlag = false
        }
    }

}
</script>

<style lang='scss' scope>
.map-campus-serarch {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
    width: 320px;
    height: 40px;
    z-index: 11;

    .search-input {
        float: left;
        width: 240px;
        border-radius: 5px 0 0 5px;

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

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

        .el-button {
            margin: 0;
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 0;
            border: none;

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

        .el-button:nth-child(2) {
            border-radius: 0 5px 5px 0;
        }
    }
}
</style>

 src/components/map/components/mapPopup.vue

 src/components/map/index.vue

@@ -6,17 +6,24 @@
        <left-nav ref="leftNav"></left-nav>

        <mapPopup />

        <!-- <campusBuildingSearch /> -->
        <div class="keep-out">
            智慧校园
        </div>
    </div>
</template>
<script>

import { mapGetters } from 'vuex'
import mapPopup from './component/mapPopup.vue'
import mapPopup from './components/mapPopup.vue'
import campusBuildingSearch from './components/campusBuildingSearch.vue'

export default {
    name: 'mapBox',
    components: {
        mapPopup
        mapPopup,
        campusBuildingSearch
    },
    data () {
        return {
@@ -232,13 +239,14 @@
            )
            wall.setStyle({
                material: new that.DC.WallTrailMaterialProperty({
                    color: that.DC.Color.DEEPSKYBLUE,
                    speed: 4
                    color: that.DC.Namespace.Cesium.Color.fromBytes(0, 142, 255, 150),
                    // color: that.DC.Color.CYAN,
                    speed: 10
                })
            })
            wallLayer.addOverlay(wall)

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

            // viewer.flyTo(wallLayer)

@@ -248,8 +256,8 @@

            viewer.compass.enable = true
            viewer.zoomController.enable = true
            viewer.locationBar.enable = true
            viewer.distanceLegend.enable = true
            // viewer.locationBar.enable = true
            // viewer.distanceLegend.enable = true
        }

        that.DC.ready(initViewer)
@@ -261,4 +269,17 @@
</script>

<style lang='scss' scope>
.keep-out {
    position: fixed;
    left: 6px;
    bottom: 2px;
    z-index: 11;
    width: 72px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 8px;
}
</style>

 src/components/orgNavBar/index.vue

@@ -169,8 +169,8 @@
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 16%;
    left: 5%;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;

 src/components/serviceNavBar/index.vue

@@ -336,8 +336,8 @@
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 16%;
    left: 5%;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;

 src/pcviews/tool/ranging.vue

@@ -3,18 +3,40 @@
 * @Name: 地图测距
 * @Date: 2021-11-13 16:04:27
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-13 16:26:49
 * @Last Modified time: 2021-12-24 09:46:27
 */

<template>
    <div class="tool-ranging">
        <el-button type="primary" size="mini" @click.stop="calcDistance">
            开始
        </el-button>
        <div class="header"
             @mousedown="move"
             :class="{'move': moveFlag}">
            <div class="title">
                <img class="icon deblurring"
                     src="/img/icon/dtcj.png"
                     alt="">
                <span>
                    地图测距
                </span>
            </div>
            <img class="close"
                 src="/img/navicon/close.png"
                 alt=""
                 @click="closeModel">
        </div>
        <div class="content">
            <el-button type="primary"
                       size="mini"
                       @click.stop="calcDistance">
                开始
            </el-button>

        <el-button type="danger" size="mini" @click.stop="deactivate">
            结束
        </el-button>
            <el-button type="danger"
                       size="mini"
                       @click.stop="deactivate">
                结束
            </el-button>
        </div>
    </div>
</template>

@@ -37,6 +59,11 @@

        deactivate () {
            this.viewer.measure.deactivate()
        },

        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    },
    destroyed () {

 src/styles/pcpage/dc-ui.scss

@@ -1,12 +1,14 @@
#viewer-container {

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

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


 src/styles/pcpage/element-ui.scss

@@ -39,7 +39,7 @@
            .el-menu {

                .el-menu-item {
                    font-size: 14px !important;
                    font-size: 16px !important;
                }
            }
        }
@@ -59,4 +59,29 @@

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

#viewer-container {

    .el-icon-my-path {
        background: url(/img/icon/path.png) center no-repeat;
        background-size: 14px 14px;
    }

    .el-icon-my-path:before {
        content: "替";
        font-size: 16px;
        visibility: hidden;
    }

    .el-icon-my-search {
        background: url(/img/icon/search.png) center no-repeat;
        background-size: 14px 14px;
    }

    .el-icon-my-search:before {
        content: "替";
        font-size: 16px;
        visibility: hidden;
    }
}

 src/styles/pcpage/tool/ranging.scss

@@ -1,11 +1,52 @@
.tool-ranging {
    position: fixed;
    top: 80px;
    left: 10px;
    width: 160px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    top: 100px;
    left: 140px;
    width: 180px;
    height: 106px;
    background: #fff;
    border-radius: 5px;
    border-radius: 8px;

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

        .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;
        }
    }

    .content {
        line-height: 70px;
        text-align: center;
    }
}