用户位置选点及查看所有用户位置分布

package.json

@@ -45,6 +45,7 @@
     "tui-editor": "1.3.3",
     "vcolorpicker": "^1.0.3",
     "vue": "2.6.10",
+    "vue-baidu-map": "^0.21.22",
     "vue-class-component": "^7.2.6",
     "vue-count-to": "^1.0.13",
     "vue-draggable-resizable": "^2.3.0",

src/api/ncs_customer.js

@@ -67,4 +67,11 @@ export function saveListByCustomer(partId) {
     method: 'GET',
     loading: true
   })
+}
+export function getListByPartId(partId) {
+  return request({
+    url: `/ncs/customer/getListByPartId/${partId}`,
+    method: 'GET',
+    loading: true
+  })
 }

src/main.js

@@ -30,6 +30,7 @@ import vcolorpicker from 'vcolorpicker'
 import scroll from 'vue-seamless-scroll/src'
 
 import i18n from './utils/i18n'
+import BaiduMap from 'vue-baidu-map'
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -64,6 +65,11 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+Vue.use(BaiduMap, {
+  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
+  ak: 'npNSlyyrVBUm37EUSHHGDgfZ44sunSp2'
+})
+
 Vue.config.productionTip = false
 
 new Vue({

src/router/index.js

@@ -169,6 +169,13 @@ export const partRoutes = [
         component: () => uiVersion === 1 ? import('@/views/customer/patientManagement') : uiVersion === 2 ? import('@/views/customer/customerManagement') : import('@/views/customer/elderlyCareManagement'),
         name: uiVersion === 1 ? 'patientManagement' : uiVersion === 2 ? 'customerManager' : 'elderlyCareManager',
         meta: { title: uiVersion === 1 ? i18n.t('tab.patientManage') : i18n.t('tab.customerManage'), icon: 'el-icon-s-custom', noCache: true }
+      },
+      {
+        path: '/allMap',
+        component: () => import('@/views/customer/allMap'),
+        name: 'allMap',
+        meta: { title: '用户分布', icon: 'area', noCache: true },
+        hidden: true
       }
     ]
   },

src/views/customer/allMap.vue

