|
@@ -27,6 +27,7 @@
|
|
|
</div>
|
|
|
<!-- 数据列表 -->
|
|
|
<div class="select-data-box">
|
|
|
+ <!-- 下拉框查询部分 -->
|
|
|
<div class="select-input-box">
|
|
|
<span class="cursor-pointer" style="width: 35px;padding: 7px 0;text-align: center"
|
|
|
@click="searchAll">全部</span>
|
|
@@ -66,6 +67,7 @@
|
|
|
</a-select>
|
|
|
</div>
|
|
|
<div class="list-box">
|
|
|
+ <!-- 驿站数据 -->
|
|
|
<div v-if="searchType == 'site' && siteList.length > 0" class="site-data"
|
|
|
:class="{'check-site':nowCheckSite.siteID == site.siteID || nowMouseenterSite.siteID == site.siteID}"
|
|
|
v-for="(site,siteIndex) in siteList"
|
|
@@ -87,6 +89,7 @@
|
|
|
站点工作人员:{{ site.siteUsers.length }}
|
|
|
</p>
|
|
|
</div>
|
|
|
+ <!-- 驿站人员数据 -->
|
|
|
<div v-if="searchType == 'siteUser' && siteUserList.length > 0" class="site-data"
|
|
|
:class="{'check-site':nowCheckSiteUser.siteUserID == siteUser.siteUserID || nowMouseenterSiteUser.siteUserID == siteUser.siteUserID}"
|
|
|
v-for="(siteUser,siteIndex) in siteUserList"
|
|
@@ -122,6 +125,37 @@
|
|
|
show-less-items @change="onSearch" simple :show-size-changer="false"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 驿站人员信息详情 -->
|
|
|
+ <div class="site-user-info-box" v-if="searchType == 'siteUser' && nowCheckSiteUser.siteUserID != -1">
|
|
|
+ <div class="user-info-box margin-bottom-10">
|
|
|
+ <p class="font-size-18 margin-bottom-8" style="font-weight: 600">
|
|
|
+ {{ nowCheckSiteUser.siteUserName }}
|
|
|
+ </p>
|
|
|
+ <p class="label-text font-size-14 margin-bottom-3">
|
|
|
+ 工号:{{ nowCheckSiteUser.userNo }}
|
|
|
+ </p>
|
|
|
+ <p class="label-text font-size-14 margin-bottom-3">
|
|
|
+ 联系电话:{{ nowCheckSiteUser.mobile }}
|
|
|
+ </p>
|
|
|
+ <p class="label-text font-size-14 margin-bottom-3">
|
|
|
+ 所属驿站:{{ nowCheckSiteUser.siteName }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="data-count-box">
|
|
|
+ <p class="font-size-18 margin-bottom-8" style="font-weight: 600">
|
|
|
+ 工作情况
|
|
|
+ </p>
|
|
|
+ <p class="label-text font-size-14 margin-bottom-3">
|
|
|
+ 企业登记数:{{ siteUserDataCount.companyCount }}
|
|
|
+ </p>
|
|
|
+ <p class="label-text font-size-14 margin-bottom-3">
|
|
|
+ 岗位登记数:{{ siteUserDataCount.postCount }}
|
|
|
+ </p>
|
|
|
+ <p class="label-text font-size-14 margin-bottom-3">
|
|
|
+ 求职人员登记数:{{ siteUserDataCount.jobUserCount }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -134,7 +168,7 @@ import type {SelectProps} from "ant-design-vue";
|
|
|
import {getRegionCodeList, getStreetCodeList} from "@/api/system/area/index";
|
|
|
import {getSiteList} from "@/api/baseSettings/siteInfo";
|
|
|
import thIcon from "@/assets/images/blueTh.png"
|
|
|
-import {getSiteUserDataMapList} from "@/api/baseSettings/userInfo";
|
|
|
+import {findUserDataCount, getSiteUserDataMapList} from "@/api/baseSettings/userInfo";
|
|
|
|
|
|
const T = (window as any).T;
|
|
|
const zoom = 9;
|
|
@@ -171,13 +205,15 @@ const streetList = ref<SelectProps['options']>();
|
|
|
// 驿站下拉框数据
|
|
|
const siteDicList = ref<any>([]);
|
|
|
// 选中的站点
|
|
|
-const nowCheckSite = ref<any>({})
|
|
|
+const nowCheckSite = ref<any>({siteID: -1})
|
|
|
// 鼠标经过的站点
|
|
|
-const nowMouseenterSite = ref<any>({});
|
|
|
+const nowMouseenterSite = ref<any>({siteID: -1});
|
|
|
// 选中的站点
|
|
|
-const nowCheckSiteUser = ref<any>({})
|
|
|
+const nowCheckSiteUser = ref<any>({siteUserID: -1})
|
|
|
// 鼠标经过的站点
|
|
|
-const nowMouseenterSiteUser = ref<any>({});
|
|
|
+const nowMouseenterSiteUser = ref<any>({siteUserID: -1});
|
|
|
+// 驿站人员的业务数据
|
|
|
+const siteUserDataCount = ref<any>({})
|
|
|
|
|
|
// 地图初始化
|
|
|
const initMap = () => {
|
|
@@ -189,20 +225,7 @@ const initMap = () => {
|
|
|
|
|
|
// 地图缩放监听事件
|
|
|
(map as any).addEventListener("zoomend", function () {
|
|
|
- let zoomLevel = (map as any).getZoom();
|
|
|
- const sizeData = computeMarkerSize(zoomLevel);
|
|
|
- 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);
|
|
|
- })
|
|
|
+ setSiteMarker(false);
|
|
|
});
|
|
|
}
|
|
|
// 设置城市边界
|
|
@@ -224,7 +247,7 @@ function onSearch() {
|
|
|
})
|
|
|
paginationTotal.value = result.total;
|
|
|
// 地图绘制
|
|
|
- setSiteMarker()
|
|
|
+ setSiteMarker(true)
|
|
|
}).finally(() => {
|
|
|
searchLoading.value = false;
|
|
|
})
|
|
@@ -241,7 +264,7 @@ function onSearch() {
|
|
|
siteUserList.value = result.list;
|
|
|
paginationTotal.value = result.total;
|
|
|
// 地图绘制
|
|
|
- setSiteMarker();
|
|
|
+ setSiteMarker(true);
|
|
|
}).finally(() => {
|
|
|
searchLoading.value = false;
|
|
|
})
|
|
@@ -285,13 +308,15 @@ const getAllSites = () => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-function setSiteMarker() {
|
|
|
+function setSiteMarker(setCenter: boolean) {
|
|
|
delMapInfo();
|
|
|
|
|
|
- // 设置中心点
|
|
|
- (map as any).centerAndZoom(centerLngLat, zoom);
|
|
|
+ if (setCenter) {
|
|
|
+ // 设置中心点
|
|
|
+ (map as any).centerAndZoom(centerLngLat, zoom);
|
|
|
+ }
|
|
|
|
|
|
- if (siteList.value.length > 0) {
|
|
|
+ if (siteList.value.length > 0 || siteUserList.value.length > 0) {
|
|
|
let zoomLevel = (map as any).getZoom();
|
|
|
const sizeData = computeMarkerSize(zoomLevel);
|
|
|
|
|
@@ -311,6 +336,25 @@ function setSiteMarker() {
|
|
|
marker.addEventListener('click', () => {
|
|
|
checkSite(item);
|
|
|
});
|
|
|
+ let winHtml = `
|
|
|
+ <div >
|
|
|
+ <span style="line-height: 12px;">站点名称:${item.siteName}</span>
|
|
|
+ <br>
|
|
|
+ <span style="line-height: 12px;">驿站编号:${item.siteCode}</span>
|
|
|
+ <br>
|
|
|
+ <span style="line-height: 12px;">驿站地址:${item.detailAddress}</span>
|
|
|
+ <br>
|
|
|
+ <span style="line-height: 12px;">站点工作人员:${item.siteUsers.length}</span>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ let markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
|
|
|
+ // 添加鼠标经过事件
|
|
|
+ marker.addEventListener('mouseover', () => {
|
|
|
+ marker.openInfoWindow(markerInfoWin);
|
|
|
+ });
|
|
|
+ marker.addEventListener('mouseout', () => {
|
|
|
+ marker.closeInfoWindow();
|
|
|
+ });
|
|
|
(map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
markerList.value.push(marker);
|
|
|
}
|
|
@@ -325,17 +369,8 @@ function setSiteMarker() {
|
|
|
marker.addEventListener('click', () => {
|
|
|
checkSiteUser(item);
|
|
|
});
|
|
|
- let label = new T.Label({
|
|
|
- text: item.siteUserName, //文本标注的内容
|
|
|
- position: new T.LngLat(item.longitude, item.latitude), //文本标注的地理位置
|
|
|
- offset: sizeData.labelOffset, //文本标注的位置偏移值
|
|
|
- });
|
|
|
- label.setBorderLine(0);
|
|
|
- label.setFontSize(sizeData.fontSize);
|
|
|
(map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
markerList.value.push(marker);
|
|
|
- // (map as any).addOverLay(label);// 将标注添加到地图中
|
|
|
- // labelList.value.push(label);
|
|
|
} else if (item.siteLongitude && item.siteLatitude) {
|
|
|
const point = new T.LngLat(item.siteLongitude, item.siteLatitude);
|
|
|
const marker = new T.Marker(point, {icon: icon}); // 创建标注
|
|
@@ -343,17 +378,8 @@ function setSiteMarker() {
|
|
|
marker.addEventListener('click', () => {
|
|
|
checkSiteUser(item);
|
|
|
});
|
|
|
- let label = new T.Label({
|
|
|
- text: item.siteUserName, //文本标注的内容
|
|
|
- position: new T.LngLat(item.siteLongitude, item.siteLatitude), //文本标注的地理位置
|
|
|
- offset: sizeData.labelOffset, //文本标注的位置偏移值
|
|
|
- });
|
|
|
- label.setBorderLine(0);
|
|
|
- label.setFontSize(sizeData.fontSize);
|
|
|
(map as any).addOverLay(marker);// 将标注添加到地图中
|
|
|
markerList.value.push(marker);
|
|
|
- // (map as any).addOverLay(label);// 将标注添加到地图中
|
|
|
- // labelList.value.push(label);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -383,7 +409,7 @@ function computeMarkerSize(zoomLevel: any) {
|
|
|
let newIconSize = Math.min(Math.max(zoomLevel * 3, 15), 45);
|
|
|
// 计算新的icon锚点位置
|
|
|
let iconAnchor = new T.Point(15 * (newIconSize / 45), 30 * (newIconSize / 45));
|
|
|
-// 计算新的偏移量,保持 label 居中且不超过初始值
|
|
|
+ // 计算新的偏移量,保持 label 居中且不超过初始值
|
|
|
let offsetX = -30 + ((newIconSize - 45) / 3);
|
|
|
let offsetY = 30 + ((newIconSize - 45) / 3);
|
|
|
// 确保偏移量不超过初始值
|
|
@@ -416,7 +442,10 @@ function siteMouseenter(site: any) {
|
|
|
}
|
|
|
|
|
|
// 选择站点人员
|
|
|
-function checkSiteUser(siteUser: any) {
|
|
|
+async function checkSiteUser(siteUser: any) {
|
|
|
+ await findUserDataCount(siteUser.userID).then((result: any) => {
|
|
|
+ siteUserDataCount.value = result;
|
|
|
+ })
|
|
|
nowCheckSiteUser.value = JSON.parse(JSON.stringify(siteUser))
|
|
|
if (siteUser.longitude && siteUser.latitude) {
|
|
|
// 设置地图中心点
|
|
@@ -507,18 +536,6 @@ export default {
|
|
|
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
|
|
|
box-sizing: border-box;
|
|
|
border: 1px solid white;
|
|
|
-
|
|
|
- .site-name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .label-text {
|
|
|
- font-size: 12px;
|
|
|
- color: #737373;
|
|
|
- margin-bottom: 3px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.check-site {
|
|
@@ -528,6 +545,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .site-user-info-box {
|
|
|
+ width: 300px;
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: calc(100% - 330px);
|
|
|
+ right: 15px;
|
|
|
+ z-index: 110;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: white;
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
.pagination-box {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
@@ -544,6 +573,18 @@ export default {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
+ .site-name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #737373;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
.ant-btn, .ant-input {
|
|
|
border: none !important;
|
|
|
}
|