From dc88e45a1fef4a9c7e72d1015dece29f84c270d9 Mon Sep 17 00:00:00 2001 From: guoxin Date: Thu, 14 Dec 2023 11:35:37 +0800 Subject: [PATCH] =?UTF-8?q?fix():=E4=BF=AE=E6=94=B9=E8=B7=AF=E5=86=85bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Map/Apimap/index.jsx | 238 ++++++++----- src/components/MapComponets/Marker/index.jsx | 393 ++++++++++----------- src/components/MapComponets/Marker/index.scss | 12 + .../PersonMgm/Attendance/Fence/loadable.jsx | 41 ++- .../Attendance/WorkerAttendance/index.scss | 24 ++ .../Attendance/WorkerAttendance/loadable.jsx | 138 +++++--- .../PersonMgm/AuditMgm/AuditConf/loadable.jsx | 1 - src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx | 15 +- 8 files changed, 494 insertions(+), 368 deletions(-) diff --git a/src/components/Map/Apimap/index.jsx b/src/components/Map/Apimap/index.jsx index f3abb67..511b0c0 100644 --- a/src/components/Map/Apimap/index.jsx +++ b/src/components/Map/Apimap/index.jsx @@ -1,95 +1,145 @@ -// import React, { useState, useEffect, useRef, useLayoutEffect } from "react";import L from "leaflet"; -// import "leaflet/dist/leaflet.css"; -// import "leaflet.chinatmsproviders"; -// import ajax from "@/services"; +import React, { useState, useEffect, useRef, useLayoutEffect } from "react"; +import L from "leaflet"; +import "leaflet/dist/leaflet.css"; +import "leaflet.chinatmsproviders"; +import ajax from "@/services"; -// function ModalMap(props) { -// const { -// setLnglat = () => {}, -// getLntLat = () => {}, -// searchLnglatValue = [], -// } = props; -// const mapConfig = { -// center: sysConfig.map.center, -// zoom: sysConfig.map.zoom, -// zooms: sysConfig.map.zooms, -// maxZoom: sysConfig.map.zooms[1], -// minZoom: sysConfig.map.zooms[0], -// mapTileHost: sysConfig.map.mapTileHost, -// zoomOffset: sysConfig.map.zoomOffset, -// mapTileType: sysConfig.map.mapTileType, -// }; -// const [map, setMap] = useState(null); -// const mapRef = useRef(null); -// const initMap = () => { -// // console.log(mapConfig); -// // const _map = L.map("mapid", { -// // scrollWheelZoom: true, -// // zoomSnap: 1, -// // crs: L.CRS.EPSG3857, -// // }).setView([mapConfig.center[0], mapConfig.center[1]], mapConfig.zoom); -// // L.tileLayer("{mapTileHost}/v3/tile?z={z}&x={x}&y={y}", { -// // maxZoom: mapConfig.zooms[1], -// // minZoom: mapConfig.zooms[0], -// // zoomOffset: 0, -// // mapTileHost: mapConfig.mapTileHost, -// // }).addTo(_map); -// // _map.on("click", function (e) { -// // clearMarkers(_map); -// // L.marker(e.latlng).addTo(_map); -// // setLnglat([e.latlng.lng.toFixed(4), e.latlng.lat.toFixed(4)]); -// // getLntLat([e.latlng.lng.toFixed(4), e.latlng.lat.toFixed(4)]); -// // }); -// // _map.invalidateSize(); -// // setMap(_map); -// // mapRef.current = _map; -// let _map = new AMap.Map("mapid", { -// resizeEnable: true, -// layers: [ -// new AMap.TileLayer.Satellite(), -// new AMap.TileLayer.RoadNet() -// ] -// }); -// _map.setCenter([mapConfig.center[1], mapConfig.center[0]], mapConfig.zoom); - -// setMap(_map) -// _map.on('click', function(e) { -// console.log(e) -// // onClick(info) -// setLnglat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); -// getLntLat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); -// }) -// mapRef.current = map -// }; -// function clearMarkers(map) { -// map.eachLayer(function (layer) { -// if (layer instanceof L.Marker) { -// map.removeLayer(layer); -// } -// }); -// } -// useEffect(() => { -// initMap(); -// return () => { -// if (mapRef.current) { -// mapRef.current.remove(); -// } -// }; -// }, []); -// useEffect(() => { -// if (searchLnglatValue.length === 0) return; -// mapRef.current.setView(searchLnglatValue, 13); -// }, [searchLnglatValue]); - -// return ( -//
-// ); -// } -// export default ModalMap; \ No newline at end of file +function ModalMap (props) { + const { + setLnglat = () => { }, + getLntLat = () => { }, + searchLnglatValue = [], + AmapConfig = { fullscreen: false } + } = props; + const [hasInit, setHasInit] = useState(false); // 地图是否已经创建 + + const mapConfig = { + center: sysConfig.map.center, + zoom: sysConfig.map.zoom, + zooms: sysConfig.map.zooms, + maxZoom: sysConfig.map.zooms[1], + minZoom: sysConfig.map.zooms[0], + mapTileHost: sysConfig.map.mapTileHost, + zoomOffset: sysConfig.map.zoomOffset, + mapTileType: sysConfig.map.mapTileType, + }; + const [map, setMap] = useState(null); + const mapRef = useRef(null); + const initMap = () => { + let _map = new AMap.Map("map", { + resizeEnable: true, + mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式 + viewMode: '2D', //设置地图模式 + layers: [ + new AMap.TileLayer.Satellite(), + new AMap.TileLayer.RoadNet() + ] + }); + _map.setCenter([mapConfig.center[1], mapConfig.center[0]], mapConfig.zoom); + setMap(_map) + _map.on('click', function (e) { + console.log(e) + // onClick(info) + setLnglat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); + getLntLat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); + }) + _map.on('complete', function () { + AMap.plugin(['AMap.Fullscreen'], function () { + map.addControl(new AMap.Fullscreen()); + }); + }); + mapRef.current = map + setHasInit(true); + }; + const renderChildren = (map) => { + return React.Children.map(props.children, (child) => { + if (child) { + const cType = child.type; + /* 针对下面两种组件不注入地图相关属性 + * 1. 明确声明不需要注入的 + * 2. DOM 元素 + */ + if (cType.preventAmap || typeof cType === "string") { + return child; + } + return React.cloneElement(child, { + __map__: map, + }); + } + return child; + }); + }; + function clearMarkers (map) { + map.eachLayer(function (layer) { + if (layer instanceof L.Marker) { + map.removeLayer(layer); + } + }); + } + useEffect(() => { + initMap(); + + + return () => { + if (mapRef.current) { + mapRef.current.remove(); + } + }; + }, []); + // 进入全屏 + // 获取地图容器元素 + var mapContainer = document.getElementById('map'); + function enterFullscreen () { + if (mapContainer.requestFullscreen) { + mapContainer.requestFullscreen(); + } else if (mapContainer.mozRequestFullScreen) { + mapContainer.mozRequestFullScreen(); + } else if (mapContainer.webkitRequestFullscreen) { + mapContainer.webkitRequestFullscreen(); + } else if (mapContainer.msRequestFullscreen) { + mapContainer.msRequestFullscreen(); + } + } + // 退出全屏 + function exitFullscreen () { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + } + useEffect(() => { + // 获取地图容器元素 + if (mapContainer) { + if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { + // 如果已经全屏，则退出全屏 + exitFullscreen(); + } else { + // 如果不在全屏状态，则进入全屏 + enterFullscreen(); + } + } + }, [AmapConfig.fullscreen]) + + useEffect(() => { + if (searchLnglatValue.length === 0) return; + mapRef.current.setView(searchLnglatValue, 13); + }, [searchLnglatValue]); + + return ( +
+
+
+ {hasInit ? renderChildren(map) : null} +
+
+ ); +} +export default ModalMap; \ No newline at end of file diff --git a/src/components/MapComponets/Marker/index.jsx b/src/components/MapComponets/Marker/index.jsx index 6657f1b..4da50ad 100644 --- a/src/components/MapComponets/Marker/index.jsx +++ b/src/components/MapComponets/Marker/index.jsx @@ -14,221 +14,200 @@ import bankingImg from '@/assets/images/map/banking.png' import otherImg from '@/assets/images/map/other.png' import utils from '@/config/utils' -function Marker(props, refs) { - const map = props.__map__ - const { validatorLongitude, validatorLatitude } = utils - const { - markerArr = [], // 点位数据数组 - refresh = true, // 点位是否需要刷新 - type = 'icon', // 点位样式类型 icon、img、div - icon = { - "40": garageImg, // key: type值；value: 图标class/图片url - "37": fedexImg, - "42": partyImg, - "39": hospitalImg, - "66": collegeImg, - "67": primarySchoolImg, - "68": logisticsImg, - "41": bankingImg, - "69": otherImg, - }, - iconHtmlCb = () => { }, // 点位样式是div的html函数 - iconSize = [35, 35], // 图标大小 - iconAnchor = [12, 24], // 偏移量（相对于左上角） - tooltipAnchor = [0, -12], // 提示工具偏移（相对于左上角 - tooltipKey = 'text', // 提示信息的key - popupAnchor = [0, -12], // 弹窗偏移（相对于左上角） - contentCb = '', // 生成弹窗显示内容方法事件 - clickCb, // 点击事件 - classCb, // class事件返回class - hideTypes = [], // 隐藏的点位type数组 - fitBounds = true, // 是否适应屏幕 - getMapValue='' - } = props - - console.log(getMapValue); - const [markers, setMarkers] = useState([]) - const [getMarker,setGetMarker]=useState({}) - const markersRef = useRef() - markersRef.current = markers - - const circlesRef = useRef() - useImperativeHandle(refs, () => (markersRef.current)) - - const addMarkers = (arr = []) => { - if (!Array.isArray(arr)) { - console.warn('请传数组') - return false - } - if (map) { - let _markers = [] - arr.forEach(elem => { - if (validatorLatitude(elem.lat) && validatorLongitude(elem.lng)) { - if (type === 'icon') { - let html = `` - let className = '' - if (classCb) { - className = classCb(elem) - } - let Opts = L.divIcon({ - className: className, - html: `${html}`, - iconSize: iconSize, - iconAnchor: iconAnchor, - tooltipAnchor: tooltipAnchor, - popupAnchor: popupAnchor - }) - let content = '' - if (contentCb) { - content = contentCb(elem) - } - let marker = L.marker([elem.lat, elem.lng], { icon: Opts }) - if (elem[tooltipKey]) { - marker.bindTooltip(elem[tooltipKey]) - } - if (content) { - marker.bindPopup(content) - } - marker.data = elem - if (!hideTypes.includes(elem.type)) { - marker.addTo(map) - } - _markers.push(marker) - markers.push(marker) - if (clickCb) { - marker.addEventListener('click', function (e) { - clickCb(e.target) - }) - } - } else if (type === 'img') { - let opts = L.icon({ - iconUrl: elem.type ? icon[elem.type] : markerIcon, - iconSize: elem.type ? iconSize : [35, 35], - iconAnchor: elem.type ? iconAnchor : [8, 23], - tooltipAnchor: tooltipAnchor, - popupAnchor: popupAnchor - }) - let marker = L.marker([elem.lat, elem.lng], { icon: opts }) - if (elem[tooltipKey]) { - marker.bindTooltip(elem[tooltipKey]) - } - let content = '' - if (contentCb) { - content = contentCb(elem) - } - if (content) { - marker.bindPopup(content) - } - marker.data = elem - marker.addTo(map) - _markers.push(marker) - markers.push(marker) - setGetMarker(marker.data); - - if (clickCb) { - marker.addEventListener('click', function (e) { - clickCb(e.target) - }) - } - if (elem.open) { - marker.openPopup() - } - } else if (type === 'div') { - let className = '' - if (classCb) { - className = classCb(elem) - } - let opts = L.divIcon({ - className: className, - html: iconHtmlCb(elem), - iconSize: iconSize, - iconAnchor: iconAnchor, - tooltipAnchor: tooltipAnchor, - popupAnchor: popupAnchor - }) - let marker = L.marker([elem.lat, elem.lng], { icon: opts }) - if (elem[tooltipKey]) { - marker.bindTooltip(elem[tooltipKey]) - } - let content = '' - if (contentCb) { - content = contentCb(elem) - } - if (content) { - marker.bindPopup(content) - } - marker.data = elem - marker.addTo(map) - _markers.push(marker) - markers.push(marker) - if (clickCb) { - marker.addEventListener('click', function (e) { - clickCb(e.target) - }) - } - if (elem.open) { - marker.openPopup() - } - } - } - }) - if (fitBounds) { - if (_markers.length > 1) { - map.fitBounds(L.featureGroup(_markers).getBounds()) - } else if (_markers.length == 1) { - map.setView(_markers[0]._latlng) +import mgreen from "@/assets/images/equip/home/mark_green.png"; +import mgred from "@/assets/images/equip/home/mark_red.png"; +import mgyellow from "@/assets/images/equip/home/mark_yellow.png"; +function Marker (props, refs) { + const map = props.__map__ + // 创建 点位 图层 + const labelsLayer = new AMap.LabelsLayer({ + zooms: [3, 20], + zIndex: 1000, + collision: true, // 该层内标注是否避让 + allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注 + }); + // 海量点图层 + const [massLayer, setMassLayer] = useState(labelsLayer); + // 创建一个空数组来保存 AMap.Text 对象 + const [textMarker, setTextMarker] = useState([]) + const { validatorLongitude, validatorLatitude } = utils + const { + markerArr = [], // 点位数据数组 + refresh = true, // 点位是否需要刷新 + type = 'icon', // 点位样式类型 icon、img、div + icon = { + "40": garageImg, // key: type值；value: 图标class/图片url + "37": fedexImg, + "42": partyImg, + "39": hospitalImg, + "66": collegeImg, + "67": primarySchoolImg, + "68": logisticsImg, + "41": bankingImg, + "69": otherImg, + }, + AmapConfig = {}, + iconHtmlCb = () => { }, // 点位样式是div的html函数 + iconSize = [35, 35], // 图标大小 + iconAnchor = [12, 24], // 偏移量（相对于左上角） + tooltipAnchor = [0, -12], // 提示工具偏移（相对于左上角 + tooltipKey = 'text', // 提示信息的key + popupAnchor = [0, -12], // 弹窗偏移（相对于左上角） + contentCb = '', // 生成弹窗显示内容方法事件 + clickCb, // 点击事件 + } = props + const Amapicon = { + type: 'image', // 图标类型，现阶段只支持 image 类型 + image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png', // 图片 url + size: [64, 30],// 图片尺寸 + anchor: 'center', // 图片相对 position 的锚点，默认为 bottom-center + }; + const Amapicon1 = { + type: 'image', // 图标类型，现阶段只支持 image 类型 + image: 'https://webapi.amap.com/images/mass/mass2.png', // 图片 url + size: [64, 30],// 图片尺寸 + anchor: 'center', // 图片相对 position 的锚点，默认为 bottom-center + }; + const text = { + content: type == "icon" ? "途经点" : "落脚点", // 要展示的文字内容 + direction: 'right', // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置 + offset: [-20, -5], // 在 direction 基础上的偏移量 + style: { // 文字样式 + fontSize: 12,// 字体大小 + fillColor: '#22886f', // 字体颜色 + strokeColor: '#fff', // 描边颜色 + strokeWidth: 2, // 描边宽度 } - } - setMarkers(markersRef.current) } - } - useEffect(()=>{ + const [markers, setMarkers] = useState([]) + const markersRef = useRef() + markersRef.current = markers - if(getMapValue){ - console.log(getMarker); - let lng = getMarker.lng - let lat = getMarker.lat - circlesRef.current && map.removeLayer(circlesRef.current) - let circle = L.circle([lat, lng], { radius: getMapValue }) - circle.addTo(map) - circlesRef.current = circle - } - },[getMapValue]) - useEffect(() => { - if (markerArr.length) { - addMarkers(markerArr) - } + useImperativeHandle(refs, () => (markersRef.current)) - return () => { - if (map) { - markersRef.current.forEach(elem => { - map.removeLayer(elem) - }) - } + const addMarkers = (arr = [], _massLayer) => { + if (!Array.isArray(arr)) { + console.warn('请传数组') + return false + } + if (map) { + let _markers = [] + arr.forEach(elem => { + if (validatorLatitude(elem.lat) && validatorLongitude(elem.lng)) { + if (type == "image") { + // 这里绘制的上下班点位 + const labelMarker = new AMap.LabelMarker({ + name: '标注2', // 此属性非绘制文字内容，仅最为标识使用 + position: [elem.lng, elem.lat], + zIndex: 16, + icon: Amapicon1, // 将第一步创建的 icon 对象传给 icon 属性 + text: text,// 将第二步创建的 text 对象传给 text 属性 + }); + _markers.push(labelMarker) + } else { + // 创建一个div标签作为点位 + var markerContent = document.createElement('div'); + markerContent.className = 'custom-marker'; // 自定义样式类名 + markerContent.innerHTML = ''; // 自定义点位内容 + // 创建点位 + var marker = new AMap.Marker({ + position: [elem.lng, elem.lat], // 设置点位坐标 + content: markerContent, // 设置点位内容 + map: map // 将点位添加到地图上 + }); + _markers.push(marker) + } + map.setZoomAndCenter(15, ["120.031712", "35.877188"]); + } + }) + massLayer.add([..._markers]); + map.add(massLayer); + setMarkers([..._markers]) + } } - }, []) + // useEffect(() => { + // if (markerArr.length) { + // addMarkers(markerArr) + // } + // }, []) - useEffect(() => { - markersRef.current.forEach(elem => { - // map.removeLayer(elem) - elem.remove() - }) - setMarkers([]) - addMarkers(markerArr) - }, [markerArr]) + useEffect(() => { + if (map && !massLayer) { + let _massLayer = new AMap.MassMarks([], { + zIndex: 5, // 海量点图层叠加的顺序 + // cursor: "pointer", + style: { + zIndex: 0, + url: '', // 图片 url + size: new AMap.Size(30, 40), // 图片尺寸 + anchor: new AMap.Pixel(15, 20), // 图片相对 position 的锚点，默认为 bottom-center + }, // 该层内标注是否避让 + // allowCollision: true, + }); // 创建海量点图层 + setMassLayer(_massLayer); + if (markerArr.length) { + // 处理点位数据 + addMarkers(markerArr) + } + } + }, [map]) - useEffect(() => { - markers.forEach(elem => { - map.removeLayer(elem) - if (!hideTypes.includes(elem.data.type)) { - elem.addTo(map) - } - }) - }, [hideTypes.length]) + useEffect(() => { + if (massLayer) { + massLayer.clear(); // 清空之前的点位 + if (markerArr.length) { + addMarkers(markerArr, massLayer); // 添加点位 + } else { + // 清除所有点位 + massLayer.clear(); // 清空之前的点位 + } + } + }, [markerArr]); + // 控制时间是否显示 + useEffect(() => { + let newMarkers = []; // 使用局部变量保存新的文本标记 + if (AmapConfig?.timeposition) { + // 创建新的文本标签 + markerArr.forEach((textMarkerData) => { + const textMarker = new window.AMap.Text({ + position: [textMarkerData.lng, textMarkerData.lat], + zIndex: 30, + text: textMarkerData.location, + map, + }); + newMarkers.push(textMarker); // 将新的文本标记保存到局部变量中 + }); + setTextMarker(newMarkers) + } else { + // 清除之前的文本标记 + textMarker.forEach((textMarker) => { + console.log(textMarker); + textMarker.setMap(null); + }); + } + // 更新全局的文本标记数组 + setTextMarker([...newMarkers]) + }, [AmapConfig.timeposition]) + let currentIndex = useRef(0); + useEffect(() => { + currentIndex.current = 0 + if (AmapConfig.timebackcheck) { + let index = currentIndex + const interval = setInterval(() => { + if (currentIndex.current < markerArr.length) { + const point = markerArr[currentIndex.current]; + console.log('===================================='); + console.log(point); + console.log('===================================='); + map.setCenter([point.lng, point.lat]); + currentIndex.current ++; + } else { + clearInterval(interval); + } + }, 1000); + } + }, [AmapConfig.timebackcheck]) - return ( - null - ) } export default forwardRef(Marker) diff --git a/src/components/MapComponets/Marker/index.scss b/src/components/MapComponets/Marker/index.scss index 013db01..09b7b64 100644 --- a/src/components/MapComponets/Marker/index.scss +++ b/src/components/MapComponets/Marker/index.scss @@ -1,3 +1,15 @@ .leaflet-popup-content-wrapper { border-radius: 0; } +.custom-marker{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: greenyellow; +} +.custom-marker1{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: red; +} diff --git a/src/pages/InRoadMgm/PersonMgm/Attendance/Fence/loadable.jsx b/src/pages/InRoadMgm/PersonMgm/Attendance/Fence/loadable.jsx index d256dec..5b032f2 100644 --- a/src/pages/InRoadMgm/PersonMgm/Attendance/Fence/loadable.jsx +++ b/src/pages/InRoadMgm/PersonMgm/Attendance/Fence/loadable.jsx @@ -284,7 +284,7 @@ function Fence(props) { const saveBtn = () => { if (getScopeValue === '2' && targetKeys.length === 0) { message.error('请选择停车场') - }else{ + } else { let getValue = valuePark let result = getValue.join(",") if (getScope === 2) { @@ -321,9 +321,9 @@ function Fence(props) { } }) } - + } - + } //批量设置取消 @@ -507,23 +507,26 @@ function Fence(props) { { getStatus == '2' ? -
-
*
- - String(value) }, - ]} + <> +
+
*
+ + String(value) }, + ]} - type="number" - onChange={handleType} - /> - -
+ type="number" + onChange={handleType} + /> + +
+
考勤打卡和检测的工作范围，可以输入[100,2000]
+ : '' } diff --git a/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/index.scss b/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/index.scss index 2970a10..c990504 100644 --- a/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/index.scss +++ b/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/index.scss @@ -201,6 +201,12 @@ $color-primary : var(--color-primary); } } } +.ant-switch{ + background-color: #b8b9bc; +} +.ant-switch-checked { + background-color: #177ddc; +} .AttendanceMap{ width: 1600px !important; .mapTable{ @@ -210,6 +216,24 @@ $color-primary : var(--color-primary); .personMap{ width: 780px; height: 600px; + position: relative; + + .amap-control{ + position: absolute; + top: 20px; + right: 20px; + width: 300px; + height: 30px; + z-index: 100; + display: flex; + background: white; + color: black; + align-items: center; + p{ + margin: 0; + padding: 0 10px; + } + } .yisa-table .ant-table-thead .ant-table-cell{ background-color: #616b83 !important; color: #ffffff !important; diff --git a/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/loadable.jsx b/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/loadable.jsx index f5bcd7d..8339c12 100644 --- a/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/loadable.jsx +++ b/src/pages/InRoadMgm/PersonMgm/Attendance/WorkerAttendance/loadable.jsx @@ -1,6 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; -import { Apimap, Marker, ExportBtn, ResultFlowResult} from "@/components" -import { Select, Input, Button, Table, message, Pagination, DatePicker, Space, Modal } from 'antd' +import { Apimap, Marker, ExportBtn, ResultFlowResult } from "@/components" +import { Select, Input, Button, Table, message, Pagination, DatePicker, Space, Modal, Switch } from 'antd' import { operator, name, @@ -10,10 +10,11 @@ import moment from "moment"; import "./index.scss"; import { SearchOutlined, DeleteOutlined } from '@ant-design/icons'; import ajax from '@/services' +import { isBoolean } from "lodash"; // import image1 from '@/assets/images/default-marker.png' const { Option } = Select; const { RangePicker } = DatePicker; -function WorkerAttendance(props) { +function WorkerAttendance (props) { const [ajaxLoading, setAjaxLoading] = useState(false) const [type, setType2] = useState('day'); const [resultData, setResultData] = useState({ @@ -22,11 +23,16 @@ function WorkerAttendance(props) { export_url: '', process_url: "" }) + const [mapConfig, setMapConfig] = useState({ + timebackcheck: false, + timeposition: false, + fullscreen: false + }) const [formData, setFormData] = useState({ pdaManagerName: '',//登录名 pdaManagerCode: '',//员工编号 - pdaManagerRole: '-1',//角色 - operator: '0',//所属运营商 + pdaManagerRole: '',//角色 + operator: '',//所属运营商 start_time: type === 'day' ? moment().subtract(30, 'days').startOf('day').format('YYYY-MM-DD') : moment().startOf('month').format('YYYY-MM'), end_time: type === 'day' ? moment().format('YYYY-MM-DD') : moment().format('YYYY-MM'), pn: 1, @@ -197,17 +203,24 @@ function WorkerAttendance(props) { if (res.status === 20000) { setAttendanceVisible(true) setGetTrajectory(res.data.list) - res.data.list.map((res, index) => { - setMarkers([{ - lng: res.go_work_lng, - lat: res.go_work_lat - }]) + let arr = res.data.list.map((item, index) => { + return { + lng: item.go_work_lng, + lat: item.go_work_lat, + ...item + } }) - + console.log('===================================='); + console.log(arr); + console.log('===================================='); + // setMarkers([...arr]) } }) } + // 当天起止地点 const [footMarkers, setFootMarkers] = useState([]); + // 当天工作点位 + const [markers, setMarkers] = useState([]) const Check = (record) => { let data = { id: getDetailId.id, @@ -215,39 +228,45 @@ function WorkerAttendance(props) { } ajax.getLat(data).then(res => { if (res.status === 20000) { - setFootMarkers(res.data) + let { go_lng_lat, off_lng_lat, list } = res.data + setFootMarkers([ + { lng: go_lng_lat.split(",")[1], lat: go_lng_lat.split(",")[0] } + , + { lng: off_lng_lat.split(",")[1], lat: off_lng_lat.split(",")[0] } + ]); + setMarkers([...list]) } }) } const markerConf = { markerArr: footMarkers, - iconSize: [48, 54], - type: "img", + iconSize: [80, 80], + type: "image", popupAnchor: [12, -12], tooltipAnchor: [16, 0], - contentCb: (data) => { - let tem = ``; - tem = ` -
-

- - ${data.go_work_time} -

-

- - ${data.go_work_location} -

-
- `; - return tem; - }, - clickCb: (e) => { - console.log(e); - }, + // contentCb: (data) => { + // let tem = ``; + // tem = ` + //
+ //

+ // + // ${data.go_work_time} + //

+ //

+ // + // ${data.go_work_location} + //

+ //
+ // `; + // return tem; + // }, + // clickCb: (e) => { + // console.log(e); + // }, }; //查看详情弹窗 const attendanceModal = () => { @@ -281,10 +300,10 @@ function WorkerAttendance(props) { console.log(err) }) } - //切换分页 - const changePn = (pn, length) => { + //切换分页 + const changePn = (pn, length) => { if (formData.page_size === length) { - setFormData(Object.assign({}, formData, { pn: pn, page_size: length})) + setFormData(Object.assign({}, formData, { pn: pn, page_size: length })) setLastFormData(Object.assign({}, lastFormData, { pn: pn, page_size: length })) getData(Object.assign({}, formData, { pn: pn, page_size: length })) } @@ -295,7 +314,6 @@ function WorkerAttendance(props) { setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) getData(Object.assign({}, formData, { pn: 1, page_size: length })) } - const [markers, setMarkers] = useState([]) //检索数据 const getSearchData = (data = formData) => { getData(data) @@ -486,12 +504,44 @@ function WorkerAttendance(props) { pagination={false} loading={ajaxLoading} /> - - {/* +
+

时间回放 { + if (checked) { + setMapConfig({ ...mapConfig, timebackcheck: checked, timeposition: !checked, }) + } else { + setMapConfig({ ...mapConfig, timebackcheck: checked }) + } + }} + />

