fix: 地图调整

vue/src/views/dataMap/companyDataMap.vue

@@ -158,7 +158,7 @@
         <div class="pagination-box">
           <span>共{{ companyTotal }}{{ searchType == 'company' ? '家' : '个' }}</span>
           <a-pagination v-model:current="companySearchParam.pageIndex" :total="companyTotal"
-                        v-model:pageSize="companySearchParam.pageSize"
+                        v-model:pageSize="companySearchParam.pageSize" :disabled="searchLoading"
                         show-less-items @change="companyPaginationChange" simple :show-size-changer="false"/>
         </div>
       </div>
@@ -670,7 +670,6 @@ function companyPaginationChange() {
 
 // 企业信息点击事件
 const checkCompanyChange = async (company: any, funE: any) => {
-  console.log(company)
   if (funE) {
     nowCheckCompany.value = JSON.parse(JSON.stringify(company));
   } else {
@@ -683,7 +682,7 @@ const checkCompanyChange = async (company: any, funE: any) => {
   // 设置中心点到企业位置
   if (company.longitude && company.latitude) {
     // 设置中心点
-    (map as any).centerAndZoom(new T.LngLat(company.longitude, company.latitude), 14);
+    (map as any).centerAndZoom(new T.LngLat(company.longitude, company.latitude), (map as any).getZoom());
     let winHtml = "";
     if (searchType.value == 'company') {
       winHtml = `
@@ -707,7 +706,7 @@ const checkCompanyChange = async (company: any, funE: any) => {
       autoPan: true,
       maxHeight: 300,
       maxWidth: 400,
-      offset: new T.Point(10, -10)
+      offset: new T.Point(10, 0)
     });
   }
   await findPostList();

vue/src/views/dataMap/jobUserDataMap.vue

@@ -98,17 +98,62 @@
             </div>
           </div>
           <div v-else class="empty-box">
-            <a-empty/>
+            <a-empty description="暂无求职人员"/>
           </div>
         </div>
         <!-- 分页控件 -->
         <div class="pagination-box">
           <span>共{{ jobUserTotal }}人</span>
           <a-pagination v-model:current="searchParams.pageIndex" :total="jobUserTotal"
-                        v-model:pageSize="searchParams.pageSize"
+                        v-model:pageSize="searchParams.pageSize" :disabled="searchLoading"
                         show-less-items @change="onSearch" simple :show-size-changer="false"/>
         </div>
       </div>
+      <!-- 右侧数据详情内容 -->
+      <div v-if="nowCheckJobUser.jobUserID" class="right-data-box">
+        <!-- 求助人员信息 -->
+        <div class="jobUser-data-box margin-bottom-10">
+          <p class="font-size-14 font-weight-600 margin-bottom-8">
+            {{ nowCheckJobUser.name }}
+          </p>
+          <p class="label-text">年龄：{{ nowCheckJobUser.age }}岁</p>
+          <p class="label-text">{{ nowCheckJobUser.keyTypeName }}</p>
+          <!-- 标签 -->
+          <div class="label-box" v-if="nowCheckJobUser.labelList.length > 0"
+               :ref="el => nowCheckJobUserLabelBoxRef = el"
+               :class="{'label-box-max-height': nowCheckJobUserLabelExpanded}">
+            <a-tag v-for="(label, labelIndex) in nowCheckJobUser.labelList" :key="labelIndex">
+              {{ label.labelName }}
+            </a-tag>
+            <div v-if="showLaunchBtnBox(nowCheckJobUserLabelBoxRef,null,40)">
+                <span class="launch-btn" v-if="nowCheckJobUserLabelExpanded"
+                      @click.stop="nowCheckJobUserLabelExpanded = false">展开</span>
+              <span class="launch-btn" v-else @click.stop="nowCheckJobUserLabelExpanded = true">收起</span>
+            </div>
+          </div>
+        </div>
+        <!-- 求助意向列表 -->
+        <div v-if="jobHuntList.length > 0" class="jobHunt-list-box">
+          <div class="jobHunt-box" v-for="(jobHunt, jobHuntIndex) in jobHuntList" :key="jobHuntIndex">
+            <div class="jobHunt-title">
+              <span class="font-weight-700">{{ jobHunt.professionName }}</span>
+              <span class="jobHunt-salary">{{ showSalary(jobHunt.minSalary, jobHunt.maxSalary) }}</span>
+            </div>
+            <p class="label-text">求职类型：{{ jobHunt.jobHuntTypeStr }}</p>
+            <p class="label-text">可到职日期：{{ dayjs(jobHunt.inDate).format("YYYY-MM-DD") }}</p>
+          </div>
+        </div>
+        <div v-else class="empty-box">
+          <a-empty description="暂无求职意向"/>
+        </div>
+        <!-- 分页控件 -->
+        <div class="pagination-box">
+          <span>共{{ jobHuntTotal }}个</span>
+          <a-pagination v-model:current="jobHuntSearchParams.pageIndex" :total="jobHuntTotal"
+                        v-model:pageSize="jobHuntSearchParams.pageSize"
+                        show-less-items @change="jobHuntPaginationChange" simple :show-size-changer="false"/>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -123,6 +168,8 @@ import {getRegionCodeList} from "@/api/system/area/index";
 import {getSysDictionaryList} from "@/api/system/dictionary";
 import {getDataMapList} from "@/api/jobUserManager/jobuser";
 import thIcon from "@/assets/images/blueTh.png"
+import {getJobHuntList} from "@/api/jobUserManager/jobhunt";
+import dayjs from "dayjs";
 
 const T = (window as any).T;
 const zoom = 9;
@@ -132,9 +179,6 @@ const centerLngLat = new T.LngLat(114.416110, 23.111582);
 // 地图标记点
 let markerList = ref<Array<any>>([]);
 let labelList = ref<Array<any>>([]);
-let labelNumberCount = ref(0);
-const jobUserCountMarker = ref<any>(null)
-const jobUserCountLabel = ref<any>(null)
 
 const searchParams = reactive({
   pageIndex: 1,
@@ -145,10 +189,19 @@ const searchParams = reactive({
   regionCode: null,
   labelID: null
 })
+const jobHuntSearchParams = reactive({
+  pageIndex: 1,
+  pageSize: 100,
+  jobUserID: "",
+})
 // 求职人员数据
 const jobUserList = ref<Array<any>>([])
 // 求职人员数据总条数
 const jobUserTotal = ref(0)
+// 选择的求职人员的求助意向
+const jobHuntList = ref<Array<any>>([])
+// 求助意向数据总条数
+const jobHuntTotal = ref(0)
 
 // 求职人员标签
 const jobUserLabelDicList = ref<Array<any>>([]);
@@ -164,6 +217,10 @@ const nowCheckJobUser = ref<any>({})
 const nowMouseenterJobUser = ref<any>({});
 // 求职人员标签div ref
 const jobUserLabelBoxRef = ref<Array<any>>([]);
+// 右侧求职人员详情的标签盒子ref
+const nowCheckJobUserLabelBoxRef = ref<any>(null);
+// 右侧求职人员详情的标签展开与收起开关
+const nowCheckJobUserLabelExpanded = ref(true)
 
 // 查询求职人员标签字典
 function getJobUserLabelDicList() {
@@ -186,6 +243,9 @@ const getKeyPersonTypeList = () => {
 
 // 求职人员查询
 function onSearch() {
+  // 清空选择数据
+  nowCheckJobUser.value.jobUserID = false;
+
   searchLoading.value = true;
   getDataMapList(searchParams).then((result: any) => {
     jobUserList.value = result.list;
@@ -197,7 +257,7 @@ function onSearch() {
       item.labelExpanded = true;
     })
 
-    setMapMarker();
+    setMapMarker(true);
   }).finally(() => {
     searchLoading.value = false;
   })
@@ -210,85 +270,44 @@ const initMap = () => {
   if (map != null) {
     // 设置地图显示中心点为惠州市人民政府
     (map as any).centerAndZoom(centerLngLat, zoom);
-    (map as any).setMinZoom(7);
+    (map as any).setMinZoom(5);
     (map as any).setMaxZoom(14);
 
     // 地图缩放监听事件
     (map as any).addEventListener("zoomend", function () {
-      let zoomLevel = (map as any).getZoom();
-      console.log(zoomLevel);
-      const sizeData = computeMarkerSize(zoomLevel);
-      console.log(sizeData)
-
-      if (zoomLevel <= 9) {
-        // 删除小标点
-        markerList.value.forEach((item: any) => {
-          (map as any).removeOverLay(item);
-        });
-        labelList.value.forEach((item: any) => {
-          (map as any).removeOverLay(item);
-        });
-        if (jobUserCountMarker.value != null) {
-          // 显示总数标点
-          jobUserCountMarker.value.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
-          jobUserCountMarker.value.getIcon().setIconAnchor(sizeData.iconAnchor);
-          (map as any).addOverLay(jobUserCountMarker.value);
-          jobUserCountLabel.value.setOffset(sizeData.labelOffset);
-          jobUserCountLabel.value.setFontSize(sizeData.fontSize);
-          (map as any).addOverLay(jobUserCountLabel.value);
-        }
-      } else {
-        // 删除总数标点
-        (map as any).removeOverLay(jobUserCountMarker.value);
-        (map as any).removeOverLay(jobUserCountLabel.value);
-
-        markerList.value.forEach((item: any) => {
-          (map as any).removeOverLay(item);
-          item.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
-          item.getIcon().setIconAnchor(sizeData.iconAnchor);
-          (map as any).addOverLay(item);
-        })
-        labelList.value.forEach((item: any) => {
-          (map as any).removeOverLay(item);
-          item.setOffset(sizeData.labelOffset);
-          item.setFontSize(sizeData.fontSize);
-          (map as any).addOverLay(item);
-        })
-      }
+      setMapMarker(false);
     });
   }
   // 设置城市边界
   setBoundary(map, T, huiZhouGeoJSON);
 };
 
-// 设置标点
-function setMapMarker() {
+// 清空地图标点
+function delMapInfo() {
   // 删除已有标点
   if (markerList.value.length > 0) {
     for (let i = 0; i < markerList.value.length; i++) {
       (map as any).removeOverLay(markerList.value[i]);
     }
-    markerList.value = []
+    markerList.value = [];
   }
   if (labelList.value.length > 0) {
     for (let i = 0; i < labelList.value.length; i++) {
       (map as any).removeOverLay(labelList.value[i]);
     }
-    labelList.value = []
-  }
-  if (jobUserCountMarker.value) {
-    (map as any).removeOverLay(jobUserCountMarker.value);
-  }
-  if (jobUserCountLabel.value) {
-    (map as any).removeOverLay(jobUserCountLabel.value);
+    labelList.value = [];
   }
-  jobUserCountMarker.value = null;
-  jobUserCountLabel.value = null;
-  // 重置总数
-  labelNumberCount.value = 0;
+  (map as any).closeInfoWindow();
+}
+
+// 设置标点
+function setMapMarker(setCenter: boolean) {
+  delMapInfo();
 
   // 设置中心点
-  (map as any).centerAndZoom(centerLngLat, zoom);
+  if (setCenter) {
+    (map as any).centerAndZoom(centerLngLat, zoom);
+  }
 
   if (jobUserList.value.length > 0) {
     let zoomLevel = (map as any).getZoom();
@@ -308,37 +327,20 @@ function setMapMarker() {
       if (item.longitude && item.latitude) {
         const key = `${item.longitude},${item.latitude}`;
         if (!pointCountMap.has(key)) {
-          pointCountMap.set(key, {count: 0, data: item});
+          pointCountMap.set(key, {count: 0, data: item, jobUserHtml: ""});
         }
         pointCountMap.get(key).count++;
+        pointCountMap.get(key).jobUserHtml += `
+          <div style="margin: 5px 0; cursor: pointer" onclick="checkJobUserById('${item.jobUserID}')">${item.name}</div>
+        `;
       }
     });
     // 转换为数组
     pointCountMap.forEach((value) => {
-      filteredJobUserList.push({...value.data, count: value.count});
-      labelNumberCount.value += value.count;
-    });
-
-    // 设置总数标点
-    const marker = new T.Marker(centerLngLat, {icon: icon}); // 创建标注
-    let label = new T.Label({
-      text: labelNumberCount.value + "", //文本标注的内容
-      position: centerLngLat, //文本标注的地理位置
-      offset: sizeData.labelOffset, //文本标注的位置偏移值
+      filteredJobUserList.push({...value.data, count: value.count, jobUserHtml: value.jobUserHtml});
     });
-    label.setBackgroundColor("transparent");
-    label.setBorderColor("transparent");
-    label.setBorderLine(0);
-    label.setFontSize(sizeData.fontSize);
-    label.setFontColor("white");
-    if (zoomLevel <= 9) {
-      (map as any).addOverLay(marker);// 将标注添加到地图中
-      (map as any).addOverLay(label);// 将标注添加到地图中
-    }
-    jobUserCountMarker.value = marker;
-    jobUserCountLabel.value = label;
 
-    // 解析站点数据，在地图中标记
+    // 解析求职人员数据，在地图中标记
     filteredJobUserList.forEach((item: any) => {
       if (item.longitude && item.latitude) {
         const point = new T.LngLat(item.longitude, item.latitude)
@@ -353,10 +355,28 @@ function setMapMarker() {
         label.setBorderLine(0);
         label.setFontSize(sizeData.fontSize);
         label.setFontColor("white");
-        if (zoomLevel >= 10) {
-          (map as any).addOverLay(marker);// 将标注添加到地图中
-          (map as any).addOverLay(label);// 将标注添加到地图中
-        }
+
+        let winHtml = `
+            <div >
+                <p style="font-size: 14px; font-weight: 600;">求职人员：</p>
+                ${item.jobUserHtml}
+            </div>
+          `;
+        let markerInfoWin = new T.InfoWindow(winHtml, {
+          autoPan: true,
+          maxHeight: 300,
+          maxWidth: 400,
+        });
+        // 添加鼠标经过事件
+        marker.addEventListener('mouseover', () => {
+          marker.openInfoWindow(markerInfoWin);
+        });
+        marker.addEventListener('click', () => {
+          marker.openInfoWindow(markerInfoWin);
+        });
+
+        (map as any).addOverLay(marker);// 将标注添加到地图中
+        (map as any).addOverLay(label);// 将标注添加到地图中
         markerList.value.push(marker);
         labelList.value.push(label);
       }
@@ -388,12 +408,43 @@ function computeMarkerSize(zoomLevel: any) {
   }
 }
 
-// 选择站点
+// 选择求职人员
 function checkJobUser(jobUser: any) {
   nowCheckJobUser.value = JSON.parse(JSON.stringify(jobUser))
+  // 查询求职意向
+  jobHuntList.value = [];
+  jobHuntTotal.value = 0;
+  getJobHunt();
   if (jobUser.longitude && jobUser.latitude) {
     // 设置地图中心点
-    (map as any).centerAndZoom(new T.LngLat(jobUser.longitude, jobUser.latitude), 14);
+    (map as any).centerAndZoom(new T.LngLat(jobUser.longitude, jobUser.latitude), (map as any).getZoom());
+    // 地图打开弹窗
+    let winHtml = `
+      <div>
+        <span style="font-size: 14px; font-weight: 600;margin-bottom: 5px;">${jobUser.name}</span><br>
+        <span>${jobUser.age}岁</span><br>
+        <span>${jobUser.keyTypeName}</span>
+      </div>
+    `;
+    (map as any).openInfoWindow(winHtml, new T.LngLat(jobUser.longitude, jobUser.latitude), {
+      autoPan: true,
+      maxHeight: 300,
+      maxWidth: 400,
+      offset: new T.Point(10, 0)
+    });
+  }
+}
+
+// 选择求职人员
+function checkJobUserById(jobUserID: any) {
+  nowCheckJobUser.value = jobUserList.value.find(item => item.jobUserID == jobUserID);
+  // 查询求职意向
+  jobHuntList.value = [];
+  jobHuntTotal.value = 0;
+  getJobHunt();
+  if (nowCheckJobUser.value.longitude && nowCheckJobUser.value.latitude) {
+    // 设置地图中心点
+    (map as any).centerAndZoom(new T.LngLat(nowCheckJobUser.value.longitude, nowCheckJobUser.value.latitude), (map as any).getZoom());
   }
 }
 
@@ -427,6 +478,37 @@ function ageBlur() {
   }
 }
 
+// 查询求职意向
+async function getJobHunt() {
+  jobHuntSearchParams.jobUserID = nowCheckJobUser.value.jobUserID;
+  await getJobHuntList(jobHuntSearchParams).then((result: any) => {
+    jobHuntList.value = result.list;
+    jobHuntTotal.value = result.total;
+  })
+}
+
+// 求助意向分页变更事件
+function jobHuntPaginationChange() {
+  getJobHunt();
+}
+
+// 岗位薪酬优化显示
+const showSalary = (minSalary: any, maxSalary: any) => {
+  if (minSalary != null) {
+    if (maxSalary != null) {
+      return (minSalary / 1000).toString() + "-" + (maxSalary / 1000).toString() + 'K';
+    } else {
+      return "≥" + (minSalary / 1000).toString() + "K";
+    }
+  } else {
+    if (maxSalary != null) {
+      return "≤" + (maxSalary / 1000).toString() + "K";
+    } else {
+      return "";
+    }
+  }
+}
+
 // 查询全部
 function searchAll() {
   searchParams.pageIndex = 1
@@ -443,6 +525,7 @@ onMounted(() => {
   getRegionList();
   getKeyPersonTypeList();
   onSearch();
+  (window as any).checkJobUserById = checkJobUserById;
 })
 </script>
 
@@ -478,6 +561,12 @@ export default {
     color: #899099
   }
 
+  .label-text {
+    font-size: 12px;
+    color: #737373;
+    margin-bottom: 3px;
+  }
+
   .jobUser-search-data-box {
     position: absolute;
     width: 330px;
@@ -489,7 +578,6 @@ export default {
 
     .search-box, .data-box, .pagination-box {
       padding: 8px;
-      border-radius: 10px;
       background-color: #F8F8F8;
     }
 
@@ -503,6 +591,7 @@ export default {
     .data-box {
       height: calc(100% - 135px);
       padding: 10px;
+      border-radius: 0;
 
       .list-box {
         width: 100%;
@@ -518,12 +607,6 @@ export default {
           box-sizing: border-box;
           border: 1px solid white;
 
-          .label-text {
-            font-size: 12px;
-            color: #737373;
-            margin-bottom: 3px;
-          }
-
           .jobHunt-box {
             width: 100%;
             display: flex;
@@ -583,10 +666,102 @@ export default {
     }
 
     .pagination-box {
+      border-radius: 0 0 10px 10px;
       display: flex;
       justify-content: center;
       align-items: center;
     }
   }
+
+  .right-data-box {
+    position: absolute;
+    top: 15px;
+    left: calc(100% - 360px);
+    right: 15px;
+    bottom: 15px;
+    z-index: 110;
+    background-color: #F8F8F8;
+    border-radius: 10px;
+    padding: 10px;
+
+    .jobUser-data-box {
+      background-color: white;
+      padding: 18px;
+      width: 100%;
+      max-height: 135px;
+      overflow-y: auto;
+      border-radius: 10px;
+
+      .label-box {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        margin-top: 5px;
+        overflow: hidden;
+        position: relative;
+
+        .ant-tag {
+          margin-top: 3px;
+        }
+
+        .launch-btn {
+          font-size: 12px;
+          color: #40a9ff;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          cursor: pointer;
+        }
+      }
+
+      .label-box-max-height {
+        max-height: 23px;
+      }
+    }
+
+    .jobHunt-list-box {
+      width: 100%;
+      height: calc(100% - 185px);
+      overflow: hidden;
+      overflow-y: auto;
+
+      .jobHunt-box {
+        border-radius: 10px;
+        background-color: white;
+        padding: 8px 10px;
+        margin-bottom: 10px;
+
+        .jobHunt-title {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          font-size: 14px;
+          font-weight: normal;
+          margin-bottom: 8px;
+
+          .jobHunt-salary {
+            color: #DE4F3F;
+          }
+        }
+      }
+    }
+
+    .empty-box {
+      width: 100%;
+      height: calc(100% - 185px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .pagination-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: white;
+      padding: 8px 0;
+      border-radius: 10px;
+    }
+  }
 }
 </style>

vue/src/views/dataMap/siteDataMap.vue

@@ -119,7 +119,7 @@
         <div class="pagination-box">
           <span>共{{ paginationTotal }}{{ searchType == 'site' ? '个' : '人' }}</span>
           <a-pagination v-model:current="siteSearchParam.pageIndex" :total="paginationTotal"
-                        v-model:pageSize="siteSearchParam.pageSize"
+                        v-model:pageSize="siteSearchParam.pageSize" :disabled="searchLoading"
                         show-less-items @change="onSearch" simple :show-size-changer="false"/>
         </div>
       </div>
@@ -415,6 +415,7 @@ function delMapInfo() {
     }
     labelList.value = [];
   }
+  (map as any).closeInfoWindow();
 }
 
 // 天地图按缩放基本计算图标与文本的大小与锚点偏移值
@@ -422,13 +423,13 @@ function computeMarkerSize(zoomLevel: any) {
   // 计算新的icon大小
   let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
   // 计算新的icon锚点位置
-  let iconAnchor = new T.Point(15 * (newIconSize / 45), 30 * (newIconSize / 45));
+  let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
   // 计算新的偏移量，保持 label 居中且不超过初始值
-  let offsetX = -30 + ((newIconSize - 45) / 3);
-  let offsetY = 30 + ((newIconSize - 45) / 3);
+  let offsetX = -20 + ((newIconSize - 45) / 3);
+  let offsetY = 28 + ((newIconSize - 45) / 3);
   // 确保偏移量不超过初始值
-  offsetX = Math.max(offsetX, -30);
-  offsetY = Math.min(offsetY, 30);
+  offsetX = Math.max(offsetX, -20);
+  offsetY = Math.min(offsetY, 28);
   // 更新 label 的偏移量
   let newOffset = new T.Point(offsetX, offsetY);
   let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))
@@ -450,7 +451,7 @@ function checkSite(site: any) {
   nowCheckSite.value = JSON.parse(JSON.stringify(site))
   if (site.siteLongitude && site.siteLatitude) {
     // 设置地图中心点
-    (map as any).centerAndZoom(new T.LngLat(site.siteLongitude, site.siteLatitude), 14);
+    (map as any).centerAndZoom(new T.LngLat(site.siteLongitude, site.siteLatitude), (map as any).getZoom());
     if (searchType.value == 'site') {
       let winHtml = `
             <div >
@@ -466,7 +467,7 @@ function checkSite(site: any) {
         autoPan: true,
         maxHeight: 300,
         maxWidth: 400,
-        offset: new T.Point(5, -20)
+        offset: new T.Point(5, 0)
       });
     }
   }
@@ -485,10 +486,10 @@ async function checkSiteUser(siteUser: any) {
   nowCheckSiteUser.value = JSON.parse(JSON.stringify(siteUser))
   if (siteUser.longitude && siteUser.latitude) {
     // 设置地图中心点
-    (map as any).centerAndZoom(new T.LngLat(siteUser.longitude, siteUser.latitude), 14);
+    (map as any).centerAndZoom(new T.LngLat(siteUser.longitude, siteUser.latitude), (map as any).getZoom());
   } else if (siteUser.siteLongitude && siteUser.siteLatitude) {
     // 设置地图中心点
-    (map as any).centerAndZoom(new T.LngLat(siteUser.siteLongitude, siteUser.siteLatitude), 14);
+    (map as any).centerAndZoom(new T.LngLat(siteUser.siteLongitude, siteUser.siteLatitude), (map as any).getZoom());
   }
 }