feat: 求职人员数据地图与样式调整

src/main/java/com/hz/employmentsite/controller/jobUserManager/JobUserController.java

@@ -14,7 +14,7 @@ import com.hz.employmentsite.model.SelectProps;
 import com.hz.employmentsite.services.service.AccountService;
 import com.hz.employmentsite.services.service.jobUserManager.JobUserService;
 import com.hz.employmentsite.util.ExcelHelper;
-import com.hz.employmentsite.util.StringUtils;
+import com.hz.employmentsite.vo.dataMap.JobUserMapVo;
 import com.hz.employmentsite.vo.jobUserManager.JobUserVo;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
@@ -205,4 +205,14 @@ public class JobUserController {
 
     }
 
+    @GetMapping("/dataMap")
+    public BaseResponse getDataMapList(@RequestParam("pageIndex") int pageIndex, @RequestParam("pageSize") int pageSize,
+                                                 @RequestParam(required = false) Integer keyTypeValue, @RequestParam(required = false) String regionCode,
+                                                 @RequestParam(required = false) String labelID, @RequestParam(required = false) Integer minAge,
+                                                 @RequestParam(required = false) Integer maxAge) {
+        PageInfo<JobUserMapVo> result = jobuserService.getDataMapList(pageIndex, pageSize, keyTypeValue, regionCode, labelID, minAge, maxAge);
+        return RespGenerstor.success(result);
+    }
+
+
 }

src/main/java/com/hz/employmentsite/mapper/cquery/JobUserCQuery.java

@@ -1,6 +1,7 @@
 package com.hz.employmentsite.mapper.cquery;
 
 import com.hz.employmentsite.model.PcJobuser;
+import com.hz.employmentsite.vo.dataMap.JobUserMapVo;
 import com.hz.employmentsite.vo.jobUserManager.JobUserVo;
 import org.apache.ibatis.annotations.Param;
 
@@ -19,4 +20,18 @@ public interface JobUserCQuery {
     List<PcJobuser> getJobUserIdentityNumber();
 
     List<PcJobuser> getJobUserUserMobile();
+
+    /**
+     * 求职人员数据可视化地图查询
+     *
+     * @param keyTypeValue 重点人员类别
+     * @param regionCode   所属县区
+     * @param labelID      标签
+     * @param minAge       最小年龄
+     * @param maxAge       最大年龄
+     * @return 求职人员数据
+     */
+    List<JobUserMapVo> getDataMapList(@Param("keyTypeValue") Integer keyTypeValue, @Param("regionCode") String regionCode,
+                                      @Param("labelID") String labelID, @Param("minAge") Integer minAge,
+                                      @Param("maxAge") Integer maxAge);
 }

src/main/java/com/hz/employmentsite/services/impl/jobUserManager/JobUserServiceImpl.java

@@ -10,6 +10,7 @@ import com.hz.employmentsite.model.*;
 import com.hz.employmentsite.services.service.jobUserManager.JobUserService;
 import com.hz.employmentsite.services.service.system.DictionaryService;
 import com.hz.employmentsite.util.*;
+import com.hz.employmentsite.vo.dataMap.JobUserMapVo;
 import com.hz.employmentsite.vo.jobUserManager.JobUserVo;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@@ -888,4 +889,12 @@ public class JobUserServiceImpl implements JobUserService {
         });
         return null;
     }
+
+    @Override
+    public PageInfo<JobUserMapVo> getDataMapList(int pageIndex, int pageSize, Integer keyTypeValue, String regionCode, String labelID, Integer minAge, Integer maxAge) {
+        PageHelper.startPage(pageIndex, pageSize);
+        List<JobUserMapVo> dataMapList = jobUserCQuery.getDataMapList(keyTypeValue, regionCode, labelID, minAge, maxAge);
+        PageInfo<JobUserMapVo> pageInfo = new PageInfo<>(dataMapList);
+        return pageInfo;
+    }
 }

src/main/java/com/hz/employmentsite/services/service/jobUserManager/JobUserService.java

@@ -5,7 +5,7 @@ import com.hz.employmentsite.model.PcEducation;
 import com.hz.employmentsite.model.PcExperience;
 import com.hz.employmentsite.model.PcPost;
 import com.hz.employmentsite.model.SelectProps;
