EmploymentSite/vue/src/views/dataMap/companyDataMap.vue

<template>
  <div class="card-search">
    <div class="map-box">
      <!-- 地图 -->
      <div
        id="mapDiv"
      ></div>
      <!-- 企业查询 -->
      <div class="company-box">
        <!-- 企业名称 -->
        <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="select-box ">
            <span class="cursor-pointer" style="width: 46px;padding: 0 7px" @click="searchAll">全部</span>
            <a-select
              v-model:value="companySearchParam.maxDistance"
              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
                }}
              </a-select-option>
            </a-select>
            <a-select
              v-model:value="companySearchParam.companyModel"
              :options="companyModelList"
              :field-names="{ label: 'name', value: 'value' }"
              placeholder="企业规模" style="width: 49%"
              :allow-clear="true" size="small"
            >
            </a-select>
            <a-select
              v-model:value="companySearchParam.regionCode"
              :allow-clear="true"
              :options="regionList"
              :field-names="{ label: 'name', value: 'code' }"
              placeholder="所属县区" size="small" style="width: 152px"
            >
            </a-select>
            <a-select
              v-model:value="companySearchParam.siteID"
              :allow-clear="true"
              :options="siteList"
              :field-names="{ label: 'siteName', value: 'siteID' }"
              placeholder="所属驿站" size="small" style="width: 149px"
            >
            </a-select>
          </div>
          <!-- 企业数据列表 -->
          <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 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>
                </div>
              </div>
            </div>
            <!-- 查询类型为岗位时，主要展示岗位数据 -->
            <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>
                </div>
              </div>
            </div>
            <!-- 空数据状态 -->
            <div v-if="companyList.length == 0" class="empty-box">
              <a-empty/>
            </div>
          </div>
        </div>
        <!-- 分页区域 -->
        <div class="pagination-box">
          <a-pagination v-model:current="companySearchParam.pageIndex" :total="companyTotal"
                        v-model:pageSize="companySearchParam.pageSize"
                        show-less-items @change="companyPaginationChange" simple :show-size-changer="false"/>
        </div>
      </div>
      <!-- 岗位信息 -->
      <div class="post-box" v-if="nowCheckCompany.companyID">
        <div v-if="searchType == 'company'"
             style="width: 100%; height: 100%; background-color: #F8F8F8; border-radius: 10px; padding: 10px;">
          <!-- 企业信息 -->
          <div class="post-company-box margin-bottom-10">
            <p class="company-name">
              {{ nowCheckCompany.companyName }}
            </p>
            <p class="label-text">
              工作地点：{{ nowCheckCompany.companyAddress }}
            </p>
            <p class="label-text">
              企业规模：{{ nowCheckCompany.companyModelType }}
            </p>
            <p class="label-text">
              企业状态：{{ nowCheckCompany.recordStatusName }}
            </p>
            <!-- 标签 -->
            <div class="company-label-box"
                 v-if="nowCheckCompany.companyLabelList && nowCheckCompany.companyLabelList.length > 0"
                 :ref="el => postBoxCompanyLabelBoxRef = el"
                 :class="{'label-box-max-height': postBoxCompanyLabelExpanded}">
              <a-tag v-for="(label, index) in nowCheckCompany.companyLabelList" :key="index">
                {{ label.labelName }}
              </a-tag>
              <div v-if="showLaunchBtnBox(postBoxCompanyLabelBoxRef, null, 50)">
              <span class="launch-btn" v-if="postBoxCompanyLabelExpanded"
                    @click.stop="postBoxCompanyLabelExpanded = false">展开</span>
                <span class="launch-btn" v-else @click.stop="postBoxCompanyLabelExpanded = true">收起</span>
              </div>
            </div>
          </div>
          <!-- 岗位列表 -->
          <div class="list-box">
            <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 class="post-salary">{{ showSalary(post.minSalary, post.maxSalary) }}</span>
              </div>
              <p class="label-text">
                招聘人数：{{ post.recruitCount }}
              </p>
              <p class="label-text">
                招聘日期：
                {{ dayjs(post.startTime).format("YYYY-MM-DD") }}
                至
                {{ dayjs(post.endTime).format("YYYY-MM-DD") }}
              </p>
              <!-- 岗位要求 -->
              <div class="post-desc-box">
                <div class="label-text post-desc" :ref="el => postDescBoxRef[postIndex] = el"
                     :class="{'post-desc-max-height': post.descExpanded}">
                  岗位要求：{{ post.postDesc }}
                </div>
                <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>
                </div>
              </div>
              <!-- 标签 -->
              <div class="company-label-box" v-if="post.labelList && post.labelList.length > 0"
                   :ref="el => postLabelBoxRef[postIndex] = el" :class="{'label-box-max-height': post.labelExpanded}">
                <a-tag v-for="(label, labelIndex) in post.labelList" :key="labelIndex">
                  {{ label.labelName }}
                </a-tag>
                <div v-if="showLaunchBtnBox(postLabelBoxRef,postIndex,50)">
                <span class="launch-btn" v-if="post.labelExpanded"
                      @click.stop="post.labelExpanded = false">展开</span>
                  <span class="launch-btn" v-else @click.stop="post.labelExpanded = true">收起</span>
                </div>
              </div>
            </div>
            <div v-else class="empty-box">
              <a-empty/>
            </div>
          </div>
          <!-- 分页控件 -->
          <div class="pagination-box">
            <a-pagination v-model:current="postSearchParams.pageIndex" :total="postTotal"
                          v-model:pageSize="postSearchParams.pageSize"
                          show-less-items @change="postPaginationChange" simple :show-size-changer="false"/>
          </div>
        </div>
        <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 class="font-weight-700">{{ nowCheckCompany.professionName }}</span>
              <span class="post-salary">{{ showSalary(nowCheckCompany.minSalary, nowCheckCompany.maxSalary) }}</span>
            </div>
            <!-- 标签 -->
            <div class="company-label-box"
                 v-if="nowCheckCompany.postLabelList && nowCheckCompany.postLabelList.length > 0"
            >
              <a-tag v-for="(label, index) in nowCheckCompany.postLabelList" :key="index">
                {{ 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>
    </div>
  </div>
</template>

<script setup lang="ts">
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";
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 = ref<Array<any>>([]);
let labelList = ref<Array<any>>([]);
// 查询类型
const searchType = ref("company")
// 企业查询条件
const companySearchParam = reactive({
  pageIndex: 1,
  pageSize: 50,
  companyName: "",
  maxDistance: null,
  companyModel: undefined,
  siteID: undefined,
  regionCode: undefined,
  longitude: 114.416110,
  latitude: 23.111582
})
// 企业数据
const companyList = ref<Array<any>>([])
// 企业分页条数
const companyTotal = ref(0);
// 当前选中的企业
const nowCheckCompany = ref<any>({})
// 鼠标当前移入的企业
const nowMouseenterCompany = ref<any>({})
// 岗位查询条件
const postSearchParams = reactive({
  pageIndex: 1,
  pageSize: 20,
})
// 当前选中的企业岗位列表
const postList = ref<Array<any>>([]);
// 岗位分页总条数
const postTotal = ref(0);

// 范围列表
const rangeList = [
  {value: null, label: "--范围--"},
  {value: 5, label: "5KM"},
  {value: 3, label: "3KM"},
  {value: 1, label: "1KM"}
]
// 企业规模
const companyModelList = ref<SelectProps['options']>();
// 所属驿站
const siteList = ref<any>([]);
// 所属县区
const regionList = ref<SelectProps['options']>();
// 查询按钮加载
const searchLoading = ref(false);
// 企业信息标签box ref
const companyLabelBoxRef = ref<Array<any>>([]);
// 企业信息-岗位标签box ref
const companyPostLabelBoxRef = ref<Array<any>>([])
// 岗位面板企业信息的标签盒子ref
const postBoxCompanyLabelBoxRef = ref<any>(null);
// 岗位面板企业信息的标签展开与收起开关
const postBoxCompanyLabelExpanded = ref(true)
// 岗位信息的标签box ref
const postLabelBoxRef = ref<Array<any>>([]);
// 岗位要求
const postDescBoxRef = ref<Array<any>>([]);

// 查询企业规模
const getCompanyModelList = async function () {
  companyModelList.value = await getSysDictionaryList("CompanyModel");
}
// 查询驿站
const getAllSites = () => {
  getSiteList({pageIndex: 1, pageSize: 9999}).then((result: any) => {
    siteList.value = result.list;
  })
}
// 查询县区
const getRegionList = async function () {
  regionList.value = await getRegionCodeList();
}

// 查询事件
function onSearch() {
  searchLoading.value = true;
  // 按企业名称查询
  if (searchType.value == 'company') {
    getDataMapList(companySearchParam).then((result: any) => {
      findFuncThen(result);
    }).finally(() => {
      searchLoading.value = false;
    })
  }
  // 按岗位名称反向查询
  if (searchType.value == "post") {
    getDataMapListByPostName(companySearchParam).then((result: any) => {
      findFuncThen(result);
    }).finally(() => {
      searchLoading.value = false;
    })
  }
}

// 查询全部
function searchAll() {
  companySearchParam.companyName = "";
  companySearchParam.companyModel = undefined;
  companySearchParam.siteID = undefined;
  companySearchParam.regionCode = undefined;
  companySearchParam.maxDistance = null;
  companySearchParam.pageIndex = 1;
  companySearchParam.pageSize = 50;
  onSearch();
}

// 查询处理
function findFuncThen(result: any) {
  companyList.value = result.list;
  // 处理标签和岗位JSON数据
  companyList.value.forEach((item: any) => {
    item.companyLabelList = JSON.parse(item.companyLabelList || '[]')
    item.postLabelList = JSON.parse(item.postLabelList || '[]')
    item.postList = JSON.parse(item.postList || '[]')
    item.labelExpanded = true;
  });
  companyTotal.value = result.total;
  // 重置选中
  nowCheckCompany.value.companyID = "";
  setCompanyMarker();
}

// 地图初始化
const initMap = () => {
  // 初始化容器
  map = new T.Map('mapDiv');

  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();
      // 计算新的icon大小
      let newSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
      // 计算新的icon锚点位置
      let iconAnchor = new T.Point(15 * (newSize / 45), 30 * (newSize / 45));
      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 = -20 + ((newSize - 45) / 3);
      let offsetY = 28 + ((newSize - 45) / 3);
      // 确保偏移量不超过初始值
      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 - (45 - newSize) / 3)));
        (map as any).addOverLay(item);
      })
    });
  }

  // 设置城市边界
  setBoundary(map, T, huiZhouGeoJSON);

  // 设置登录用户的定位
  setLoginLocation();
};

