Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
c42019a6 by 刘远
Options

增加一张蓝图

1 parent 01758188
Inline Side-by-side
Showing 11 changed files with 542 additions and 77 deletions
No preview for this file type
......@@ -7,8 +7,17 @@
</template>
<style>
html, body, #app {
width: 100%;
height: 100%;
}
* {
margin: 0px;
padding: 0px;
list-style: none;
}
.cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer {
display: none !important;
}
</style>
......
<template>
<div class="container">
bottomNav
<div class="wrapper">
<div class="nav-box selected" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')">
<span>一张图</span>
</div>
<div class="nav-box no-selected" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')">
<span>成果审查管理</span>
</div>
<div class="nav-box no-selected" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')">
<span>实施监督预警</span>
</div>
<div class="nav-box no-selected" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')">
<span>批后监管</span>
</div>
</div>
</div>
</template>
......@@ -9,15 +23,68 @@ bottomNav
name: 'bottomNav',
components: {},
data() {
return {}
return {
isYZT: true, // 一张图
isCGSC: false, // 成果审查管理
isSSJD: false, // 实施监督预警
isPGJG: false, // 批后监管
}
},
mounted() {},
methods: {
jumpNav(val) {
this[val] = !this[val];
debugger
},
}
}
</script>
<style lang="sass" scoped>
.container {}
<style scoped>
.container {
width: 100%;
}
.wrapper {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: space-around;
font-size: 24px;
color: #FFFFFF;
}
.nav-box {
width: 306px !important;
text-align: center;
}
.selected {
background-image: url('../assets/一张图/bg-选中.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 39.2px;
}
.selected span {
display: inline-block;
transform: translateY(-23.2px);
font-size: 30px;
}
.no-selected {
background-image: url('../assets/一张图/bg-未选中.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 24px;
transform: translateY(16px);
}
.no-selected span {
display: inline-block;
transform: translateY(-17.2px);
font-size: 24px;
}
</style>
\ No newline at end of file
......
<template>
<div class="container">
leftFunc
</div>
</template>
<script>
export default {
name: 'leftFunc',
components: {},
data() {
return {}
},
mounted() {},
methods: {
}
}
</script>
<style lang="sass" scoped>
.container {}
</style>
\ No newline at end of file
<template>
<div class="container">
leftTopFunc
</div>
</template>
<script>
export default {
name: 'leftTopFunc',
components: {},
data() {
return {}
},
mounted() {},
methods: {
}
}
</script>
<style lang="sass" scoped>
.container {}
</style>
\ No newline at end of file
<template>
<div class="container">
<div>
<div class="func-ico" :class="[isReturn?'selected':'']" @click="handleReturn()">
<img src="../assets/一张图/icon_复位.png" alt="">
</div>
<div class="func-ico" :class="[enlarge?'selected':'']" @click="handleEnlarge()">
<img src="../assets/一张图/icon_放大.png" alt="">
</div>
<div class="func-ico" :class="[narrow?'selected':'']" @click="handleNarrow()">
<img src="../assets/一张图/icon_缩小.png" alt="">
</div>
<div class="func-ico" :class="[coordinate?'selected':'']" @click="handleCoordinate()">
<img src="../assets/一张图/icon_坐标.png" alt="">
</div>
<div class="func-ico" :class="[distance?'selected':'']" @click="handleDistance()">
<img src="../assets/一张图/icon_距离.png" alt="">
</div>
<div class="func-ico" :class="[area?'selected':'']" @click="handleArea()">
<img src="../assets/一张图/icon_面积.png" alt="">
</div>
<div class="func-ico" :class="[marker?'selected':'']" @click="handleMarker()">
<img src="../assets/一张图/icon_标注.png" alt="">
</div>
<div class="func-ico" :class="[rollerShutter?'selected':'']" @click="handleRollerShutter()">
<img src="../assets/一张图/icon_卷帘.png" alt="">
</div>
<div class="func-ico" :class="[splitScreen?'selected':'']" @click="handleSplitScreen()">
<img src="../assets/一张图/icon_分屏.png" alt="">
</div>
<div class="func-ico" :class="[toNorth?'selected':'']" @click="handleToNorth()">
<img src="../assets/一张图/icon_指北.png" alt="">
</div>
<div class="func-ico" :class="[topSee?'selected':'']" @click="handleTopSee()">
<img src="../assets/一张图/icon_顶视.png" alt="">
</div>
<div class="func-ico" :class="[roundSee?'selected':'']" @click="handleRoundSee()">
<img src="../assets/一张图/icon_环视.png" alt="">
</div>
<div class="func-ico" :class="[horizon?'selected':'']" @click="handleHorizon()">
<img src="../assets/一张图/icon_视域.png" alt="">
</div>
<div class="func-ico" :class="[allSee?'selected':'']" @click="handleAllSee()">
<img src="../assets/一张图/icon_通视.png" alt="">
</div>
<!-- <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
<img src="../assets/toolbar_icon_ 展开.png" alt="">
</div> -->
</div>
</div>
</template>
<script>
export default {
name: 'rightFunc',
components: {},
data() {
return {
isReturn: false, // 复位
enlarge: false, // 放大
narrow: false, // 缩小
coordinate: false, // 坐标
distance: false, // 距离
area: false, // 面积
marker: false, // 标记
rollerShutter: false, // 卷帘
splitScreen: false, // 分屏
toNorth: false, // 指北
topSee: false, // 顶视
roundSee: false, // 环视
horizon: false, // 视域
allSee: false, // 通视
}
},
mounted() {},
methods: {
handleReturn() {
this.$emit('isReturn', this.isReturn);
},
handleEnlarge() {
this.$emit('enlarge', this.enlarge);
},
handleNarrow() {
this.$emit('narrow', this.narrow);
},
handleCoordinate() {
this.$emit('coordinate', this.coordinate);
},
handleDistance() {
this.$emit('distance', this.distance);
},
handleArea() {
this.$emit('area', this.area);
},
handleMarker() {
this.$emit('marker', this.marker);
},
handleRollerShutter() {
this.$emit('rollerShutter', this.rollerShutter);
},
handleSplitScreen() {
this.$emit('splitScreen', this.splitScreen);
},
handleToNorth() {
this.$emit('toNorth', this.toNorth);
},
handleTopSee() {
this.$emit('topSee', this.topSee);
},
handleRoundSee() {
this.$emit('roundSee', this.roundSee);
},
handleHorizon() {
this.$emit('horizon', this.horizon);
},
handleAllSee() {
this.$emit('allSee', this.allSee);
},
}
}
</script>
<style scoped>
.func-ico {
width: 40px;
height: 40px;
position: relative;
/* margin-left: 10px; */
cursor: pointer;
background: rgba(4, 10, 10, 0.57);
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.50);
border-top: 1px solid rgba(255, 255, 255, .2);
}
.func-ico:nth-of-type(1) {
border-top: 0px solid rgba(255, 255, 255, .2);
}
.selected {
background-image: url('../assets/一张图/bg_2d3d 2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
img {
/* width: 100%;
height: 100%; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="flex-center">
<div style="margin-right: 14px;">
<el-input v-model="search" style="width: 342px; height: 40px;" placeholder="地名、地址、道路"
suffix-icon="el-icon-search" @change='handleSearch()'></el-input>
</div>
<div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
<img src="../assets/一张图/icon_2d3d.png" alt="">
</div>
<div class="func-ico" :class="[isCamera?'selected':'']" @click="handleIsCamera()">
<img src="../assets/一张图/icon_影像.png" alt="">
</div>
<div class="func-ico" :class="[isLayer?'selected':'']" @click="handleIsLayer()">
<img src="../assets/一张图/icon_图层管理.png" alt="">
</div>
<div class="func-ico" :class="[isClear?'selected':'']" @click="handleIsClear()">
<img src="../assets/一张图/icon_清除.png" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'rightTopFunc',
components: {},
data() {
return {
search: '',
is2D: false,
isCamera: false,
isLayer: false,
isClear: false
}
},
mounted() {},
methods: {
handleIs2D() {
this.is2D = !this.is2D;
this.$emit('is2D', this.is2D);
},
handleIsCamera() {
this.isCamera = !this.isCamera;
this.$emit('isCamera', this.isCamera);
},
handleIsLayer() {
this.isLayer = !this.isLayer;
this.$emit('isLayer', this.isLayer);
},
handleIsClear() {
this.isClear = !this.isClear;
this.$emit('isClear', this.isClear);
},
handleSearch(val) {
this.$emit('searchRoat', val);
}
}
}
</script>
<style scoped>
.container {}
.func-ico {
width: 40px;
height: 40px;
position: relative;
margin-left: 10px;
cursor: pointer;
}
.flex-center {
display: flex;
align-items: center;
justify-items: center;
}
.selected {
background-image: url('../assets/一张图/bg_2d3d 2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.el-icon-search:before {
color: #fff;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(23, 34, 38, 0.57) !important;
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
</style>
\ No newline at end of file
<template>
<div class="container">
top
</div>
</template>
<script>
export default {
name: 'top',
components: {},
data() {
return {}
},
mounted() {},
methods: {
}
}
</script>
<style lang="sass" scoped>
.container {}
</style>
\ No newline at end of file
<template>
<div class="container">
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
},
components: {
},
methods:{
}
}
</script>
<style scoped>
.container {
/* margin-top: 17.5px; */
width: 100%;
height: 100%;
background-image: url('../assets/topTitle.png');
background-size: cover;
background-repeat: no-repeat;
}
img {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
<template>
<div class="home">
<div class="top">
<TopTitle></TopTitle>
</div>
<div class="rightTopFunc">
<rightTopFunc @is2D='is2D'
@isCamera='isCamera'
@isLayer='isLayer'
@isClear='isClear'
@searchRoat='searchRoat'></rightTopFunc>
</div>
<div class="rightFunc">
<rightFunc @isReturn='isReturn'
@enlarge='enlarge'
@narrow='narrow'
@coordinate='coordinate'
@distance='distance'
@area='area'
@marker='marker'
@rollerShutter='rollerShutter'
@splitScreen='splitScreen'
@toNorth='toNorth'
@topSee='topSee'
@roundSee='roundSee'
@horizon='horizon'
@allSee='allSee'></rightFunc>
</div>
<div class="bottomNav">
<bottomNav></bottomNav>
</div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
<!-- <el-button @click="testfun" class="testbtn"></el-button> -->
<el-select @change="selectChanged" class="testbtn">
<!-- <el-select @change="selectChanged" class="testbtn">
<el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-select> -->
</div>
</template>
<script>
import tool from "../assets/js/map/tool";
import TopTitle from '../components/topTitle';
import rightTopFunc from '../components/rightTopFunc';
import rightFunc from '../components/rightFunc';
import bottomNav from '../components/bottomNav';
export default {
components: {},
components: {
TopTitle,
rightTopFunc,
rightFunc,
bottomNav
},
data() {
return {
viewer: undefined,
......@@ -100,7 +139,87 @@
},
drawShape() {
},
// ly
// rightTopFunc
searchRoat(val) {
/**
* @param {*} val '为地名地址道路的输入值'
*/
this.commons.log(val)
},
is2D(flag) {
/**
* @param {*} flag 'true 选中2D， falss 反之为3D'
*/
this.commons.log(flag)
},
isCamera(flag) {
/**
* @param {*} flag 'true 选中影像， falss 反之'
*/
this.commons.log(flag)
},
isLayer(flag) {
/**
* @param {*} flag 'true 选中图层， falss 反之'
*/
this.commons.log(flag)
},
isClear(flag) {
/**
* @param {*} flag 'true 选中清除， falss 反之'
*/
this.commons.log(flag)
}
// rightFunc
// 复位
,isReturn(val) {}
// 放大
,enlarge(val) {}
// 缩小
,narrow(val) {}
// 坐标
,coordinate(val) {}
// 距离
,distance(val) {}
// 面积
,area(val) {}
// 标记
,marker(val) {}
// 卷帘
,rollerShutter(val) {}
// 分屏
,splitScreen(val) {}
// 指北
,toNorth(val) {}
// 顶视
,topSee(val) {}
// 环视
,roundSee(val) {}
// 视域
,horizon(val) {}
// 通视
,allSee(val) {}
}
}
</script>
......@@ -115,4 +234,39 @@
height: 30px;
}
</style>
<style scoped>
.home {
position: relative;
width: 100%;
height: 100%;
}
.top {
position: absolute;
z-index: 1000;
color: red;
width: 100%;
height: 86.5px;
}
.rightTopFunc {
position: absolute;
z-index: 1000;
right: 32px;
top: 119px;
}
.rightFunc {
position: absolute;
z-index: 1000;
right: 32px;
top: 203px;
}
.bottomNav {
position: absolute;
width: 100%;
z-index: 1000;
bottom: 40px;
}
</style>
\ No newline at end of file
......