-import com.hz.employmentsite.vo.jobUserManager.JobHuntVo;
+import com.hz.employmentsite.vo.dataMap.JobUserMapVo;
 import com.hz.employmentsite.vo.jobUserManager.JobUserVo;
 
 import java.util.Date;
@@ -40,4 +40,8 @@ public interface JobUserService {
     int baseInfoSave(JobUserVo data, String userId);
 
     List<JobUserVo> importJobUser(List<JobUserVo> dataList, String userID);
+
+    PageInfo<JobUserMapVo> getDataMapList(int pageIndex, int pageSize, Integer keyTypeValue,
+                                          String regionCode, String labelID, Integer minAge,
+                                          Integer maxAge);
 }

src/main/java/com/hz/employmentsite/vo/dataMap/JobUserMapVo.java

@@ -0,0 +1,22 @@
+package com.hz.employmentsite.vo.dataMap;
+
+import lombok.Data;
+
+@Data
+public class JobUserMapVo {
+    private String jobUserID;
+
+    private String name;
+
+    private Integer age;
+
+    private String keyTypeName;
+
+    private String longitude;
+
+    private String latitude;
+
+    // JSON格式的列表数据
+    private String labelList;
+    private String jobHuntList;
+}

vue/src/api/jobUserManager/jobuser/index.ts

@@ -101,3 +101,16 @@ export function getJobHuntList(id: any) {
     },
   );
 }
+
+export function getDataMapList(params: any) {
+  return request(
+    {
+      url: "jobUserService/jobUser/dataMap",
+      method: 'get',
+      params,
+    },
+    {
+      isNew: true,
+    },
+  );
+}

vue/src/assets/css/common.css

@@ -38,6 +38,10 @@ button {
   margin-top: 10px;
 }
 
+.margin-bottom-8 {
+  margin-bottom: 8px;
+}
+
 .margin-bottom-10 {
   margin-bottom: 10px;
 }

vue/src/views/dataMap/companyDataMap.vue

@@ -458,16 +458,16 @@ const initMap = () => {
       })
       // 更新 label 的偏移量
       // 计算新的偏移量，保持 label 居中且不超过初始值
-      let offsetX = -30 + ((newSize - 45) / 2);
-      let offsetY = 15 + ((newSize - 45) / 2);
+      let offsetX = -20 + ((newSize - 45) / 3);
+      let offsetY = 28 + ((newSize - 45) / 3);
       // 确保偏移量不超过初始值
-      offsetX = Math.max(offsetX, -25);
-      offsetY = Math.min(offsetY, 10);
+      offsetX = Math.max(offsetX, -20);
+      offsetY = Math.min(offsetY, 28);
       let newOffset = new T.Point(offsetX, offsetY);
       labelList.value.forEach((item: any) => {
         (map as any).removeOverLay(item);
         item.setOffset(newOffset);
-        item.setFontSize(Math.min(12, Math.max(8, 12 - (30 - newSize) / 3)));
+        item.setFontSize(Math.min(12, Math.max(8, 12 - (45 - newSize) / 3)));
         (map as any).addOverLay(item);
       })
     });
