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 @@ ...@@ -7,8 +7,17 @@
7 </template> 7 </template>
8 8
9 <style> 9 <style>
10 html, body, #app {
11 width: 100%;
12 height: 100%;
13 }
10 * { 14 * {
11 margin: 0px; 15 margin: 0px;
12 padding: 0px; 16 padding: 0px;
17 list-style: none;
13 } 18 }
19
20 .cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer {
21 display: none !important;
22 }
14 </style> 23 </style>
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 bottomNav 3 <div class="wrapper">
4 <div class="nav-box selected" :class="[isYZT?'selected':'no-selected']" @click="jumpNav('isYZT')">
5 <span>一张图</span>
6 </div>
7 <div class="nav-box no-selected" :class="[isCGSC?'selected':'no-selected']" @click="jumpNav('isCGSC')">
8 <span>成果审查管理</span>
9 </div>
10 <div class="nav-box no-selected" :class="[isSSJD?'selected':'no-selected']" @click="jumpNav('isSSJD')">
11 <span>实施监督预警</span>
12 </div>
13 <div class="nav-box no-selected" :class="[isPGJG?'selected':'no-selected']" @click="jumpNav('isPGJG')">
14 <span>批后监管</span>
15 </div>
16 </div>
17
4 </div> 18 </div>
5 </template> 19 </template>
6 20
...@@ -9,15 +23,68 @@ bottomNav ...@@ -9,15 +23,68 @@ bottomNav
9 name: 'bottomNav', 23 name: 'bottomNav',
10 components: {}, 24 components: {},
11 data() { 25 data() {
12 return {} 26 return {
27 isYZT: true, // 一张图
28 isCGSC: false, // 成果审查管理
29 isSSJD: false, // 实施监督预警
30 isPGJG: false, // 批后监管
31 }
13 }, 32 },
14 mounted() {}, 33 mounted() {},
15 methods: { 34 methods: {
16 35 jumpNav(val) {
36 this[val] = !this[val];
37 debugger
38 },
39
17 } 40 }
18 } 41 }
19 </script> 42 </script>
20 43
21 <style lang="sass" scoped> 44 <style scoped>
22 .container {} 45 .container {
46 width: 100%;
47 }
48
49 .wrapper {
50 width: 50%;
51 margin: 0 auto;
52 display: flex;
53 justify-content: space-around;
54 font-size: 24px;
55 color: #FFFFFF;
56 }
57
58
59 .nav-box {
60 width: 306px !important;
61 text-align: center;
62 }
63
64 .selected {
65 background-image: url('../assets/一张图/bg-选中.png');
66 background-size: 100% 100%;
67 background-repeat: no-repeat;
68 height: 39.2px;
69 }
70
71 .selected span {
72 display: inline-block;
73 transform: translateY(-23.2px);
74 font-size: 30px;
75 }
76
77 .no-selected {
78 background-image: url('../assets/一张图/bg-未选中.png');
79 background-size: 100% 100%;
80 background-repeat: no-repeat;
81 height: 24px;
82 transform: translateY(16px);
83 }
84
85 .no-selected span {
86 display: inline-block;
87 transform: translateY(-17.2px);
88 font-size: 24px;
89 }
23 </style> 90 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template>
2 <div class="container">
3 leftFunc
4 </div>
5 </template>
6
7 <script>
8 export default {
9 name: 'leftFunc',
10 components: {},
11 data() {
12 return {}
13 },
14 mounted() {},
15 methods: {
16
17 }
18 }
19 </script>
20
21 <style lang="sass" scoped>
22 .container {}
23 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 leftTopFunc
4 </div>
5 </template>
6
7 <script>
8 export default {
9 name: 'leftTopFunc',
10 components: {},
11 data() {
12 return {}
13 },
14 mounted() {},
15 methods: {
16
17 }
18 }
19 </script>
20
21 <style lang="sass" scoped>
22 .container {}
23 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 <div>
4 <div class="func-ico" :class="[isReturn?'selected':'']" @click="handleReturn()">
5 <img src="../assets/一张图/icon_复位.png" alt="">
6 </div>
7 <div class="func-ico" :class="[enlarge?'selected':'']" @click="handleEnlarge()">
8 <img src="../assets/一张图/icon_放大.png" alt="">
9 </div>
10 <div class="func-ico" :class="[narrow?'selected':'']" @click="handleNarrow()">
11 <img src="../assets/一张图/icon_缩小.png" alt="">
12 </div>
13 <div class="func-ico" :class="[coordinate?'selected':'']" @click="handleCoordinate()">
14 <img src="../assets/一张图/icon_坐标.png" alt="">
15 </div>
16 <div class="func-ico" :class="[distance?'selected':'']" @click="handleDistance()">
17 <img src="../assets/一张图/icon_距离.png" alt="">
18 </div>
19
20 <div class="func-ico" :class="[area?'selected':'']" @click="handleArea()">
21 <img src="../assets/一张图/icon_面积.png" alt="">
22 </div>
23 <div class="func-ico" :class="[marker?'selected':'']" @click="handleMarker()">
24 <img src="../assets/一张图/icon_标注.png" alt="">
25 </div>
26 <div class="func-ico" :class="[rollerShutter?'selected':'']" @click="handleRollerShutter()">
27 <img src="../assets/一张图/icon_卷帘.png" alt="">
28 </div>
29 <div class="func-ico" :class="[splitScreen?'selected':'']" @click="handleSplitScreen()">
30 <img src="../assets/一张图/icon_分屏.png" alt="">
31 </div>
32 <div class="func-ico" :class="[toNorth?'selected':'']" @click="handleToNorth()">
33 <img src="../assets/一张图/icon_指北.png" alt="">
34 </div>
35
36 <div class="func-ico" :class="[topSee?'selected':'']" @click="handleTopSee()">
37 <img src="../assets/一张图/icon_顶视.png" alt="">
38 </div>
39 <div class="func-ico" :class="[roundSee?'selected':'']" @click="handleRoundSee()">
40 <img src="../assets/一张图/icon_环视.png" alt="">
41 </div>
42 <div class="func-ico" :class="[horizon?'selected':'']" @click="handleHorizon()">
43 <img src="../assets/一张图/icon_视域.png" alt="">
44 </div>
45
46 <div class="func-ico" :class="[allSee?'selected':'']" @click="handleAllSee()">
47 <img src="../assets/一张图/icon_通视.png" alt="">
48 </div>
49
50 <!-- <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
51 <img src="../assets/toolbar_icon_ 展开.png" alt="">
52 </div> -->
53
54 </div>
55 </div>
56 </template>
57
58 <script>
59 export default {
60 name: 'rightFunc',
61 components: {},
62 data() {
63 return {
64 isReturn: false, // 复位
65 enlarge: false, // 放大
66 narrow: false, // 缩小
67 coordinate: false, // 坐标
68 distance: false, // 距离
69
70 area: false, // 面积
71 marker: false, // 标记
72 rollerShutter: false, // 卷帘
73 splitScreen: false, // 分屏
74 toNorth: false, // 指北
75
76 topSee: false, // 顶视
77 roundSee: false, // 环视
78 horizon: false, // 视域
79 allSee: false, // 通视
80 }
81 },
82 mounted() {},
83 methods: {
84 handleReturn() {
85 this.$emit('isReturn', this.isReturn);
86 },
87 handleEnlarge() {
88 this.$emit('enlarge', this.enlarge);
89 },
90 handleNarrow() {
91 this.$emit('narrow', this.narrow);
92 },
93 handleCoordinate() {
94 this.$emit('coordinate', this.coordinate);
95 },
96 handleDistance() {
97 this.$emit('distance', this.distance);
98 },
99
100 handleArea() {
101 this.$emit('area', this.area);
102 },
103 handleMarker() {
104 this.$emit('marker', this.marker);
105 },
106 handleRollerShutter() {
107 this.$emit('rollerShutter', this.rollerShutter);
108 },
109 handleSplitScreen() {
110 this.$emit('splitScreen', this.splitScreen);
111 },
112 handleToNorth() {
113 this.$emit('toNorth', this.toNorth);
114 },
115
116 handleTopSee() {
117 this.$emit('topSee', this.topSee);
118 },
119 handleRoundSee() {
120 this.$emit('roundSee', this.roundSee);
121 },
122 handleHorizon() {
123 this.$emit('horizon', this.horizon);
124 },
125 handleAllSee() {
126 this.$emit('allSee', this.allSee);
127 },
128 }
129 }
130 </script>
131
132 <style scoped>
133 .func-ico {
134 width: 40px;
135 height: 40px;
136 position: relative;
137 /* margin-left: 10px; */
138 cursor: pointer;
139 background: rgba(4, 10, 10, 0.57);
140 box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.50);
141 border-top: 1px solid rgba(255, 255, 255, .2);
142 }
143
144 .func-ico:nth-of-type(1) {
145 border-top: 0px solid rgba(255, 255, 255, .2);
146 }
147
148 .selected {
149 background-image: url('../assets/一张图/bg_2d3d 2.png');
150 background-size: 100% 100%;
151 background-repeat: no-repeat;
152 }
153
154 img {
155 /* width: 100%;
156 height: 100%; */
157 position: absolute;
158 top: 50%;
159 left: 50%;
160 transform: translate(-50%, -50%);
161 }
162 </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 class="func-ico" :class="[isCamera?'selected':'']" @click="handleIsCamera()">
12 <img src="../assets/一张图/icon_影像.png" alt="">
13 </div>
14 <div class="func-ico" :class="[isLayer?'selected':'']" @click="handleIsLayer()">
15 <img src="../assets/一张图/icon_图层管理.png" alt="">
16 </div>
17 <div class="func-ico" :class="[isClear?'selected':'']" @click="handleIsClear()">
18 <img src="../assets/一张图/icon_清除.png" alt="">
19 </div>
20 </div>
21 </div>
22 </template>
23
24 <script>
25 export default {
26 name: 'rightTopFunc',
27 components: {},
28 data() {
29 return {
30 search: '',
31 is2D: false,
32 isCamera: false,
33 isLayer: false,
34 isClear: false
35 }
36 },
37 mounted() {},
38 methods: {
39 handleIs2D() {
40 this.is2D = !this.is2D;
41 this.$emit('is2D', this.is2D);
42 },
43 handleIsCamera() {
44 this.isCamera = !this.isCamera;
45 this.$emit('isCamera', this.isCamera);
46 },
47 handleIsLayer() {
48 this.isLayer = !this.isLayer;
49 this.$emit('isLayer', this.isLayer);
50 },
51 handleIsClear() {
52 this.isClear = !this.isClear;
53 this.$emit('isClear', this.isClear);
54 },
55 handleSearch(val) {
56 this.$emit('searchRoat', val);
57 }
58 }
59 }
60 </script>
61
62 <style scoped>
63 .container {}
64
65 .func-ico {
66 width: 40px;
67 height: 40px;
68 position: relative;
69 margin-left: 10px;
70 cursor: pointer;
71 }
72
73 .flex-center {
74 display: flex;
75 align-items: center;
76 justify-items: center;
77 }
78
79 .selected {
80 background-image: url('../assets/一张图/bg_2d3d 2.png');
81 background-size: 100% 100%;
82 background-repeat: no-repeat;
83 }
84
85 img {
86 position: absolute;
87 top: 50%;
88 left: 50%;
89 transform: translate(-50%, -50%);
90 }
91
92 .el-icon-search:before {
93 color: #fff;
94 }
95
96 >>>input::-webkit-input-placeholder {
97 font-size: 16px;
98 color: rgba(255, 255, 255, 0.78) !important;
99 }
100
101 >>>.el-input__inner {
102 background: rgba(23, 34, 38, 0.57) !important;
103 border: 1px solid rgba(23, 34, 38, 0.57);
104 color: #fff;
105 }
106 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 top
4 </div>
5 </template>
6
7 <script>
8 export default {
9 name: 'top',
10 components: {},
11 data() {
12 return {}
13 },
14 mounted() {},
15 methods: {
16
17 }
18 }
19 </script>
20
21 <style lang="sass" scoped>
22 .container {}
23 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 </div>
4 </template>
5 <script>
6
7 export default {
8 data() {
9 return {
10
11 }
12 },
13 mounted() {
14
15 },
16 components: {
17 },
18 methods:{
19
20 }
21 }
22 </script>
23 <style scoped>
24 .container {
25 /* margin-top: 17.5px; */
26 width: 100%;
27 height: 100%;
28 background-image: url('../assets/topTitle.png');
29 background-size: cover;
30 background-repeat: no-repeat;
31 }
32 img {
33 width: 100%;
34 height: 100%;
35 }
36 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="home"> 2 <div class="home">
3 <div class="top">
4 <TopTitle></TopTitle>
5 </div>
6 <div class="rightTopFunc">
7 <rightTopFunc @is2D='is2D'
8 @isCamera='isCamera'
9 @isLayer='isLayer'
10 @isClear='isClear'
11 @searchRoat='searchRoat'></rightTopFunc>
12 </div>
13 <div class="rightFunc">
14 <rightFunc @isReturn='isReturn'
15 @enlarge='enlarge'
16 @narrow='narrow'
17 @coordinate='coordinate'
18 @distance='distance'
19 @area='area'
20 @marker='marker'
21 @rollerShutter='rollerShutter'
22 @splitScreen='splitScreen'
23 @toNorth='toNorth'
24 @topSee='topSee'
25 @roundSee='roundSee'
26 @horizon='horizon'
27 @allSee='allSee'></rightFunc>
28 </div>
29 <div class="bottomNav">
30 <bottomNav></bottomNav>
31 </div>
3 <div id="cesiumContainer" style="width:100%;height:100%;"></div> 32 <div id="cesiumContainer" style="width:100%;height:100%;"></div>
4 <!-- <el-button @click="testfun" class="testbtn"></el-button> --> 33 <!-- <el-button @click="testfun" class="testbtn"></el-button> -->
5 <el-select @change="selectChanged" class="testbtn"> 34 <!-- <el-select @change="selectChanged" class="testbtn">
6 <el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option> 35 <el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
7 </el-select> 36 </el-select> -->
8 </div> 37 </div>
9 </template> 38 </template>
10 <script> 39 <script>
11 40
12 import tool from "../assets/js/map/tool"; 41 import tool from "../assets/js/map/tool";
13 42
43 import TopTitle from '../components/topTitle';
44 import rightTopFunc from '../components/rightTopFunc';
45 import rightFunc from '../components/rightFunc';
46 import bottomNav from '../components/bottomNav';
47
14 export default { 48 export default {
15 components: {}, 49 components: {
50 TopTitle,
51 rightTopFunc,
52 rightFunc,
53 bottomNav
54 },
16 data() { 55 data() {
17 return { 56 return {
18 viewer: undefined, 57 viewer: undefined,
...@@ -100,7 +139,87 @@ ...@@ -100,7 +139,87 @@
100 }, 139 },
101 drawShape() { 140 drawShape() {
102 141
142 },
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158 // ly
159 // rightTopFunc
160 searchRoat(val) {
161 /**
162 * @param {*} val '为地名地址道路的输入值'
163 */
164 this.commons.log(val)
165 },
166 is2D(flag) {
167 /**
168 * @param {*} flag 'true 选中2D， falss 反之为3D'
169 */
170 this.commons.log(flag)
171 },
172 isCamera(flag) {
173 /**
174 * @param {*} flag 'true 选中影像， falss 反之'
175 */
176 this.commons.log(flag)
177 },
178 isLayer(flag) {
179 /**
180 * @param {*} flag 'true 选中图层， falss 反之'
181 */
182 this.commons.log(flag)
183 },
184 isClear(flag) {
185 /**
186 * @param {*} flag 'true 选中清除， falss 反之'
187 */
188 this.commons.log(flag)
103 } 189 }
190
191 // rightFunc
192 // 复位
193 ,isReturn(val) {}
194 // 放大
195 ,enlarge(val) {}
196 // 缩小
197 ,narrow(val) {}
198 // 坐标
199 ,coordinate(val) {}
200 // 距离
201 ,distance(val) {}
202
203 // 面积
204 ,area(val) {}
205 // 标记
206 ,marker(val) {}
207 // 卷帘
208 ,rollerShutter(val) {}
209 // 分屏
210 ,splitScreen(val) {}
211 // 指北
212 ,toNorth(val) {}
213
214 // 顶视
215 ,topSee(val) {}
216 // 环视
217 ,roundSee(val) {}
218 // 视域
219 ,horizon(val) {}
220 // 通视
221 ,allSee(val) {}
222
104 } 223 }
105 } 224 }
106 </script> 225 </script>
...@@ -115,4 +234,39 @@ ...@@ -115,4 +234,39 @@
115 height: 30px; 234 height: 30px;
116 } 235 }
117 236
237 </style>
238
239
240
241 <style scoped>
242 .home {
243 position: relative;
244 width: 100%;
245 height: 100%;
246 }
247 .top {
248 position: absolute;
249 z-index: 1000;
250 color: red;
251 width: 100%;
252 height: 86.5px;
253 }
254 .rightTopFunc {
255 position: absolute;
256 z-index: 1000;
257 right: 32px;
258 top: 119px;
259 }
260 .rightFunc {
261 position: absolute;
262 z-index: 1000;
263 right: 32px;
264 top: 203px;
265 }
266 .bottomNav {
267 position: absolute;
268 width: 100%;
269 z-index: 1000;
270 bottom: 40px;
271 }
118 </style> 272 </style>
...\ No newline at end of file ...\ No newline at end of file
......