@@ -0,0 +1,81 @@
+<template>
+  <div style="height: 1000px">
+    <baidu-map :center="center" :zoom="zoom" scroll-wheel-zoom @ready="handler">
+      <bm-view class="map"></bm-view>
+      <bm-control :offset="{width: '10px', height: '10px'}">
+        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
+          <input v-model="keyword" placeholder="请输入地名关键字" style="width: 300px;margin-left: 20px;margin-top: 20px;">
+        </bm-auto-complete>
+      </bm-control>
+      <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" :panel="false"></bm-local-search>
+      <bm-marker v-for="marker of markers" :position="{lng: marker.lng, lat: marker.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" clicking></bm-marker>
+      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
+    </baidu-map>
+  </div>
+</template>
+
+<script>
+
+import { getListByPartId } from '@/api/ncs_customer'
+
+export default {
+name: "allMap",
+  data() {
+    return {
+      center: {lng: 0, lat: 0},
+      zoom: 5,
+      myCenter: {
+        lng: 116.404,
+        lat: 39.915
+      },
+      isShow: false,
+      location: '',
+      keyword: '',
+      markers: [],
+    }
+  },
+  computed: {
+    tableHeight() {
+      return  this.mainAreaHeight - 130
+    },
+  },
+  mounted() {
+    window.onresize = this.windowResize()
+  },
+  methods: {
+    windowResize() {
+      this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
+    },
+    handler ({BMap, map}) {
+      this.zoom = 7
+      this.getList()
+    },
+    getList() {
+      const _this = this
+      this.markers = []
+      let i = 0
+      getListByPartId(this.$store.getters.partId).then(res =>{
+        if (res) {
+          res.forEach(item => {
+            if (item.lng_lat) {
+              const position = {lng: item.lng_lat.split(',')[0], lat: item.lng_lat.split(',')[1]}
+              if (i === 0) {
+                _this.center = position
+              }
+              ++ i
+              _this.markers.push(position)
+            }
+          })
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.map {
+  width: 100%;
+  height: 1000px;
+}
+</style>

src/views/customer/components/elderlyCareManager.vue

@@ -22,6 +22,7 @@
                     <en-table-search :placeholder="this.$t('action.keywords')" @search="handlerSearch"/>
                 </div>
                 <div class="toolbar-btns">
+                    <el-button type="s" size="mini" @click="goPage">用户分布</el-button>
                     <el-button type="primary" size="mini" :disabled="!isEmptyFrame" @click="handleAdd">{{ this.$t('customerManage.customerAdd2') }}</el-button>
                     <el-button type="danger" size="mini" @click="batchDelete">{{ this.$t('action.deleteList') }}</el-button>
                 </div>
@@ -40,7 +41,7 @@
         </ag-grid-layout>
 
         <!-- 用户信息 -->
-        <el-dialog :visible.sync="customerFormVisible" :title="this.$t('customerManage.customerInfo')" class="customer-dialog">
+        <el-dialog :visible.sync="customerFormVisible" :title="this.$t('customerManage.customerInfo')" class="customer-dialog" width="70%">
             <el-tabs v-model="activeName" type="border-card" tab-position="bottom" width="50%" @tab-click="handleClick">
                 <el-tab-pane :label="this.$t('customerManage.baseInfo')" name="customerBaseInfo">
                     <div style="height: 590px">
@@ -181,7 +182,6 @@
                                     </el-form-item>
                                 </el-col>
                             </el-row>
-
                             <el-row>
                                 <el-col :span="8">
                                     <el-form-item :label="this.$t('customerManage.doctor')">
@@ -210,6 +210,11 @@
                                         </el-select>
                                     </el-form-item>
                                 </el-col>
+                                <el-col :span="8">
+                                  <el-form-item label="坐标">
+                                    <el-button @click="clickLngLat">{{ formmodel.lng_lat ? formmodel.lng_lat : '选择坐标'}}</el-button>
+                                  </el-form-item>
+                                </el-col>
                             </el-row>
 
 <!--                            <el-row v-if="nurseconfigSelection.length > 0">-->
@@ -282,7 +287,7 @@
                             <el-row>
                                 <el-col :span="12">
                                     <el-form-item :label="this.$t('customerManage.customerRelativeTrueName')" prop="true_name">
-                                        <el-input v-model="relativeFormModel.true_name" clearable :placeholder="请输入姓名"
+                                        <el-input v-model="relativeFormModel.true_name" clearable placeholder="请输入姓名"
                                                   :maxlength="20"/>
                                     </el-form-item>
                                 </el-col>
@@ -459,6 +464,11 @@
             </el-form>
         </el-dialog>
         <!-- 用户换床-->
+
+      <!--    选择坐标-->
+      <el-dialog title="选择坐标" :visible.sync="locationShow" width="70%">
+        <my-map :customer-id="formmodel.id" :dialog-show="locationShow" :lng-lat="formmodel.lng_lat" @childFn="setVal"></my-map>
+      </el-dialog>
     </div>
 
 </template>
@@ -479,10 +489,11 @@
     import * as API_Clerk from '@/api/ncs_clerk'
     import * as API_NurseConfig from '@/api/ncs_nurse_config'
     import vitalSignLog from '@/views/vital-sign/log'
+    import myMap from '@/views/customer/myMap'
     const serverUrl = domain.serverUrl
     export default {
         name: 'ElderlyCareManager',
-        components: {ButtonCellRender, ListFilter, RadioFilter, vitalSignLog},
+        components: {ButtonCellRender, ListFilter, RadioFilter, vitalSignLog, myMap},
         filters: {
             unixDateFilter(val) {
                 return unixToDate(val)
@@ -627,7 +638,8 @@
                 customerRemarks: this.$t('customerManage.remarks'),
                 customerRemarkTime: this.$t('customerManage.remarkTime'),
                 customerRemarkName: this.$t('customerManage.remarkName'),
-                deleted: this.$t('action.delete')
+                deleted: this.$t('action.delete'),
+              locationShow: false
             }
         },
         computed: {
@@ -1456,7 +1468,17 @@
             },
             async deleteMembers(ids) {
                 API_User.remove(ids)
-            }
+            },
+          clickLngLat() {
+            this.locationShow = true
+          },
+          setVal(val) {
+            this.formmodel.lng_lat = val
+            this.locationShow = false
+          },
+          goPage() {
+            this.$router.push({path:'/allMap'})
+          }
         }
     }
 </script>

src/views/customer/myMap.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+<!--    <label>关键词：<input v-model="keyword"></label>-->
+<!--    <label>地区：<input v-model="location"></label>-->
+    <baidu-map v-if="dialogShow" :center="center" :zoom="zoom" scroll-wheel-zoom @ready="handler" @click="clickMap">
+      <bm-view class="map"></bm-view>
+      <bm-control :offset="{width: '10px', height: '10px'}">
+        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
+          <input v-model="keyword" placeholder="请输入地名关键字" style="width: 300px;margin-left: 20px;margin-top: 20px;">
+<!--          <search-field placeholder="请输入地名关键字"></search-field> &lt;!&ndash; 这里指代一个自定义搜索框组件 &ndash;&gt;-->
+        </bm-auto-complete>
+      </bm-control>
+      <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" :panel="false"></bm-local-search>
+      <bm-marker v-if="isShow" :position="myCenter" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" clicking></bm-marker>
+<!--      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>-->
+      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
+    </baidu-map>
+  </div>
+</template>
+
+<script>
+import * as API_User from "@/api/user";
+
+export default {
+name: "wyMap",
+  data() {
+    return {
+      center: {lng: 0, lat: 0},
+      zoom: 3,
+      myCenter: {
+        lng: 116.404,
+        lat: 39.915
+      },
+      isShow: false,
+      location: '',
+      keyword: ''
+    }
+  },
+  props: {
+    dialogShow: {
+      type: Boolean,
+      default: false
+    },
+    lngLat: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handler ({BMap, map}) {
+      if (this.lngLat) {
+        this.center.lng = this.lngLat.split(',')[0]
+        this.center.lat = this.lngLat.split(',')[1]
+        this.myCenter = this.center
+        this.isShow = true
+      } else {
+        this.center.lng = 116.404
+        this.center.lat = 39.915
+      }
+      console.log(this.center.lng, this.center.lat)
+      this.zoom = 15
+    },
+    clickMap(e) {
+      console.log('点击的经纬度：' + e.Bg.lng + ', ' + e.Bg.lat)
+      this.myCenter.lng = e.Bg.lng
+      this.myCenter.lat = e.Bg.lat
+      this.isShow = true
+      let _this = this
+      this.$confirm('确定要选择这个地方吗', this.$t('action.waring'), {
+        confirmButtonText: this.$t('action.yes'),
+        cancelButtonText: this.$t('action.cancel'),
+        type: 'warning'
+      }).then(() => {
+        const lngLat = e.Bg.lng + ',' + e.Bg.lat
+        _this.$emit('childFn', lngLat);
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.map {
+  width: 100%;
+  height: 600px;
+}
+</style>