shuishen
2022-02-15 9f1a8ac7b6743de4a222ebda9bb914c3624810d8
Merge branch 'master' of http://192.168.0.105:10010/r/school-web
10 files modified
11 files added
945 ■■■■ changed files
public/img/icon/layer-manage.png patch | view | raw | blame | history
public/img/icon/no-data.png patch | view | raw | blame | history
public/img/icon/sign-list.png patch | view | raw | blame | history
public/img/icon/tool-layer.png patch | view | raw | blame | history
public/img/icon/tool-sign.png patch | view | raw | blame | history
public/img/search/floor.png patch | view | raw | blame | history
src/components/map/components/campusBuildingSearch.vue 107 ●●●●● patch | view | raw | blame | history
src/components/map/components/dimension.vue 3 ●●●● patch | view | raw | blame | history
src/components/map/components/mapPopup.vue 14 ●●●●● patch | view | raw | blame | history
src/components/toolBigBox/index.vue 89 ●●●●● patch | view | raw | blame | history
src/components/toolSmallBox/index.vue 89 ●●●●● patch | view | raw | blame | history
src/pcLayout/index.vue 48 ●●●●● patch | view | raw | blame | history
src/pcviews/tool/area.vue 67 ●●●● patch | view | raw | blame | history
src/pcviews/tool/layer-manage.vue 106 ●●●●● patch | view | raw | blame | history
src/pcviews/tool/ranging.vue 64 ●●●● patch | view | raw | blame | history
src/pcviews/tool/sign.vue 111 ●●●●● patch | view | raw | blame | history
src/router/page/index.js 12 ●●●● patch | view | raw | blame | history
src/styles/pcpage/element-ui.scss 2 ●●● patch | view | raw | blame | history
src/styles/pcpage/index.scss 4 ●●● patch | view | raw | blame | history
src/styles/pcpage/tool/layer-manage.scss 108 ●●●●● patch | view | raw | blame | history
src/styles/pcpage/tool/sign.scss 121 ●●●●● patch | view | raw | blame | history
public/img/icon/layer-manage.png
public/img/icon/no-data.png
public/img/icon/sign-list.png
public/img/icon/tool-layer.png
public/img/icon/tool-sign.png
public/img/search/floor.png
src/components/map/components/campusBuildingSearch.vue
@@ -1,41 +1,37 @@
<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>
        <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 @click="fuzzyQuery"
                           class="deblurring"
                           type="primary"
                           icon="el-icon-my-search"></el-button>
                <el-button @click="navigationShow" class="deblurring" icon="el-icon-my-path"></el-button>
                <el-button
                    @click="fuzzyQuery"
                    class="deblurring"
                    type="primary"
                    icon="el-icon-my-search"
                ></el-button>
            </el-button-group>
            <div v-show="searchValShow"
                 class="search-value-box">
            <div v-show="searchValShow" class="search-value-box">
                <ul>
                    <li v-for="(item, index) in searchValList"
                    <li
                        v-for="(item, index) in searchValList"
                        :key="index"
                        @click="loadPopup(item)">
                        {{item.mechanismname}}
                    </li>
                        @click="loadPopup(item)"
                    >{{item.mechanismname}}</li>
                </ul>
            </div>
            <div class="map-campus-shortcut"
                 v-show="shortcutFlag">
            <div class="map-campus-shortcut" v-show="shortcutFlag">
                <div class="shortcut-box">
                    <ul>
                        <li v-for="(item, index) in shortcutList"
                            :key="index">
                        <li v-for="(item, index) in shortcutList" :key="index">
                            <el-button @click="openModelPopup(item)">
                                <img :src="item.bgimg"
                                     alt="">
                                <img :src="item.bgimg" alt />
                                <span>{{item.title}}</span>
                            </el-button>
                        </li>
