Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
1a02e87f by 刘远
Options

新增 页面

1 parent 939dec7d
Inline Side-by-side
Showing 59 changed files with 1821 additions and 184 deletions
No preview for this file type

553 Bytes | W: | H:

461 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.69 KB | W: | H:

27.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 <template>
2 <div class="container">
3 <div class="wrapper">
4 <div class="box">
5 </div>
6 </div>
7 <div class="mian">
8 <div class="title">
9 <span>通视分析</span>
10 <span @click="closePop" class="close">×</span>
11 </div>
12
13 <div class="func-input">
14 <span>观察点高度</span>
15 <el-input-number v-model="num" controls-position="right" @change="handleChange"
16 style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="1" :max="10000">
17 </el-input-number>
18 <span style="margin-left: 12px;">米</span>
19 </div>
20
21 <div class="func-btn">
22 <div class="btn-wrapper add-bg" @click="startAnalysis">
23 <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
24 <span>开始分析</span>
25 </div>
26 <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
27 <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
28 <span>清除分析结果</span>
29 </div>
30 </div>
31
32 </div>
33 </div>
34 </template>
35
36 <script>
37 export default {
38 name: 'allSee',
39 components: {},
40 data() {
41 return {
42 step: 0.01,
43 num: 1,
44 // isAnalysis: true
45 }
46 },
47 mounted() {},
48 methods: {
49 closePop() {
50 this.$emit('closePop', 'allSee')
51 },
52 handleChange() {
53
54 },
55 startAnalysis() {
56 // this.isAnalysis = true;
57 },
58 stopAnalysis() {
59 // this.isAnalysis = false;
60 }
61
62 }
63 }
64 </script>
65
66 <style scoped>
67 .container {
68 position: relative;
69 color: #fff;
70 font-size: 16px;
71 width: 450px;
72 }
73
74 .wrapper {
75 position: absolute;
76 width: 100%;
77 height: 100%;
78 z-index: 1;
79 border: 1px solid rgba(151, 151, 151, 0.58);
80 }
81
82 .box {
83 background: rgba(4, 10, 10, 0.58);
84 box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
85 /* filter: blur(10px); */
86 height: 100px;
87 position: absolute;
88 width: 100%;
89 height: 100%;
90 z-index: 1;
91 }
92
93 .mian {
94 position: relative;
95 width: 100%;
96 height: 100%;
97 z-index: 1000;
98 }
99
100 .list-box span:nth-of-type(1) {
101 display: inline-block;
102 width: 98px;
103 margin-right: 20px;
104 color: rgba(255, 255, 255, .7);
105 }
106
107 .list-box span:nth-of-type(2) {
108 margin-top: 14px;
109 display: inline-block;
110 }
111
112
113 .title {
114 display: flex;
115 justify-content: space-between;
116 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
117 padding: 18px 24px;
118 font-size: 20px;
119 }
120
121
122 .func-input {
123 display: flex;
124 align-items: center;
125 /* justify-content: space-between; */
126 padding: 18px 24px 0px 24px;
127 font-size: 18px;
128 cursor: pointer;
129 }
130
131 .func {
132 padding: 18px 24px;
133 }
134
135
136
137 .func-btn {
138 display: flex;
139 padding: 18px 24px 44px 24px;
140 align-items: center;
141 font-size: 18px;
142 cursor: pointer;
143 }
144
145 .btn-wrapper {
146 display: flex;
147 align-items: center;
148 width: 190px;
149 height: 36px;
150 background-image: url('../assets/弹窗按钮背景-默认.png');
151 background-size: 100% 100%;
152 background-repeat: no-repeat;
153 line-height: 36px;
154 }
155
156 .add-bg {
157 background-image: url('../assets/弹窗按钮背景-选中.png');
158 }
159
160 .close {
161 cursor: pointer;
162 }
163
164 >>>input::-webkit-input-placeholder {
165 font-size: 16px;
166 color: rgba(255, 255, 255, 0.78) !important;
167 }
168
169 >>>.el-input__inner {
170 background: rgba(4, 10, 10, 0.58) !important;
171 border: 1px solid rgba(23, 34, 38, 0.57);
172 color: #fff;
173 }
174
175 >>>.el-input__suffix {
176 color: #fff;
177 font-size: 17px;
178 }
179
180 >>>.el-input-number__increase,
181 >>>.el-input-number__decrease {
182 background: rgba(4, 10, 10, 0.58);
183 }
184
185 >>>.el-input-number.is-controls-right .el-input-number__decrease,
186 >>>.el-input-number__increase {
187 border-left: 1px solid rgba(4, 10, 10, 0.58);
188 }
189
190 >>>.el-icon-arrow-up:before,
191 >>>.el-icon-arrow-down:before {
192 color: #fff;
193 }
194
195 >>>.el-input-number.is-controls-right .el-input-number__increase {
196 border-bottom: 1px solid rgba(4, 10, 10, 0.58);
197 }
198 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 <div class="wrapper">
4 <div class="box">
5 </div>
6 </div>
7 <div class="mian">
8 <div class="title">
9 <span>视域分析</span>
10 <span @click="closePop" class="close">×</span>
11 </div>
12
13
14 <div class="func-input">
15 <span class="text-right">观察点高度</span>
16 <el-input-number v-model="sdgc" controls-position="right"
17 style="width:245px; height:38px; margin-left: 12px;" :step='0.1' :min="0" :max="10000">
18 </el-input-number>
19 <span style="margin-left: 12px;">米</span>
20 </div>
21
22 <div class="func-input">
23 <span class="text-right">观察方向</span>
24 <el-input-number v-model="swsd" controls-position="right"
25 style="width:245px; height:38px; margin-left: 12px;" :step='1' :min="0" :max="360">
26 </el-input-number>
27 <span style="margin-left: 12px;">度</span>
28 </div>
29 <div class="func-input">
30 <span class="text-right">观察距离</span>
31 <el-input-number v-model="ymsd" controls-position="right"
32 style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="10000">
33 </el-input-number>
34 <span style="margin-left: 12px;">米</span>
35 </div>
36
37 <div class="func-input">
38 <span class="text-right">水平视场角</span>
39 <el-input-number v-model="ymsd" controls-position="right"
40 style="width:245px; height:38px; margin-left: 12px;" :step='1' :min="0" :max="360">
41 </el-input-number>
42 <span style="margin-left: 12px;">度</span>
43 </div>
44
45 <div class="func-input">
46 <span class="text-right">垂直视场角</span>
47 <el-input-number v-model="ymsd" controls-position="right"
48 style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="360">
49 </el-input-number>
50 <span style="margin-left: 12px;">度</span>
51 </div>
52
53 <div class="func-btn">
54 <div class="btn-wrapper add-bg" @click="startAnalysis">
55 <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
56 <span>开始分析</span>
57 </div>
58 <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
59 <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
60 <span>清除分析结果</span>
61 </div>
62 </div>
63
64 </div>
65 </div>
66 </template>
67
68 <script>
69 export default {
70 name: 'horizon',
71 components: {},
72 data() {
73 return {
74 step: 0.01,
75 num: 1,
76 sdgc: '', // 水底高程
77 swsd: '', // 水位深度
78 ymsd: '', // 淹没速度
79
80
81 isXmbj: true,
82 // isAnalysis: true
83 }
84 },
85 mounted() {},
86 methods: {
87 closePop() {
88 this.$emit('closePop', 'horizon')
89 },
90 startAnalysis() {
91
92 },
93 stopAnalysis() {
94
95 },
96 }
97 }
98 </script>
99
100 <style scoped>
101 .container {
102 position: relative;
103 color: #fff;
104 font-size: 16px;
105 width: 450px;
106 }
107
108 .wrapper {
109 position: absolute;
110 width: 100%;
111 height: 100%;
112 z-index: 1;
113 border: 1px solid rgba(151, 151, 151, 0.58);
114 }
115
116 .box {
117 background: rgba(4, 10, 10, 0.58);
118 box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
119 /* filter: blur(10px); */
120 height: 100px;
121 position: absolute;
122 width: 100%;
123 height: 100%;
124 z-index: 1;
125 }
126
127 .mian {
128 position: relative;
129 width: 100%;
130 height: 100%;
131 z-index: 1000;
132 }
133
134 .list-box span:nth-of-type(1) {
135 display: inline-block;
136 width: 98px;
137 margin-right: 20px;
138 color: rgba(255, 255, 255, .7);
139 }
140
141 .list-box span:nth-of-type(2) {
142 margin-top: 14px;
143 display: inline-block;
144 }
145
146
147 .title {
148 display: flex;
149 justify-content: space-between;
150 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
151 padding: 18px 24px;
152 font-size: 20px;
153 }
154
155
156 .func-input {
157 display: flex;
158 align-items: center;
159 /* justify-content: space-between; */
160 padding: 18px 24px 0px 24px;
161 font-size: 18px;
162 cursor: pointer;
163 }
164
165 .func {
166 padding: 18px 24px;
167 }
168
169
170
171 .func-btn {
172 display: flex;
173 padding: 18px 24px 44px 24px;
174 align-items: center;
175 font-size: 18px;
176 cursor: pointer;
177 }
178
179 .btn-wrapper {
180 display: flex;
181 align-items: center;
182 width: 190px;
183 height: 36px;
184 background-image: url('../assets/弹窗按钮背景-默认.png');
185 background-size: 100% 100%;
186 background-repeat: no-repeat;
187 line-height: 36px;
188 }
189
190 .add-bg {
191 background-image: url('../assets/弹窗按钮背景-选中.png');
192 }
193
194
195 .btn-wrapper2 {
196 display: flex;
197 align-items: center;
198 width: 116px;
199 height: 38px;
200 background-image: url('../assets/一张图/bg_专题分析.png');
201 background-size: 100% 100%;
202 background-repeat: no-repeat;
203 text-align: center;
204 line-height: 38px;
205 margin-left: 13px;
206 }
207
208 .add-bg2 {
209 background-image: url('../assets/一张图/bg_资源目录.png');
210 }
211
212 .close {
213 cursor: pointer;
214 }
215
216 .center {
217 display: inline-block;
218 width: 100%;
219 height: 100%;
220 text-align: center;
221 }
222
223 .text-right {
224 display: inline-block;
225 width: 90px;
226 text-align: right;
227 font-size: 18px;
228 }
229
230 >>>input::-webkit-input-placeholder {
231 font-size: 16px;
232 color: rgba(255, 255, 255, 0.78) !important;
233 }
234
235 >>>.el-input__inner {
236 background: rgba(4, 10, 10, 0.58) !important;
237 border: 1px solid rgba(23, 34, 38, 0.57);
238 color: #fff;
239 }
240
241 >>>.el-input__suffix {
242 color: #fff;
243 font-size: 17px;
244 }
245
246 >>>.el-input-number__increase,
247 >>>.el-input-number__decrease {
248 background: rgba(4, 10, 10, 0.58);
249 }
250
251 >>>.el-input-number.is-controls-right .el-input-number__decrease,
252 >>>.el-input-number__increase {
253 border-left: 1px solid rgba(4, 10, 10, 0.58);
254 }
255
256 >>>.el-icon-arrow-up:before,
257 >>>.el-icon-arrow-down:before {
258 color: #fff;
259 }
260
261 >>>.el-input-number.is-controls-right .el-input-number__increase {
262 border-bottom: 1px solid rgba(4, 10, 10, 0.58);
263 }
264 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 <div class="wrapper">
4 <div class="box">
5 </div>
6 </div>
7 <div class="mian">
8 <div class="title">
9 <span>控高分析</span>
10 <span @click="closePop" class="close">×</span>
11 </div>
12 <div class="func-btn">
13 <div class="btn-wrapper add-bg" @click="startAnalysis">
14 <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
15 <span>开始分析</span>
16 </div>
17 <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
18 <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
19 <span>清除分析结果</span>
20 </div>
21 </div>
22 <div class="kg-img">
23 <div class="kg-box">
24 <img :src="src" alt="" style="width: 100%; height: 100%;">
25 <div class="btn-wrapper2">
26 <span class="center">左侧立面</span>
27 </div>
28 </div>
29 <div class="kg-box">
30 <img :src="src" alt="" style="width: 100%; height: 100%;">
31 <div class="btn-wrapper2">
32 <span class="center">右侧立面</span>
33 </div>
34 </div>
35 </div>
36
37 </div>
38 </div>
39 </template>
40
41 <script>
42 export default {
43 name: 'kgAnalusis',
44 components: {},
45 data() {
46 return {
47 src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3820738330,1510784229&fm=26&gp=0.jpg'
48 }
49 },
50 mounted() {},
51 methods: {
52 closePop() {
53 this.$emit('closePop', 'kgAnalusis')
54 },
55 startAnalysis() {
56
57 },
58 stopAnalysis() {
59
60 },
61 }
62 }
63 </script>
64
65 <style scoped>
66 .container {
67 position: relative;
68 color: #fff;
69 font-size: 16px;
70 width: 450px;
71 }
72
73 .wrapper {
74 position: absolute;
75 width: 100%;
76 height: 100%;
77 z-index: 1;
78 border: 1px solid rgba(151, 151, 151, 0.58);
79 }
80
81 .box {
82 background: rgba(4, 10, 10, 0.58);
83 box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
84 /* filter: blur(10px); */
85 height: 100px;
86 position: absolute;
87 width: 100%;
88 height: 100%;
89 z-index: 1;
90 }
91
92 .mian {
93 position: relative;
94 width: 100%;
95 height: 100%;
96 z-index: 1000;
97 }
98
99 .list-box span:nth-of-type(1) {
100 display: inline-block;
101 width: 98px;
102 margin-right: 20px;
103 color: rgba(255, 255, 255, .7);
104 }
105
106 .list-box span:nth-of-type(2) {
107 margin-top: 14px;
108 display: inline-block;
109 }
110
111
112 .title {
113 display: flex;
114 justify-content: space-between;
115 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
116 padding: 18px 24px;
117 font-size: 20px;
118 }
119
120
121 .func-input {
122 display: flex;
123 align-items: center;
124 /* justify-content: space-between; */
125 padding: 18px 24px 0px 24px;
126 font-size: 18px;
127 cursor: pointer;
128 }
129
130 .func {
131 padding: 18px 24px;
132 }
133
134
135
136 .func-btn {
137 display: flex;
138 padding: 18px 24px 30px 24px;
139 align-items: center;
140 font-size: 18px;
141 cursor: pointer;
142 }
143
144 .btn-wrapper {
145 display: flex;
146 align-items: center;
147 width: 190px;
148 height: 36px;
149 background-image: url('../assets/弹窗按钮背景-默认.png');
150 background-size: 100% 100%;
151 background-repeat: no-repeat;
152 line-height: 36px;
153 }
154
155 .add-bg {
156 background-image: url('../assets/弹窗按钮背景-选中.png');
157 }
158
159
160 .btn-wrapper2 {
161 position: absolute;
162 top: 12px;
163 right: 24px;
164 display: flex;
165 align-items: center;
166 width: 116px;
167 height: 38px;
168 background-image: url('../assets/一张图/bg_专题分析.png');
169 background-size: 100% 100%;
170 background-repeat: no-repeat;
171 text-align: center;
172 line-height: 38px;
173 margin-left: 13px;
174 }
175
176 .add-bg2 {
177 background-image: url('../assets/一张图/bg_资源目录.png');
178 }
179
180 .close {
181 cursor: pointer;
182 }
183
184 .center {
185 display: inline-block;
186 width: 100%;
187 height: 100%;
188 text-align: center;
189 }
190
191 .text-right {
192 display: inline-block;
193 width: 90px;
194 text-align: right;
195 font-size: 18px;
196 }
197
198 .kg-img {
199 width: 410px;
200 padding: 0px 24px 0px 24px;
201 padding-bottom: 10px;
202 }
203
204 .kg-box {
205 width: 100%;
206 height: 180px;
207 position: relative;
208 margin-bottom: 20px;
209 }
210
211 >>>input::-webkit-input-placeholder {
212 font-size: 16px;
213 color: rgba(255, 255, 255, 0.78) !important;
214 }
215
216 >>>.el-input__inner {
217 background: rgba(4, 10, 10, 0.58) !important;
218 border: 1px solid rgba(23, 34, 38, 0.57);
219 color: #fff;
220 }
221
222 >>>.el-input__suffix {
223 color: #fff;
224 font-size: 17px;
225 }
226
227 >>>.el-input-number__increase,
228 >>>.el-input-number__decrease {
229 background: rgba(4, 10, 10, 0.58);
230 }
231
232 >>>.el-input-number.is-controls-right .el-input-number__decrease,
233 >>>.el-input-number__increase {
234 border-left: 1px solid rgba(4, 10, 10, 0.58);
235 }
236
237 >>>.el-icon-arrow-up:before,
238 >>>.el-icon-arrow-down:before {
239 color: #fff;
240 }
241
242 >>>.el-input-number.is-controls-right .el-input-number__increase {
243 border-bottom: 1px solid rgba(4, 10, 10, 0.58);
244 }
245 </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 <div class="wrapper">
4 <div class="box">
5 </div>
6 </div>
7 <div class="mian">
3 <div class="list-box"> 8 <div class="list-box">
4 <span>规划项目</span> 9 <span>规划项目</span>
5 <span>综合楼</span> 10 <span>综合楼</span>
...@@ -25,6 +30,7 @@ ...@@ -25,6 +30,7 @@
25 <span>0</span> 30 <span>0</span>
26 </div> 31 </div>
27 </div> 32 </div>
33 </div>
28 </template> 34 </template>
29 35
30 <script> 36 <script>
...@@ -32,8 +38,7 @@ ...@@ -32,8 +38,7 @@
32 name: 'mapPop', 38 name: 'mapPop',
33 components: {}, 39 components: {},
34 data() { 40 data() {
35 return { 41 return {}
36 }
37 }, 42 },
38 mounted() {}, 43 mounted() {},
39 methods: { 44 methods: {
...@@ -44,21 +49,45 @@ ...@@ -44,21 +49,45 @@
44 49
45 <style scoped> 50 <style scoped>
46 .container { 51 .container {
52 position: relative;
47 color: #fff; 53 color: #fff;
54 font-size: 16px;
55 }
56
57 .wrapper {
58 position: absolute;
59 width: 100%;
60 height: 100%;
61 z-index: 1;
62 }
63
64 .box {
48 background: rgba(4, 10, 10, 0.57); 65 background: rgba(4, 10, 10, 0.57);
49 box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50); 66 box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50);
67 /* filter: blur(10px); */
68 height: 100px;
69 position: absolute;
70 width: 100%;
71 height: 100%;
72 z-index: 1;
73 }
74
75 .mian {
76 position: relative;
50 padding: 4px 14px 14px 14px; 77 padding: 4px 14px 14px 14px;
51 font-size: 16px; 78 width: 100%;
79 height: 100%;
80 z-index: 1000;
52 } 81 }
53 82
54 .list-box span:nth-of-type(1){ 83 .list-box span:nth-of-type(1) {
55 display: inline-block; 84 display: inline-block;
56 width: 98px; 85 width: 98px;
57 margin-right: 20px; 86 margin-right: 20px;
58 color: rgba(255, 255, 255, .7); 87 color: rgba(255, 255, 255, .7);
59 } 88 }
60 89
61 .list-box span:nth-of-type(2){ 90 .list-box span:nth-of-type(2) {
62 margin-top: 14px; 91 margin-top: 14px;
63 display: inline-block; 92 display: inline-block;
64 } 93 }
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 <div> 3 <div>
4 <div class="func-ico" :class="[isReturn?'selected':'']" @click="handleReturn()"> 4 <div class="func-ico" :class="[isReturn?'selected':'']" @click="handleReturn('isReturn')">
5 <el-tooltip class="item" effect="dark" content="复位" placement="left">
5 <img src="../assets/一张图/icon_复位.png" alt=""> 6 <img src="../assets/一张图/icon_复位.png" alt="">
7 </el-tooltip>
6 </div> 8 </div>
7 <div class="func-ico" :class="[enlarge?'selected':'']" @click="handleEnlarge()"> 9 <div class="func-ico" :class="[enlarge?'selected':'']" @click="handleEnlarge('enlarge')">
10 <el-tooltip class="item" effect="dark" content="放大" placement="left">
8 <img src="../assets/一张图/icon_放大.png" alt=""> 11 <img src="../assets/一张图/icon_放大.png" alt="">
12 </el-tooltip>
9 </div> 13 </div>
10 <div class="func-ico" :class="[narrow?'selected':'']" @click="handleNarrow()"> 14 <div class="func-ico" :class="[narrow?'selected':'']" @click="handleNarrow('narrow')">
15 <el-tooltip class="item" effect="dark" content="缩小" placement="left">
11 <img src="../assets/一张图/icon_缩小.png" alt=""> 16 <img src="../assets/一张图/icon_缩小.png" alt="">
17 </el-tooltip>
12 </div> 18 </div>
13 <div class="func-ico" :class="[coordinate?'selected':'']" @click="handleCoordinate()"> 19 <div class="func-ico" :class="[coordinate?'selected':'']" @click="handleCoordinate('coordinate')">
20 <el-tooltip class="item" effect="dark" content="坐标" placement="left">
14 <img src="../assets/一张图/icon_坐标.png" alt=""> 21 <img src="../assets/一张图/icon_坐标.png" alt="">
22 </el-tooltip>
15 </div> 23 </div>
16 <div class="func-ico" :class="[distance?'selected':'']" @click="handleDistance()"> 24 <div class="func-ico" :class="[distance?'selected':'']" @click="handleDistance('distance')">
25 <el-tooltip class="item" effect="dark" content="距离" placement="left">
17 <img src="../assets/一张图/icon_距离.png" alt=""> 26 <img src="../assets/一张图/icon_距离.png" alt="">
27 </el-tooltip>
18 </div> 28 </div>
19 29
20 <div class="func-ico" :class="[area?'selected':'']" @click="handleArea()"> 30 <div class="func-ico" :class="[area?'selected':'']" @click="handleArea('area')">
31 <el-tooltip class="item" effect="dark" content="面积" placement="left">
21 <img src="../assets/一张图/icon_面积.png" alt=""> 32 <img src="../assets/一张图/icon_面积.png" alt="">
33 </el-tooltip>
22 </div> 34 </div>
23 <div class="func-ico" :class="[marker?'selected':'']" @click="handleMarker()"> 35 <div class="func-ico" :class="[marker?'selected':'']" @click="handleMarker('marker')">
36 <el-tooltip class="item" effect="dark" content="标注" placement="left">
24 <img src="../assets/一张图/icon_标注.png" alt=""> 37 <img src="../assets/一张图/icon_标注.png" alt="">
38 </el-tooltip>
25 </div> 39 </div>
26 <div class="func-ico" :class="[rollerShutter?'selected':'']" @click="handleRollerShutter()"> 40 <div class="func-ico" :class="[rollerShutter?'selected':'']" @click="handleRollerShutter('rollerShutter')">
41 <el-tooltip class="item" effect="dark" content="卷帘" placement="left">
27 <img src="../assets/一张图/icon_卷帘.png" alt=""> 42 <img src="../assets/一张图/icon_卷帘.png" alt="">
43 </el-tooltip>
28 </div> 44 </div>
29 <div class="func-ico" :class="[splitScreen?'selected':'']" @click="handleSplitScreen()"> 45 <div class="func-ico" :class="[splitScreen?'selected':'']" @click="handleSplitScreen('splitScreen')">
46 <el-tooltip class="item" effect="dark" content="分屏" placement="left">
30 <img src="../assets/一张图/icon_分屏.png" alt=""> 47 <img src="../assets/一张图/icon_分屏.png" alt="">
48 </el-tooltip>
31 </div> 49 </div>
32 <div class="func-ico" :class="[toNorth?'selected':'']" @click="handleToNorth()"> 50 <div class="func-ico" :class="[toNorth?'selected':'']" @click="handleToNorth('toNorth')">
51 <el-tooltip class="item" effect="dark" content="指北" placement="left">
33 <img src="../assets/一张图/icon_指北.png" alt=""> 52 <img src="../assets/一张图/icon_指北.png" alt="">
53 </el-tooltip>
34 </div> 54 </div>
35 55
36 <div class="func-ico" :class="[topSee?'selected':'']" @click="handleTopSee()"> 56 <div class="func-ico" :class="[topSee?'selected':'']" @click="handleTopSee('topSee')">
57 <el-tooltip class="item" effect="dark" content="顶视" placement="left">
37 <img src="../assets/一张图/icon_顶视.png" alt=""> 58 <img src="../assets/一张图/icon_顶视.png" alt="">
59 </el-tooltip>
38 </div> 60 </div>
39 <div class="func-ico" :class="[roundSee?'selected':'']" @click="handleRoundSee()"> 61 <div class="func-ico" :class="[roundSee?'selected':'']" @click="handleRoundSee('roundSee')">
62 <el-tooltip class="item" effect="dark" content="环视" placement="left">
40 <img src="../assets/一张图/icon_环视.png" alt=""> 63 <img src="../assets/一张图/icon_环视.png" alt="">
64 </el-tooltip>
41 </div> 65 </div>
42 <div class="func-ico" :class="[horizon?'selected':'']" @click="handleHorizon()"> 66
43 <img src="../assets/一张图/icon_视域.png" alt=""> 67 <div class="func-ico" :class="[allSee?'selected':'']" @click="handleAllSee('allSee')">
68 <el-tooltip class="item" effect="dark" content="通视" placement="left">
69 <img src="../assets/一张图/icon_通视.png" alt="">
70 </el-tooltip>
71 </div>
72
73
74 <!--以下都未设计图片 -->
75 <!--淹没分析 -->
76 <div class="func-ico" :class="[ymAnslysis?'selected':'']" @click="handleymAnslysis('ymAnslysis')">
77 <el-tooltip class="item" effect="dark" content="淹没" placement="left">
78 <img src="../assets/一张图/icon_通视.png" alt="">
79 </el-tooltip>
80 </div>
81
82
83 <!--阴影分析 -->
84 <div class="func-ico" :class="[yyAnslysis?'selected':'']" @click="handleyyAnslysis('yyAnslysis')">
85 <el-tooltip class="item" effect="dark" content="阴影" placement="left">
86 <img src="../assets/一张图/icon_通视.png" alt="">
87 </el-tooltip>
44 </div> 88 </div>
89 <!--控高分析 -->
90 <div class="func-ico" :class="[kgAnalusis?'selected':'']" @click="handlekgAnalusis('kgAnalusis')">
45 91
46 <div class="func-ico" :class="[allSee?'selected':'']" @click="handleAllSee()"> 92 <el-tooltip class="item" effect="dark" content="控高" placement="left">
47 <img src="../assets/一张图/icon_通视.png" alt=""> 93 <img src="../assets/一张图/icon_通视.png" alt="">
94 </el-tooltip>
48 </div> 95 </div>
49 96
97 <!--天际线分析 -->
98 <div class="func-ico" :class="[tjxAnslysis?'selected':'']" @click="handletjxAnslysis('tjxAnslysis')">
99 <el-tooltip class="item" effect="dark" content="天际线" placement="left">
100 <img src="../assets/一张图/icon_通视.png" alt="">
101 </el-tooltip>
102 </div>
103
104
50 <!-- <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()"> 105 <!-- <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
51 <img src="../assets/toolbar_icon_ 展开.png" alt=""> 106 <img src="../assets/toolbar_icon_ 展开.png" alt="">
52 </div> --> 107 </div> -->
...@@ -59,72 +114,73 @@ ...@@ -59,72 +114,73 @@
59 export default { 114 export default {
60 name: 'rightFunc', 115 name: 'rightFunc',
61 components: {}, 116 components: {},
117 props: ['isReturn', 'enlarge', 'narrow', 'coordinate', 'distance',
118 'area', 'marker', 'rollerShutter', 'splitScreen', 'toNorth',
119 'topSee', 'roundSee', 'horizon', 'allSee','ymAnslysis',
120 'tjxAnslysis', 'yyAnslysis', 'kgAnalusis'
121 ],
62 data() { 122 data() {
63 return { 123 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 }, 124 },
82 mounted() {}, 125 mounted() {},
83 methods: { 126 methods: {
84 handleReturn() { 127 handleReturn(val) {
85 this.$emit('isReturn', this.isReturn); 128 this.$emit('isReturn', val, this.isReturn);
86 }, 129 },
87 handleEnlarge() { 130 handleEnlarge(val) {
88 this.$emit('enlarge', this.enlarge); 131 this.$emit('enlarge', val, this.enlarge);
89 }, 132 },
90 handleNarrow() { 133 handleNarrow(val) {
91 this.$emit('narrow', this.narrow); 134 this.$emit('narrow', val, this.narrow);
92 }, 135 },
93 handleCoordinate() { 136 handleCoordinate(val) {
94 this.$emit('coordinate', this.coordinate); 137 this.$emit('coordinate', val, this.coordinate);
95 }, 138 },
96 handleDistance() { 139 handleDistance(val) {
97 this.$emit('distance', this.distance); 140 this.$emit('distance', val, this.distance);
98 }, 141 },
99 142
100 handleArea() { 143 handleArea(val) {
101 this.$emit('area', this.area); 144 this.$emit('area', val, this.area);
102 }, 145 },
103 handleMarker() { 146 handleMarker(val) {
104 this.$emit('marker', this.marker); 147 this.$emit('marker', val, this.marker);
105 }, 148 },
106 handleRollerShutter() { 149 handleRollerShutter(val) {
107 this.$emit('rollerShutter', this.rollerShutter); 150 this.$emit('rollerShutter', val, this.rollerShutter);
108 }, 151 },
109 handleSplitScreen() { 152 handleSplitScreen(val) {
110 this.$emit('splitScreen', this.splitScreen); 153 this.$emit('splitScreen', val, this.splitScreen);
111 }, 154 },
112 handleToNorth() { 155 handleToNorth(val) {
113 this.$emit('toNorth', this.toNorth); 156 this.$emit('toNorth', val, this.toNorth);
114 }, 157 },
115 158
116 handleTopSee() { 159 handleTopSee(val) {
117 this.$emit('topSee', this.topSee); 160 this.$emit('topSee', val, this.topSee);
118 }, 161 },
119 handleRoundSee() { 162 handleRoundSee(val) {
120 this.$emit('roundSee', this.roundSee); 163 this.$emit('roundSee', val, this.roundSee);
121 }, 164 },
122 handleHorizon() { 165 handleHorizon(val) {
123 this.$emit('horizon', this.horizon); 166 this.$emit('horizon', val, this.horizon);
124 }, 167 },
125 handleAllSee() { 168 handleAllSee(val) {
126 this.$emit('allSee', this.allSee); 169 this.$emit('allSee', val, this.allSee);
127 }, 170 },
171
172 handleymAnslysis(val) {
173 this.$emit('ymAnslysis', val, this.ymAnslysis);
174 },
175 handletjxAnslysis(val) {
176 this.$emit('tjxAnslysis', val, this.tjxAnslysis);
177 },
178 handleyyAnslysis(val) {
179 this.$emit('yyAnslysis', val, this.yyAnslysis);
180 },
181 handlekgAnalusis(val) {
182 this.$emit('kgAnalusis', val, this.kgAnalusis);
183 }
128 } 184 }
129 } 185 }
130 </script> 186 </script>
......
1 <template>
2 <div class="container">
3 <div class="wrapper">
4 <div class="box">
5 </div>
6 </div>
7 <div class="mian">
8 <div class="title">
9 <span>天际线分析</span>
10 <span @click="closePop" class="close">×</span>
11 </div>
12 <div class="func-btn">
13 <div class="btn-wrapper add-bg" @click="startAnalysis">
14 <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
15 <span>绘制观察线</span>
16 </div>
17 <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
18 <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_绘制观察线.png" alt="">
19 <span>清除分析结果</span>
20 </div>
21 </div>
22
23 </div>
24 </div>
25 </template>
26
27 <script>
28 export default {
29 name: 'tjxAnslysis',
30 components: {},
31 data() {
32 return {
33
34 }
35 },
36 mounted() {},
37 methods: {
38 closePop() {
39 this.$emit('closePop', 'tjxAnslysis')
40 },
41 startAnalysis() {
42
43 },
44 stopAnalysis() {
45
46 },
47 }
48 }
49 </script>
50
51 <style scoped>
52 .container {
53 position: relative;
54 color: #fff;
55 font-size: 16px;
56 width: 450px;
57 }
58
59 .wrapper {
60 position: absolute;
61 width: 100%;
62 height: 100%;
63 z-index: 1;
64 border: 1px solid rgba(151, 151, 151, 0.58);
65 }
66
67 .box {
68 background: rgba(4, 10, 10, 0.58);
69 box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
70 /* filter: blur(10px); */
71 height: 100px;
72 position: absolute;
73 width: 100%;
74 height: 100%;
75 z-index: 1;
76 }
77
78 .mian {
79 position: relative;
80 width: 100%;
81 height: 100%;
82 z-index: 1000;
83 }
84
85 .list-box span:nth-of-type(1) {
86 display: inline-block;
87 width: 98px;
88 margin-right: 20px;
89 color: rgba(255, 255, 255, .7);
90 }
91
92 .list-box span:nth-of-type(2) {
93 margin-top: 14px;
94 display: inline-block;
95 }
96
97
98 .title {
99 display: flex;
100 justify-content: space-between;
101 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
102 padding: 18px 24px;
103 font-size: 20px;
104 }
105
106
107 .func-input {
108 display: flex;
109 align-items: center;
110 /* justify-content: space-between; */
111 padding: 18px 24px 0px 24px;
112 font-size: 18px;
113 cursor: pointer;
114 }
115
116 .func {
117 padding: 18px 24px;
118 }
119
120
121
122 .func-btn {
123 display: flex;
124 padding: 18px 24px 44px 24px;
125 align-items: center;
126 font-size: 18px;
127 cursor: pointer;
128 }
129
130 .btn-wrapper {
131 display: flex;
132 align-items: center;
133 width: 190px;
134 height: 36px;
135 background-image: url('../assets/弹窗按钮背景-默认.png');
136 background-size: 100% 100%;
137 background-repeat: no-repeat;
138 line-height: 36px;
139 }
140
141 .add-bg {
142 background-image: url('../assets/弹窗按钮背景-选中.png');
143 }
144
145
146 .btn-wrapper2 {
147 display: flex;
148 align-items: center;
149 width: 116px;
150 height: 38px;
151 background-image: url('../assets/一张图/bg_专题分析.png');
152 background-size: 100% 100%;
153 background-repeat: no-repeat;
154 text-align: center;
155 line-height: 38px;
156 margin-left: 13px;
157 }
158
159 .add-bg2 {
160 background-image: url('../assets/一张图/bg_资源目录.png');
161 }
162
163 .close {
164 cursor: pointer;
165 }
166
167 .center {
168 display: inline-block;
169 width: 100%;
170 height: 100%;
171 text-align: center;
172 }
173
174 .text-right {
175 display: inline-block;
176 width: 90px;
177 text-align: right;
178 font-size: 18px;
179 }
180
181 >>>input::-webkit-input-placeholder {
182 font-size: 16px;
183 color: rgba(255, 255, 255, 0.78) !important;
184 }
185
186 >>>.el-input__inner {
187 background: rgba(4, 10, 10, 0.58) !important;
188 border: 1px solid rgba(23, 34, 38, 0.57);
189 color: #fff;
190 }
191
192 >>>.el-input__suffix {
193 color: #fff;
194 font-size: 17px;
195 }
196
197 >>>.el-input-number__increase,
198 >>>.el-input-number__decrease {
199 background: rgba(4, 10, 10, 0.58);
200 }
201
202 >>>.el-input-number.is-controls-right .el-input-number__decrease,
203 >>>.el-input-number__increase {
204 border-left: 1px solid rgba(4, 10, 10, 0.58);
205 }
206
207 >>>.el-icon-arrow-up:before,
208 >>>.el-icon-arrow-down:before {
209 color: #fff;
210 }
211
212 >>>.el-input-number.is-controls-right .el-input-number__increase {
213 border-bottom: 1px solid rgba(4, 10, 10, 0.58);
214 }
215 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 <div class="wrapper">
4 <div class="box">
5 </div>
6 </div>
7 <div class="mian">
8 <div class="title">
9 <span>淹没分析</span>
10 <span @click="closePop" class="close">×</span>
11 </div>
12
13 <div class="func-input">
14 <span>分析区域</span>
15 <div class="btn-wrapper2" :class="[isXmbj?'add-bg2': '']" @click="handleIsXmbj(true)">
16 <span class="center">项目边界</span>
17 </div>
18 <div class="btn-wrapper2" :class="[!isXmbj?'add-bg2': '']" @click="handleIsXmbj(false)">
19 <span class="center">绘制</span>
20 </div>
21 </div>
22
23 <div class="func-input">
24 <span>水底高程</span>
25 <el-input-number v-model="sdgc" controls-position="right"
26 style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000">
27 </el-input-number>
28 <span style="margin-left: 12px;">米</span>
29 </div>
30
31 <div class="func-input">
32 <span>水位深度</span>
33 <el-input-number v-model="swsd" controls-position="right"
34 style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000">
35 </el-input-number>
36 <span style="margin-left: 12px;">米</span>
37 </div>
38 <div class="func-input">
39 <span>淹没速度</span>
40 <el-input-number v-model="ymsd" controls-position="right"
41 style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000">
42 </el-input-number>
43 <span style="margin-left: 12px;">米</span>
44 </div>
45
46 <div class="func-input">
47 <span>当前水位</span>
48 <span style="margin-left: 36px;">1263.7米</span>
49 </div>
50 <div class="func-btn">
51 <div class="btn-wrapper add-bg" @click="startAnalysis">
52 <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
53 <span>开始分析</span>
54 </div>
55 <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
56 <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_暂停分析.png" alt="">
57 <span>暂停分析</span>
58 </div>
59 </div>
60
61 </div>
62 </div>
63 </template>
64
65 <script>
66 export default {
67 name: 'allSee',
68 components: {},
69 data() {
70 return {
71 step: 0.01,
72 num: 1,
73 sdgc: '', // 水底高程
74 swsd: '', // 水位深度
75 ymsd: '', // 淹没速度
76
77
78 isXmbj: true,
79 // isAnalysis: true
80 }
81 },
82 mounted() {},
83 methods: {
84 closePop() {
85 this.$emit('closePop', 'ymAnslysis')
86 },
87 handleChange() {
88
89 },
90 startAnalysis() {
91 // this.isAnalysis = true;
92 },
93 stopAnalysis() {
94 // this.isAnalysis = false;
95 },
96 handleIsXmbj(flag) {
97 this.isXmbj = flag;
98 }
99 }
100 }
101 </script>
102
103 <style scoped>
104 .container {
105 position: relative;
106 color: #fff;
107 font-size: 16px;
108 width: 450px;
109 }
110
111 .wrapper {
112 position: absolute;
113 width: 100%;
114 height: 100%;
115 z-index: 1;
116 border: 1px solid rgba(151, 151, 151, 0.58);
117 }
118
119 .box {
120 background: rgba(4, 10, 10, 0.58);
121 box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
122 /* filter: blur(10px); */
123 height: 100px;
124 position: absolute;
125 width: 100%;
126 height: 100%;
127 z-index: 1;
128 }
129
130 .mian {
131 position: relative;
132 width: 100%;
133 height: 100%;
134 z-index: 1000;
135 }
136
137 .list-box span:nth-of-type(1) {
138 display: inline-block;
139 width: 98px;
140 margin-right: 20px;
141 color: rgba(255, 255, 255, .7);
142 }
143
144 .list-box span:nth-of-type(2) {
145 margin-top: 14px;
146 display: inline-block;
147 }
148
149
150 .title {
151 display: flex;
152 justify-content: space-between;
153 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
154 padding: 18px 24px;
155 font-size: 20px;
156 }
157
158
159 .func-input {
160 display: flex;
161 align-items: center;
162 /* justify-content: space-between; */
163 padding: 18px 24px 0px 24px;
164 font-size: 18px;
165 cursor: pointer;
166 }
167
168 .func {
169 padding: 18px 24px;
170 }
171
172
173
174 .func-btn {
175 display: flex;
176 padding: 18px 24px 44px 24px;
177 align-items: center;
178 font-size: 18px;
179 cursor: pointer;
180 }
181
182 .btn-wrapper {
183 display: flex;
184 align-items: center;
185 width: 190px;
186 height: 36px;
187 background-image: url('../assets/弹窗按钮背景-默认.png');
188 background-size: 100% 100%;
189 background-repeat: no-repeat;
190 line-height: 36px;
191 }
192
193 .add-bg {
194 background-image: url('../assets/弹窗按钮背景-选中.png');
195 }
196
197
198 .btn-wrapper2 {
199 display: flex;
200 align-items: center;
201 width: 116px;
202 height: 38px;
203 background-image: url('../assets/一张图/bg_专题分析.png');
204 background-size: 100% 100%;
205 background-repeat: no-repeat;
206 text-align: center;
207 line-height: 38px;
208 margin-left: 13px;
209 }
210
211 .add-bg2 {
212 background-image: url('../assets/一张图/bg_资源目录.png');
213 }
214
215 .close {
216 cursor: pointer;
217 }
218
219 .center {
220 display: inline-block;
221 width: 100%;
222 height: 100%;
223 text-align: center;
224 }
225
226 >>>input::-webkit-input-placeholder {
227 font-size: 16px;
228 color: rgba(255, 255, 255, 0.78) !important;
229 }
230
231 >>>.el-input__inner {
232 background: rgba(4, 10, 10, 0.58) !important;
233 border: 1px solid rgba(23, 34, 38, 0.57);
234 color: #fff;
235 }
236
237 >>>.el-input__suffix {
238 color: #fff;
239 font-size: 17px;
240 }
241
242 >>>.el-input-number__increase,
243 >>>.el-input-number__decrease {
244 background: rgba(4, 10, 10, 0.58);
245 }
246
247 >>>.el-input-number.is-controls-right .el-input-number__decrease,
248 >>>.el-input-number__increase {
249 border-left: 1px solid rgba(4, 10, 10, 0.58);
250 }
251
252 >>>.el-icon-arrow-up:before,
253 >>>.el-icon-arrow-down:before {
254 color: #fff;
255 }
256
257 >>>.el-input-number.is-controls-right .el-input-number__increase {
258 border-bottom: 1px solid rgba(4, 10, 10, 0.58);
259 }
260 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="container">
3 <div class="wrapper">
4 <div class="box">
5 </div>
6 </div>
7 <div class="mian">
8 <div class="title">
9 <span>阴影分析</span>
10 <span @click="closePop" class="close">×</span>
11 </div>
12 <div class="func-btn">
13 <div class="btn-wrapper add-bg" @click="startAnalysis">
14 <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt="">
15 <span>开始分析</span>
16 </div>
17 <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;">
18 <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt="">
19 <span>清除分析结果</span>
20 </div>
21 </div>
22
23 </div>
24 </div>
25 </template>
26
27 <script>
28 export default {
29 name: 'yyAnslysis',
30 components: {},
31 data() {
32 return {
33
34 }
35 },
36 mounted() {},
37 methods: {
38 closePop() {
39 this.$emit('closePop', 'yyAnslysis')
40 },
41 startAnalysis() {
42
43 },
44 stopAnalysis() {
45
46 },
47 }
48 }
49 </script>
50
51 <style scoped>
52 .container {
53 position: relative;
54 color: #fff;
55 font-size: 16px;
56 width: 450px;
57 }
58
59 .wrapper {
60 position: absolute;
61 width: 100%;
62 height: 100%;
63 z-index: 1;
64 border: 1px solid rgba(151, 151, 151, 0.58);
65 }
66
67 .box {
68 background: rgba(4, 10, 10, 0.58);
69 box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5);
70 /* filter: blur(10px); */
71 height: 100px;
72 position: absolute;
73 width: 100%;
74 height: 100%;
75 z-index: 1;
76 }
77
78 .mian {
79 position: relative;
80 width: 100%;
81 height: 100%;
82 z-index: 1000;
83 }
84
85 .list-box span:nth-of-type(1) {
86 display: inline-block;
87 width: 98px;
88 margin-right: 20px;
89 color: rgba(255, 255, 255, .7);
90 }
91
92 .list-box span:nth-of-type(2) {
93 margin-top: 14px;
94 display: inline-block;
95 }
96
97
98 .title {
99 display: flex;
100 justify-content: space-between;
101 border-bottom: 1px solid rgba(255, 255, 255, 0.15);
102 padding: 18px 24px;
103 font-size: 20px;
104 }
105
106
107 .func-input {
108 display: flex;
109 align-items: center;
110 /* justify-content: space-between; */
111 padding: 18px 24px 0px 24px;
112 font-size: 18px;
113 cursor: pointer;
114 }
115
116 .func {
117 padding: 18px 24px;
118 }
119
120
121
122 .func-btn {
123 display: flex;
124 padding: 18px 24px 44px 24px;
125 align-items: center;
126 font-size: 18px;
127 cursor: pointer;
128 }
129
130 .btn-wrapper {
131 display: flex;
132 align-items: center;
133 width: 190px;
134 height: 36px;
135 background-image: url('../assets/弹窗按钮背景-默认.png');
136 background-size: 100% 100%;
137 background-repeat: no-repeat;
138 line-height: 36px;
139 }
140
141 .add-bg {
142 background-image: url('../assets/弹窗按钮背景-选中.png');
143 }
144
145
146 .btn-wrapper2 {
147 display: flex;
148 align-items: center;
149 width: 116px;
150 height: 38px;
151 background-image: url('../assets/一张图/bg_专题分析.png');
152 background-size: 100% 100%;
153 background-repeat: no-repeat;
154 text-align: center;
155 line-height: 38px;
156 margin-left: 13px;
157 }
158
159 .add-bg2 {
160 background-image: url('../assets/一张图/bg_资源目录.png');
161 }
162
163 .close {
164 cursor: pointer;
165 }
166
167 .center {
168 display: inline-block;
169 width: 100%;
170 height: 100%;
171 text-align: center;
172 }
173
174 .text-right {
175 display: inline-block;
176 width: 90px;
177 text-align: right;
178 font-size: 18px;
179 }
180
181 >>>input::-webkit-input-placeholder {
182 font-size: 16px;
183 color: rgba(255, 255, 255, 0.78) !important;
184 }
185
186 >>>.el-input__inner {
187 background: rgba(4, 10, 10, 0.58) !important;
188 border: 1px solid rgba(23, 34, 38, 0.57);
189 color: #fff;
190 }
191
192 >>>.el-input__suffix {
193 color: #fff;
194 font-size: 17px;
195 }
196
197 >>>.el-input-number__increase,
198 >>>.el-input-number__decrease {
199 background: rgba(4, 10, 10, 0.58);
200 }
201
202 >>>.el-input-number.is-controls-right .el-input-number__decrease,
203 >>>.el-input-number__increase {
204 border-left: 1px solid rgba(4, 10, 10, 0.58);
205 }
206
207 >>>.el-icon-arrow-up:before,
208 >>>.el-icon-arrow-down:before {
209 color: #fff;
210 }
211
212 >>>.el-input-number.is-controls-right .el-input-number__increase {
213 border-bottom: 1px solid rgba(4, 10, 10, 0.58);
214 }
215 </style>
...\ No newline at end of file ...\ No newline at end of file
1 西双版纳6日5晚游玩
2
3 西安-西双版纳-西安 住星光夜市附近
4
5 D1 去酒店放行李 女士休息，男士去取车 [剧场]傣秀 [恰饭] 星光夜市
6
7 D2 [游玩] 中科院西双版纳热带植物园 晚上返回酒店 休整后市区转转 恰饭
8
9 D3 [游玩] 野象谷，基诺山寨 晚上返回酒店 恰饭
10
11 D5 [游玩] 西双版纳热带雨林国家公园望天树景区。
12
13 D5 [游玩] 傣族园、 告庄西双景。
14
15 D6 想去哪里就去哪里
16
17 D7 还车，准备回家
18
19 主要费用
20 机票 西安 - 西双版纳 往返直飞 往返单人3200左右 3200 * 2 6400
21 住宿 两间 10.1~10.7 400 * 6 2400 * 1 4800
22 租车费用 400 每天 7 天 预计2800 （看app中每天送100油卡）
23
24 大约 两人： 6400 + 4800 + 1400 12600(两人)
...\ No newline at end of file ...\ No newline at end of file
...@@ -11,20 +11,43 @@ ...@@ -11,20 +11,43 @@
11 @searchRoat='searchRoat'></rightTopFunc> 11 @searchRoat='searchRoat'></rightTopFunc>
12 </div> 12 </div>
13 <div class="rightFunc"> 13 <div class="rightFunc">
14 <rightFunc @isReturn='isReturn' 14 <rightFunc @isReturn='EisReturn'
15 @enlarge='enlarge' 15 @enlarge='Eenlarge'
16 @narrow='narrow' 16 @narrow='narrow'
17 @coordinate='coordinate' 17 @coordinate='Ecoordinate'
18 @distance='distance' 18 @distance='Edistance'
19 @area='area' 19 @area='Earea'
20 @marker='marker' 20 @marker='Emarker'
21 @rollerShutter='rollerShutter' 21 @rollerShutter='ErollerShutter'
22 @splitScreen='splitScreen' 22 @splitScreen='EsplitScreen'
23 @toNorth='toNorth' 23 @toNorth='EtoNorth'
24 @topSee='topSee' 24 @topSee='EtopSee'
25 @roundSee='roundSee' 25 @roundSee='EroundSee'
26 @horizon='horizon' 26 @horizon='Ehorizon'
27 @allSee='allSee'></rightFunc> 27 @allSee='EallSee'
28
29 @ymAnslysis='EymAnslysis'
30 @tjxAnslysis='EtjxAnslysis'
31 @yyAnslysis='EyyAnslysis'
32 @kgAnalusis='EkgAnalusis'
33
34 :enlarge='enlarge'
35 :narrow='narrow'
36 :coordinate='coordinate'
37 :distance='distance'
38 :area='area'
39 :marker='marker'
40 :rollerShutter='rollerShutter'
41 :splitScreen='splitScreen'
42 :toNorth='toNorth'
43 :topSee='topSee'
44 :roundSee='roundSee'
45 :horizon='horizon'
46 :allSee='allSee'
47 :ymAnslysis='ymAnslysis'
48 :tjxAnslysis='tjxAnslysis'
49 :yyAnslysis='yyAnslysis'
50 :kgAnalusis='kgAnalusis'></rightFunc>
28 </div> 51 </div>
29 <div class="bottomNav"> 52 <div class="bottomNav">
30 <bottomNav></bottomNav> 53 <bottomNav></bottomNav>
...@@ -35,6 +58,30 @@ ...@@ -35,6 +58,30 @@
35 <div class="mapPop"> 58 <div class="mapPop">
36 <mapPop></mapPop> 59 <mapPop></mapPop>
37 </div> 60 </div>
61 <div class="allSee" v-if='allSee'>
62 <allSee @closePop='closePop'></allSee>
63 </div>
64
65 <div class="allSee" v-if='ymAnslysis'>
66 <ymAnslysis @closePop='closePop'></ymAnslysis>
67 </div>
68
69 <div class="allSee" v-if='horizon'>
70 <horizon @closePop='closePop'></horizon>
71 </div>
72
73 <div class="allSee" v-if='tjxAnslysis'>
74 <tjxAnslysis @closePop='closePop'></tjxAnslysis>
75 </div>
76 <div class="allSee" v-if='yyAnslysis'>
77 <yyAnslysis @closePop='closePop'></yyAnslysis>
78 </div>
79
80 <div class="allSee kg-anslysis" v-if='kgAnalusis'>
81 <kgAnalusis @closePop='closePop'></kgAnalusis>
82 </div>
83
84
38 <div id="cesiumContainer" style="width:100%;height:100%;"></div> 85 <div id="cesiumContainer" style="width:100%;height:100%;"></div>
39 <div id="cesiumContainer"> 86 <div id="cesiumContainer">
40 <div class="" ref="slider"></div> 87 <div class="" ref="slider"></div>
...@@ -55,6 +102,12 @@ ...@@ -55,6 +102,12 @@
55 import leftAssert from '../components/leftAssert'; 102 import leftAssert from '../components/leftAssert';
56 import mapPop from '../components/mapPop'; 103 import mapPop from '../components/mapPop';
57 104
105 import allSee from '../components/allSee'; //通视
106 import ymAnslysis from '../components/ymAnslysis'; //淹没分析
107 import horizon from '../components/horizon'; // 视域分析
108 import tjxAnslysis from '../components/tjxAnslysis'; // 天际线分析
109 import yyAnslysis from '../components/yyAnslysis'; // 阴影分析
110 import kgAnalusis from '../components/kgAnalusis'; // 控高分析
58 111
59 export default { 112 export default {
60 components: { 113 components: {
...@@ -63,14 +116,44 @@ ...@@ -63,14 +116,44 @@
63 rightFunc, 116 rightFunc,
64 bottomNav, 117 bottomNav,
65 leftAssert, 118 leftAssert,
66 mapPop 119 mapPop,
120
121 allSee,
122 ymAnslysis,
123 horizon,
124 tjxAnslysis,
125 yyAnslysis,
126 kgAnalusis,
67 }, 127 },
68 data() { 128 data() {
69 return { 129 return {
70 viewer: undefined, 130 viewer: undefined,
71 entity: undefined, 131 entity: undefined,
72 devTypes: ['point', 'polyline', 'polygon'], 132 devTypes: ['point', 'polyline', 'polygon'],
73 roll: {r: undefined, b: false} 133 roll: {r: undefined, b: false},
134
135 isReturn: false, // 复位
136 enlarge: false, // 放大
137 narrow: false, // 缩小
138 coordinate: false, // 坐标
139 distance: false, // 距离
140 area: false, // 面积
141 marker: false, // 标记
142 rollerShutter: false, // 卷帘
143 splitScreen: false, // 分屏
144 toNorth: false, // 指北
145 topSee: false, // 顶视
146 roundSee: false, // 环视
147 horizon: false, // 视域
148 allSee: false, // 通视
149 ymAnslysis: false, // 淹没分析
150 tjxAnslysis: false, // 天际线分析
151 yyAnslysis: false, // 阴影分析
152 kgAnalusis: false, // 控高分析
153 keepArr: ['isReturn', 'enlarge', 'narrow', 'coordinate', 'distance',
154 'area', 'marker', 'rollerShutter', 'splitScreen', 'toNorth',
155 'topSee', 'roundSee', 'horizon', 'allSee', 'ymAnslysis',
156 'tjxAnslysis', 'yyAnslysis', 'kgAnalusis']
74 } 157 }
75 }, 158 },
76 mounted() { 159 mounted() {
...@@ -157,29 +240,29 @@ ...@@ -157,29 +240,29 @@
157 240
158 // rightFunc 241 // rightFunc
159 // 复位 242 // 复位
160 ,isReturn(val) {} 243 ,EisReturn(val) {}
161 // 放大 244 // 放大
162 ,enlarge() { 245 ,Eenlarge() {
163 this.viewer.camera.zoomIn(300); 246 this.viewer.camera.zoomIn(300);
164 } 247 }
165 // 缩小 248 // 缩小
166 ,narrow() { 249 ,EEnarrow() {
167 this.viewer.camera.zoomOut(300); 250 this.viewer.camera.zoomOut(300);
168 } 251 }
169 // 坐标 252 // 坐标
170 ,coordinate() { 253 ,Ecoordinate() {
171 254
172 } 255 }
173 // 距离 256 // 距离
174 ,distance(val) { 257 ,Edistance(val) {
175 new measureTools.measureTools(this.viewer).measurePolyLine(); 258 new measureTools.measureTools(this.viewer).measurePolyLine();
176 } 259 }
177 // 面积 260 // 面积
178 ,area(val) { 261 ,Earea(val) {
179 new measureTools.measureTools(this.viewer).measurePolygon(); 262 new measureTools.measureTools(this.viewer).measurePolygon();
180 } 263 }
181 // 标记 264 // 标记
182 ,marker(val) { 265 ,Emarker(val) {
183 // this.draw.type.point || (this.draw.type.point = new tool.attributes.point({viewer: this.viewer})); 266 // this.draw.type.point || (this.draw.type.point = new tool.attributes.point({viewer: this.viewer}));
184 // this.draw.create('point'); 267 // this.draw.create('point');
185 this.draw.startDraw({ 268 this.draw.startDraw({
...@@ -191,7 +274,7 @@ ...@@ -191,7 +274,7 @@
191 }); 274 });
192 } 275 }
193 // 卷帘 276 // 卷帘
194 ,rollerShutter() { 277 ,ErollerShutter() {
195 this.roll.r || (this.roll.r = new roller({ 278 this.roll.r || (this.roll.r = new roller({
196 imageryLayers: this.viewer.imageryLayers, 279 imageryLayers: this.viewer.imageryLayers,
197 url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb' 280 url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb'
...@@ -203,108 +286,144 @@ ...@@ -203,108 +286,144 @@
203 this.viewer.scene.imagerySplitPosition = this.roll.b && this.$refs.slider.offsetLeft / this.$refs.slider.parentElement.offsetWidth 286 this.viewer.scene.imagerySplitPosition = this.roll.b && this.$refs.slider.offsetLeft / this.$refs.slider.parentElement.offsetWidth
204 } 287 }
205 // 分屏 288 // 分屏
206 ,splitScreen() {} 289 ,EsplitScreen() {}
207 // 指北 290 // 指北
208 ,toNorth() {} 291 ,EtoNorth() {}
209 // 顶视 292 // 顶视
210 ,topSee() {} 293 ,EtopSee() {}
211 // 环视 294 // 环视
212 ,roundSee() { 295 ,EroundSee() {
213 var parentEntity = this.viewer.entities.add(new Cesium.Entity()), positions = [], cartesian, polyline; 296 // var parentEntity = this.viewer.entities.add(new Cesium.Entity()), positions = [], cartesian, polyline;
214 this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas) 297 // this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
215 this.handler.setInputAction(evt => { 298 // this.handler.setInputAction(evt => {
216 299
217 cartesian = this.viewer.scene.pickPosition(evt.position); 300 // cartesian = this.viewer.scene.pickPosition(evt.position);
218 // cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []); 301 // // cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
219 positions.push(cartesian.clone()); 302 // positions.push(cartesian.clone());
220 // addCompany.createPoint.call(this, {position: cartesian}) 303 // // addCompany.createPoint.call(this, {position: cartesian})
221 304
222 if(positions.length === 1) { 305 // if(positions.length === 1) {
223 this.handler.setInputAction(moveEvent => { 306 // this.handler.setInputAction(moveEvent => {
224 positions[1] = this.viewer.scene.pickPosition(moveEvent.endPosition); 307 // positions[1] = this.viewer.scene.pickPosition(moveEvent.endPosition);
225 // positions[1] = this.draw.getCatesian3FromPX(moveEvent.endPosition, this.viewer, []); 308 // // positions[1] = this.draw.getCatesian3FromPX(moveEvent.endPosition, this.viewer, []);
226 !polyline && (polyline = addCompany.createPolyline.call(this, positions)); 309 // !polyline && (polyline = addCompany.createPolyline.call(this, positions));
227 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); 310 // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
228 return; 311 // return;
229 } 312 // }
230 313
231 314
232 this.handler.destroy(); 315 // this.handler.destroy();
233 // console.log(Cesium.Cartesian3.distance(positions[0], positions[1])); 316 // // console.log(Cesium.Cartesian3.distance(positions[0], positions[1]));
234 // var cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []); 317 // // var cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
235 var viewPointEntity = this.viewer.entities.add({ 318 // var viewPointEntity = this.viewer.entities.add({
236 parent: parentEntity, 319 // parent: parentEntity,
237 position: positions[0], 320 // position: positions[0],
238 ellipsoid: { 321 // ellipsoid: {
239 radii: new Cesium.Cartesian3(5, 5, 5), 322 // radii: new Cesium.Cartesian3(5, 5, 5),
240 material: Cesium.Color.GREEN 323 // material: Cesium.Color.GREEN
241 } 324 // }
242 }); 325 // });
243 // // 世界坐标转换为投影坐标 326 // // // 世界坐标转换为投影坐标
244 var webMercatorProjection = new Cesium.WebMercatorProjection(this.viewer.scene.globe.ellipsoid); 327 // var webMercatorProjection = new Cesium.WebMercatorProjection(this.viewer.scene.globe.ellipsoid);
245 var viewPointWebMercator = webMercatorProjection.project(Cesium.Cartographic.fromCartesian(positions[0])); 328 // var viewPointWebMercator = webMercatorProjection.project(Cesium.Cartographic.fromCartesian(positions[0]));
246 // // 排除碰撞监测的对象 329 // // // 排除碰撞监测的对象
247 var objectsToExclude = [viewPointEntity]; 330 // var objectsToExclude = [viewPointEntity];
248 331
249 // 目标点集合 332 // // 目标点集合
250 var destPoints = []; 333 // var destPoints = [];
251 // 视域点和目标点的距离 334 // // 视域点和目标点的距离
252 var radius = Cesium.Cartesian3.distance(positions[0], positions[1]); // 视距1000米 335 // var radius = Cesium.Cartesian3.distance(positions[0], positions[1]); // 视距1000米
253 // 计算一圈 336 // // 计算一圈
254 for (var i = 0; i <= 30; i++) { 337 // for (var i = 0; i <= 30; i++) {
255 // 度数转弧度 338 // // 度数转弧度
256 var radians = Cesium.Math.toRadians(i); 339 // var radians = Cesium.Math.toRadians(i);
257 // 计算目标点 340 // // 计算目标点
258 var toPoint = new Cesium.Cartesian3(viewPointWebMercator.x + radius * Math.cos(radians), viewPointWebMercator.y + radius * Math.sin(radians), 10); 341 // var toPoint = new Cesium.Cartesian3(viewPointWebMercator.x + radius * Math.cos(radians), viewPointWebMercator.y + radius * Math.sin(radians), 10);
259 // 投影坐标转世界坐标 342 // // 投影坐标转世界坐标
260 toPoint = webMercatorProjection.unproject(toPoint); 343 // toPoint = webMercatorProjection.unproject(toPoint);
261 destPoints.push(Cesium.Cartographic.toCartesian(toPoint.clone())); 344 // destPoints.push(Cesium.Cartographic.toCartesian(toPoint.clone()));
262 } 345 // }
263 let viewer = this.viewer; 346 // let viewer = this.viewer;
264 // 绘制线 347 // // 绘制线
265 function drawLine(leftPoint, secPoint, color) { 348 // function drawLine(leftPoint, secPoint, color) {
266 viewer.entities.add({ 349 // viewer.entities.add({
267 polyline: { 350 // polyline: {
268 positions: [leftPoint, secPoint], 351 // positions: [leftPoint, secPoint],
269 arcType: Cesium.ArcType.NONE, 352 // arcType: Cesium.ArcType.NONE,
270 width: 5, 353 // width: 5,
271 material: color, 354 // material: color,
272 depthFailMaterial: color 355 // depthFailMaterial: color
273 } 356 // }
274 }) 357 // })
275 } 358 // }
276 pickFromRay.call(this); 359 // pickFromRay.call(this);
277 function pickFromRay() { 360 // function pickFromRay() {
278 for (var i = 0; i < destPoints.length; i++) { 361 // for (var i = 0; i < destPoints.length; i++) {
279 // 计算射线的方向，目标点left 视域点right 362 // // 计算射线的方向，目标点left 视域点right
280 var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(destPoints[i], positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3()); 363 // var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(destPoints[i], positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3());
281 console.log(direction); 364 // console.log(direction);
282 // 建立射线 365 // // 建立射线
283 var ray = new Cesium.Ray(positions[0], direction); 366 // var ray = new Cesium.Ray(positions[0], direction);
284 var result = viewer.scene.pickFromRay(ray, objectsToExclude); // 计算交互点，返回第一个 367 // var result = viewer.scene.pickFromRay(ray, objectsToExclude); // 计算交互点，返回第一个
285 showIntersection(result, destPoints[i], positions[0]); 368 // showIntersection(result, destPoints[i], positions[0]);
286 } 369 // }
287 } 370 // }
288 // 处理交互点 371 // // 处理交互点
289 function showIntersection(result, destPoint, cartesian) { 372 // function showIntersection(result, destPoint, cartesian) {
290 // 如果是场景模型的交互点，排除交互点是地球表面 373 // // 如果是场景模型的交互点，排除交互点是地球表面
291 if (Cesium.defined(result) && Cesium.defined(result.object)) { 374 // if (Cesium.defined(result) && Cesium.defined(result.object)) {
292 drawLine(result.position, cartesian, Cesium.Color.GREEN); // 可视区域 375 // drawLine(result.position, cartesian, Cesium.Color.GREEN); // 可视区域
293 drawLine(result.position, destPoint, Cesium.Color.RED); // 不可视区域 376 // drawLine(result.position, destPoint, Cesium.Color.RED); // 不可视区域
294 } else { 377 // } else {
295 drawLine(cartesian, destPoint, Cesium.Color.GREEN); 378 // drawLine(cartesian, destPoint, Cesium.Color.GREEN);
296 } 379 // }
297 } 380 // }
298 this.handler.destroy(); 381 // this.handler.destroy();
299 }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 382 // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
300 } 383 }
301 // 视域 384 // 视域
302 ,horizon() { 385 ,Ehorizon(val) {
303 386 this[val] = !this[val];
387 this.onlySelect(val);
304 } 388 }
305 // 通视 389 // 通视
306 ,allSee() {} 390 ,EallSee(val) {
307 391 this[val] = !this[val];
392 this.onlySelect(val);
393 },
394 // 淹没分析
395 EymAnslysis(val) {
396 this[val] = !this[val];
397 this.onlySelect(val);
398 },
399 // 天际线分析
400 EtjxAnslysis(val) {
401 this[val] = !this[val];
402 this.onlySelect(val);
403 },
404 // 阴影分析
405 EyyAnslysis(val) {
406 this[val] = !this[val];
407 this.onlySelect(val);
408 },
409 // 控高分析
410 EkgAnalusis(val) {
411 this[val] = !this[val];
412 this.onlySelect(val);
413 },
414 // 关闭pop方法
415 closePop(val) {
416 this[val] = false;
417 },
418 onlySelect(val) {
419 this.keepArr.forEach(ele => {
420 if(val == ele) {
421 this[ele] = this[ele];
422 }else {
423 this[ele] = false;
424 };
425 })
426 }
308 } 427 }
309 } 428 }
310 </script> 429 </script>
...@@ -456,4 +575,16 @@ ...@@ -456,4 +575,16 @@
456 .promptContent{ 575 .promptContent{
457 color:white; 576 color:white;
458 } 577 }
578
579
580 .allSee {
581 position: absolute;
582 z-index: 1000;
583 right: 122px;
584 top: 416px;
585 }
586
587 .kg-anslysis {
588 top: 265px;
589 }
459 </style> 590 </style>
...\ No newline at end of file ...\ No newline at end of file
......