1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/pcviews/tool/ranging.vue

@@ -1,100 +1,52 @@
/*
 * @Author: Morpheus
 * @Name: 地图测距
 * @Date: 2021-11-13 16:04:27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2022-02-09 13:38:58
 */
/* * @Author: Morpheus * @Name: 地图测距 * @Date: 2021-11-13 16:04:27 * @Last
Modified by: Morpheus * @Last Modified time: 2022-02-15 14:28:44 */

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

            <el-button type="danger" size="mini" @click.stop="deactivate">清除</el-button>
        </div>
    </div>
        </template>
    </public-box>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters(['viewer'])
    data () {
        return {}
    },
    created () { },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.publicOrgNavBar // 获取目标元素
            // 算出鼠标相对元素的位置
            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
            }
        },

        calcDistance () {
            this.viewer.measure.distanceSurface()
            global.viewer.measure.distanceSurface()
        },

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

        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
            global.viewer.measure.deactivate()
        }
    },
    destroyed () { }
    destroyed () {
        global.viewer.measure.deactivate()
    }
}
</script>

<style>
<style lang="sass" scoped>
.move
    cursor: move
</style>