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 @@ ...@@ -10,6 +10,8 @@
10 html, body, #app { 10 html, body, #app {
11 width: 100%; 11 width: 100%;
12 height: 100%; 12 height: 100%;
13 -webkit-user-select:none;
14 -moz-user-select:none;
13 } 15 }
14 * { 16 * {
15 margin: 0px; 17 margin: 0px;
...@@ -20,4 +22,6 @@ ...@@ -20,4 +22,6 @@
20 .cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer { 22 .cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer {
21 display: none !important; 23 display: none !important;
22 } 24 }
25
26
23 </style> 27 </style>
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 <div class="wrapper"> 3 <div class="wrapper">
4 <div class="nav-box selected" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')"> 4 <div class="nav-box" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')">
5 <span>一张图</span> 5 <span>一张图</span>
6 </div> 6 </div>
7 <div class="nav-box no-selected" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')"> 7 <div class="nav-box" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')">
8 <span>成果审查管理</span> 8 <span>成果审查管理</span>
9 </div> 9 </div>
10 <div class="nav-box no-selected" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')"> 10 <div class="nav-box" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')">
11 <span>实施监督预警</span> 11 <span>实施监督预警</span>
12 </div> 12 </div>
13 <div class="nav-box no-selected" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')"> 13 <div class="nav-box" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')">
14 <span>批后监管</span> 14 <span>批后监管</span>
15 </div> 15 </div>
16 </div> 16 </div>
17
18 </div> 17 </div>
19 </template> 18 </template>
20 19
...@@ -24,19 +23,21 @@ ...@@ -24,19 +23,21 @@
24 components: {}, 23 components: {},
25 data() { 24 data() {
26 return { 25 return {
27 isYZT: true, // 一张图 26 isYZT: false, // 一张图
28 isCGSC: false, // 成果审查管理 27 isCGSC: true, // 成果审查管理
29 isSSJD: false, // 实施监督预警 28 isSSJD: false, // 实施监督预警
30 isPGJG: false, // 批后监管 29 isPGJG: false, // 批后监管
30 flagArr: ['isYZT', 'isCGSC', 'isSSJD', 'isPGJG']
31 } 31 }
32 }, 32 },
33 mounted() {}, 33 mounted() {},
34 methods: { 34 methods: {
35 jumpNav(val) { 35 jumpNav(val) {
36 this[val] = !this[val]; 36 this.flagArr.forEach(ele => {
37 debugger 37 if (ele == val) this[val] = true;
38 else this[ele] = false;
39 });
38 }, 40 },
39
40 } 41 }
41 } 42 }
42 </script> 43 </script>
...@@ -53,12 +54,13 @@ ...@@ -53,12 +54,13 @@
53 justify-content: space-around; 54 justify-content: space-around;
54 font-size: 24px; 55 font-size: 24px;
55 color: #FFFFFF; 56 color: #FFFFFF;
57 cursor: pointer;
56 } 58 }
57 59
58
59 .nav-box { 60 .nav-box {
60 width: 306px !important; 61 width: 306px !important;
61 text-align: center; 62 text-align: center;
63 cursor: pointer;
62 } 64 }
63 65
64 .selected { 66 .selected {
...@@ -70,7 +72,7 @@ ...@@ -70,7 +72,7 @@
70 72
71 .selected span { 73 .selected span {
72 display: inline-block; 74 display: inline-block;
73 transform: translateY(-23.2px); 75 transform: translateY(-15.2px);
74 font-size: 30px; 76 font-size: 30px;
75 } 77 }
76 78
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 leftAssert 3 <div class="assert-list" :class="[isAssert?'a-selected':'a-no-selected']" @click="changeSelect('isAssert')">
4 <div class="expend">
5 <img src="../assets/一张图/icon_资源目录.png" alt="">
6 </div>
7 <div class="name">资源目录</div>
8 </div>
9 <div style="margin-top: 16px;" v-show='isAssert'>
10 <treeSearch @foldAssert="foldAssert('isAssert')"></treeSearch>
11 </div>
12
13 <div class="assert-list" :class="[isZTFX?'a-selected':'a-no-selected']" @click="changeSelect('isZTFX')"
14 style="margin-top: 30px;">
15 <div class="expend">
16 <img src="../assets/一张图/icon_专题分析.png" alt="">
17 </div>
18 <div class="name">专题分析</div>
19 </div>
20 <div style="margin-top: 16px;" v-show='isZTFX'>
21 <treeSearch @foldAssert="foldAssert('isZTFX')"></treeSearch>
22 </div>
23
24 <div class="assert-list" :class="[isFASC?'a-selected':'a-no-selected']" @click="changeSelect('isFASC')"
25 style="margin-top: 30px;">
26 <div class="expend">
27 <img src="../assets/一张图/icon_方案审查.png" alt="">
28 </div>
29 <div class="name">方案审查</div>
30 </div>
31 <div style="margin-top: 16px;" v-show='isFASC'>
32 <treeSearch @foldAssert="foldAssert('isFASC')"></treeSearch>
33 </div>
34
4 </div> 35 </div>
5 </template> 36 </template>
6 37
7 <script> 38 <script>
39 import treeSearch from './treeSearch';
40
41
8 export default { 42 export default {
9 name: 'leftAssert', 43 name: 'leftAssert',
10 components: {}, 44 components: {
45 treeSearch
46 },
11 data() { 47 data() {
12 return {} 48 return {
49 isAssert: true,
50 isZTFX: false,
51 isFASC: false,
52
53 keepKey: ['isAssert', 'isZTFX', 'isFASC'],
54
55 }
13 }, 56 },
14 mounted() {}, 57 mounted() {},
15 methods: { 58 methods: {
16 59 changeSelect(val) {
60 this.keepKey.forEach(ele => {
61 if (val == ele) this[ele] = true;
62 else this[ele] = false;
63 })
64 },
65 foldAssert(val) {
66 this[val] = false;
67 },
17 } 68 }
18 } 69 }
19 </script> 70 </script>
20 71
21 <style lang="sass" scoped> 72 <style scoped>
22 .container {} 73 .container {
74 color: #fff;
75 }
76
77 .assert-list {
78 width: 206px;
79 height: 36px;
80 display: flex;
81 align-items: center;
82 background-size: 100% 100%;
83 background-repeat: no-repeat;
84 cursor: pointer;
85 }
86
87 .a-selected {
88 background-image: url('../assets/一张图/bg_资源目录.png');
89 }
90
91 .a-no-selected {
92 background-image: url('../assets/一张图/bg_专题分析.png');
93 }
94
95 .assert-list .expend {
96 transform: translate(20.7px, 2px);
97 }
98
99 .assert-list .name {
100 transform: translateX(56px);
101 line-height: 36px;
102 }
23 </style> 103 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 mapPop 3 <div class="list-box">
4 <span>规划项目</span>
5 <span>综合楼</span>
6 </div>
7 <div class="list-box">
8 <span>建设单位</span>
9 <span>青海人和顺置业有限公司</span>
10 </div>
11 <div class="list-box">
12 <span>规划用地性质</span>
13 <span>B2商务设施用地</span>
14 </div>
15 <div class="list-box">
16 <span>总用地面积</span>
17 <span>26.245</span>
18 </div>
19 <div class="list-box">
20 <span>净用地面积</span>
21 <span>26.07</span>
22 </div>
23 <div class="list-box">
24 <span>其他面积</span>
25 <span>0</span>
26 </div>
4 </div> 27 </div>
5 </template> 28 </template>
6 29
...@@ -9,7 +32,8 @@ mapPop ...@@ -9,7 +32,8 @@ mapPop
9 name: 'mapPop', 32 name: 'mapPop',
10 components: {}, 33 components: {},
11 data() { 34 data() {
12 return {} 35 return {
36 }
13 }, 37 },
14 mounted() {}, 38 mounted() {},
15 methods: { 39 methods: {
...@@ -18,6 +42,24 @@ mapPop ...@@ -18,6 +42,24 @@ mapPop
18 } 42 }
19 </script> 43 </script>
20 44
21 <style lang="sass" scoped> 45 <style scoped>
22 .container {} 46 .container {
47 color: #fff;
48 background: rgba(4, 10, 10, 0.57);
49 box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50);
50 padding: 4px 14px 14px 14px;
51 font-size: 16px;
52 }
53
54 .list-box span:nth-of-type(1){
55 display: inline-block;
56 width: 98px;
57 margin-right: 20px;
58 color: rgba(255, 255, 255, .7);
59 }
60
61 .list-box span:nth-of-type(2){
62 margin-top: 14px;
63 display: inline-block;
64 }
23 </style> 65 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -36,6 +36,9 @@ ...@@ -36,6 +36,9 @@
36 }, 36 },
37 mounted() {}, 37 mounted() {},
38 methods: { 38 methods: {
39 handleSearch(val) {
40 this.$emit('searchRoat', val);
41 },
39 handleIs2D() { 42 handleIs2D() {
40 this.is2D = !this.is2D; 43 this.is2D = !this.is2D;
41 this.$emit('is2D', this.is2D); 44 this.$emit('is2D', this.is2D);
...@@ -52,9 +55,6 @@ ...@@ -52,9 +55,6 @@
52 this.isClear = !this.isClear; 55 this.isClear = !this.isClear;
53 this.$emit('isClear', this.isClear); 56 this.$emit('isClear', this.isClear);
54 }, 57 },
55 handleSearch(val) {
56 this.$emit('searchRoat', val);
57 }
58 } 58 }
59 } 59 }
60 </script> 60 </script>
...@@ -103,4 +103,9 @@ ...@@ -103,4 +103,9 @@
103 border: 1px solid rgba(23, 34, 38, 0.57); 103 border: 1px solid rgba(23, 34, 38, 0.57);
104 color: #fff; 104 color: #fff;
105 } 105 }
106
107 >>>.el-input__suffix {
108 color: #fff;
109 font-size: 17px;
110 }
106 </style> 111 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template>
2 <div class="container">
3 <div class="flex-center">
4 <div style="margin-right: 14px;">
5 <el-input v-model="search" style="width: 342px; height: 40px;" placeholder="地名、地址、道路"
6 suffix-icon="el-icon-search" @change='handleSearch()'></el-input>
7 </div>
8 <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
9 <img src="../assets/一张图/icon_2d3d.png" alt="">
10 </div>
11 </div>
12 </div>
13 </template>
14
15 <script>
16 export default {
17 name: 'thematicAnalysis',
18 components: {},
19 data() {
20 return {
21 search: '',
22 is2D: false,
23 isCamera: false,
24 isLayer: false,
25 isClear: false
26 }
27 },
28 mounted() {},
29 methods: {
30 handleSearch(val) {
31 this.$emit('searchRoat', val);
32 },
33 handleIs2D() {
34 this.is2D = !this.is2D;
35 this.$emit('is2D', this.is2D);
36 },
37 handleIsCamera() {
38 this.isCamera = !this.isCamera;
39 this.$emit('isCamera', this.isCamera);
40 },
41 handleIsLayer() {
42 this.isLayer = !this.isLayer;
43 this.$emit('isLayer', this.isLayer);
44 },
45 handleIsClear() {
46 this.isClear = !this.isClear;
47 this.$emit('isClear', this.isClear);
48 },
49 }
50 }
51 </script>
52
53 <style scoped>
54 .container {}
55
56 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 <div class="serach">
4
5 </div>
6 <div class="tree">
7 <div class="box">
8 <div>
9 <div class="input-box">
10 <el-input v-model="search" style="width: 158px; height: 36px;" placeholder="请输入"
11 suffix-icon="el-icon-search" @change='handleSearch()'></el-input>
12 </div>
13 </div>
14 <div class="tree-main">
15 <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
16 :default-checked-keys="[5]" :props="defaultProps">
17 </el-tree>
18 </div>
19
20 </div>
21 </div>
22 <div class="fold" @click="foldAssert()">
23 <i class="el-icon-arrow-up"></i>
24 </div>
25 </div>
26 </template>
27 <script>
28 export default {
29 data() {
30 return {
31 search: '',
32 data: [{
33 id: 1,
34 label: '一级 1',
35
36 }, {
37 id: 2,
38 label: '一级 2',
39 // children: [{
40 // id: 5,
41 // label: '二级 2-1'
42 // }, {
43 // id: 6,
44 // label: '二级 2-2'
45 // }]
46 }],
47 }
48 },
49 mounted() {
50
51 },
52 components: {},
53 methods: {
54 handleSearch() {
55
56 },
57 foldAssert() {
58 this.$emit('foldAssert');
59 }
60 }
61 }
62 </script>
63 <style scoped>
64 .container {
65 width: 206px;
66 /* border: 1px solid red; */
67 }
68
69 .serach {
70 height: 32px;
71 width: 100%;
72 background-image: url('../assets/一张图/list_上端.png');
73 background-size: 100% 100%;
74 background-repeat: no-repeat;
75 }
76
77 .tree {
78 background-image: url('../assets/一张图/list_中端.png');
79 background-size: 100% 100%;
80 background-repeat: no-repeat;
81 }
82
83 .tree .box {
84 transform: translate(24px, -14px);
85
86 }
87
88 .tree-main {
89 margin-top: 26px;
90 transform: translateX(-24px);
91 }
92
93 .fold {
94 background-image: url('../assets/一张图/list_下端.png');
95 background-size: 100% 100%;
96 background-repeat: no-repeat;
97 height: 32px;
98 /* width: 158px; */
99 display: flex;
100 justify-content: center;
101 align-items: center;
102 cursor: pointer;
103 }
104
105 >>>input::-webkit-input-placeholder {
106 font-size: 16px;
107 color: rgba(255, 255, 255, 0.78) !important;
108 }
109
110 >>>.el-input__inner {
111 background: rgba(0, 0, 0, 0.58) !important;
112 border: 1px solid rgba(0, 0, 0, 0.58);
113 color: #fff;
114 }
115
116 >>>.el-input__suffix {
117 /* color: #fff; */
118 /* font-size: 17px; */
119 }
120
121 >>>.el-tree {
122 background: transparent;
123 color: #fff;
124 }
125
126 >>>.el-tree-node__content:hover {
127 background: transparent;
128 }
129
130 >>>.el-tree-node:focus>.el-tree-node__content {
131 background-color: transparent;
132 }
133
134 >>>.el-checkbox__inner {
135 border: 1px solid #000;
136 background-color: #000;
137 }
138
139 >>>.el-icon-search {
140 cursor: pointer;
141 }
142 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -29,6 +29,13 @@ ...@@ -29,6 +29,13 @@
29 <div class="bottomNav"> 29 <div class="bottomNav">
30 <bottomNav></bottomNav> 30 <bottomNav></bottomNav>
31 </div> 31 </div>
32 <div class="leftAssert">
33 <leftAssert></leftAssert>
34 </div>
35 <div class="mapPop">
36 <mapPop></mapPop>
37 </div>
38 <div id="cesiumContainer" style="width:100%;height:100%;"></div>
32 <div id="cesiumContainer"> 39 <div id="cesiumContainer">
33 <div class="" ref="slider"></div> 40 <div class="" ref="slider"></div>
34 </div> 41 </div>
...@@ -45,13 +52,18 @@ ...@@ -45,13 +52,18 @@
45 import rightTopFunc from '../components/rightTopFunc'; 52 import rightTopFunc from '../components/rightTopFunc';
46 import rightFunc from '../components/rightFunc'; 53 import rightFunc from '../components/rightFunc';
47 import bottomNav from '../components/bottomNav'; 54 import bottomNav from '../components/bottomNav';
55 import leftAssert from '../components/leftAssert';
56 import mapPop from '../components/mapPop';
57
48 58
49 export default { 59 export default {
50 components: { 60 components: {
51 TopTitle, 61 TopTitle,
52 rightTopFunc, 62 rightTopFunc,
53 rightFunc, 63 rightFunc,
54 bottomNav 64 bottomNav,
65 leftAssert,
66 mapPop
55 }, 67 },
56 data() { 68 data() {
57 return { 69 return {
...@@ -328,7 +340,8 @@ ...@@ -328,7 +340,8 @@
328 z-index: 1000; 340 z-index: 1000;
329 color: red; 341 color: red;
330 width: 100%; 342 width: 100%;
331 height: 86.5px; 343 /* height: 86.5px; */
344 height: 124.5px;
332 } 345 }
333 .rightTopFunc { 346 .rightTopFunc {
334 position: absolute; 347 position: absolute;
...@@ -349,6 +362,20 @@ ...@@ -349,6 +362,20 @@
349 bottom: 40px; 362 bottom: 40px;
350 } 363 }
351 364
365 .leftAssert {
366 position: absolute;
367 z-index: 1000;
368 left: 32px;
369 top: 149px;
370 }
371
372 .mapPop {
373 position: absolute;
374 z-index: 1000;
375 right: 371px;
376 top: 566px;
377 }
378
352 379
353 /*leaflet风格气泡窗口样式模板*/ 380 /*leaflet风格气泡窗口样式模板*/
354 .cesium-popup { 381 .cesium-popup {
......