// 获取当前登录用户定位
function setLoginLocation() {
  getPosition().then((data: any) => {
    if (data.longitude && data.latitude) {
      companySearchParam.longitude = data.longitude;
      companySearchParam.latitude = data.latitude;
    } else {
      // 如果没有获取到经纬度，设置默认为惠州市人民政府的位置
      companySearchParam.longitude = 114.420244;
      companySearchParam.latitude = 23.116236;
      message.info("获取定位失败，已使用默认定位");
    }
  }).finally(() => {
    // 设置中心点
    (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), 10);
    const icon = new T.Icon({
      iconUrl: redThIcon,
      iconSize: new T.Point(30, 30),
      iconAnchor: new T.Point(15, 30)
    })
    const point = new T.LngLat(companySearchParam.longitude, companySearchParam.latitude)
    // 创建标注
    const marker = new T.Marker(point, {
      icon: icon
    });
    //向地图上标记
    (map as any).addOverLay(marker);
    onSearch();
  })
}

// 设置企业地图标点
function setCompanyMarker() {
  delMapInfo();

  if (companyList.value.length > 0) {
    // 设置图标
    const icon = new T.Icon({
      iconUrl: blueThIcon,
      iconSize: new T.Point(30, 30),
      iconAnchor: new T.Point(15, 30)
    })
    let uniqueCompanyList = companyList.value;
    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;
        }
      });

      // 更新uniqueCompanyList中元素的postNumber
      uniqueCompanyList.forEach(item => {
        item.postNumber = companyIDCounts[item.companyID];
      });
    }

    // 解析企业数据，在地图中标记
    uniqueCompanyList.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
        }); // 创建标注
        // 给每个地图标点添加点击事件，打印item
        marker.addEventListener('click', () => {
          checkCompanyChange(item);
        });
        marker.setZIndexOffset(200);
        (map as any).addOverLay(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(-30, 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);
        }
      })
    }
  }
}

