完成医院患者的人员分布

index.html

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
     <script type="text/javascript"
-            src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR"></script>
+            src="http://api.map.baidu.com/api?v=2.0&ak=rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR"></script>
     <script src="/src/baidu_mapv"></script>
 
     <title></title>

src/App.vue

@@ -76,6 +76,10 @@ function getWindowSize() {
 </script>
 
 <style>
+.小手指 {
+  cursor: pointer;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/api/reports/patient-distribution-address.js

@@ -1,8 +1,9 @@
 import request from "@/utils/request";
 
-export function patientAddress() {
+export function patientAddress(patientType, inHospital, startTime, endTime) {
     return request({
         url: '/PatientDistributionAddress/patientAddress',
-        method: 'get'
+        method: 'get',
+        params: {patientType, inHospital, startTime, endTime}
     })
 }

src/views/reports/InpatientAddrAnalyze.vue

@@ -1,15 +1,88 @@
 <template>
-  <div id="allmap" style="height: 100%;width: 100%"></div>
+  <div class="main">
+    <div class="search">
+      <div class="left_blank"/>
 
+      <transition name="el-zoom-in-center">
+        <div class="search_main" v-show="showSearch">
+
+          <el-select style="width: 60px;margin-left: 5px" v-model="patientType">
+            <el-option :value="1" label="住院"/>
+            <el-option :value="2" label="门诊"/>
+          </el-select>
+
+          <el-date-picker
+              v-model="dateRange"
+              :shortcuts="shortcuts"
+              end-placeholder="结束日期"
+              placeholder="选择日期"
+              range-separator="至"
+              start-placeholder="开始日期"
+              style="width: 220px;top:3px"
+              type="daterange"/>
+
+          <el-select style="width: 60px" v-model="inHospital">
+            <el-option :value="1" label="在院"/>
+            <el-option :value="2" label="出院"/>
+          </el-select>
+
+          <el-button icon="Search" type="primary" @click="queryData"/>
+
+        </div>
+      </transition>
+
+      <div class="search_icon 小手指" @click="showSearch = !showSearch">
+        <el-icon>
+          <ArrowLeftBold v-show="showSearch"/>
+          <ArrowRightBold v-show="!showSearch"/>
+        </el-icon>
+      </div>
+
+    </div>
+    <div id="allmap" style="height: 100%;width: 100%"></div>
+    <transition name="el-fade-in-linear">
+      <div class="patient_info" v-show="showInfoWindow">
+        <el-icon class="close 小手指" @click="closePatientInfoWindow">
+          <CircleClose/>
+        </el-icon>
+        <div class="title" @click="locateThePatient">
+          患者信息
+        </div>
+        <div class="body">
+          <span>
+          患者姓名:{{ patientInfo.name }}
+          </span>
+          <span>
+          门诊/住院号: {{ patientInfo.patNo }}
+          </span>
+
+        </div>
+      </div>
+    </transition>
+  </div>
 </template>
 
 
 <script setup>
 import {patientAddress} from "@/api/reports/patient-distribution-address";
+import {shortcuts} from '@/data/shortcuts'
+import {getDateRangeFormatDate} from "@/utils/date";
+import thyy from '@/assets/csthyylogoplain.png'
+
+let thyyLocation = new BMap.Point(112.96716239793697, 28.309655062968343)
 
-let map = null;
+let patientInfo = $ref('')
+let showInfoWindow = $ref(false)
+
+let showSearch = $ref(false)
+let dateRange = $ref([])
+let inHospital = $ref(1)
+let patientType = $ref(1)
 
 const createADrawing = (data) => {
+  map.clearOverlays()
+  createAHospitalLogo()
+
   let points = []
 
   for (let i = 0, len = data.length; i < len; i++) {
@@ -17,7 +90,7 @@ const createADrawing = (data) => {
     points.push({
       geometry: {
         type: 'Point',
-        patNo: item.inpatientNo,
+        patientData: item,
         coordinates: [item.longitude, item.latitude]
       },
     })
@@ -43,41 +116,143 @@ const createADrawing = (data) => {
       show: true, // 是否显示
       fillStyle: 'white',
     },
-    gradient: {0: "blue", 0.5: 'yellow', 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色
+    gradient: {0: "blue", 0.5: "#28f51a", 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色
     draw: 'cluster',
     methods: {
-      click(point, event) {
-        var opts = {
-          width: 200,
-          height: 100,
-          title: '大唐不夜城'
-        };
-        console.log(point)
-
-        console.log(map.getCenter())
-        var infoWindow = new BMapGL.InfoWindow('地址：陕西省西安市雁塔区大唐不夜城', opts);
-        map.openInfoWindow(infoWindow, {lng: point.geometry.coordinates[0], lat: point.geometry.coordinates[1]}); // 开启信息窗口
-
-        // 通过children可以拿到被聚合的所有点
-        console.log(point);
+      click(point) {
+        if (point?.geometry?.patientData) {
+          deletePreviousPunctuation()
+          map.removeOverlay(new BMap.Point(patientInfo.longitude, patientInfo.latitude))
+          showInfoWindow = true
+          patientInfo = point?.geometry?.patientData
+          patientInfo.mapPoint = new BMap.Point(patientInfo.longitude, patientInfo.latitude)
+          locateThePatient()
+          marker()
+        }
       }
     }
   }
   new mapv.baiduMapLayer(map, dataSet, options);
+}
 
+const locateThePatient = () => {
+  map.panTo(patientInfo.mapPoint)
+}
+
+const marker = () => {
+  const marker = new BMap.Marker(patientInfo.mapPoint);
+  marker.id = patientInfo.patNo
+  map.addOverlay(marker)
+}
+
+const closePatientInfoWindow = () => {
+  showInfoWindow = false
+  deletePreviousPunctuation()
+}
+
+const deletePreviousPunctuation = () => {
+  let data = map.getOverlays()
+  for (let i = 0; i < data.length; i++) {
+    let item = data[i]
+    if (data[i].id) {
+      if (data[i].id === patientInfo.patNo) {
+        map.removeOverlay(item)
+      }
+    }
+  }
+}
+
+const queryData = () => {
+  let dateS = getDateRangeFormatDate(dateRange)
+  map.panTo(thyyLocation)
+  patientAddress(patientType, inHospital, dateS.startTime, dateS.endTime).then((res) => {
+    createADrawing(res)
+  })
+}
+
+const createAHospitalLogo = () => {
+  const myIcon = new BMap.Icon(thyy, new BMap.Size(40, 40));
+  myIcon.setImageSize(new BMap.Size(40, 40))
+  const marker = new BMap.Marker(thyyLocation, {
+    icon: myIcon
+  });
+  map.addOverlay(marker);
 }
 
 onMounted(() => {
-  map = new BMapGL.Map("allmap", {
+  window.map = new BMap.Map("allmap", {
     enableMapClick: false
   }); // 创建Map实例
-  map.centerAndZoom(new BMapGL.Point(105.403119, 38.028658), 7); // 初始化地图,设置中心点坐标和地图级别
+  map.centerAndZoom(thyyLocation, 15); // 初始化地图,设置中心点坐标和地图级别
   map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
 
-  patientAddress().then((res) => {
-    createADrawing(res)
-  })
+  queryData()
 
 })
 
 </script>
+
+<style scoped lang="scss">
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .search {
+    margin: 5px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    z-index: 10;
+    background-color: white;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    line-height: 40px;
+
+    .search_main {
+      padding: 5px;
+    }
+
+    .search_icon {
+      padding: 5px;
+    }
+  }
+
+  .patient_info {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 5px;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 16px;
+    width: 220px;
+    text-align: center;
+    background-color: white;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    .close {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    .title {
+      background-color: #0a84fd;
+      border-radius: 5px;
+      color: white;
+      margin: 5px;
+      padding: 5px;
+    }
+
+    .body {
+      color: #000000;
+      font-size: 12px;
+      text-align: left;
+      margin: 5px;
+    }
+
+  }
+}
+
+</style>