Merge branch 'master' of http://192.168.0.105:10010/r/school-web
10 files modified
11 files added
| | |
| | | <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> |
| | |
| | | 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: '职能部处', |
| | |
| | | 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', |
| | |
| | | |
| | | 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 => { |
| | |
| | | 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) { |
| | |
| | | ) |
| | | 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 |
| | |
| | | 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) { |
| | |
| | | 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, '') |
| | | } |
| | | } |
| | | } |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | /* |
| | | * @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> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | |
| | | <!-- <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> |
| | |
| | | * @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> |
| | |
| | | export default { |
| | | data () { |
| | | return { |
| | | moveFlag: false |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | 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() |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .move { |
| | | cursor: move; |
| | | } |
| | | </style> |
| New file |
| | |
| | | <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> |
| | |
| | | * @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> |
| | |
| | | export default { |
| | | data () { |
| | | return { |
| | | moveFlag: false |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | }, |
| | | 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() |
| | | }, |
| | |
| | | <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> |
| | |
| | | data () { |
| | | return { |
| | | DC: null, |
| | | signList: [], |
| | | destroyedFlag: true |
| | | } |
| | | }, |
| | |
| | | ...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) { |
| | |
| | | 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 () { |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="scss" scoped> |
| | | .move { |
| | | cursor: move; |
| | | } |
| | | </style> |
| | |
| | | /* |
| | | * @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' |
| | |
| | | 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端 |
| | |
| | | meta: { |
| | | title: '地图测面' |
| | | } |
| | | }, |
| | | { |
| | | path: 'layer-manage', |
| | | component: pcToolLayerManage, |
| | | meta: { |
| | | title: '图层管理' |
| | | } |
| | | } |
| | | ] |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | .el-message--warning { |
| | | .el-message { |
| | | top: 146px !important; |
| | | } |
| | | |
| | |
| | | @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'; |
| New file |
| | |
| | | .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; |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | } |
| New file |
| | |
| | | .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; |
| | | |
| | | } |
| | | } |
| | | } |