2022.11.29

package.json

@@ -27,6 +27,7 @@
     "path-to-regexp": "2.4.0",
     "view-design": "^4.7.0",
     "vue": "2.6.10",
+    "vue-amap": "^0.5.10",
     "vue-count-to": "^1.0.13",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"

src/api/schedule/index.js

@@ -55,3 +55,11 @@ export function scheduleHome(params){
     params
   })
 }
+
+export function scheduleIndex(params){
+  return request({
+    method:'get',
+    url:'/api/admin/schedule/schedule-index',
+    params
+  })
+}

src/main.js

@@ -47,6 +47,16 @@ Vue.config.productionTip = false
 import avue from '@smallwei/avue'
 import '@smallwei/avue/lib/index.css';
 Vue.use(avue)
+import VueAMap from "vue-amap";
+VueAMap.initAMapApiLoader({
+  key:'1a9ee0079fcb3c6c64c96dc903989994',
+  plugins:[
+    'AMap.MarkerClusterer'
+  ],
+  v: "1.4.4"
+})
+Vue.use(VueAMap)
+
 Vue.directive('loadMore', {
   bind(el, binding) {
     const selectWrap = el.querySelector('.el-scrollbar__wrap')

src/views/customer/map.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <div>
+      <div ref="lxHeader">
+        <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="客户地图">
+          <div slot="content"></div>
+
+          <slot>
+            <Input placeholder="关键字搜索" v-model="selector.keyword" style="width: 200px; margin-right: 10px" />
+
+            <Button style="margin-left: 10px" type="primary" @click="selector.page = 1,getCustomers()">查询</Button>
+          </slot>
+        </lx-header>
+      </div>
+    </div>
+
+    <el-amap vid="amapContainer" :amap-manager="amapManager"
+             class="amap" :style="{'height':height+'px'}">
+    </el-amap>
+
+     <el-card v-show="isShowCard" :style="{'position':'fixed','left':cardDom.x+'px','top':cardDom.y+'px','z-index':99999}">
+       <div v-if="select.info">
+         <div>
+           <span style="font-weight: 600;padding-right: 20px">{{ select.info.name }}</span>
+           <span>{{ select.info.sex }}</span>
+         </div>
+         <div>
+           <span v-if="select.info.level_type_detail" style="padding-right: 20px">{{ select.info.level_type_detail.value }}</span>
+           <span v-if="select.info.level_detail">{{ select.info.level_detail.value }}</span>
+         </div>
+         <div>
+           <i class="el-icon-phone" style="padding-right: 10px;"></i>
+           {{ select.info.phone }}
+         </div>
+         <div>
+           <i class="el-icon-location" style="padding-right: 10px;"></i>
+           {{ select.address }}
+         </div>
+       </div>
+     </el-card>
+  </div>
+</template>
+
+<script>
+import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap'
+import { getList } from '@/api/customer'
+
+const amapManager = new AMapManager()
+export default {
+  data() {
+    return {
+      selector: {
+        page: 1,
+        page_size: 9999,
+        keyword: ''
+      },
+      height:0,
+      amapManager,
+      customers:[],
+
+      isShowCard:false,
+      select:'',
+      cardDom:{x:0,y:0}
+    }
+  },
+  methods: {
+    initLoad() {
+      let clientHeight = document.documentElement.clientHeight
+      let lxHeader_height = 96.5; //查询 头部
+      let paginationHeight = 37; //分页的高度
+      let topHeight = 50; //页面 头部
+      let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
+      this.height = tableHeight ?? 600
+    },
+
+    async getCustomers(){
+      let res = await getList(this.selector)
+      this.customers = res.data.data.map(item => {
+        let address = item.customer_address.filter(item => item.default === 1)[0] ? item.customer_address.filter(item => item.default === 1)[0] : item.customer_address[0]
+        return {
+          name:item.name,
+          address:address.address,
+          lng:Number(address.lng),
+          lat:Number(address.lat),
+          info:item
+        }
+      })
+      console.log(this.customers)
+    },
+
+    markers(){
+      for(let i of this.customers){
+        let marker = new AMap.Marker({
+          draggable:false,
+          cursor:'pointer',
+          position:[i.lng,i.lat],
+          icon:require('../../assets/customer.png'),
+          label: {content:i.name,offset:new AMap.Pixel(0,34)},
+          clickable:true,
+        })
+        marker.on('mouseover',(e) => {
+          this.cardDom.x = e.originEvent.clientX
+          this.cardDom.y = e.originEvent.clientY
+          this.select = i
+          this.isShowCard = true
+        })
+        marker.on('mouseout',e => {
+          this.isShowCard = false
+        })
+        marker.setMap(this.map)
+      }
+    }
+  },
+  async mounted() {
+    await this.getCustomers()
+    lazyAMapApiLoaderInstance.load().then(() => {
+      this.map = new AMap.Map('amapContainer')
+      this.markers()
+    })
+  },
+  created() {
+    this.initLoad()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-card__body{
+  padding: 10px !important;
+}
+::v-deep .ivu-modal-footer{
+  border: none !important;
+}
+.amap{
+  width: 100%;
+}
+</style>
+<style>
+.amap-marker-label{
+  border-color: #B3241D !important;
+}
+</style>

src/views/schedule/map.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <div>
+      <div ref="lxHeader">
+        <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="护理地图">
+          <div slot="content"></div>
+          <div style="display:flex;">
+            <Input v-model="selected.customer_name" clearable placeholder="客户搜索" style="width: 180px; margin-right: 10px"/>
+            <Input v-model="selected.nurse_name" clearable placeholder="护工搜索" style="width: 180px; margin-right: 10px"/>
+            <el-date-picker
+              clearable
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              v-model="date"
+              value-format="yyyy-MM-dd"
+              size="small"
+              style="width: 234px; margin-right: 10px"
+              type="daterange"
+              @change="e => { selected.start_date = e[0];selected.end_date = e[1] }"></el-date-picker>
+            <Button style="margin-right: 10px" type="primary" @click="getList">查询</Button>
+          </div>
+          <slot>
+          </slot>
+        </lx-header>
+      </div>
+    </div>
+
+    <el-amap vid="amapContainer" :amap-manager="amapManager"
+             class="amap" :style="{'height':height+'px'}">
+    </el-amap>
+
+    <el-card v-show="isShowCard" :style="{'position':'fixed','left':cardDom.x+'px','top':cardDom.y+'px','z-index':99999}">
+      <div v-if="select.info">
+        <div :style="{'color':statusColor,'padding-bottom':'20px','font-weight':600}">{{ statusFormat }}</div>
+        <div>
+          <i class="el-icon-timer" style="padding-right: 10px;"></i>
+          {{ $moment(select.info.start_time).format('yyyy-MM-DD  HH:mm') }} ~ {{ $moment(select.info.end_time).format('HH:mm') }}
+        </div>
+        <div style="display: flex;">
+          <div v-if="select.info.nurse" style="flex: 1;">
+            <div style="font-weight: 600;padding: 10px 0px;">护工信息</div>
+            <div>
+              <i class="el-icon-s-custom" style="padding-right: 10px;"></i>
+              <span  style="padding-right: 20px">{{ select.info.nurse.name }}</span>
+              <span>{{ select.info.nurse.sex }}</span>
+            </div>
+          </div>
+          <div v-if="select.info.customer" style="flex: 1">
+            <div style="font-weight: 600;padding: 10px 0px;">
+              客户信息
+            </div>
+            <div>
+              <i class="el-icon-user-solid" style="padding-right: 10px;"></i>
+              <span style="padding-right: 20px">{{ select.info.customer.name }}</span>
+              <span>{{ select.info.customer.sex }}</span>
+            </div>
+            <div>
+              <i class="el-icon-phone" style="padding-right: 10px;"></i>
+              {{ select.info.customer.phone }}
+            </div>
+            <div>
+              <i class="el-icon-location" style="padding-right: 10px;"></i>
+              {{ select.address.address }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap'
+import { scheduleIndex } from '@/api/schedule'
+
+const amapManager = new AMapManager()
+export default {
+  data() {
+    return {
+      date:'',
+      selected: {
+        customer_name:'',
+        nurse_name:'',
+        start_date:'',
+        end_date:'',
+      },
+      lists:[],
+      select:{},
+      marker:[],
+      isShowCard:false,
+      cardDom:{x:0,y:0},
+
+      height:0,
+      amapManager
+    }
+  },
+  methods: {
+
+    async getList(){
+      let res = await scheduleIndex(this.selected)
+      this.lists = res.map(item => {
+        let address = item.customer?.customer_address?.filter(item1 => item1.id === item.address_id)[0]
+        return {
+          address,
+          info:item
+        }
+      })
+      console.log(this.lists)
+      this.map.remove(this.marker)
+      this.markers()
+    },
+
+    reset(){
+      this.selected = {
+        customer_name:'',
+        nurse_name:'',
+        start_date:'',
+        end_date:'',
+      }
+    },
+
+    initLoad() {
+      let clientHeight = document.documentElement.clientHeight
+      let lxHeader_height = 96.5; //查询 头部
+      let paginationHeight = 37; //分页的高度
+      let topHeight = 50; //页面 头部
+      let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
+      this.height = tableHeight ?? 600
+    },
+    markers(){
+      this.marker = []
+      let map = new Map([
+        [0,require('../../assets/status0.png')],
+        [1,require('../../assets/status1.png')],
+        [2,require('../../assets/status2.png')]
+      ])
+      for(let i of this.lists){
+        let marker = new AMap.Marker({
+          draggable:false,
+          cursor:'pointer',
+          position:[Number(i.address?.lng || 0),Number(i.address?.lat || 0)],
+          icon:map.get(i.info.status),
+          label: {content:i.info.nurse?.name,offset:new AMap.Pixel(0,28)},
+          clickable:true,
+        })
+        this.marker.push(marker)
+        marker.on('mouseover',(e) => {
+          this.cardDom.x = e.originEvent.clientX
+          this.cardDom.y = e.originEvent.clientY
+          this.select = i
+          this.isShowCard = true
+        })
+        marker.on('mouseout',e => {
+          this.isShowCard = false
+        })
+        marker.setMap(this.map)
+      }
+    }
+  },
+  computed:{
+    statusFormat() {
+      let map = new Map([
+        [0,'未开始'],
+        [1,'进行中'],
+        [2,'已完成']
+      ])
+      return map.get(this.select.info.status)
+    },
+    statusColor(){
+      let map = new Map([
+        [0,'blue'],
+        [1,'red'],
+        [2,'green']
+      ])
+      return map.get(this.select.info.status)
+    }
+  },
+  created() {
+    this.initLoad()
+  },
+  async mounted() {
+    lazyAMapApiLoaderInstance.load().then(() => {
+      this.map = new AMap.Map('amapContainer')
+    })
+    await this.getList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .amap-icon img{
+  height: 25px !important;
+}
+.select-item{
+  display: flex;
+  align-items: center;
+
+  &__label{
+    width: 100px;
+    padding: 10px 10px;
+  }
+}
+</style>

src/views/schedule/schedule.vue

@@ -28,6 +28,7 @@
                 <div class="select-item">
                   <div class="select-item__label">所属月份</div>
                   <el-date-picker
+                    size="small"
                     v-model="select.month"
                     type="month"
                     value-format="yyyy-MM"