@@ -59,13 +55,13 @@
        return {
            DC: null,
            shortcutList: [
                // {
                //     bgimg: '/img/search/org.png',
                //     title: '党群机构',
                //     type: 'orgnav',
                //     path: '/pcLayout/default/orgnav/masses',
                //     code: 1
                // },
                {
                    bgimg: '/img/search/org.png',
                    title: '其他机构',
                    type: 'orgnav',
                    path: '/pcLayout/default/orgnav/rest',
                    code: 5
                },
                // {
                //     bgimg: '/img/search/ofc.png',
                //     title: '职能部处',
@@ -86,6 +82,13 @@
                    type: 'arc',
                    path: '/pcLayout/default/arc/venue',
                    code: 3
                },
                {
                    bgimg: '/img/search/floor.png',
                    title: '主要场馆',
                    type: 'arc',
                    path: '/pcLayout/default/arc/rest',
                    code: 7
                }
                // {
                //     bgimg: '/img/search/dorm.png',
@@ -163,30 +166,10 @@
        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 => {
@@ -212,24 +195,12 @@
                    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)
            }
            this.$router.push(param.path)
        },
        shortcutShow (event) {
src/components/map/components/dimension.vue
@@ -89,7 +89,8 @@
                    )
                    that.viewer.addLayer(that.tilesetLayer)
                    that.tileset = new that.DC.Tileset('/mx/tileset.json', {
                        luminanceAtZenith: 0.5
                        luminanceAtZenith: 0.3,
                        shadows: that.DC.Namespace.Cesium.ShadowMode.DISABLED
                    })
                    that.tilesetLayer.addOverlay(that.tileset)
                    that.tilesetLayer.show = false
src/components/map/components/mapPopup.vue
@@ -521,6 +521,13 @@
        createTag () {
            var that = this
            console.log(this.RemoveTheBlank(this.addTagName))
            if (this.RemoveTheBlank(this.addTagName) == '') {
                this.$message('请输入标签名称')
                return
            }
            this.$store.commit('SET_ADDTAGPOPUP', false)
            if (this.addTagLayer == null) {
@@ -630,6 +637,13 @@
            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        },
        /**
        * 删除左右两端的空格
        */
        RemoveTheBlank (str) {
            return str.replace(/(^\s*)|(\s*$)/g, '')
        }
    }
}
src/components/toolBigBox/index.vue
New file
@@ -0,0 +1,89 @@
<template>
    <div ref="toolBigBox">
        <div class="header" @mousedown="move" :class="{ move: moveFlag }">
            <slot name="too-big-box-header"></slot>
        </div>
        <div class="content">
            <slot name="too-big-box-content"></slot>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: 'ToolBigBox',
    data () {
        return {
            DC: null,
            signList: [],
            destroyedFlag: true,
            moveFlag: false
        }
    },
    computed: {
        ...mapGetters(['viewer'])
    },
    mounted () {
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.toolBigBox // 获取目标元素
            // 算出鼠标相对元素的位置
            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
            }
        }
    },
    destroyed () {
    }
}
</script>
<style lang="scss" scoped>
.move {
    cursor: move;
}
</style>
src/components/toolSmallBox/index.vue
New file
@@ -0,0 +1,89 @@
/*
 * @Author: Morpheus
 * @Name: 工具小的封装
 * @Date: 2021-11-13 16:04:27
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-02-15 10:45:07
 */
<template>
    <div ref="tooSmallBox">
        <div class="header" @mousedown="move" :class="{ move: moveFlag }">
            <slot name="tool-small-box-header"></slot>
        </div>
        <div class="content">
            <slot name="tool-small-box-content"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ToolSmallBox',
    data () {
        return {
            moveFlag: false
        }
    },
    computed: {
    },
    created () { },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.tooSmallBox // 获取目标元素
            // 算出鼠标相对元素的位置
            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
            }
        }
    },
    destroyed () { }
}
</script>
<style lang="scss" scoped>
.move {
    cursor: move;
}
</style>
src/pcLayout/index.vue
@@ -2,22 +2,24 @@
    <div class="layout-container">
        <el-container>
            <el-header id="pcElHeader">
                <img src="/img/logo.png"
                     alt="">
                <img src="/img/logo.png" alt />
                <div class="header-title">智慧社区大数据三维可视化平台</div>
                <el-menu :default-active="$router.currentRoute.path"
                         class="el-menu-demo"
                         mode="horizontal"
                         @select="handleSelect"
                         background-color="#2196f3"
                         text-color="#fff"
                         active-text-color="#fff"
                         :router="true">
                <el-menu
                    :default-active="$router.currentRoute.path"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#2196f3"
                    text-color="#fff"
                    active-text-color="#fff"
                    :router="true"
                >
                    <!-- <el-menu-item index="/pcLayout/default/mapnav"> <i class='custom-icon menu-dtdl'></i> 地图导览</el-menu-item> -->
                    <el-submenu index="orgnav">
                        <template slot="title"> <i class='custom-icon menu-jg'></i> 社区内机构导览</template>
                        <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>
