vue2-client 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/base-client/components/iot/DataAnalysisView/DataAnalysisView.vue +244 -250
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue2-client",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/base-client/components/iot/DataAnalysisView/DataAnalysisView.vue CHANGED
@@ -1,250 +1,244 @@
1
- <template>
2
- <a-row type="flex">
3
- <baidu-map
4
- :mapStyle="mapStyle"
5
- class="bm-view"
6
- :center="'西安'"
7
- :scroll-wheel-zoom="true"
8
- :zoom="zoom"
9
- @ready="handler"
10
- @click="searchClick"
11
- ak="YOUR_APP_KEY">
12
- <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
13
- <bm-control :offset="{width: '10px', height: '10px'}">
14
- <bm-auto-complete :sugStyle="{zIndex: 1}">
15
- <a-input v-model="keyword" type="text" placeholder="地区信息搜索" style="width: 150px;height: 50px" /> <!-- 这里指代一个自定义搜索框组件 -->
16
- </bm-auto-complete>
17
- </bm-control>
18
- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
19
- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
20
- <bm-local-search :keyword="keyword" :panel="false" :auto-viewport="true" zoom="12.8" style="display: none" ></bm-local-search>
21
- </baidu-map>
22
- </a-row>
23
- </template>
24
-
25
- <script>
26
- import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
27
- import BmView from 'vue-baidu-map/components/map/MapView.vue'
28
- import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
29
- import BMCityList from 'vue-baidu-map/components/controls/CityList.vue'
30
- import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
31
- import BmControl from 'vue-baidu-map/components/others/AutoComplete'
32
- import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'
33
- export default {
34
- components: {
35
- BaiduMap,
36
- BmNavigation,
37
- BmView,
38
- BMCityList,
39
- BmGeolocation,
40
- BmControl,
41
- BmLocalSearch
42
- },
43
- data () {
44
- return {
45
- keyword: '',
46
- center: {
47
- lng: 12131693.03,
48
- lat: 4063684.53
49
- },
50
- zoom: 17,
51
- address: {
52
- propprovince: '', // 省
53
- propcity: '', // 市
54
- propcounty: '', // 县
55
- propaddress: '' // 详细地址
56
- },
57
- mapStyle: {
58
- styleJson: [
59
- {
60
- featureType: 'water',
61
- elementType: 'all',
62
- stylers: {
63
- color: '#021019'
64
- }
65
- },
66
- {
67
- featureType: 'highway',
68
- elementType: 'geometry.fill',
69
- stylers: {
70
- color: '#000000'
71
- }
72
- },
73
- {
74
- featureType: 'highway',
75
- elementType: 'geometry.stroke',
76
- stylers: {
77
- color: '#147a92'
78
- }
79
- },
80
- {
81
- featureType: 'arterial',
82
- elementType: 'geometry.fill',
83
- stylers: {
84
- color: '#000000'
85
- }
86
- },
87
- {
88
- featureType: 'arterial',
89
- elementType: 'geometry.stroke',
90
- stylers: {
91
- color: '#0b3d51'
92
- }
93
- },
94
- {
95
- featureType: 'local',
96
- elementType: 'geometry',
97
- stylers: {
98
- color: '#000000'
99
- }
100
- },
101
- {
102
- featureType: 'land',
103
- elementType: 'all',
104
- stylers: {
105
- color: '#08304b'
106
- }
107
- },
108
- {
109
- featureType: 'railway',
110
- elementType: 'geometry.fill',
111
- stylers: {
112
- color: '#000000'
113
- }
114
- },
115
- {
116
- featureType: 'railway',
117
- elementType: 'geometry.stroke',
118
- stylers: {
119
- color: '#08304b'
120
- }
121
- },
122
- {
123
- featureType: 'subway',
124
- elementType: 'geometry',
125
- stylers: {
126
- lightness: -70
127
- }
128
- },
129
- {
130
- featureType: 'building',
131
- elementType: 'geometry.fill',
132
- stylers: {
133
- color: '#000000'
134
- }
135
- },
136
- {
137
- featureType: 'all',
138
- elementType: 'labels.text.fill',
139
- stylers: {
140
- color: '#857f7f'
141
- }
142
- },
143
- {
144
- featureType: 'all',
145
- elementType: 'labels.text.stroke',
146
- stylers: {
147
- color: '#000000'
148
- }
149
- },
150
- {
151
- featureType: 'building',
152
- elementType: 'geometry',
153
- stylers: {
154
- color: '#022338'
155
- }
156
- },
157
- {
158
- featureType: 'green',
159
- elementType: 'geometry',
160
- stylers: {
161
- color: '#062032'
162
- }
163
- },
164
- {
165
- featureType: 'boundary',
166
- elementType: 'all',
167
- stylers: {
168
- color: '#1e1c1c'
169
- }
170
- },
171
- {
172
- featureType: 'manmade',
173
- elementType: 'geometry',
174
- stylers: {
175
- color: '#022338'
176
- }
177
- },
178
- {
179
- featureType: 'poi',
180
- elementType: 'all',
181
- stylers: {
182
- visibility: 'off'
183
- }
184
- },
185
- {
186
- featureType: 'all',
187
- elementType: 'labels.icon',
188
- stylers: {
189
- visibility: 'off'
190
- }
191
- },
192
- {
193
- featureType: 'all',
194
- elementType: 'labels.text.fill',
195
- stylers: {
196
- color: '#2da0c6',
197
- visibility: 'on'
198
- }
199
- }
200
- ]
201
- }
202
- }
203
- },
204
- methods: {
205
- searchClick (e) {
206
- const _this = this
207
- this.longitude = e.point.lng// 经度
208
- this.latitude = e.point.lat// 维度
209
- this.center.lng = _this.longitude // 中心点
210
- this.center.lat = _this.latitude// 中心点
211
- // eslint-disable-next-line no-undef
212
- const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
213
- geocoder.getLocation(e.point, function (rs) {
214
- console.log(rs)
215
- _this.address.propprovince = rs.addressComponents.province // 省
216
- _this.address.propcity = rs.addressComponents.city // 市
217
- _this.address.propcounty = rs.addressComponents.district // 县
218
- _this.address.propaddress = rs.address// 详细地址
219
- })
220
- console.log('geocoder', _this.address)
221
- this.$emit('togShow', _this.address)
222
- },
223
-
224
- handler ({ BMap, map }) {
225
- console.log(BMap, map)
226
- this.center.lng = 116.404
227
- this.center.lat = 39.915
228
- this.zoom = 15
229
- }
230
- },
231
- watch: {
232
- 'keyword' (val) {
233
- console.log(val)
234
- }
235
- }
236
- }
237
- </script>
238
-
239
- <style>
240
- .bm-view {
241
- width: 100%;
242
- height:500px;
243
- }
244
- .BMap_cpyCtrl {
245
- display: none;
246
- }
247
- .anchorBL {
248
- display: none;
249
- }
250
- </style>
1
+ <template>
2
+ <a-row type="flex">
3
+ <baidu-map
4
+ :mapStyle="mapStyle"
5
+ class="bm-view"
6
+ :center="'西安'"
7
+ :scroll-wheel-zoom="true"
8
+ :zoom="zoom"
9
+ @ready="handler"
10
+ @click="searchClick"
11
+ ak="YOUR_APP_KEY">
12
+ <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
13
+ <bm-control :offset="{width: '10px', height: '10px'}">
14
+ <bm-auto-complete :sugStyle="{zIndex: 1}">
15
+ <a-input v-model="keyword" type="text" placeholder="地区信息搜索" style="width: 150px;height: 50px" /> <!-- 这里指代一个自定义搜索框组件 -->
16
+ </bm-auto-complete>
17
+ </bm-control>
18
+ <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
19
+ <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
20
+ <bm-local-search :keyword="keyword" :panel="false" :auto-viewport="true" zoom="12.8" style="display: none" ></bm-local-search>
21
+ </baidu-map>
22
+ </a-row>
23
+ </template>
24
+
25
+ <script>
26
+ import { BaiduMap, BmView, BmNavigation, BMCityList, BmGeolocation, BmControl, BmLocalSearch } from 'vue-baidu-map'
27
+ export default {
28
+ components: {
29
+ BaiduMap,
30
+ BmNavigation,
31
+ BmView,
32
+ BMCityList,
33
+ BmGeolocation,
34
+ BmControl,
35
+ BmLocalSearch
36
+ },
37
+ data () {
38
+ return {
39
+ keyword: '',
40
+ center: {
41
+ lng: 12131693.03,
42
+ lat: 4063684.53
43
+ },
44
+ zoom: 17,
45
+ address: {
46
+ propprovince: '', // 省
47
+ propcity: '', // 市
48
+ propcounty: '', // 县
49
+ propaddress: '' // 详细地址
50
+ },
51
+ mapStyle: {
52
+ styleJson: [
53
+ {
54
+ featureType: 'water',
55
+ elementType: 'all',
56
+ stylers: {
57
+ color: '#021019'
58
+ }
59
+ },
60
+ {
61
+ featureType: 'highway',
62
+ elementType: 'geometry.fill',
63
+ stylers: {
64
+ color: '#000000'
65
+ }
66
+ },
67
+ {
68
+ featureType: 'highway',
69
+ elementType: 'geometry.stroke',
70
+ stylers: {
71
+ color: '#147a92'
72
+ }
73
+ },
74
+ {
75
+ featureType: 'arterial',
76
+ elementType: 'geometry.fill',
77
+ stylers: {
78
+ color: '#000000'
79
+ }
80
+ },
81
+ {
82
+ featureType: 'arterial',
83
+ elementType: 'geometry.stroke',
84
+ stylers: {
85
+ color: '#0b3d51'
86
+ }
87
+ },
88
+ {
89
+ featureType: 'local',
90
+ elementType: 'geometry',
91
+ stylers: {
92
+ color: '#000000'
93
+ }
94
+ },
95
+ {
96
+ featureType: 'land',
97
+ elementType: 'all',
98
+ stylers: {
99
+ color: '#08304b'
100
+ }
101
+ },
102
+ {
103
+ featureType: 'railway',
104
+ elementType: 'geometry.fill',
105
+ stylers: {
106
+ color: '#000000'
107
+ }
108
+ },
109
+ {
110
+ featureType: 'railway',
111
+ elementType: 'geometry.stroke',
112
+ stylers: {
113
+ color: '#08304b'
114
+ }
115
+ },
116
+ {
117
+ featureType: 'subway',
118
+ elementType: 'geometry',
119
+ stylers: {
120
+ lightness: -70
121
+ }
122
+ },
123
+ {
124
+ featureType: 'building',
125
+ elementType: 'geometry.fill',
126
+ stylers: {
127
+ color: '#000000'
128
+ }
129
+ },
130
+ {
131
+ featureType: 'all',
132
+ elementType: 'labels.text.fill',
133
+ stylers: {
134
+ color: '#857f7f'
135
+ }
136
+ },
137
+ {
138
+ featureType: 'all',
139
+ elementType: 'labels.text.stroke',
140
+ stylers: {
141
+ color: '#000000'
142
+ }
143
+ },
144
+ {
145
+ featureType: 'building',
146
+ elementType: 'geometry',
147
+ stylers: {
148
+ color: '#022338'
149
+ }
150
+ },
151
+ {
152
+ featureType: 'green',
153
+ elementType: 'geometry',
154
+ stylers: {
155
+ color: '#062032'
156
+ }
157
+ },
158
+ {
159
+ featureType: 'boundary',
160
+ elementType: 'all',
161
+ stylers: {
162
+ color: '#1e1c1c'
163
+ }
164
+ },
165
+ {
166
+ featureType: 'manmade',
167
+ elementType: 'geometry',
168
+ stylers: {
169
+ color: '#022338'
170
+ }
171
+ },
172
+ {
173
+ featureType: 'poi',
174
+ elementType: 'all',
175
+ stylers: {
176
+ visibility: 'off'
177
+ }
178
+ },
179
+ {
180
+ featureType: 'all',
181
+ elementType: 'labels.icon',
182
+ stylers: {
183
+ visibility: 'off'
184
+ }
185
+ },
186
+ {
187
+ featureType: 'all',
188
+ elementType: 'labels.text.fill',
189
+ stylers: {
190
+ color: '#2da0c6',
191
+ visibility: 'on'
192
+ }
193
+ }
194
+ ]
195
+ }
196
+ }
197
+ },
198
+ methods: {
199
+ searchClick (e) {
200
+ const _this = this
201
+ this.longitude = e.point.lng// 经度
202
+ this.latitude = e.point.lat// 维度
203
+ this.center.lng = _this.longitude // 中心点
204
+ this.center.lat = _this.latitude// 中心点
205
+ // eslint-disable-next-line no-undef
206
+ const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
207
+ geocoder.getLocation(e.point, function (rs) {
208
+ console.log(rs)
209
+ _this.address.propprovince = rs.addressComponents.province // 省
210
+ _this.address.propcity = rs.addressComponents.city // 市
211
+ _this.address.propcounty = rs.addressComponents.district // 县
212
+ _this.address.propaddress = rs.address// 详细地址
213
+ })
214
+ console.log('geocoder', _this.address)
215
+ this.$emit('togShow', _this.address)
216
+ },
217
+
218
+ handler ({ BMap, map }) {
219
+ console.log(BMap, map)
220
+ this.center.lng = 116.404
221
+ this.center.lat = 39.915
222
+ this.zoom = 15
223
+ }
224
+ },
225
+ watch: {
226
+ 'keyword' (val) {
227
+ console.log(val)
228
+ }
229
+ }
230
+ }
231
+ </script>
232
+
233
+ <style>
234
+ .bm-view {
235
+ width: 100%;
236
+ height:500px;
237
+ }
238
+ .BMap_cpyCtrl {
239
+ display: none;
240
+ }
241
+ .anchorBL {
242
+ display: none;
243
+ }
244
+ </style>