@@ -572,7 +572,7 @@ function setCompanyMarker() {
           let label = new T.Label({
             text: item.postNumber + "", //文本标注的内容
             position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
-            offset: new T.Point(-25, 10), //文本标注的位置偏移值
+            offset: new T.Point(-30, 10), //文本标注的位置偏移值
           });
           label.setBackgroundColor("transparent");
           label.setBorderColor("transparent");

vue/src/views/dataMap/jobUserDataMap.vue

@@ -6,7 +6,105 @@
         id="mapDiv"
       ></div>
       <!-- 求职人员查询与数据展示 -->
-      <div class="jobUser-search-data-box"></div>
+      <div class="jobUser-search-data-box">
+        <!-- 查询区域 -->
+        <div class="search-box">
+          <a-select
+            v-model:value="searchParams.keyTypeValue"
+            size="small"
+            :options="keyPersonTypeList"
+            :field-names="{ label: 'name', value: 'value' }"
+            :allow-clear="true"
+            :bordered="false"
+            placeholder="重点人员类别"
+            style="width: 40%;"
+          >
+          </a-select>
+          <div style="width: 60%">
+            <a-input-number id="inputNumber" v-model:value="searchParams.minAge" size="small" :controls="false"
+                            :bordered="false" style="width: 50px" placeholder="年龄" @blur="ageBlur"/>
+            <span style="margin: 0 4px;">至</span>
+            <a-input-number id="inputNumber" v-model:value="searchParams.maxAge" size="small" :controls="false"
+                            :bordered="false" style="width: 50px" placeholder="年龄" @blur="ageBlur"/>
+            <a-button type="text" size="small" style="width: 66px" :loading="searchLoading" @click="onSearch">查询
+            </a-button>
+          </div>
+          <div style="width: 100%; margin-top: 2px;">
+            <a-button type="text" size="small" style="width: 46px">全部</a-button>
+            <a-select
+              style="width: 42%;"
+              v-model:value="searchParams.regionCode"
+              :allow-clear="true"
+              :options="regionList"
+              :field-names="{ label: 'name', value: 'code' }"
+              :bordered="false"
+              placeholder="所属县区"
+            >
+            </a-select>
+            <a-select
+              style="width: 43%;"
+              v-model:value="searchParams.labelID"
+              :allow-clear="true"
+              :options="jobUserLabelDicList"
+              :field-names="{ label: 'labelName', value: 'labelID' }"
+              :bordered="false"
+              placeholder="人员标签"
+            >
+            </a-select>
+          </div>
+        </div>
+        <!-- 数据列表 -->
+        <div class="data-box">
+          <div v-if="jobUserList.length > 0" class="list-box">
+            <div class="jobUser-data-box margin-bottom-10 cursor-pointer" v-for="(jobUser,jobUserIndex) in jobUserList"
+                 :key="jobUserIndex"
+                 :class="{'check-jobUser':nowCheckJobUser.jobUserID == jobUser.jobUserID || nowMouseenterJobUser.jobUserID == jobUser.jobUserID}"
+                 @click="checkJobUser(jobUser)"
+                 @mouseenter="jobUserMouseenter(jobUser)"
+                 @mouseleave="jobUserMouseenter({jobUserID:-1})"
+            >
+              <p class="font-size-14 font-weight-600 margin-bottom-8">{{ jobUser.name }}</p>
+              <p class="label-text">年龄：{{ jobUser.age }}</p>
+              <!-- 岗位 -->
+              <div class="jobHunt-box label-text">
+                <span style="width: 65px; flex: 0 0 auto">求职意向：</span>
+                <a-tag v-if="jobUser.jobHuntList.length > 0"
+                       v-for="(jobHunt, jobHuntIndex) in jobUser.jobHuntList.slice(0, 3)"
+                       :key="jobHuntIndex">
+                  {{ jobHunt.professionName }}
+                </a-tag>
+                <span v-if="jobUser.jobHuntList && jobUser.jobHuntList.length > 3" class="all-post-btn"
+                      style="width: 25px;flex: 0 0 auto">
+                更多
+              </span>
+                <span v-if="jobUser.jobHuntList.length == 0" style="width: 25px;flex: 0 0 auto">暂无</span>
+              </div>
+              <!-- 标签 -->
+              <div class="label-box" v-if="jobUser.labelList.length > 0"
+                   :ref="el => jobUserLabelBoxRef[jobUserIndex] = el"
+                   :class="{'label-box-max-height': jobUser.labelExpanded}">
+                <a-tag v-for="(label, labelIndex) in jobUser.labelList" :key="labelIndex">
+                  {{ label.labelName }}
+                </a-tag>
+                <div v-if="showLaunchBtnBox(jobUserLabelBoxRef,jobUserIndex,40)">
+                <span class="launch-btn" v-if="jobUser.labelExpanded"
+                      @click.stop="jobUser.labelExpanded = false">展开</span>
+                  <span class="launch-btn" v-else @click.stop="jobUser.labelExpanded = true">收起</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="empty-box">
+            <a-empty/>
+          </div>
+        </div>
+        <!-- 分页控件 -->
+        <div class="pagination-box">
+          <a-pagination v-model:current="searchParams.pageIndex" :total="jobUserTotal"
+                        v-model:pageSize="searchParams.pageSize"
+                        show-less-items @change="onSearch" simple :show-size-changer="false"/>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -14,13 +112,90 @@
 <script setup lang="ts">
 import huiZhouGeoJSON from "./geo"
 import {setBoundary} from "@/utils/position";
-import {onMounted} from "vue";
+import {onMounted, reactive, ref} from "vue";
+import {getLabelList} from "@/api/baseSettings/label";
+import type {SelectProps} from "ant-design-vue";
+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"
 
 const T = (window as any).T;
 const zoom = 11;
 let map = null;
 // 地图标记点
-let markerList = new Array<any>([]);
+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,
+  pageSize: 100,
+  keyTypeValue: null,
+  minAge: null,
+  maxAge: null,
+  regionCode: null,
+  labelID: null
+})
+// 求职人员数据
+const jobUserList = ref<Array<any>>([])
+// 求职人员数据总条数
+const jobUserTotal = ref(0)
+
+// 求职人员标签
+const jobUserLabelDicList = ref<Array<any>>([]);
+// 县区数据
+const regionList = ref<SelectProps['options']>();
+// 重点人员类别
+const keyPersonTypeList = ref<SelectProps['options']>();
+// 查询加载
+const searchLoading = ref(false);
+// 点击选择的求职人员
+const nowCheckJobUser = ref<any>({})
+// 鼠标经过的求职人员
+const nowMouseenterJobUser = ref<any>({});
+// 求职人员标签div ref
+const jobUserLabelBoxRef = ref<Array<any>>([]);
+
+// 查询求职人员标签字典
+function getJobUserLabelDicList() {
+  getLabelList({pageIndex: 1, pageSize: 9999, bigType: 2}).then((result: any) => {
+    jobUserLabelDicList.value = result.list;
+  })
+}
+
+// 查询县区
+const getRegionList = async function () {
+  regionList.value = await getRegionCodeList();
+}
+
+// 查询重点人员类别字典
+const getKeyPersonTypeList = () => {
+  getSysDictionaryList('KeyPersonType').then((data) => {
+    keyPersonTypeList.value = data;
+  });
+};
+
+// 求职人员查询
+function onSearch() {
+  searchLoading.value = true;
+  getDataMapList(searchParams).then((result: any) => {
+    jobUserList.value = result.list;
+    jobUserTotal.value = result.total;
+
+    jobUserList.value.forEach((item: any) => {
+      item.labelList = JSON.parse(item.labelList || '[]');
+      item.jobHuntList = JSON.parse(item.jobHuntList || '[]');
+      item.labelExpanded = true;
+    })
+
+    setMapMarker();
+  }).finally(() => {
+    searchLoading.value = false;
+  })
+}
 
 // 地图初始化
 const initMap = () => {
@@ -29,13 +204,197 @@ const initMap = () => {
   if (map != null) {
     // 设置地图显示中心点为惠州市人民政府
     (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), zoom);
+
+    // 地图缩放监听事件
+    (map as any).addEventListener("zoomend", function () {
+      let zoomLevel = (map as any).getZoom();
+      console.log(zoomLevel);
+      // 计算新的icon大小
+      let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
+      console.log(newIconSize);
+      // 计算新的icon锚点位置
+      let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
+      // 计算新的偏移量，保持 label 居中且不超过初始值
+      let offsetX = -20 + ((newIconSize - 45) / 3);
+      let offsetY = 28 + ((newIconSize - 45) / 3);
+      // 确保偏移量不超过初始值
+      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))
+
+      if (zoomLevel <= 9) {
+        // 删除小标点
+        markerList.value.forEach((item: any) => {
+          (map as any).removeOverLay(item);
+        });
+        labelList.value.forEach((item: any) => {
+          (map as any).removeOverLay(item);
+        });
+        // 显示总数标点
+        jobUserCountMarker.value.getIcon().setIconSize(new T.Point(newIconSize, newIconSize));
+        jobUserCountMarker.value.getIcon().setIconAnchor(iconAnchor);
+        (map as any).addOverLay(jobUserCountMarker.value);
+        jobUserCountLabel.value.setOffset(newOffset);
+        jobUserCountLabel.value.setFontSize(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(newIconSize, newIconSize));
+          item.getIcon().setIconAnchor(iconAnchor);
+          (map as any).addOverLay(item);
+        })
+
+        labelList.value.forEach((item: any) => {
+          (map as any).removeOverLay(item);
+          item.setOffset(newOffset);
+          item.setFontSize(fontSize);
+          (map as any).addOverLay(item);
+        })
+      }
+    });
   }
   // 设置城市边界
   setBoundary(map, T, huiZhouGeoJSON);
 };
 