@@ -26,7 +28,9 @@
                    </el-submenu>
                    <el-submenu index="arc">
                        <template slot="title"> <i class='custom-icon menu-xyjz'></i> 社区建筑</template>
                        <template slot="title">
                            <i class="custom-icon menu-xyjz"></i> 社区建筑
                        </template>
                        <el-menu-item index="/pcLayout/default/arc/edifact">行政办公</el-menu-item>
                        <!-- <el-menu-item index="/pcLayout/default/arc/teaching">教学科研</el-menu-item> -->
                        <el-menu-item index="/pcLayout/default/arc/venue">社区场馆</el-menu-item>
@@ -37,7 +41,9 @@
                    </el-submenu>
                    <el-submenu index="service">
                        <template slot="title"> <i class='custom-icon menu-shfw'></i> 生活服务设施</template>
                        <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>
@@ -54,22 +60,28 @@
                    <!-- <el-menu-item index="/pcLayout/default/campusnav"> <i class='custom-icon menu-xydl'></i> 社区导览</el-menu-item> -->
                    <el-menu-item index="/pcLayout/default/campusnavi"> <i class='custom-icon menu-xydh'></i> 社区导航</el-menu-item>
                    <el-menu-item index="/pcLayout/default/campusnavi">
                        <i class="custom-icon menu-xydh"></i> 社区导航
                    </el-menu-item>
                    <el-submenu index="specialmap">
                        <template slot="title"> <i class='custom-icon menu-ztdt'></i> 专题地图</template>
                        <template slot="title">
                            <i class="custom-icon menu-ztdt"></i> 专题地图
                        </template>
                        <!-- <el-menu-item index="/pcLayout/default/specialmap/celebrate">社区庆</el-menu-item> -->
                        <el-menu-item index="/pcLayout/default/specialmap/welcome">社区迎新</el-menu-item>
                    </el-submenu>
                    <el-submenu index="tool">
                        <template slot="title"> <i class='custom-icon menu-tool'></i> 工具</template>
                        <template slot="title">
                            <i class="custom-icon menu-tool"></i> 工具
                        </template>
                        <el-menu-item index="/pcLayout/default/tool/download">地图下载</el-menu-item>
                        <el-menu-item index="/pcLayout/default/tool/sign">地图标记</el-menu-item>
                        <el-menu-item index="/pcLayout/default/tool/ranging">地图测距</el-menu-item>
                        <el-menu-item index="/pcLayout/default/tool/area">地图测面</el-menu-item>
                        <el-menu-item index="/pcLayout/default/tool/layer-manage">图层管理</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-main>
src/pcviews/tool/area.vue
@@ -2,25 +2,25 @@
 * @Author: Morpheus
 * @Name: 地图测面
 * @Date: 2021-11-13 16:04:27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2022-02-08 16:21:37
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-02-15 10:48:24
 */
<template>
    <div class="tool-area" ref="toolAreaBox">
        <div class="header" @mousedown="move" :class="{'move': moveFlag}">
    <tool-small-box class="tool-area">
        <template slot="tool-small-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/tool-area.png" alt />
                <span>地图测面</span>
            </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </div>
        <div class="content">
        </template>
        <template slot="tool-small-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>
    </tool-small-box>
</template>
<script>
@@ -30,7 +30,6 @@
export default {
    data () {
        return {
            moveFlag: false
        }
    },
    computed: {
@@ -41,53 +40,6 @@
    created () {
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.toolAreaBox // 获取目标元素
            // 算出鼠标相对元素的位置
            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.areaSurface()
        },
@@ -107,7 +59,4 @@
</script>
<style lang="scss" scoped>
.move {
    cursor: move;
}
</style>
src/pcviews/tool/layer-manage.vue
New file
@@ -0,0 +1,106 @@
<template>
    <tool-big-box class="tool-layer">
        <template slot="too-big-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/tool-layer.png" alt />
                <span>图层管理</span>
            </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="too-big-box-content">
            <div class="list-box">
                <ul v-show="signList.length > 0">
                    <li v-for="(item, index) in signList" :key="index">
                        <img src="/img/icon/layer-manage.png" alt />
                        图层1
                        <el-switch v-model="item.flag" active-text="显示" inactive-text="隐藏"></el-switch>
                    </li>
                </ul>
                <div v-show="signList.length == 0" class="no-data">
                    <img src="/img/icon/no-data.png" alt />
                    <div>暂无数据</div>
                </div>
            </div>
        </template>
    </tool-big-box>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            DC: null,
            signList: [{ flag: true }],
            destroyedFlag: true
        }
    },
    computed: {
        ...mapGetters(['viewer'])
    },
    mounted () {
    },
    methods: {
        moveMessage (e, b) {
            if (b == '') {
                this.viewer.tooltip.enable = false
            } else {
                this.viewer.tooltip.enable = true
                this.viewer.tooltip.showAt(e.windowPosition, b)
            }
        },
        addSign () {
            var that = this
            that.DC = global.DC
            that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, '点击确认标注位置'))
            that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
                if (that.destroyedFlag == false) return
                that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))
                // eslint-disable-next-line no-unused-vars
                var popup = new this.DC.DivForms(this.viewer, {
                    domId: 'AddTagBox',
                    position: [that.DC.Transform.transformWGS84ToCartesian(
                        new that.DC.Position(
                            Number(
                                e.wgs84SurfacePosition.lng
                            ),
                            Number(
                                e.wgs84SurfacePosition.lat
                            ),
                            Number(
                                e.wgs84SurfacePosition.alt
                            )
                        )
                    )]
                })
                that.$store.commit('SET_ADDTAGPOSITION', e.wgs84SurfacePosition)
                that.$store.commit('SET_ADDTAGPOPUP', true)
            })
        },
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    },
    destroyed () {
        var that = this
        that.destroyedFlag = false
        that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))
    }
}
</script>
<style lang="scss" scoped>
.move {
    cursor: move;
}
</style>
src/pcviews/tool/ranging.vue
@@ -2,25 +2,25 @@
 * @Author: Morpheus
 * @Name: 地图测距
 * @Date: 2021-11-13 16:04:27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2022-02-09 13:38:58
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-02-15 10:47:42
 */