// 企业分页器页码变更事件
function companyPaginationChange() {
  onSearch()
}

// 企业信息点击事件
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), 14);
  }
  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) => {
    postList.value = result.list;
    // 处理标签JSON数据
    postList.value.forEach((item: any) => {
      item.labelList = JSON.parse(item.labelList || '[]');
      item.labelExpanded = true;
      item.descExpanded = true;
    })
    postTotal.value = result.total;
  })
}

// 企业分页器页码变更事件
function postPaginationChange() {
  findPostList();
}

// 岗位薪酬优化显示
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 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 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(() => {
  initMap();
  getCompanyModelList();
  getAllSites();
  getRegionList();
})
</script>

<script lang="ts">
// 设置页面名称进行组件缓存
export default {
  name: "CompanyDataMap"
}
</script>

<style lang="less">
.map-box {
  width: 100%;
  height: calc(100vh - 235px);
  position: relative;
  border: 1px rgba(173, 173, 173, 0.8) solid;
  box-sizing: border-box;

  #mapDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .company-box, .post-box {
    position: absolute;
    top: 15px;
    bottom: 15px;
    z-index: 110;
  }

  .company-name, .post-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;

    .post-salary {
      font-size: 12px;
      font-weight: normal;
      color: #DE4F3F;
    }
  }

  .label-text {
    font-size: 12px;
    color: #737373;
    margin-bottom: 3px;
  }

  .company-label-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 5px;
    overflow: hidden;
    position: relative;

    .ant-tag {
      margin-bottom: 3px;
    }
  }

  .label-box-max-height {
    max-height: 23px;
  }

  .ant-tag {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    background-color: #F3F6F8;
    color: #899099
  }

  .search-box,
  .list-box,
  .pagination-box {
    width: 100%;
  }

  .list-box {
    margin-bottom: 10px;
    overflow-y: auto;
  }

  .pagination-box {
    display: flex;
    justify-content: center;
  }

  .launch-btn {
    font-size: 12px;
    color: #40a9ff;
    position: absolute;
    bottom: 4px;
    right: 0;
    cursor: pointer;
  }

  .empty-box {
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .post-title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .search-input-box {
    margin-bottom: 10px;
    width: 100%;
  }

  .company-box {
    left: 15px;
    right: 300px;
    width: 330px;

    .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;
      }

      .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;
            }
          }
        }

        .check-company {
          border: 1px solid #007EFF;
        }
      }
    }

    .pagination-box {
      background-color: #F8F8F8;
      padding: 8px 0;
      border-radius: 12px;
    }
  }

  .post-box {
    width: 330px;
    left: calc(100% - 345px);
    right: 0;
    border-radius: 10px;

    .company-info-post-list {
      width: 100%;
      height: 100%;
      background-color: #F8F8F8;
      border-radius: 10px;
      padding: 10px;
    }

    .title {
      text-align: center;
      margin-top: 8px;
    }

    .post-company-box {
      background-color: white;
      padding: 18px;
      width: 100%;
      max-height: 156px;
      overflow-y: auto;
      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% - 200px);

      .list-post-box {
        padding: 8px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);

        .post-desc-box {
          position: relative;

          .launch-btn {
            bottom: -1px;
            background-color: white;
          }

          .post-desc {
            overflow: hidden;
            width: 91%;
          }

          .post-desc-max-height {
            max-height: 35px;
          }
        }
      }
    }
  }

  .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>