+// 设置标点
+function setMapMarker() {
+  // 删除已有标点
+  if (markerList.value.length > 0) {
+    for (let i = 0; i < markerList.value.length; i++) {
+      (map as any).removeOverLay(markerList.value[i]);
+    }
+    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 = []
+  }
+  // 重置总数
+  labelNumberCount.value = 0;
+
+  // 设置中心点
+  (map as any).centerAndZoom(new T.LngLat(114.416110, 23.111582), 10);
+
+  if (jobUserList.value.length > 0) {
+    // 设置图标
+    const icon = new T.Icon({
+      iconUrl: thIcon,
+      iconSize: new T.Point(20, 20),
+      iconAnchor: new T.Point(10, 20)
+    })
+
+    // 筛选数据并统计相同点的总数
+    const filteredJobUserList = new Array<any>();
+    const pointCountMap = new Map();
+    jobUserList.value.forEach((item: any) => {
+      if (item.longitude && item.latitude) {
+        const key = `${item.longitude},${item.latitude}`;
+        if (!pointCountMap.has(key)) {
+          pointCountMap.set(key, {count: 0, data: item});
+        }
+        pointCountMap.get(key).count++;
+      }
+    });
+    // 转换为数组
+    pointCountMap.forEach((value) => {
+      filteredJobUserList.push({...value.data, count: value.count});
+      labelNumberCount.value += value.count;
+    });
+
+    // 设置总数标点
+    const marker = new T.Marker(new T.LngLat(114.416110, 23.111582), {icon: icon}); // 创建标注
+    let label = new T.Label({
+      text: labelNumberCount.value + "", //文本标注的内容
+      position: new T.LngLat(114.416110, 23.111582), //文本标注的地理位置
+      offset: new T.Point(-20, 23), //文本标注的位置偏移值
+    });
+    label.setBackgroundColor("transparent");
+    label.setBorderColor("transparent");
+    label.setBorderLine(0);
+    label.setFontSize(12);
+    label.setFontColor("white");
+    jobUserCountMarker.value = marker;
+    jobUserCountLabel.value = label;
+
+    // 解析站点数据，在地图中标记
+    filteredJobUserList.forEach((item: any) => {
+      if (item.longitude && item.latitude) {
+        const point = new T.LngLat(item.longitude, item.latitude)
+        const marker = new T.Marker(point, {icon: icon}); // 创建标注
+        let label = new T.Label({
+          text: item.count + "", //文本标注的内容
+          position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
+          offset: new T.Point(-20, 23), //文本标注的位置偏移值
+        });
+        label.setBackgroundColor("transparent");
+        label.setBorderColor("transparent");
+        label.setBorderLine(0);
+        label.setFontSize(12);
+        label.setFontColor("white");
+        (map as any).addOverLay(marker);// 将标注添加到地图中
+        (map as any).addOverLay(label);// 将标注添加到地图中
+        markerList.value.push(marker);
+        labelList.value.push(label);
+      }
+    })
+  }
+}
+
+// 选择站点
+function checkJobUser(jobUser: any) {
+  nowCheckJobUser.value = JSON.parse(JSON.stringify(jobUser))
+  if (jobUser.longitude && jobUser.latitude) {
+    // 设置地图中心点
+    (map as any).centerAndZoom(new T.LngLat(jobUser.longitude, jobUser.latitude), 14);
+  }
+}
+
+// 鼠标经过事件
+function jobUserMouseenter(jobUser: any) {
+  nowMouseenterJobUser.value = JSON.parse(JSON.stringify(jobUser));
+}
+
+// 标签盒子的展开与收起按钮是否显示判断方法
+function showLaunchBtnBox(refValue: any, index: any, scrollHeight: any) {
+  if (index != null) {
+    if (refValue[index] && refValue[index].scrollHeight) {
+      return refValue[index]?.scrollHeight > scrollHeight
+    }
+    return false;
+  } else {
+    if (refValue && refValue.scrollHeight) {
+      return refValue?.scrollHeight > scrollHeight
+    }
+    return false;
+  }
+}
+
+// 年龄输入框焦点丢失
+function ageBlur() {
+  if (searchParams.minAge) {
+    searchParams.minAge = Math.trunc(searchParams.minAge);
+  }
+  if (searchParams.maxAge) {
+    searchParams.maxAge = Math.trunc(searchParams.maxAge);
+  }
+}
+
 onMounted(() => {
-  initMap()
+  initMap();
+  getJobUserLabelDicList();
+  getRegionList();
+  getKeyPersonTypeList();
+  onSearch();
 })
 </script>
 