<template>
    <div class="tool-ranging" ref="toolRangingBox">
        <div class="header" @mousedown="move" :class="{ move: moveFlag }">
    <tool-small-box class="tool-ranging">
        <template slot="tool-small-box-header">
            <div class="title">
                <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">
        </template>
        <template slot="tool-small-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>
    </tool-small-box>
</template>
<script>
@@ -29,7 +29,6 @@
export default {
    data () {
        return {
            moveFlag: false
        }
    },
    computed: {
@@ -37,53 +36,6 @@
    },
    created () { },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.toolRangingBox // 获取目标元素
            // 算出鼠标相对元素的位置
            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()
        },
src/pcviews/tool/sign.vue
@@ -1,5 +1,31 @@
<template>
    <div></div>
    <tool-big-box class="tool-sign">
        <template slot="too-big-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
                <span>地图标记</span>
            </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="too-big-box-content">
            <div class="list-box">
                <ul v-show="signList.length > 0">
                    <li v-for="(item, index) in signList" :key="index">
                        <img src="/img/icon/sign-list.png" alt />
                        我得标记
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
                    </li>
                </ul>
                <div v-show="signList.length == 0" class="no-data">
                    <img src="/img/icon/no-data.png" alt />
                    <div>暂无数据</div>
                </div>
            </div>
            <div class="btn-box">
                <el-button type="primary" size="mini" @click.stop="addSign">新增</el-button>
            </div>
        </template>
    </tool-big-box>
</template>
<script>
@@ -9,6 +35,7 @@
    data () {
        return {
            DC: null,
            signList: [],
            destroyedFlag: true
        }
    },
@@ -16,45 +43,7 @@
        ...mapGetters(['viewer'])
    },
    mounted () {
        var that = this
        that.DC = global.DC
        that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, '点击确认标注位置'))
        that.viewer.on(that.DC.MouseEventType.CLICK, (e) => {
            if (that.destroyedFlag == false) return
            that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'AddTagBox',
                position: [that.DC.Transform.transformWGS84ToCartesian(
                    new that.DC.Position(
                        Number(
                            e.wgs84SurfacePosition.lng
                        ),
                        Number(
                            e.wgs84SurfacePosition.lat
                        ),
                        Number(
                            e.wgs84SurfacePosition.alt
                        )
                    )
                )]
            })
            that.$store.commit('SET_ADDTAGPOSITION', e.wgs84SurfacePosition)
            that.$store.commit('SET_ADDTAGPOPUP', true)
            that.$store.dispatch('delVisitedViews', this.$route)
            that.$router.push('/pcLayout/default')
        })
        // that.viewer.on(that.DC.MouseEventType.CLICK, (e) => {
        //     alert(111)
        // })
        // off
    },
    methods: {
        moveMessage (e, b) {
@@ -64,6 +53,45 @@
                this.viewer.tooltip.enable = true
                this.viewer.tooltip.showAt(e.windowPosition, b)
            }
        },
        addSign () {
            var that = this
            that.DC = global.DC
            that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, '点击确认标注位置'))
            that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
                if (that.destroyedFlag == false) return
                that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))
                // eslint-disable-next-line no-unused-vars
                const popup = new this.DC.DivForms(this.viewer, {
                    domId: 'AddTagBox',
                    position: [that.DC.Transform.transformWGS84ToCartesian(
                        new that.DC.Position(
                            Number(
                                e.wgs84SurfacePosition.lng
                            ),
                            Number(
                                e.wgs84SurfacePosition.lat
                            ),
                            Number(
                                e.wgs84SurfacePosition.alt
                            )
                        )
                    )]
                })
                that.$store.commit('SET_ADDTAGPOSITION', e.wgs84SurfacePosition)
                that.$store.commit('SET_ADDTAGPOPUP', true)
            })
        },
        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
    },
    destroyed () {
@@ -74,5 +102,8 @@
}
</script>
<style>
<style lang="scss" scoped>
.move {
    cursor: move;
}
</style>
src/router/page/index.js
@@ -1,8 +1,8 @@
/*
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2022-02-10 10:21:12
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-02-14 15:09:19
 */
