Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
de000489 by jikai
Options

Merge remote-tracking branch 'origin/master' 

# Conflicts:
#	src/views/Home.vue
2 parents 7cb0b2a7 58a51f7d
Inline Side-by-side
Showing 12 changed files with 385 additions and 27 deletions
No preview for this file type
......@@ -10,6 +10,8 @@
html, body, #app {
width: 100%;
height: 100%;
-webkit-user-select:none;
-moz-user-select:none;
}
* {
margin: 0px;
......@@ -20,4 +22,6 @@
.cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer {
display: none !important;
}
</style>
......
<template>
<div class="container">
<div class="wrapper">
<div class="nav-box selected" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')">
<div class="nav-box" :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')">
<div class="nav-box" :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')">
<div class="nav-box" :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')">
<div class="nav-box" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')">
<span>批后监管</span>
</div>
</div>
</div>
</template>
......@@ -24,19 +23,21 @@
components: {},
data() {
return {
isYZT: true, // 一张图
isCGSC: false, // 成果审查管理
isYZT: false, // 一张图
isCGSC: true, // 成果审查管理
isSSJD: false, // 实施监督预警
isPGJG: false, // 批后监管
flagArr: ['isYZT', 'isCGSC', 'isSSJD', 'isPGJG']
}
},
mounted() {},
methods: {
jumpNav(val) {
this[val] = !this[val];
debugger
this.flagArr.forEach(ele => {
if (ele == val) this[val] = true;
else this[ele] = false;
});
},
}
}
</script>
......@@ -53,12 +54,13 @@
justify-content: space-around;
font-size: 24px;
color: #FFFFFF;
cursor: pointer;
}
.nav-box {
width: 306px !important;
text-align: center;
cursor: pointer;
}
.selected {
......@@ -70,7 +72,7 @@
.selected span {
display: inline-block;
transform: translateY(-23.2px);
transform: translateY(-15.2px);
font-size: 30px;
}
......
<template>
<div class="container">
leftAssert
<div class="assert-list" :class="[isAssert?'a-selected':'a-no-selected']" @click="changeSelect('isAssert')">
<div class="expend">
<img src="../assets/一张图/icon_资源目录.png" alt="">
</div>
<div class="name">资源目录</div>
</div>
<div style="margin-top: 16px;" v-show='isAssert'>
<treeSearch @foldAssert="foldAssert('isAssert')"></treeSearch>
</div>
<div class="assert-list" :class="[isZTFX?'a-selected':'a-no-selected']" @click="changeSelect('isZTFX')"
style="margin-top: 30px;">
<div class="expend">
<img src="../assets/一张图/icon_专题分析.png" alt="">
</div>
<div class="name">专题分析</div>
</div>
<div style="margin-top: 16px;" v-show='isZTFX'>
<treeSearch @foldAssert="foldAssert('isZTFX')"></treeSearch>
</div>
<div class="assert-list" :class="[isFASC?'a-selected':'a-no-selected']" @click="changeSelect('isFASC')"
style="margin-top: 30px;">
<div class="expend">
<img src="../assets/一张图/icon_方案审查.png" alt="">
</div>
<div class="name">方案审查</div>
</div>
<div style="margin-top: 16px;" v-show='isFASC'>
<treeSearch @foldAssert="foldAssert('isFASC')"></treeSearch>
</div>
</div>
</template>
<script>
import treeSearch from './treeSearch';
export default {
name: 'leftAssert',
components: {},
components: {
treeSearch
},
data() {
return {}
return {
isAssert: true,
isZTFX: false,
isFASC: false,
keepKey: ['isAssert', 'isZTFX', 'isFASC'],
}
},
mounted() {},
methods: {
changeSelect(val) {
this.keepKey.forEach(ele => {
if (val == ele) this[ele] = true;
else this[ele] = false;
})
},
foldAssert(val) {
this[val] = false;
},
}
}
</script>
<style lang="sass" scoped>
.container {}
<style scoped>
.container {
color: #fff;
}
.assert-list {
width: 206px;
height: 36px;
display: flex;
align-items: center;
background-size: 100% 100%;
background-repeat: no-repeat;
cursor: pointer;
}
.a-selected {
background-image: url('../assets/一张图/bg_资源目录.png');
}
.a-no-selected {
background-image: url('../assets/一张图/bg_专题分析.png');
}
.assert-list .expend {
transform: translate(20.7px, 2px);
}
.assert-list .name {
transform: translateX(56px);
line-height: 36px;
}
</style>
\ No newline at end of file
......
<template>
<div class="container">
mapPop
<div class="list-box">
<span>规划项目</span>
<span>综合楼</span>
</div>
<div class="list-box">
<span>建设单位</span>
<span>青海人和顺置业有限公司</span>
</div>
<div class="list-box">
<span>规划用地性质</span>
<span>B2商务设施用地</span>
</div>
<div class="list-box">
<span>总用地面积</span>
<span>26.245</span>
</div>
<div class="list-box">
<span>净用地面积</span>
<span>26.07</span>
</div>
<div class="list-box">
<span>其他面积</span>
<span>0</span>
</div>
</div>
</template>
......@@ -9,7 +32,8 @@ mapPop
name: 'mapPop',
components: {},
data() {
return {}
return {
}
},
mounted() {},
methods: {
......@@ -18,6 +42,24 @@ mapPop
}
</script>
<style lang="sass" scoped>
.container {}
<style scoped>
.container {
color: #fff;
background: rgba(4, 10, 10, 0.57);
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50);
padding: 4px 14px 14px 14px;
font-size: 16px;
}
.list-box span:nth-of-type(1){
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2){
margin-top: 14px;
display: inline-block;
}
</style>
\ No newline at end of file
......
......@@ -36,6 +36,9 @@
},
mounted() {},
methods: {
handleSearch(val) {
this.$emit('searchRoat', val);
},
handleIs2D() {
this.is2D = !this.is2D;
this.$emit('is2D', this.is2D);
......@@ -52,9 +55,6 @@
this.isClear = !this.isClear;
this.$emit('isClear', this.isClear);
},
handleSearch(val) {
this.$emit('searchRoat', val);
}
}
}
</script>
......@@ -103,4 +103,9 @@
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
</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>
</div>
</template>
<script>
export default {
name: 'thematicAnalysis',
components: {},
data() {
return {
search: '',
is2D: false,
isCamera: false,
isLayer: false,
isClear: false
}
},
mounted() {},
methods: {
handleSearch(val) {
this.$emit('searchRoat', val);
},
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);
},
}
}
</script>
<style scoped>
.container {}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="serach">
</div>
<div class="tree">
<div class="box">
<div>
<div class="input-box">
<el-input v-model="search" style="width: 158px; height: 36px;" placeholder="请输入"
suffix-icon="el-icon-search" @change='handleSearch()'></el-input>
</div>
</div>
<div class="tree-main">
<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
:default-checked-keys="[5]" :props="defaultProps">
</el-tree>
</div>
</div>
</div>
<div class="fold" @click="foldAssert()">
<i class="el-icon-arrow-up"></i>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
data: [{
id: 1,
label: '一级 1',
}, {
id: 2,
label: '一级 2',
// children: [{
// id: 5,
// label: '二级 2-1'
// }, {
// id: 6,
// label: '二级 2-2'
// }]
}],
}
},
mounted() {
},
components: {},
methods: {
handleSearch() {
},
foldAssert() {
this.$emit('foldAssert');
}
}
}
</script>
<style scoped>
.container {
width: 206px;
/* border: 1px solid red; */
}
.serach {
height: 32px;
width: 100%;
background-image: url('../assets/一张图/list_上端.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.tree {
background-image: url('../assets/一张图/list_中端.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.tree .box {
transform: translate(24px, -14px);
}
.tree-main {
margin-top: 26px;
transform: translateX(-24px);
}
.fold {
background-image: url('../assets/一张图/list_下端.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 32px;
/* width: 158px; */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(0, 0, 0, 0.58) !important;
border: 1px solid rgba(0, 0, 0, 0.58);
color: #fff;
}
>>>.el-input__suffix {
/* color: #fff; */
/* font-size: 17px; */
}
>>>.el-tree {
background: transparent;
color: #fff;
}
>>>.el-tree-node__content:hover {
background: transparent;
}
>>>.el-tree-node:focus>.el-tree-node__content {
background-color: transparent;
}
>>>.el-checkbox__inner {
border: 1px solid #000;
background-color: #000;
}
>>>.el-icon-search {
cursor: pointer;
}
</style>
\ No newline at end of file
......@@ -29,6 +29,13 @@
<div class="bottomNav">
<bottomNav></bottomNav>
</div>
<div class="leftAssert">
<leftAssert></leftAssert>
</div>
<div class="mapPop">
<mapPop></mapPop>
</div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
<div id="cesiumContainer">
<div class="" ref="slider"></div>
</div>
......@@ -45,13 +52,18 @@
import rightTopFunc from '../components/rightTopFunc';
import rightFunc from '../components/rightFunc';
import bottomNav from '../components/bottomNav';
import leftAssert from '../components/leftAssert';
import mapPop from '../components/mapPop';
export default {
components: {
TopTitle,
rightTopFunc,
rightFunc,
bottomNav
bottomNav,
leftAssert,
mapPop
},
data() {
return {
......@@ -328,7 +340,8 @@
z-index: 1000;
color: red;
width: 100%;
height: 86.5px;
/* height: 86.5px; */
height: 124.5px;
}
.rightTopFunc {
position: absolute;
......@@ -349,6 +362,20 @@
bottom: 40px;
}
.leftAssert {
position: absolute;
z-index: 1000;
left: 32px;
top: 149px;
}
.mapPop {
position: absolute;
z-index: 1000;
right: 371px;
top: 566px;
}
/*leaflet风格气泡窗口样式模板*/
.cesium-popup {
......