+

定位时间 { + if (checked) { + console.log(checked); + setMapConfig({ ...mapConfig, timeposition: checked, timebackcheck: !checked }) + } else { + setMapConfig({ ...mapConfig, timeposition: checked, }) + } + }} />

+

{ setMapConfig({ ...mapConfig, fullscreen: !mapConfig.fullscreen }) }}>全屏

+
+ {/* 开始，结束 */} + + {/* 路径 */} + {/* { + !!isBoolean(mapConfig.timeposition) && + + } */} + {/* { if (res.status === 20000) { - message.success(res.message); setTreeData(res.data.list); setTotal(res.data.total); } diff --git a/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx b/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx index a66993d..51a96ab 100644 --- a/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx +++ b/src/pages/InRoadMgm/Stuff/StuffMgm/loadable.jsx @@ -23,13 +23,13 @@ function StuffMgm(props) { process_url: "" }) const parameter = { - region_id: [],//区域 + region_id: ['5910983100858368'],//区域 code: '',//物品编号 brand_id: '0',//物品类型 model_id: '',//物品型号 operatorid: '0',//商户名称 name: '',//物品名称 - status: '',//状态 + status: '3',//状态 uid: 0,//领用人 pn: 1, page_size: Number(pageSizeOptions[0]), // 每页条数 @@ -156,7 +156,10 @@ function StuffMgm(props) {
{ CheckBtn(record) }}>查看
-
{ translateBtn(record) }}>编辑
+
+ + { translateBtn(record) }}> + 编辑
}> @@ -223,6 +226,8 @@ function StuffMgm(props) { const translateBtn = (record) => { setGetId(record) setEditVisible(true) + setGetBrandId(record.brand_id) + setGetOperatorValue(record.operatorid) console.log(record); /** * @@ -742,6 +747,10 @@ function StuffMgm(props) { value: '2', label: '废弃' }, + { + value: '3', + label: '全部' + }, ]} />