import Vue from 'vue'
@@ -50,6 +50,7 @@
const pcToolSign = () => import('../../pcviews/tool/sign.vue')
const pcToolRanging = () => import('../../pcviews/tool/ranging.vue')
const pcToolArea = () => import('../../pcviews/tool/area.vue')
const pcToolLayerManage = () => import('../../pcviews/tool/layer-manage.vue')
const routes = [
    // pc端
@@ -332,6 +333,13 @@
                    meta: {
                        title: '地图测面'
                    }
                },
                {
                    path: 'layer-manage',
                    component: pcToolLayerManage,
                    meta: {
                        title: '图层管理'
                    }
                }
                ]
            }
src/styles/pcpage/element-ui.scss
@@ -86,7 +86,7 @@
    }
}
.el-message--warning {
.el-message {
    top: 146px !important;
}
src/styles/pcpage/index.scss
@@ -1,4 +1,6 @@
@import './element-ui.scss';
@import './dc-ui.scss';
@import './tool/ranging.scss';
@import './tool/ranging.scss';
@import './tool/sign.scss';
@import './tool/layer-manage.scss';
src/styles/pcpage/tool/layer-manage.scss
New file
@@ -0,0 +1,108 @@
.tool-layer {
    position: fixed;
    top: 100px;
    left: 140px;
    width: 360px;
    height: 296px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 4px 2px #dddddd;
    .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 {
        position: relative;
        height: calc(100% - 36px);
        .list-box {
            position: absolute;
            width: 100%;
            ul {
                padding: 6px 8px;
                height: 100%;
                box-sizing: border-box;
                overflow-y: auto;
                li {
                    position: relative;
                    border-bottom: 1px dashed #ccc;
                    line-height: 40px;
                    &>img {
                        margin: 0 4px;
                        width: 20px;
                        vertical-align: middle;
                    }
                    .el-switch {
                        position: absolute;
                        top: 0;
                        right: 0;
                        left: auto;
                        bottom: 0;
                        margin: auto;
                    }
                }
            }
            .no-data {
                position: absolute;
                top: 82px;
                right: 0;
                bottom: auto;
                left: 0;
                margin: auto;
                width: 80px;
                img {
                    width: 80px;
                    height: 62px;
                }
                div {
                    text-align: center;
                }
            }
        }
    }
}
src/styles/pcpage/tool/sign.scss
New file
@@ -0,0 +1,121 @@
.tool-sign {
    position: fixed;
    top: 100px;
    left: 140px;
    width: 360px;
    height: 296px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 4px 2px #dddddd;
    .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 {
        position: relative;
        height: calc(100% - 36px);
        .list-box {
            position: absolute;
            width: 100%;
            height: calc(100% - 40px);
            ul {
                padding: 6px 8px;
                height: 100%;
                box-sizing: border-box;
                overflow-y: auto;
                li {
                    position: relative;
                    border-bottom: 1px dashed #ccc;
                    line-height: 40px;
                    &>img {
                        margin: 0 4px;
                        width: 20px;
                        vertical-align: middle;
                    }
                    .el-button {
                        position: absolute;
                        top: 0;
                        right: 0;
                        left: auto;
                        bottom: 0;
                        margin: auto;
                        width: 28px;
                        height: 28px;
                    }
                }
            }
            .no-data {
                position: absolute;
                top: 58px;
                right: 0;
                bottom: auto;
                left: 0;
                margin: auto;
                width: 80px;
                img {
                    width: 80px;
                    height: 62px;
                }
                div {
                    text-align: center;
                }
            }
        }
        .btn-box {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
    }
}