|
|
@@ -7,35 +7,33 @@
|
|
|
></div>
|
|
|
<!-- 企业查询 -->
|
|
|
<div class="company-box">
|
|
|
- <!-- 查询区域 -->
|
|
|
- <div class="search-box">
|
|
|
- <!-- 企业名称 -->
|
|
|
- <div class="flex-div">
|
|
|
- <a-select
|
|
|
- v-model:value="searchType"
|
|
|
- style="width: 30%"
|
|
|
- @change="searchTypeChange"
|
|
|
- >
|
|
|
- <a-select-option value="company">找企业</a-select-option>
|
|
|
- <a-select-option value="post">找岗位</a-select-option>
|
|
|
- </a-select>
|
|
|
- <a-input-search
|
|
|
- v-model:value="companySearchParam.companyName"
|
|
|
- placeholder="请输入企业名称"
|
|
|
- enter-button="查询"
|
|
|
- :loading="searchLoading"
|
|
|
- style="width: 70%"
|
|
|
- @search="onSearch"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <!-- 企业名称 -->
|
|
|
+ <div class="search-input-box">
|
|
|
+ <a-select
|
|
|
+ v-model:value="searchType"
|
|
|
+ @change="searchTypeChange"
|
|
|
+ >
|
|
|
+ <a-select-option value="company">找企业</a-select-option>
|
|
|
+ <a-select-option value="post">找岗位</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-input-search
|
|
|
+ v-model:value="companySearchParam.companyName"
|
|
|
+ :placeholder="searchType == 'company' ? '请输入企业名称' : '请输入岗位名称'"
|
|
|
+ enter-button
|
|
|
+ :loading="searchLoading"
|
|
|
+ style="width: 75%"
|
|
|
+ @search="onSearch"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 查询多选框与数据列表 -->
|
|
|
+ <div class="select-data-box">
|
|
|
<!-- 多选框 -->
|
|
|
- <div class="flex-div" style="flex-wrap: wrap">
|
|
|
- <a-button style="width: 28%" @click="searchAll">全部</a-button>
|
|
|
+ <div class="select-box ">
|
|
|
+ <span class="cursor-pointer" style="width: 46px;padding: 0 7px" @click="searchAll">全部</span>
|
|
|
<a-select
|
|
|
v-model:value="companySearchParam.maxDistance"
|
|
|
- style="width: 34%;"
|
|
|
- placeholder="距离范围"
|
|
|
- :allow-clear="true"
|
|
|
+ placeholder="距离范围" style="width: 35%"
|
|
|
+ :allow-clear="true" size="small"
|
|
|
>
|
|
|
<a-select-option :value="item.value" v-for="(item,index) in rangeList" :key="index">{{
|
|
|
item.label
|
|
|
@@ -43,107 +41,112 @@
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
<a-select
|
|
|
- style="width: 38%;"
|
|
|
v-model:value="companySearchParam.companyModel"
|
|
|
:options="companyModelList"
|
|
|
:field-names="{ label: 'name', value: 'value' }"
|
|
|
- placeholder="企业规模"
|
|
|
- :allow-clear="true"
|
|
|
+ placeholder="企业规模" style="width: 49%"
|
|
|
+ :allow-clear="true" size="small"
|
|
|
>
|
|
|
</a-select>
|
|
|
<a-select
|
|
|
- style="width: 50%;"
|
|
|
v-model:value="companySearchParam.regionCode"
|
|
|
:allow-clear="true"
|
|
|
:options="regionList"
|
|
|
:field-names="{ label: 'name', value: 'code' }"
|
|
|
- placeholder="所属县区"
|
|
|
+ placeholder="所属县区" size="small" style="width: 152px"
|
|
|
>
|
|
|
</a-select>
|
|
|
<a-select
|
|
|
- style="width: 50%;"
|
|
|
v-model:value="companySearchParam.siteID"
|
|
|
:allow-clear="true"
|
|
|
:options="siteList"
|
|
|
:field-names="{ label: 'siteName', value: 'siteID' }"
|
|
|
- placeholder="所属驿站"
|
|
|
+ placeholder="所属驿站" size="small" style="width: 149px"
|
|
|
>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 企业数据列表 -->
|
|
|
- <div class="list-box">
|
|
|
- <!-- 查询类型为企业，主要展示企业数据 -->
|
|
|
- <div class="company-data-box" :class="{'check-company':nowCheckCompany.companyID == company.companyID}"
|
|
|
- v-if="companyList.length > 0 && searchType == 'company'" v-for="(company,index) in companyList"
|
|
|
- :key="index"
|
|
|
- @click="checkCompanyChange(company)">
|
|
|
- <p class="company-name">
|
|
|
- {{ company.companyName }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 地点：{{ company.companyAddress }}
|
|
|
- </p>
|
|
|
- <!-- 岗位 -->
|
|
|
- <div class="company-post-box label-text">
|
|
|
- <span style="width: 65px; flex: 0 0 auto">招聘岗位：</span>
|
|
|
- <a-tag v-if="company.postList && company.postList.length > 0"
|
|
|
- v-for="(label, index) in company.postList.slice(0, 3)"
|
|
|
- :key="index">
|
|
|
- {{ label.professionName }}
|
|
|
- </a-tag>
|
|
|
- <span v-if="company.postList && company.postList.length > 3" class="all-post-btn"
|
|
|
- style="width: 25px;flex: 0 0 auto">
|
|
|
+ <!-- 企业数据列表 -->
|
|
|
+ <div class="list-box">
|
|
|
+ <!-- 查询类型为企业，主要展示企业数据 -->
|
|
|
+ <div class="company-data-box"
|
|
|
+ :class="{'check-company':nowCheckCompany.companyID == company.companyID || nowMouseenterCompany.companyID == company.companyID}"
|
|
|
+ v-if="companyList.length > 0 && searchType == 'company'" v-for="(company,index) in companyList"
|
|
|
+ :key="index"
|
|
|
+ @click="checkCompanyChange(company)"
|
|
|
+ @mouseenter="companyMouseenter(company)"
|
|
|
+ @mouseleave="companyMouseenter({companyID:-1})"
|
|
|
+ >
|
|
|
+ <p class="company-name">
|
|
|
+ {{ company.companyName }}
|
|
|
+ </p>
|
|
|
+ <p class="label-text">
|
|
|
+ 地点：{{ company.companyAddress }}
|
|
|
+ </p>
|
|
|
+ <!-- 岗位 -->
|
|
|
+ <div class="company-post-box label-text">
|
|
|
+ <span style="width: 65px; flex: 0 0 auto">招聘岗位：</span>
|
|
|
+ <a-tag v-if="company.postList && company.postList.length > 0"
|
|
|
+ v-for="(label, index) in company.postList.slice(0, 3)"
|
|
|
+ :key="index">
|
|
|
+ {{ label.professionName }}
|
|
|
+ </a-tag>
|
|
|
+ <span v-if="company.postList && company.postList.length > 3" class="all-post-btn"
|
|
|
+ style="width: 25px;flex: 0 0 auto">
|
|
|
更多
|
|
|
</span>
|
|
|
- <span v-if="company.postList.length == 0" style="width: 25px;flex: 0 0 auto">暂无</span>
|
|
|
- </div>
|
|
|
- <!-- 标签 -->
|
|
|
- <div class="company-label-box" v-if="company.companyLabelList && company.companyLabelList.length > 0"
|
|
|
- :ref="el => companyLabelBoxRef[index] = el" :class="{'label-box-max-height': company.labelExpanded}">
|
|
|
- <a-tag v-for="(label, labelIndex) in company.companyLabelList" :key="labelIndex">
|
|
|
- {{ label.labelName }}
|
|
|
- </a-tag>
|
|
|
- <div v-if="showLaunchBtnBox(companyLabelBoxRef,index,50)">
|
|
|
+ <span v-if="company.postList.length == 0" style="width: 25px;flex: 0 0 auto">暂无</span>
|
|
|
+ </div>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <div class="company-label-box" v-if="company.companyLabelList && company.companyLabelList.length > 0"
|
|
|
+ :ref="el => companyLabelBoxRef[index] = el" :class="{'label-box-max-height': company.labelExpanded}">
|
|
|
+ <a-tag v-for="(label, labelIndex) in company.companyLabelList" :key="labelIndex">
|
|
|
+ {{ label.labelName }}
|
|
|
+ </a-tag>
|
|
|
+ <div v-if="showLaunchBtnBox(companyLabelBoxRef,index,50)">
|
|
|
<span class="launch-btn" v-if="company.labelExpanded"
|
|
|
@click.stop="company.labelExpanded = false">展开</span>
|
|
|
- <span class="launch-btn" v-else @click.stop="company.labelExpanded = true">收起</span>
|
|
|
+ <span class="launch-btn" v-else @click.stop="company.labelExpanded = true">收起</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 查询类型为岗位时，主要展示岗位数据 -->
|
|
|
- <div v-if="companyList.length>0 && searchType == 'post'"
|
|
|
- v-for="(postCompany, postCompanyIndex) in companyList" :key="postCompanyIndex"
|
|
|
- class="company-data-box"
|
|
|
- @click="checkCompanyChange(postCompany)">
|
|
|
- <div class="post-title">
|
|
|
- <span>{{ postCompany.professionName }}({{ postCompany.recruitCount }}人)</span>
|
|
|
- <span>{{ showSalary(postCompany.minSalary, postCompany.maxSalary) }}</span>
|
|
|
- </div>
|
|
|
- <p class="label-text">
|
|
|
- 招聘企业：{{ postCompany.companyName }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 工作地点：{{ postCompany.companyAddress }}
|
|
|
- </p>
|
|
|
- <!-- 标签 -->
|
|
|
- <div class="company-label-box"
|
|
|
- v-if="postCompany.postLabelList && postCompany.postLabelList.length > 0"
|
|
|
- :ref="el => companyPostLabelBoxRef[postCompanyIndex] = el"
|
|
|
- :class="{'label-box-max-height': postCompany.labelExpanded}">
|
|
|
- <a-tag v-for="(label, labelIndex) in postCompany.postLabelList" :key="labelIndex">
|
|
|
- {{ label.labelName }}
|
|
|
- </a-tag>
|
|
|
- <div v-if="showLaunchBtnBox(companyPostLabelBoxRef,postCompanyIndex,50)">
|
|
|
+ <!-- 查询类型为岗位时，主要展示岗位数据 -->
|
|
|
+ <div v-if="companyList.length>0 && searchType == 'post'"
|
|
|
+ v-for="(postCompany, postCompanyIndex) in companyList" :key="postCompanyIndex"
|
|
|
+ class="company-data-box"
|
|
|
+ :class="{'check-company':nowCheckCompany.postID == postCompany.postID || nowMouseenterCompany.postID == postCompany.postID}"
|
|
|
+ @click="checkCompanyChange(postCompany)"
|
|
|
+ @mouseenter="companyMouseenter(postCompany)"
|
|
|
+ @mouseleave="companyMouseenter({postID:-1})"
|
|
|
+ >
|
|
|
+ <div class="post-title">
|
|
|
+ <span>{{ postCompany.professionName }}({{ postCompany.recruitCount }}人)</span>
|
|
|
+ <span class="post-salary">{{ showSalary(postCompany.minSalary, postCompany.maxSalary) }}</span>
|
|
|
+ </div>
|
|
|
+ <p class="label-text">
|
|
|
+ 招聘企业：{{ postCompany.companyName }}
|
|
|
+ </p>
|
|
|
+ <p class="label-text">
|
|
|
+ 工作地点：{{ postCompany.companyAddress }}
|
|
|
+ </p>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <div class="company-label-box"
|
|
|
+ v-if="postCompany.postLabelList && postCompany.postLabelList.length > 0"
|
|
|
+ :ref="el => companyPostLabelBoxRef[postCompanyIndex] = el"
|
|
|
+ :class="{'label-box-max-height': postCompany.labelExpanded}">
|
|
|
+ <a-tag v-for="(label, labelIndex) in postCompany.postLabelList" :key="labelIndex">
|
|
|
+ {{ label.labelName }}
|
|
|
+ </a-tag>
|
|
|
+ <div v-if="showLaunchBtnBox(companyPostLabelBoxRef,postCompanyIndex,50)">
|
|
|
<span class="launch-btn" v-if="postCompany.labelExpanded"
|
|
|
@click.stop="postCompany.labelExpanded = false">展开</span>
|
|
|
- <span class="launch-btn" v-else @click.stop="postCompany.labelExpanded = true">收起</span>
|
|
|
+ <span class="launch-btn" v-else @click.stop="postCompany.labelExpanded = true">收起</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 空数据状态 -->
|
|
|
- <div v-if="companyList.length == 0" class="empty-box">
|
|
|
- <a-empty/>
|
|
|
+ <!-- 空数据状态 -->
|
|
|
+ <div v-if="companyList.length == 0" class="empty-box">
|
|
|
+ <a-empty/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 分页区域 -->
|
|
|
@@ -155,10 +158,10 @@
|
|
|
</div>
|
|
|
<!-- 岗位信息 -->
|
|
|
<div class="post-box" v-if="nowCheckCompany.companyID">
|
|
|
- <div v-if="searchType == 'company'" style="width: 100%; height: 100%;">
|
|
|
- <p class="title label-text">企业详情</p>
|
|
|
+ <div v-if="searchType == 'company'"
|
|
|
+ style="width: 100%; height: 100%; background-color: #F8F8F8; border-radius: 10px; padding: 10px;">
|
|
|
<!-- 企业信息 -->
|
|
|
- <div class="post-company-box">
|
|
|
+ <div class="post-company-box margin-bottom-10">
|
|
|
<p class="company-name">
|
|
|
{{ nowCheckCompany.companyName }}
|
|
|
</p>
|
|
|
@@ -188,11 +191,12 @@
|
|
|
</div>
|
|
|
<!-- 岗位列表 -->
|
|
|
<div class="list-box">
|
|
|
- <div class="list-post-box" v-if="postList.length > 0" v-for="(post, postIndex) in postList"
|
|
|
+ <div class="list-post-box margin-bottom-10" v-if="postList.length > 0"
|
|
|
+ v-for="(post, postIndex) in postList"
|
|
|
:key="postIndex">
|
|
|
<div class="post-title">
|
|
|
<span>{{ post.professionName }}</span>
|
|
|
- <span>{{ showSalary(post.minSalary, post.maxSalary) }}</span>
|
|
|
+ <span class="post-salary">{{ showSalary(post.minSalary, post.maxSalary) }}</span>
|
|
|
</div>
|
|
|
<p class="label-text">
|
|
|
招聘人数：{{ post.recruitCount }}
|
|
|
@@ -209,7 +213,7 @@
|
|
|
:class="{'post-desc-max-height': post.descExpanded}">
|
|
|
岗位要求：{{ post.postDesc }}
|
|
|
</div>
|
|
|
- <div v-if="showLaunchBtnBox(postDescBoxRef,postIndex,35)">
|
|
|
+ <div v-if="showLaunchBtnBox(postDescBoxRef,postIndex,36)">
|
|
|
<span class="launch-btn" v-if="post.descExpanded"
|
|
|
@click.stop="post.descExpanded = false">展开</span>
|
|
|
<span class="launch-btn " v-else @click.stop="post.descExpanded = true">收起</span>
|
|
|
@@ -239,43 +243,13 @@
|
|
|
show-less-items @change="postPaginationChange" simple :show-size-changer="false"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="searchType == 'post'" style="width: 100%; height: 100%;">
|
|
|
- <p class="title label-text">岗位详情</p>
|
|
|
+ <div v-if="searchType == 'post'"
|
|
|
+ style="width: 100%; height: 100%; background-color: #FFFFFF;border-radius: 10px;">
|
|
|
<div class="post-company-box" style="max-height: 100%">
|
|
|
<div class="post-title">
|
|
|
- <span>{{ nowCheckCompany.professionName }}</span>
|
|
|
- <span>{{ showSalary(nowCheckCompany.minSalary, nowCheckCompany.maxSalary) }}</span>
|
|
|
+ <span class="font-weight-700">{{ nowCheckCompany.professionName }}</span>
|
|
|
+ <span class="post-salary">{{ showSalary(nowCheckCompany.minSalary, nowCheckCompany.maxSalary) }}</span>
|
|
|
</div>
|
|
|
- <p class="label-text">
|
|
|
- 招聘企业：{{ nowCheckCompany.companyName }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 工作地点：{{ nowCheckCompany.companyAddress }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 联系人：{{ nowCheckCompany.contactName }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 联系电话：{{ nowCheckCompany.contactMobile }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 学历要求：{{ nowCheckCompany.cultureLevelName }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 招聘人数：{{ nowCheckCompany.recruitCount }}人
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 招聘日期：
|
|
|
- {{ dayjs(nowCheckCompany.startTime).format("YYYY-MM-DD") }}
|
|
|
- 至
|
|
|
- {{ dayjs(nowCheckCompany.EndTime).format("YYYY-MM-DD") }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 福利待遇：{{ nowCheckCompany.welfare }}
|
|
|
- </p>
|
|
|
- <p class="label-text">
|
|
|
- 其他要求：{{ nowCheckCompany.postDesc }}
|
|
|
- </p>
|
|
|
<!-- 标签 -->
|
|
|
<div class="company-label-box"
|
|
|
v-if="nowCheckCompany.postLabelList && nowCheckCompany.postLabelList.length > 0"
|
|
|
@@ -284,6 +258,30 @@
|
|
|
{{ label.labelName }}
|
|
|
</a-tag>
|
|
|
</div>
|
|
|
+ <!-- 联系人 -->
|
|
|
+ <div class="company-contact-info">
|
|
|
+ <p class="font-size-14 font-weight-700">{{ nowCheckCompany.companyName }}</p>
|
|
|
+ <div class="avt-info margin-top-10" v-if="nowCheckCompany.contactName || nowCheckCompany.contactMobile">
|
|
|
+ <img :src="avtO1" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="contact-name">
|
|
|
+ {{ nowCheckCompany.contactName }}
|
|
|
+ </p>
|
|
|
+ <p class="contact-mobile">
|
|
|
+ {{ nowCheckCompany.contactMobile }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="post-desc">
|
|
|
+ <p class="font-size-16 font-weight-600 margin-bottom-10">职位描述：</p>
|
|
|
+ <p class="font-size-12 font-weight-400 line-height-20">
|
|
|
+ {{ nowCheckCompany.postDesc ? nowCheckCompany.postDesc : '暂无描述' }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="post-company-address">
|
|
|
+ <p class="font-size-16 font-weight-600 margin-bottom-10">工作地址：</p>
|
|
|
+ <p class="font-size-12 font-weight-400 line-height-20">{{ nowCheckCompany.companyAddress }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -296,6 +294,7 @@ import {onMounted, reactive, ref} from "vue";
|
|
|
import huiZhouGeoJSON from "./geo"
|
|
|
import {getPosition, setBoundary} from "@/utils/position";
|
|
|
import redThIcon from "@/assets/images/redTh.png"
|
|
|
+import blueThIcon from "@/assets/images/blueTh.png"
|
|
|
import {message, type SelectProps} from "ant-design-vue";
|
|
|
import {getSysDictionaryList} from "@/api/system/dictionary";
|
|
|
import {getSiteList} from "@/api/baseSettings/siteInfo";
|
|
|
@@ -303,12 +302,14 @@ import {getRegionCodeList} from "@/api/system/area/index";
|
|
|
import {getDataMapList, getDataMapListByPostName} from "@/api/companyService/company";
|
|
|
import {getCompanyMapPostList} from "@/api/companyService/post";
|
|
|
import dayjs from "dayjs";
|
|
|
+import avtO1 from "@/assets/images/avt01.png"
|
|
|
|
|
|
const T = (window as any).T;
|
|
|
const zoom = 9;
|
|
|
let map = null;
|
|
|
// 地图标记点
|
|
|
-let markerList = new Array<any>([]);
|
|
|
+let markerList = ref<Array<any>>([]);
|
|
|
+let labelList = ref<Array<any>>([]);
|
|
|
// 查询类型
|
|
|
const searchType = ref("company")
|
|
|
// 企业查询条件
|
|
|
@@ -316,7 +317,7 @@ const companySearchParam = reactive({
|
|
|
pageIndex: 1,
|
|
|
pageSize: 50,
|
|
|
companyName: "",
|
|
|
- maxDistance: 5,
|
|
|
+ maxDistance: null,
|
|
|
companyModel: undefined,
|
|
|
siteID: undefined,
|
|
|
regionCode: undefined,
|
|
|
@@ -329,6 +330,8 @@ const companyList = ref<Array<any>>([])
|
|
|
const companyTotal = ref(0);
|
|
|
// 当前选中的企业
|
|
|
const nowCheckCompany = ref<any>({})
|
|
|
+// 鼠标当前移入的企业
|
|
|
+const nowMouseenterCompany = ref<any>({})
|
|
|
// 岗位查询条件
|
|
|
const postSearchParams = reactive({
|
|
|
pageIndex: 1,
|
|
|
@@ -341,9 +344,10 @@ const postTotal = ref(0);
|
|
|
|
|
|
// 范围列表
|
|
|
const rangeList = [
|
|
|
- {value: 5, label: "5公里"},
|
|
|
- {value: 3, label: "3公里"},
|
|
|
- {value: 1, label: "1公里"}
|
|
|
+ {value: null, label: "--范围--"},
|
|
|
+ {value: 5, label: "5KM"},
|
|
|
+ {value: 3, label: "3KM"},
|
|
|
+ {value: 1, label: "1KM"}
|
|
|
]
|
|
|
// 企业规模
|
|
|
const companyModelList = ref<SelectProps['options']>();
|
|
|
@@ -438,6 +442,37 @@ 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.getZoom();
|
|
|
+ console.log(zoomLevel);
|
|
|
+ // 计算新的icon大小
|
|
|
+ let newSize = Math.min(30, Math.max(15, (zoomLevel - 10) * 3 + 15));
|
|
|
+ console.log(newSize);
|
|
|
+ // 计算新的icon锚点位置
|
|
|
+ let iconAnchor = new T.Point(15 * (newSize / 30), 30 * (newSize / 30));
|
|
|
+ markerList.value.forEach((item: any) => {
|
|
|
+ (map as any).removeOverLay(item);
|
|
|
+ item.getIcon().setIconSize(new T.Point(newSize, newSize));
|
|
|
+ item.getIcon().setIconAnchor(iconAnchor);
|
|
|
+ (map as any).addOverLay(item);
|
|
|
+ })
|
|
|
+ // 更新 label 的偏移量
|
|
|
+ // 计算新的偏移量，保持 label 居中且不超过初始值
|
|
|
+ let offsetX = -30 + ((newSize - 30) / 2);
|
|
|
+ let offsetY = 15 + ((newSize - 30) / 2);
|
|
|
+ // 确保偏移量不超过初始值
|
|
|
+ offsetX = Math.max(offsetX, -25);
|
|
|
+ offsetY = Math.min(offsetY, 10);
|
|
|
+ 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)));
|
|
|
+ (map as any).addOverLay(item);
|
|
|
+ })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
// 设置城市边界
|
|
|
@@ -480,17 +515,12 @@ function setLoginLocation() {
|
|
|
|
|
|
// 设置企业地图标点
|
|
|
function setCompanyMarker() {
|
|
|
- // 删除已有标点
|
|
|
- if (markerList.length > 0) {
|
|
|
- for (let i = 0; i < markerList.length; i++) {
|
|
|
- (map as any).removeOverLay(markerList[i]);
|
|
|
- }
|
|
|
- }
|
|
|
+ delMapInfo();
|
|
|
|
|
|
if (companyList.value.length > 0) {
|
|
|
// 设置图标
|
|
|
const icon = new T.Icon({
|
|
|
- iconUrl: redThIcon,
|
|
|
+ iconUrl: blueThIcon,
|
|
|
iconSize: new T.Point(30, 30),
|
|
|
iconAnchor: new T.Point(15, 30)
|
|
|
})
|
|
|
@@ -498,13 +528,24 @@ function setCompanyMarker() {
|
|
|
if (searchType.value == 'post') {
|
|
|
// 岗位查询时，会出现多个岗位相同公司，按公司的ID去重
|
|
|
const processedCompanyIDs = new Set();
|
|
|
- // 过滤出唯一的公司列表
|
|
|
+ const companyIDCounts = {}; // 用于统计每个companyID的数量
|
|
|
+
|
|
|
+ // 过滤出唯一的公司列表，并统计每个companyID的数量
|
|
|
uniqueCompanyList = companyList.value.filter((item: any) => {
|
|
|
if (!processedCompanyIDs.has(item.companyID)) {
|
|
|
processedCompanyIDs.add(item.companyID);
|
|
|
+ companyIDCounts[item.companyID] = 1; // 初始化计数
|
|
|
+ item.postNumber = 1; // 初始化postNumber
|
|
|
return true;
|
|
|
+ } else {
|
|
|
+ companyIDCounts[item.companyID] += 1; // 增加计数
|
|
|
+ return false;
|
|
|
}
|
|
|
- return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新uniqueCompanyList中元素的postNumber
|
|
|
+ uniqueCompanyList.forEach(item => {
|
|
|
+ item.postNumber = companyIDCounts[item.companyID];
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -519,10 +560,32 @@ function setCompanyMarker() {
|
|
|
marker.addEventListener('click', () => {
|
|
|
checkCompanyChange(item);
|
|
|
});
|
|
|
+ marker.setZIndexOffset(200);
|
|
|
(map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
- markerList.push(marker);
|
|
|
+ markerList.value.push(marker);
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+ // 如果是岗位，打上数量文本
|
|
|
+ if (searchType.value == 'post') {
|
|
|
+ uniqueCompanyList.forEach((item: any) => {
|
|
|
+ if (item.longitude && item.latitude) {
|
|
|
+ // 创建自定义的标签
|
|
|
+ let label = new T.Label({
|
|
|
+ text: item.postNumber + "", //文本标注的内容
|
|
|
+ position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
|
|
|
+ offset: new T.Point(-25, 10), //文本标注的位置偏移值
|
|
|
+ });
|
|
|
+ label.setBackgroundColor("transparent");
|
|
|
+ label.setBorderColor("transparent");
|
|
|
+ label.setBorderLine(0);
|
|
|
+ label.setFontSize(12);
|
|
|
+ label.setFontColor("white");
|
|
|
+ (map as any).addOverLay(label); // 将标注添加到地图中
|
|
|
+ labelList.value.push(label);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -542,6 +605,11 @@ async function checkCompanyChange(company: any) {
|
|
|
await findPostList();
|
|
|
}
|
|
|
|
|
|
+// 企业信息鼠标移入移出事件
|
|
|
+function companyMouseenter(company: any) {
|
|
|
+ nowMouseenterCompany.value = JSON.parse(JSON.stringify(company));
|
|
|
+}
|
|
|
+
|
|
|
// 查询岗位
|
|
|
async function findPostList() {
|
|
|
await getCompanyMapPostList({...postSearchParams, companyID: nowCheckCompany.value.companyID}).then((result: any) => {
|
|
|
@@ -565,13 +633,13 @@ function postPaginationChange() {
|
|
|
const showSalary = (minSalary: any, maxSalary: any) => {
|
|
|
if (minSalary != null) {
|
|
|
if (maxSalary != null) {
|
|
|
- return minSalary.toString() + "-" + maxSalary.toString();
|
|
|
+ return (minSalary / 1000).toString() + "-" + (maxSalary / 1000).toString() + 'K';
|
|
|
} else {
|
|
|
- return "≥" + minSalary.toString();
|
|
|
+ return "≥" + (minSalary / 1000).toString() + "K";
|
|
|
}
|
|
|
} else {
|
|
|
if (maxSalary != null) {
|
|
|
- return "≤" + maxSalary.toString();
|
|
|
+ return "≤" + (maxSalary / 1000).toString() + "K";
|
|
|
} else {
|
|
|
return "";
|
|
|
}
|
|
|
@@ -597,6 +665,24 @@ function showLaunchBtnBox(refValue: any, index: any, scrollHeight: any) {
|
|
|
function searchTypeChange() {
|
|
|
// 清空数据
|
|
|
onSearch();
|
|
|
+ delMapInfo();
|
|
|
+}
|
|
|
+
|
|
|
+// 清空地图标点
|
|
|
+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 = [];
|
|
|
+ }
|
|
|
+ if (labelList.value.length > 0) {
|
|
|
+ for (let i = 0; i < labelList.value.length; i++) {
|
|
|
+ (map as any).removeOverLay(labelList.value[i]);
|
|
|
+ }
|
|
|
+ labelList.value = [];
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -614,7 +700,7 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
+<style lang="less">
|
|
|
.map-box {
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 235px);
|
|
|
@@ -630,18 +716,22 @@ export default {
|
|
|
}
|
|
|
|
|
|
.company-box, .post-box {
|
|
|
- width: 300px;
|
|
|
- height: 100%;
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
+ top: 15px;
|
|
|
+ bottom: 15px;
|
|
|
z-index: 110;
|
|
|
- background-color: white;
|
|
|
}
|
|
|
|
|
|
.company-name, .post-title {
|
|
|
font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .post-salary {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #DE4F3F;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.label-text {
|
|
|
@@ -664,7 +754,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.label-box-max-height {
|
|
|
- max-height: 25px;
|
|
|
+ max-height: 23px;
|
|
|
}
|
|
|
|
|
|
.ant-tag {
|
|
|
@@ -672,6 +762,9 @@ export default {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
+ border: none;
|
|
|
+ background-color: #F3F6F8;
|
|
|
+ color: #899099
|
|
|
}
|
|
|
|
|
|
.search-box,
|
|
|
@@ -705,57 +798,99 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- border-right: 1px solid rgba(173, 173, 173, 0.8);
|
|
|
}
|
|
|
|
|
|
.post-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
- margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input-box {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.company-box {
|
|
|
- left: 0;
|
|
|
+ left: 15px;
|
|
|
right: 300px;
|
|
|
- border-right: 1px solid rgba(173, 173, 173, 0.8);
|
|
|
+ width: 330px;
|
|
|
|
|
|
- .list-box {
|
|
|
- max-height: calc(100% - 150px);
|
|
|
-
|
|
|
- .company-data-box {
|
|
|
- padding: 8px;
|
|
|
- border-bottom: 1px solid rgba(173, 173, 173, 0.8);
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .company-post-box {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- align-items: center;
|
|
|
+ .select-data-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 85px);
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px 9px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .select-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 5px;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .ant-tag {
|
|
|
- flex: 1 1 auto;
|
|
|
- min-width: 0;
|
|
|
- max-width: fit-content;
|
|
|
+ .list-box {
|
|
|
+ max-height: calc(100% - 80px);
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .company-data-box {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid white;
|
|
|
+
|
|
|
+ .company-post-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;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .all-post-btn {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .check-company {
|
|
|
+ border: 1px solid #007EFF;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .check-company {
|
|
|
- background-color: #dadada;
|
|
|
- }
|
|
|
+ .pagination-box {
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-radius: 12px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.post-box {
|
|
|
- left: calc(100% - 300px);
|
|
|
+ width: 330px;
|
|
|
+ left: calc(100% - 345px);
|
|
|
right: 0;
|
|
|
- border-left: 1px solid rgba(173, 173, 173, 0.8);
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .company-info-post-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
|
|
|
.title {
|
|
|
text-align: center;
|
|
|
@@ -763,19 +898,68 @@ export default {
|
|
|
}
|
|
|
|
|
|
.post-company-box {
|
|
|
- padding: 8px;
|
|
|
+ background-color: white;
|
|
|
+ padding: 18px;
|
|
|
width: 100%;
|
|
|
- max-height: 180px;
|
|
|
+ max-height: 156px;
|
|
|
overflow-y: auto;
|
|
|
- border-bottom: 1px solid rgba(173, 173, 173, 0.8);
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .post-title {
|
|
|
+ font-size: 18px;
|
|
|
+ justify-content: normal;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .post-salary {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-contact-info {
|
|
|
+ margin: 20px 0;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 18px 0;
|
|
|
+
|
|
|
+ .avt-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #292934;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-mobile {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6A6F75;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .post-desc {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.list-box {
|
|
|
- max-height: calc(100% - 270px);
|
|
|
+ max-height: calc(100% - 200px);
|
|
|
|
|
|
.list-post-box {
|
|
|
padding: 8px;
|
|
|
- border-bottom: 1px solid rgba(173, 173, 173, 0.8);
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
.post-desc-box {
|
|
|
position: relative;
|
|
|
@@ -798,4 +982,25 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.ant-btn, .ant-input {
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+input {
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-select:not(.ant-select-customize-input) .ant-select-selector,
|
|
|
+.ant-select:not(.ant-select-customize-input) .ant-select-selector,
|
|
|
+.ant-input-affix-wrapper, .ant-select-selector {
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-select:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
|
|
|
+.ant-select-selector {
|
|
|
+ border-color: transparent;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
</style>
|