@@ -61,17 +420,126 @@ export default {
     z-index: 100;
   }
 
+  .ant-tag {
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border: none;
+    background-color: #F3F6F8;
+    color: #899099
+  }
+
   .jobUser-search-data-box {
     position: absolute;
-    width: 300px;
-    height: 100%;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 300px;
+    width: 330px;
+    top: 15px;
+    left: 15px;
+    bottom: 15px;
+    right: 330px;
     z-index: 110;
-    background-color: white;
-    border-right: 1px solid rgba(173, 173, 173, 0.8);
+
+    .search-box, .data-box, .pagination-box {
+      padding: 8px;
+      border-radius: 10px;
+      background-color: #F8F8F8;
+    }
+
+    .search-box {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      border-radius: 10px 10px 0 0;
+    }
+
+    .data-box {
+      height: calc(100% - 135px);
+      margin-bottom: 10px;
+      padding: 10px;
+      border-radius: 0 0 10px 10px;
+
+      .list-box {
+        width: 100%;
+        max-height: 100%;
+        overflow: hidden;
+        overflow-y: auto;
+
+        .jobUser-data-box {
+          width: 100%;
+          background-color: white;
+          border-radius: 10px;
+          padding: 10px;
+          box-sizing: border-box;
+          border: 1px solid white;
+
+          .label-text {
+            font-size: 12px;
+            color: #737373;
+            margin-bottom: 3px;
+          }
+
+          .jobHunt-box {
+            width: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+
+            .ant-tag {
+              flex: 1 1 auto;
+              min-width: 0;
+              max-width: fit-content;
+            }
+
+            .all-post-btn {
+              cursor: pointer;
+            }
+          }
+
+          .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;
+          }
+        }
+
+        .check-jobUser {
+          border-color: #007EFF;
+        }
+      }
+
+      .empty-box {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .pagination-box {
+      display: flex;
+      justify-content: center;
+    }
   }
 }
 </style>

vue/src/views/dataMap/siteDataMap.vue

@@ -29,6 +29,7 @@
                 :allow-clear="true"
                 :options="regionList"
                 :field-names="{ label: 'name', value: 'code' }"
+                :bordered="false"
                 placeholder="所属县区"
                 @change="changeRegion"
             >
@@ -39,6 +40,7 @@
                 :options="streetList"
                 :field-names="{ label: 'name', value: 'code' }"
                 :allow-clear="true"
+                :bordered="false"
                 placeholder="所属街道"
             >
             </a-select>
@@ -191,7 +193,7 @@ function setSiteMarker() {
   // 删除已有标点
   if (markerList.value.length > 0) {
     for (let i = 0; i < markerList.value.length; i++) {
-      (map as any).removeOverLay(markerList[i]);
+      (map as any).removeOverLay(markerList.value[i]);
     }
     markerList.value = []
   }
@@ -356,7 +358,6 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    border-right: 1px solid rgba(173, 173, 173, 0.8);
   }
 
   .ant-btn, .ant-input {