vue2-client 1.2.0 → 1.2.3

package/src/base-client/components/iot/DataAnalysisView/DataAnalysisView.vue

@@ -1,250 +1,244 @@
-<template>
-  <a-row type="flex">
-    <baidu-map
-      :mapStyle="mapStyle"
-      class="bm-view"
-      :center="'西安'"
-      :scroll-wheel-zoom="true"
-      :zoom="zoom"
-      @ready="handler"
-      @click="searchClick"
-      ak="YOUR_APP_KEY">
-      <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
-      <bm-control :offset="{width: '10px', height: '10px'}">
-        <bm-auto-complete :sugStyle="{zIndex: 1}">
-          <a-input v-model="keyword" type="text" placeholder="地区信息搜索" style="width: 150px;height: 50px" /> <!-- 这里指代一个自定义搜索框组件 -->
-        </bm-auto-complete>
-      </bm-control>
-      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
-      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
-      <bm-local-search :keyword="keyword" :panel="false" :auto-viewport="true" zoom="12.8" style="display: none" ></bm-local-search>
-    </baidu-map>
-  </a-row>
-</template>
-
-<script>
-    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
-    import BmView from 'vue-baidu-map/components/map/MapView.vue'
-    import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
-    import BMCityList from 'vue-baidu-map/components/controls/CityList.vue'
-    import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
-    import BmControl from 'vue-baidu-map/components/others/AutoComplete'
-    import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'
-    export default {
-        components: {
-            BaiduMap,
-            BmNavigation,
-            BmView,
-            BMCityList,
-            BmGeolocation,
-            BmControl,
-            BmLocalSearch
-        },
-        data () {
-            return {
-              keyword: '',
-                center: {
-                    lng: 12131693.03,
-                    lat: 4063684.53
-                },
-                zoom: 17,
-                address: {
-                  propprovince: '', // 省
-                  propcity: '', // 市
-                  propcounty: '', // 县
-                  propaddress: '' // 详细地址
-                },
-              mapStyle: {
-                styleJson: [
-                  {
-                    featureType: 'water',
-                    elementType: 'all',
-                    stylers: {
-                      color: '#021019'
-                    }
-                  },
-                  {
-                    featureType: 'highway',
-                    elementType: 'geometry.fill',
-                    stylers: {
-                      color: '#000000'
-                    }
-                  },
-                  {
-                    featureType: 'highway',
-                    elementType: 'geometry.stroke',
-                    stylers: {
-                      color: '#147a92'
-                    }
-                  },
-                  {
-                    featureType: 'arterial',
-                    elementType: 'geometry.fill',
-                    stylers: {
-                      color: '#000000'
-                    }
-                  },
-                  {
-                    featureType: 'arterial',
-                    elementType: 'geometry.stroke',
-                    stylers: {
-                      color: '#0b3d51'
-                    }
-                  },
-                  {
-                    featureType: 'local',
-                    elementType: 'geometry',
-                    stylers: {
-                      color: '#000000'
-                    }
-                  },
-                  {
-                    featureType: 'land',
-                    elementType: 'all',
-                    stylers: {
-                      color: '#08304b'
-                    }
-                  },
-                  {
-                    featureType: 'railway',
-                    elementType: 'geometry.fill',
-                    stylers: {
-                      color: '#000000'
-                    }
-                  },
-                  {
-                    featureType: 'railway',
-                    elementType: 'geometry.stroke',
-                    stylers: {
-                      color: '#08304b'
-                    }
-                  },
-                  {
-                    featureType: 'subway',
-                    elementType: 'geometry',
-                    stylers: {
-                      lightness: -70
-                    }
-                  },
-                  {
-                    featureType: 'building',
-                    elementType: 'geometry.fill',
-                    stylers: {
-                      color: '#000000'
-                    }
-                  },
-                  {
-                    featureType: 'all',
-                    elementType: 'labels.text.fill',
-                    stylers: {
-                      color: '#857f7f'
-                    }
-                  },
-                  {
-                    featureType: 'all',
-                    elementType: 'labels.text.stroke',
-                    stylers: {
-                      color: '#000000'
-                    }
-                  },
-                  {
-                    featureType: 'building',
-                    elementType: 'geometry',
-                    stylers: {
-                      color: '#022338'
-                    }
-                  },
-                  {
-                    featureType: 'green',
-                    elementType: 'geometry',
-                    stylers: {
-                      color: '#062032'
-                    }
-                  },
-                  {
-                    featureType: 'boundary',
-                    elementType: 'all',
-                    stylers: {
-                      color: '#1e1c1c'
-                    }
-                  },
-                  {
-                    featureType: 'manmade',
-                    elementType: 'geometry',
-                    stylers: {
-                      color: '#022338'
-                    }
-                  },
-                  {
-                    featureType: 'poi',
-                    elementType: 'all',
-                    stylers: {
-                      visibility: 'off'
-                    }
-                  },
-                  {
-                    featureType: 'all',
-                    elementType: 'labels.icon',
-                    stylers: {
-                      visibility: 'off'
-                    }
-                  },
-                  {
-                    featureType: 'all',
-                    elementType: 'labels.text.fill',
-                    stylers: {
-                      color: '#2da0c6',
-                      visibility: 'on'
-                    }
-                  }
-                ]
-              }
-            }
-        },
-        methods: {
-            searchClick (e) {
-                const _this = this
-                this.longitude = e.point.lng// 经度
-                this.latitude = e.point.lat// 维度
-                this.center.lng = _this.longitude // 中心点
-                this.center.lat = _this.latitude// 中心点
-                // eslint-disable-next-line no-undef
-                const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
-                geocoder.getLocation(e.point, function (rs) {
-                    console.log(rs)
-                    _this.address.propprovince = rs.addressComponents.province // 省
-                    _this.address.propcity = rs.addressComponents.city // 市
-                    _this.address.propcounty = rs.addressComponents.district // 县
-                    _this.address.propaddress = rs.address// 详细地址
-                })
-                console.log('geocoder', _this.address)
-                this.$emit('togShow', _this.address)
-            },
-
-            handler ({ BMap, map }) {
-                console.log(BMap, map)
-                this.center.lng = 116.404
-                this.center.lat = 39.915
-                this.zoom = 15
-            }
-        },
-      watch: {
-        'keyword' (val) {
-          console.log(val)
-        }
-      }
-    }
-</script>
-
-<style>
-    .bm-view {
-        width: 100%;
-        height:500px;
-    }
-    .BMap_cpyCtrl {
-        display: none;
-    }
-    .anchorBL {
-        display: none;
-    }
-</style>
+<template>
+  <a-row type="flex">
+    <baidu-map
+      :mapStyle="mapStyle"
+      class="bm-view"
+      :center="'西安'"
+      :scroll-wheel-zoom="true"
+      :zoom="zoom"
+      @ready="handler"
+      @click="searchClick"
+      ak="YOUR_APP_KEY">
+      <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
+      <bm-control :offset="{width: '10px', height: '10px'}">
+        <bm-auto-complete :sugStyle="{zIndex: 1}">
+          <a-input v-model="keyword" type="text" placeholder="地区信息搜索" style="width: 150px;height: 50px" /> <!-- 这里指代一个自定义搜索框组件 -->
+        </bm-auto-complete>
+      </bm-control>
+      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
+      <bm-local-search :keyword="keyword" :panel="false" :auto-viewport="true" zoom="12.8" style="display: none" ></bm-local-search>
+    </baidu-map>
+  </a-row>
+</template>
+
+<script>
+    import { BaiduMap, BmView, BmNavigation, BMCityList, BmGeolocation, BmControl, BmLocalSearch } from 'vue-baidu-map'
+    export default {
+        components: {
+            BaiduMap,
+            BmNavigation,
+            BmView,
+            BMCityList,
+            BmGeolocation,
+            BmControl,
+            BmLocalSearch
+        },
+        data () {
+            return {
+              keyword: '',
+                center: {
+                    lng: 12131693.03,
+                    lat: 4063684.53
+                },
+                zoom: 17,
+                address: {
+                  propprovince: '', // 省
+                  propcity: '', // 市
+                  propcounty: '', // 县
+                  propaddress: '' // 详细地址
+                },
+              mapStyle: {
+                styleJson: [
+                  {
+                    featureType: 'water',
+                    elementType: 'all',
+                    stylers: {
+                      color: '#021019'
+                    }
+                  },
+                  {
+                    featureType: 'highway',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'highway',
+                    elementType: 'geometry.stroke',
+                    stylers: {
+                      color: '#147a92'
+                    }
+                  },
+                  {
+                    featureType: 'arterial',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'arterial',
+                    elementType: 'geometry.stroke',
+                    stylers: {
+                      color: '#0b3d51'
+                    }
+                  },
+                  {
+                    featureType: 'local',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'land',
+                    elementType: 'all',
+                    stylers: {
+                      color: '#08304b'
+                    }
+                  },
+                  {
+                    featureType: 'railway',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'railway',
+                    elementType: 'geometry.stroke',
+                    stylers: {
+                      color: '#08304b'
+                    }
+                  },
+                  {
+                    featureType: 'subway',
+                    elementType: 'geometry',
+                    stylers: {
+                      lightness: -70
+                    }
+                  },
+                  {
+                    featureType: 'building',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.text.fill',
+                    stylers: {
+                      color: '#857f7f'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.text.stroke',
+                    stylers: {
+                      color: '#000000'
+                    }
+                  },
+                  {
+                    featureType: 'building',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#022338'
+                    }
+                  },
+                  {
+                    featureType: 'green',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#062032'
+                    }
+                  },
+                  {
+                    featureType: 'boundary',
+                    elementType: 'all',
+                    stylers: {
+                      color: '#1e1c1c'
+                    }
+                  },
+                  {
+                    featureType: 'manmade',
+                    elementType: 'geometry',
+                    stylers: {
+                      color: '#022338'
+                    }
+                  },
+                  {
+                    featureType: 'poi',
+                    elementType: 'all',
+                    stylers: {
+                      visibility: 'off'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.icon',
+                    stylers: {
+                      visibility: 'off'
+                    }
+                  },
+                  {
+                    featureType: 'all',
+                    elementType: 'labels.text.fill',
+                    stylers: {
+                      color: '#2da0c6',
+                      visibility: 'on'
+                    }
+                  }
+                ]
+              }
+            }
+        },
+        methods: {
+            searchClick (e) {
+                const _this = this
+                this.longitude = e.point.lng// 经度
+                this.latitude = e.point.lat// 维度
+                this.center.lng = _this.longitude // 中心点
+                this.center.lat = _this.latitude// 中心点
+                // eslint-disable-next-line no-undef
+                const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
+                geocoder.getLocation(e.point, function (rs) {
+                    console.log(rs)
+                    _this.address.propprovince = rs.addressComponents.province // 省
+                    _this.address.propcity = rs.addressComponents.city // 市
+                    _this.address.propcounty = rs.addressComponents.district // 县
+                    _this.address.propaddress = rs.address// 详细地址
+                })
+                console.log('geocoder', _this.address)
+                this.$emit('togShow', _this.address)
+            },
+
+            handler ({ BMap, map }) {
+                console.log(BMap, map)
+                this.center.lng = 116.404
+                this.center.lat = 39.915
+                this.zoom = 15
+            }
+        },
+      watch: {
+        'keyword' (val) {
+          console.log(val)
+        }
+      }
+    }
+</script>
+
+<style>
+    .bm-view {
+        width: 100%;
+        height:500px;
+    }
+    .BMap_cpyCtrl {
+        display: none;
+    }
+    .anchorBL {
+        display: none;
+    }
+</style>