vue2-client 1.2.50 → 1.2.53

package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="certain-category-search-wrapper">
+    <a-auto-complete
+      :disabled="!mapAutocomplete"
+      :dropdown-match-select-width="false"
+      :dropdown-style="{ width: '400px' }"
+      class="certain-category-search"
+      dropdown-class-name="certain-category-search-dropdown"
+      option-label-prop="value"
+      placeholder="输入地址关键字搜索"
+      @search="fetchFunction"
+      @select="onSelect"
+    >
+      <a-spin v-if="searching" slot="notFoundContent" size="small" />
+      <template slot="dataSource">
+        <a-select-opt-group v-for="group in option" :key="group.title">
+          <span
+            slot="label">
+            <a-icon type="bank" /> {{ group.title }}
+          </span>
+          <a-select-option v-for="address in group.children" :key="address.label + ' (' + address.value + ')'">
+            <p class="addressName"><a-icon type="environment" /> <span v-html="highLight(address.label, address.word)">{{ address.label }}</span></p>
+            <p v-if="address.address !== '[]'" class="addressRemark">
+              {{ address.address }}
+            </p>
+          </a-select-option>
+        </a-select-opt-group>
+      </template>
+      <a-input>
+        <a-icon slot="suffix" class="certain-category-icon" type="search"/>
+      </a-input>
+    </a-auto-complete>
+  </div>
+</template>
+<script>
+
+import { post } from '@vue2-client/services/api'
+import { GetGDMap } from '@/utils/map-utils'
+import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
+
+export default {
+  name: 'AddressSearchCombobox',
+  data () {
+    // 检索去抖
+    this.fetchFunction = debounce(this.fetchFunction, 300)
+    return {
+      // 地址搜索联想
+      mapAutocomplete: undefined,
+      // 检索结果
+      option: [],
+      // 最后检索版本
+      lastFetchId: 0,
+      // 检索中
+      searching: false
+    }
+  },
+  model: {
+    prop: 'searchResult',
+    event: 'onSelect'
+  },
+  props: {
+    searchResult: {
+      type: String,
+      default: undefined
+    },
+    // 返回数据格式
+    searchResultType: {
+      type: String,
+      default: 'Default'
+      // default: 'Array'
+      // default: 'Object'
+    },
+    // Object 返回格式时 可以自定义key
+    resultKeys: {
+      type: Object,
+      default: () => { return { address: 'address', coords: 'coords' } }
+    }
+  },
+  created () {
+  },
+  mounted () {
+    GetGDMap().then(aMap => {
+      this.mapAutocomplete = new (aMap).Autocomplete({})
+    })
+  },
+  methods: {
+    onSelect (value) {
+      let result
+      if (this.searchResultType !== 'Default') {
+        const _arr = value.replace(')', '').split('(')
+        if (this.searchResultType === 'Array') {
+           result = _arr
+        } else {
+          result = {}
+          result[this.resultKeys.address] = _arr[0]
+          result[this.resultKeys.coords] = _arr[1]
+        }
+      }
+      this.$emit('onSelect', JSON.stringify(result) || value)
+      // this.$emit('onClick', result || value)
+    },
+    // 懒加载检索方法
+    fetchFunction (value) {
+      if (value && this.mapAutocomplete) {
+        this.searching = true
+        this.lastFetchId += 1
+        const fetchId = this.lastFetchId
+        this.mapAutocomplete.search(value, (status, result) => {
+          if (fetchId !== this.lastFetchId) {
+            return
+          }
+          if (status === 'complete') {
+            this.option = []
+            const addressMap = {}
+            result.tips.forEach((res) => {
+              if (res.location) {
+                if (!addressMap.hasOwnProperty(res.district)) {
+                  addressMap[res.district] = []
+                }
+                addressMap[res.district].push({
+                  label: res.name,
+                  value: res.location.lat + ',' + res.location.lng,
+                  address: res.address + '',
+                  word: value
+                })
+              }
+            })
+            for (const key of Object.keys(addressMap)) {
+              this.option.push({
+                title: key,
+                children: addressMap[key]
+              })
+            }
+          }
+          this.searching = false
+        })
+      }
+    },
+    // 获取数据
+    getData (value, callback) {
+      if (value !== '') {
+        const logicName = this.attr.keyName
+        const logic = logicName.substring(6)
+        post('/webmeterapi/' + logic, value).then(res => {
+          callback(res)
+        })
+      }
+    },
+    // 关键字高亮
+    highLight (value, word) {
+      // 如果标题中包含，关键字就替换一下
+      if (value.includes(word)) {
+        value = value.replace(word,
+          // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
+          '<span style="color:red!important;">' + word + '</span>'
+        )
+        return value
+        // eslint-disable-next-line brace-style
+      }
+      // 不包含的话还用这个
+      else {
+        return value
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
+  color: #666;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
+  border-bottom: 1px solid #f6f6f6;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item {
+  padding-left: 16px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
+  text-align: center;
+  cursor: default;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu {
+  max-height: 300px;
+}
+</style>
+<style scoped>
+.certain-category-search-wrapper
+>>> .certain-category-search.ant-select-auto-complete
+.ant-input-affix-wrapper
+.ant-input-suffix {
+  right: 12px;
+}
+.certain-category-search-wrapper >>> .certain-search-item-count {
+  position: absolute;
+  color: #999;
+  right: 16px;
+}
+.certain-category-search-wrapper >>> .certain-category-search.ant-select-focused,
+.certain-category-icon {
+  color: #108ee9;
+}
+.certain-category-search-wrapper >>> .certain-category-icon {
+  color: #6e6e6e;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-size: 16px;
+}
+
+.addressName {
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.addressRemark {
+  margin-bottom: 0;
+  font-size: 12px;
+}
+</style>

package/src/base-client/components/common/AddressSearchCombobox/index.js

@@ -0,0 +1,3 @@
+import AddressSearchCombobox from './AddressSearchCombobox'
+
+export default AddressSearchCombobox

package/src/base-client/components/common/AmapMarker/AmapPointRendering.vue

@@ -1,105 +1,111 @@
-<template >
-  <div id="amap_point_rendering_map" :style="mapStyle">
-    <div v-show="false">
-      <div id="amap_point_rendering_template">
-        <a-descriptions :column="1">
-          <a-descriptions-item v-for="(des, index) in describeList" :key="index" :label="des.describe" >{{ markers[des.field] }}</a-descriptions-item>
-        </a-descriptions>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import { GetGDMap } from '@vue2-client/utils/map-utils'
-  export default {
-    name: 'AmapPointRendering',
-    props: {
-      // 选中点位后需要展示的信息描述
-      describeList: {
-        type: Array,
-        // eslint-disable-next-line vue/require-valid-default-prop
-        default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
-      },
-      // 需要渲染的点位数据
-      markers: {
-        type: Object,
-        default: null // lng:经度值 lat:纬度值
-      },
-      // 渲染点位的图片
-      imgurl: {
-        type: String,
-        default: '/image/success1.png'
-      },
-      mapStyle: {
-        type: Object,
-        default: () => {
-          return {
-            width: '100%',
-            height: '85vh',
-            border: '2px solid lightgray',
-            'border-radius': '5px'
-          }
-        }
-      }
-    },
-    data () {
-      return {
-        map: null,
-        geocoder: null, // 逆地理编码
-        infoWindow: null,
-        selectrow: {}
-      }
-    },
-    created () {
-    },
-    async mounted () {
-     await this.initMap()
-     await this.initData()
-    },
-    methods: {
-      async initData () {
-        // 创建一个 Marker 实例：
-        if (this.markers && this.markers.lng && this.markers.lat) {
-          const that = this
-          const marker = new (await GetGDMap()).Marker({
-            position: new (await GetGDMap()).LngLat(this.markers.lng, this.markers.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-            title: '北京',
-            icon: new (await GetGDMap()).Icon({
-              size: new (await GetGDMap()).Size(26, 28), // 图标大小
-              url: this.imgurl, // 报警图标URL
-              anchor: new (await GetGDMap()).Pixel(0, 0), // 图标偏移位置
-            }),
-            extData: this.markers
-          })
-          marker.on('click', function (e) {
-            that.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
-            that.infoWindow.open(that.map, [e.target.getExtData().lng, e.target.getExtData().lat])
-          })
-          // 将创建的点标记添加到已有的地图实例：
-          this.map.add(marker)
-          this.map.setFitView()
-        }
-      },
-      async initMap() {
-        this.map = new (await GetGDMap()).Map('amap_point_rendering_map', { // 设置地图容器id
-          resizeEnable: true, // 是否监控地图容器尺寸变化
-          zoom: 17, // 初始化地图层级
-          center: [108.943784, 34.265] // 初始化地图中心点
-        })
-        this.geocoder = new (await GetGDMap()).Geocoder({
-          radius: 500 // 范围，默认：500
-        })
-        this.map.addControl(new (await GetGDMap()).ToolBar()) // 初始化工具插件
-        // 初始化窗体
-        this.infoWindow = new (await GetGDMap()).InfoWindow({
-          anchor: 'bottom-center',
-          isCustom: false, // 使用自定义窗体
-          autoMove: true,
-          content: '',
-          showShadow: true,
-          offset: new (await GetGDMap()).Pixel(0, -25)
-        })
-      }
-    }
-  }
-</script>
+<template >
+  <div id="amap_point_rendering_map" :style="mapStyle">
+    <div v-show="false">
+      <div id="amap_point_rendering_template">
+        <a-descriptions :column="1">
+          <a-descriptions-item v-for="(des, index) in describeList" :key="index" :label="des.describe" >{{ markers[des.field] }}</a-descriptions-item>
+        </a-descriptions>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { GetGDMap } from '@vue2-client/utils/map-utils'
+  export default {
+    name: 'AmapPointRendering',
+    props: {
+      // 选中点位后需要展示的信息描述
+      describeList: {
+        type: Array,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default: () => { return [ ] } // lng:描述信息 lat:描述信息对应的值的字段名 { describe: '用户名称', field: 'name' }
+      },
+      // 需要渲染的点位数据
+      markers: {
+        type: Object,
+        default: null // lng:经度值 lat:纬度值
+      },
+      // 渲染点位的图片
+      imgurl: {
+        type: String,
+        default: '/image/success1.png'
+      },
+      mapStyle: {
+        type: Object,
+        default: () => {
+          return {
+            width: '100%',
+            height: '85vh',
+            border: '2px solid lightgray',
+            'border-radius': '5px'
+          }
+        }
+      }
+    },
+    data () {
+      return {
+        map: null,
+        geocoder: null, // 逆地理编码
+        infoWindow: null,
+        selectrow: {}
+      }
+    },
+    created () {
+    },
+    mounted () {
+      GetGDMap().then(aMap => {
+        this.initMap(aMap)
+        this.initData(aMap)
+      })
+    },
+    methods: {
+      initMap (aMap) {
+        this.map = new (aMap).Map('amap_point_rendering_map', { // 设置地图容器id
+          resizeEnable: true, // 是否监控地图容器尺寸变化
+          zoom: 17, // 初始化地图层级
+          center: [108.943784, 34.265] // 初始化地图中心点
+        })
+        this.geocoder = new (aMap).Geocoder({
+          radius: 500 // 范围，默认：500
+        })
+        this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
+        // 初始化窗体
+        this.infoWindow = new (aMap).InfoWindow({
+          anchor: 'bottom-center',
+          isCustom: false, // 使用自定义窗体
+          autoMove: true,
+          content: '',
+          showShadow: true,
+          offset: new (aMap).Pixel(0, -25)
+        })
+      },
+      initData (aMap) {
+        // 创建一个 Marker 实例：
+        if (this.markers && this.markers.lng && this.markers.lat) {
+          const that = this
+          const marker = new (aMap).Marker({
+            // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            position: new (aMap).LngLat(this.markers.lng, this.markers.lat),
+            title: '北京',
+            icon: new (aMap).Icon({
+              // 图标大小
+              size: new (aMap).Size(26, 28),
+              // 报警图标URL
+              url: this.imgurl,
+              // 图标偏移位置
+              anchor: new (aMap).Pixel(0, 0),
+            }),
+            extData: this.markers
+          })
+          marker.on('click', function (e) {
+            that.infoWindow.setContent(document.getElementById('amap_point_rendering_template'))
+            that.infoWindow.open(that.map, [e.target.getExtData().lng, e.target.getExtData().lat])
+          })
+          // 将创建的点标记添加到已有的地图实例：
+          this.map.add(marker)
+          this.map.setFitView()
+        }
+      }
+    }
+  }
+</script>

package/src/base-client/components/common/AmapMarker/index.js

@@ -1,3 +1,3 @@
-import AmapPointRendering from './AmapPointRendering'
-
-export default AmapPointRendering
+import AmapPointRendering from './AmapPointRendering'
+
+export default AmapPointRendering