feat: 企业数据可视化地图优化

vue/src/views/companyService/dataMap/index.vue

@@ -33,6 +33,7 @@
             <a-select
               v-model:value="companySearchParam.maxDistance"
               style="width: 34%;"
+              placeholder="距离范围"
               :allow-clear="true"
             >
               <a-select-option :value="item.value" v-for="(item,index) in rangeList" :key="index">{{
@@ -135,11 +136,12 @@
           </p>
           <!-- 标签 -->
           <div class="company-label-box" v-if="nowCheckCompany.labelList && nowCheckCompany.labelList.length > 0"
-               :ref="postBoxCompanyLabelBoxRef" :class="{'label-box-max-height': postBoxCompanyLabelExpanded}">
+               :ref="el => postBoxCompanyLabelBoxRef = el"
+               :class="{'label-box-max-height': postBoxCompanyLabelExpanded}">
             <a-tag v-for="(label, index) in nowCheckCompany.labelList" :key="index">
               {{ label.labelName }}
             </a-tag>
-            <div v-if="postBoxCompanyShowLaunchBtn">
+            <div v-if="postBoxCompanyShowLaunchBtn()">
               <span class="launch-btn" v-if="postBoxCompanyLabelExpanded"
                     @click.stop="postBoxCompanyLabelOpen">展开</span>
               <span class="launch-btn" v-else @click.stop="postBoxCompanyLabelOpen">收起</span>
@@ -207,7 +209,7 @@ import {onMounted, reactive, ref} from "vue";
 import huiZhouGeoJSON from "./geo"
 import {getPosition} from "@/utils/position";
 import thIcon from "@/assets/images/th.jpg"
-import type {SelectProps} from "ant-design-vue";
+import {message, type SelectProps} from "ant-design-vue";
 import {getSysDictionaryList} from "@/api/system/dictionary";
 import {getSiteList} from "@/api/baseSettings/siteInfo";
 import {getRegionCodeList} from "@/api/system/area/index";
@@ -261,9 +263,9 @@ const postTotal = ref(0);
 
 // 范围列表
 const rangeList = [
-  {value: 5, label: "5KM"},
-  {value: 3, label: "3KM"},
-  {value: 1, label: "1KM"}
+  {value: 5, label: "5公里"},
+  {value: 3, label: "3公里"},
+  {value: 1, label: "1公里"}
 ]
 // 企业规模
 const companyModelList = ref<SelectProps['options']>();
@@ -274,15 +276,15 @@ const regionList = ref<SelectProps['options']>();
 // 查询按钮加载
 const searchLoading = ref(false);
 // 企业信息标签box ref
-const companyLabelBoxRef = ref([])
+const companyLabelBoxRef = ref<Array<any>>([]);
 // 岗位面板企业信息的标签盒子ref
-const postBoxCompanyLabelBoxRef = ref();
+const postBoxCompanyLabelBoxRef = ref<any>(null);
 // 岗位面板企业信息的标签展开与收起开关
 const postBoxCompanyLabelExpanded = ref(true)
 // 岗位信息的标签box ref
-const postLabelBoxRef = ref([]);
+const postLabelBoxRef = ref<Array<any>>([]);
 // 岗位要求
-const postDescBoxRef = ref([])
+const postDescBoxRef = ref<Array<any>>([]);
 
 // 查询企业规模
 const getCompanyModelList = async function () {
@@ -323,9 +325,9 @@ function onSearch() {
 // 查询全部
 function searchAll() {
   companySearchParam.companyName = "";
-  companySearchParam.companyModel = "";
-  companySearchParam.siteID = "";
-  companySearchParam.regionCode = "";
+  companySearchParam.companyModel = undefined;
+  companySearchParam.siteID = undefined;
+  companySearchParam.regionCode = undefined;
   companySearchParam.maxDistance = null;
   companySearchParam.pageIndex = 1;
   companySearchParam.pageSize = 5;
@@ -392,7 +394,7 @@ function setBoundary() {
 
 // 获取当前登录用户定位
 function setLoginLocation() {
-  let labelText = "当前定位"
+  let labelText = "定位位置"
   getPosition().then((data: any) => {
     if (data.longitude && data.latitude) {
       companySearchParam.longitude = data.longitude;
@@ -401,7 +403,7 @@ function setLoginLocation() {
       // 如果没有获取到经纬度，设置默认为惠州市人民政府的位置
       companySearchParam.longitude = 114.420244;
       companySearchParam.latitude = 23.116236;
-      labelText = "默认位置"
+      message.info("获取定位失败，已使用默认定位");
     }
   }).finally(() => {
     // 设置中心点
@@ -443,7 +445,7 @@ function setCompanyMarker() {
   }
 
   // 设置中心点
-  (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), 14);
+  (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), 12);
 
   if (companyList.value.length > 0) {
     // 设置图标
@@ -481,6 +483,11 @@ function companyPaginationChange() {
 // 企业信息点击事件
 async function checkCompanyChange(company: any) {
   nowCheckCompany.value = JSON.parse(JSON.stringify(company));
+  // 设置中心点到企业位置
+  if (company.longitude && company.latitude) {
+    // 设置中心点
+    (map as any).centerAndZoom(new T.LngLat(company.longitude, company.latitude), 16);
+  }
   await findPostList();
 }
 
@@ -530,7 +537,7 @@ function showLaunchBtnBox(index) {
 
 function postBoxCompanyShowLaunchBtn() {
   if (postBoxCompanyLabelBoxRef.value && postBoxCompanyLabelBoxRef.value.scrollHeight) {
-    return postBoxCompanyLabelBoxRef.value[index]?.scrollHeight > 50
+    return postBoxCompanyLabelBoxRef.value?.scrollHeight > 50
   }
   return false;
 }