vue2-client 1.2.111 → 1.2.114

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.
@@ -1,244 +0,0 @@
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>
@@ -1,3 +0,0 @@
1
- import DataAnalysisView from './DataAnalysisView'
2
-
3
- export default DataAnalysisView
@@ -1,61 +0,0 @@
1
- <template>
2
- <div id="myChart" style="width:90%;height: 400px">
3
-
4
- </div>
5
- </template>
6
-
7
- <script>
8
-
9
- export default {
10
- name: 'UserData',
11
- data () {
12
- return {
13
- }
14
- },
15
- mounted () {
16
- this.drawLine()
17
- },
18
- methods: {
19
- drawLine () {
20
- // 基于准备好的dom,初始化echarts实例
21
- const myChart = this.$echarts.init(document.getElementById('myChart'))
22
- var option
23
- // 绘制图表配置
24
- option = {
25
- title: {
26
- },
27
- tooltip: {
28
- trigger: 'item'
29
- },
30
- legend: {
31
- orient: 'vertical',
32
- left: 'left'
33
- },
34
- series: [
35
- {
36
- name: 'Access From',
37
- type: 'pie',
38
- radius: '80%',
39
- data: [
40
- { value: 580, name: '民用' },
41
- { value: 484, name: '非民同' }
42
- ],
43
- emphasis: {
44
- itemStyle: {
45
- shadowBlur: 10,
46
- shadowOffsetX: 0,
47
- shadowColor: 'rgba(0, 0, 0, 0.5)'
48
- }
49
- }
50
- }
51
- ]
52
- }
53
- option && myChart.setOption(option)
54
- }
55
- }
56
- }
57
- </script>
58
-
59
- <style scoped>
60
-
61
- </style>