样式修改

shuishen

2022-02-15 5cf33b2b4217dbe50e7fa0599e09e0ee8ae63db4

 src/components/campusNav/index.vue

@@ -1,83 +1,66 @@
<template>
    <div class="campus-nav-box"
         ref="campusNavBox">
        <div class="header"
             @mousedown="move"
             :class="{'move': moveFlag}">
    <public-box class="campus-nav-box">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring"
                     src="/img/icon/xndh.png"
                     alt="">
                <span>
                    社区内导航
                </span>
                <img class="icon deblurring" src="/img/icon/xndh.png" alt />
                <span>社区内导航</span>
            </div>
            <img class="close"
                 src="/img/navicon/close.png"
                 alt=""
                 @click="closeModel">
        </div>
        <div class="container">
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="tab">
                <ul>
                    <li @click="tabClick('步行')"
                        :class="{on:tabOneFlag}">
                    <li @click="tabClick('步行')" :class="{on:tabOneFlag}">
                        <i></i>
                        步行
                    </li>
                    <li @click="tabClick('驾车')"
                        :class="{on:tabTwoFlag}">
                    <li @click="tabClick('驾车')" :class="{on:tabTwoFlag}">
                        <i></i>
                        驾车
                    </li>
                </ul>
            </div>
            <div class="content">
            <div class="container">
                <div>
                    <div id="ToNameContainer">
                        <el-input v-model="toNameText"
                                  @input="toNameChange"
                                  placeholder="起点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: green;"></i></template>
                        <el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
                            <template slot="prepend">
                                <i class="el-icon-location" style="color: green;"></i>
                            </template>
                        </el-input>
                        <div v-show="toNameShow"
                             class="toname-value-box">
                        <div v-show="toNameShow" class="toname-value-box">
                            <ul>
                                <li v-for="(item, index) in toNameList"
                                <li
                                    v-for="(item, index) in toNameList"
                                    :key="index"
                                    @click="loadPopup(item)">
                                    {{item.name}}
                                </li>
                                    @click="originChange(item)"
                                >{{item.mechanismname}}</li>
                            </ul>
                        </div>
                    </div>
                    <div id="ComeNameContainer">
                        <el-input v-model="comeNameText"
                                  @input="comeNameChange"
                                  placeholder="终点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: red;"></i></template>
                        <el-input v-model="comeNameText" @input="comeNameChange" placeholder="终点……">
                            <template slot="prepend">
                                <i class="el-icon-location" style="color: red;"></i>
                            </template>
                        </el-input>
                        <div v-show="comeNameShow"
                             class="comename-value-box">
                        <div v-show="comeNameShow" class="comename-value-box">
                            <ul>
                                <li v-for="(item, index) in comeNameList"
                                <li
                                    v-for="(item, index) in comeNameList"
                                    :key="index"
                                    @click="loadPopup(item)">
                                    {{item.name}}
                                </li>
                                    @click="terminusChange(item)"
                                >{{item.mechanismname}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <el-button @click="startNavigation"
                               type="primary">导航</el-button>
                    <el-button @click="startNavigation" type="primary">导航</el-button>
                </div>
            </div>
        </div>
    </div>
        </template>
    </public-box>
</template>

<script>
@@ -88,7 +71,6 @@
    name: 'campusNav',
    data () {
        return {
            moveFlag: false,
            tabOneFlag: true,
            tabTwoFlag: false,
            DC: null,
@@ -114,7 +96,10 @@
            // 出发名称
            'getToName',
            // 到达名称
            'comeName'
            'comeName',
            // 点信息
            'pointPosition',
            'campusNavFlag'
        ])
    },
    watch: {
@@ -129,59 +114,22 @@
            handler (newCode, oldCode) {
                this.comeNameText = newCode
            }
        },
        campusNavFlag: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode == false) {
                    this.navigationWay = '步行'
                    this.tabOneFlag = true
                    this.tabTwoFlag = false
                }
            }
        }
    },
    created () {
        this.DC = global.DC
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.campusNavBox // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

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

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

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

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

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

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

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

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },

        closeModel () {
            if (this.$route.path.indexOf('/campusnavi') != -1) {
                this.$store.dispatch('delVisitedViews', this.$route)
@@ -250,6 +198,14 @@
                        output: 'json'
                    }
                }).then(res => {
                    if (res.data.info == 'OVER_DIRECTION_RANGE') {
                        this.$message({
                            message: '超出步行范围！',
                            type: 'warning',
                            duration: 3000
                        })
                    }

                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline = item.polyline.split(';')

@@ -267,9 +223,7 @@
                        routes += lineArr
                    })

                    console.log(routes, 123)

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

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
@@ -281,7 +235,7 @@
                        clampToGround: true
                    })
                    this.routeLayer.addOverlay(polyline)
                    if (this.twoOrThree == '3 维') {
                    if (this.twoOrThree == '真三维') {
                        this.viewer.flyTo(this.routeLayer)
                    } else {
                        var longitude = null
@@ -304,7 +258,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),
@@ -318,8 +272,8 @@
            } else {
                axios.get('https://restapi.amap.com/v3/direction/driving', {
                    params: {
                        origin: `${startLog + ',' + startLat}`,
                        destination: `${endLog + ',' + endLat}`,
                        origin: `${origin[0].toFixed(6) + ',' + origin[1].toFixed(6)}`,
                        destination: `${destination[0].toFixed(6) + ',' + destination[1].toFixed(6)}`,
                        key: '4b3e1db3211054ce5b466407cbb9d221',
                        strategy: 2,
                        extensions: 'all',
@@ -327,11 +281,23 @@
                    }
                }).then(res => {
                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline += ';'
                        routes += item.polyline
                        item.polyline = item.polyline.split(';')

                        var lineArr = []

                        item.polyline.forEach(it => {
                            it = it.split(',')
                            lineArr.push(this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(','))
                        })

                        lineArr = lineArr.join(';')

                        lineArr += ';'

                        routes += lineArr
                    })

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

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

                    if (this.twoOrThree == '3 维') {
                    if (this.twoOrThree == '真三维') {
                        this.viewer.flyTo(this.routeLayer)
                    } else {
                        var longitude = null
@@ -367,7 +333,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),
@@ -431,184 +397,40 @@
                    this.comeNameShow = false
                }
            }
        },

        originChange (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_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 = []
        }
    }
}
</script>

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

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #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;
        }
    }

    .move {
        cursor: move;
    }

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

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

            ul {
                display: flex;

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

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

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

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

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

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

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

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

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

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

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

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

            .toname-value-box,
            .comename-value-box {
                position: absolute;
                top: 48px;
                left: 65px;
                width: auto;
                min-width: 160px;
                max-height: 520px;
                color: #2c3e50;
                background: #fff;
                overflow-y: auto;
                box-shadow: 0 0 14px 2px rgb(221, 221, 221);
                border-radius: 5px;
                z-index: 11;

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

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

            .comename-value-box {
                top: 100px;
            }
        }
    }
}
</style>