From ebdad869506bc5136958d9ab66eb8f8bd273ce70 Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Wed, 9 Mar 2022 16:00:58 +0800 Subject: [PATCH] edit --- .../vehicle-detail.component.html | 2 +- .../vehicle-detail.component.ts | 57 ++-- .../amap-path-simplifier.component.ts | 270 ++++-------------- .../shared/components/amap/amap.service.ts | 11 +- 4 files changed, 95 insertions(+), 245 deletions(-) diff --git a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html index da73e8e5..0b55fc05 100644 --- a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html +++ b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html @@ -203,7 +203,7 @@
- +
diff --git a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts index d9110498..53737f03 100644 --- a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts +++ b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts @@ -24,8 +24,9 @@ import { OrderManagementService } from '../../services/order-management.service' export class OrderManagementVehicleDetailComponent implements OnInit { id = this.route.snapshot.params.id; trajectory = 'car'; - mapList:any[] = []; //地图点位数据组 - addressItems:any[] = []; //打点地址数据组 + mapList: any[] = []; //地图点位数据组 + pois: any[] = []; + addressItems: any[] = []; //打点地址数据组 i: any = { unLoadingPlaceList: [], billExpenseDetails: [], @@ -40,7 +41,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit { isVisible = false; logColumns2: STColumn[] = [ { title: '时间', index: 'vinOutTime' }, - { title: '地点', index: 'cityName' }, + { title: '地点', index: 'cityName' } ]; logColumns: STColumn[] = [ { title: '款项', index: 'expenseCodeLabel' }, @@ -72,15 +73,33 @@ export class OrderManagementVehicleDetailComponent implements OnInit { ngOnInit(): void { this.initData(); - this.getTrajectory() + this.getTrajectory(); } initData() { this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => { if (res) { + console.log(res); + this.i = res; - this.billExpenses = this.i?.billExpenseDetails?.filter((data:any)=>data.expenseCode ==="PRE" || data.expenseCode ==="RECE" ||data.expenseCode ==="BACK" ) - this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data:any)=>data.displayStatus !=="HIDE"); + this.pois = [ + { + markerLabel: '起', + color: 'blue', + position: [res.startingPoint.longitude, res.startingPoint.latitude], + title: res.startingPoint.detailedAddress + }, + { + markerLabel: '终', + color: 'red', + position: [res.endPoint.longitude, res.endPoint.latitude], + title: res.endPoint.detailedAddress + } + ]; + this.billExpenses = this.i?.billExpenseDetails?.filter( + (data: any) => data.expenseCode === 'PRE' || data.expenseCode === 'RECE' || data.expenseCode === 'BACK' + ); + this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data: any) => data.displayStatus !== 'HIDE'); } }); } @@ -128,11 +147,11 @@ export class OrderManagementVehicleDetailComponent implements OnInit { } } // 获取车辆轨迹 - getTrajectory(){ + getTrajectory() { this.service.request(this.service.$api_get_getTrajectory, { id: this.id }).subscribe(res => { if (res) { const points = res.trackArray; - let list :any[] = []; + let list: any[] = []; points?.forEach((item: any) => { list.push({ name: `${item.spd}km/h`, @@ -141,7 +160,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit { }); this.mapList = list; this.addressItems = res.cityArray; - if(this.addressItems && this.addressItems.length > 0){ + if (this.addressItems && this.addressItems.length > 0) { this.addressItems.forEach(item => { item.vinOutTime = this.getLocalTime(item.vinOutTime); }); @@ -150,12 +169,12 @@ export class OrderManagementVehicleDetailComponent implements OnInit { }); } - // 获取司机轨迹 - getDriverTrajectory(){ + // 获取司机轨迹 + getDriverTrajectory() { this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.id }).subscribe(res => { if (res) { const points = res.tracks; - let list :any[] = []; + let list: any[] = []; points?.forEach((item: any) => { list.push({ name: item.hgt, @@ -164,7 +183,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit { }); this.mapList = list; this.addressItems = [...res.enclosureDataAppTrack]; - if(this.addressItems && this.addressItems.length > 0){ + if (this.addressItems && this.addressItems.length > 0) { this.addressItems.forEach(item => { item.vinOutTime = this.getLocalTime(item.gtm); item.cityName = item.appAdress; @@ -172,14 +191,14 @@ export class OrderManagementVehicleDetailComponent implements OnInit { } } }); - } - trajectoryChange(event:any){ - if(event ==='car'){ - this.getTrajectory() - }else if(event ==='driver'){ + } + trajectoryChange(event: any) { + if (event === 'car') { + this.getTrajectory(); + } else if (event === 'driver') { this.getDriverTrajectory(); } - } + } getLocalTime(time: any) { return format(new Date(parseInt(time)), 'yyyy-MM-dd HH:mm:ss'); } diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts index 6071a0b7..fa6af579 100644 --- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts +++ b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts @@ -17,6 +17,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { aMap: any; pathSimplifierIns: any; navigator: any; + infoWindow: any; + markerList: any; @Input() pathList: any = []; @Input() @@ -31,40 +33,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { clcikPointEvent = new EventEmitter(); @Input() - pois: any = [ - { - id: 'A', - position: [116.020764, 39.904989], - markerLabel: 'X_A', - infoWinContent: 'Hello! A', - listDesc: '起', - color: '#F5222D' - }, - { - id: 'B', - position: [116.405285, 39.904989], - markerLabel: 'X_B', - infoWinContent: 'Hello! B', - listDesc: '终', - color: '#1890ff' - }, - { - id: 'C', - position: [116.789806, 39.904989], - markerLabel: 'X_C', - infoWinContent: 'Hello! C', - listDesc: '卸', - color: '#1890ff' - }, - { - id: 'C', - position: [116.789806, 39.904989], - markerLabel: 'X_C', - infoWinContent: 'Hello! C', - listDesc: '装', - color: '#F5222D' - } - ]; + pois: any = []; constructor(public service: BaseService) {} ngOnChanges(changes: SimpleChanges): void { @@ -73,7 +42,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { this.setPathIndex(this.selectedIndex); } if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) { - console.log(this.MapList); + // console.log(this.MapList); this.pathList = [ { name: '路线1', @@ -83,6 +52,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { this.setData(this.pathList); this.setPathIndex(this.selectedIndex); } + if (changes?.pois?.currentValue && this?.markerList && changes.pois?.currentValue.length > 0) { + // console.log(this.pois); + this.pois = changes?.pois?.currentValue; + this.markerList.render(this.pois); + } } ngOnInit(): void { this.mapInit(); @@ -99,7 +73,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { version: CONFIG.version, plugins: [ // 需要使用的的插件列表，如比例尺'AMap.Scale'等 - 'AMap.PathSimplifier' + 'AMap.PathSimplifier', + 'AMap.InfoWindow' ], AMapUI: { version: CONFIG.AMapUIVersion, @@ -112,10 +87,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { }); this.aMap.on('complete', () => { + // 信息窗口 + this.infoWindow = new AMap.InfoWindow({ + offset: new AMap.Pixel(0, -40) + }); // this.service.msgSrv.info('地图加载完成 !'); this.pathInit(); - // this.setPOIS(); - // this.loadPOIS(); + this.setPOIS(); }); }) .catch(e => { @@ -123,88 +101,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { }); } - loadPOIS() { - AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker: any) => { - if (!SvgMarker.supportSvg) { - //当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker - alert('当前环境不支持SVG'); - } - - //just some colors - var colors = ['#F5222D', '#1890ff']; - - //SvgMarker.Shape下的Shape - var shapeKeys = ['WaterDrop']; - - var colNum = 2, - rowNum = shapeKeys.length; - const markers: any[] = []; - - this.pois.forEach((d: any) => { - //创建shape - const shape = new SvgMarker.Shape['WaterDrop']({ - height: 40, - strokeWidth: 1, - strokeColor: '#ccc', - fillColor: '#F5222D' - }); - - markers.push( - new SvgMarker(shape, { - map: this.aMap, - position: d.position, - containerClassNames: 'shape-' + 'WaterDrop', - iconLabel: { - innerHTML: d.listDesc, - style: { - top: 7 + 'px' - } - }, - showPositionPoint: true - }) - ); - }); - console.log(markers); - - // var pxCenter = this.aMap.lnglatToPixel(this.aMap.getCenter()); - - // var startX = pxCenter.getX(), - // startY = pxCenter.getY(); - - // for (var c = 0; c < colNum; c++) { - // for (var r = 0; r < rowNum; r++) { - // var idx = r * colNum + c; - - // if (!colors[idx]) { - // continue; - // } - - // var x = startX + (c - colNum / 2) * 70; - // var y = startY + 50 + (r - rowNum / 2) * 80; - - // var labelCenter = shape.getCenter(); - - // var position = this.aMap.pixelToLngLat(new AMap.Pixel(x, y)); - - // markers.push( - // new SvgMarker(shape, { - // map: this.aMap, - // position: position, - // containerClassNames: 'shape-' + shapeKeys[r], - // iconLabel: { - // innerHTML: String.fromCharCode('A'.charCodeAt(0) + c), - // style: { - // top: labelCenter[1] - 9 + 'px' - // } - // }, - // showPositionPoint: true - // }) - // ); - // } - // } - }); - } - pathInit() { this.pathSimplifierIns = new AMapUI.PathSimplifier({ zIndex: 100, @@ -222,8 +118,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { return lnglatList; }, getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) { - console.log(pathData, pointIndex); - if (pointIndex >= 0) { //point return pathData.name + '，' + pathData.points[pointIndex].name; @@ -248,126 +142,53 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { } setPOIS() { - AMapUI.loadUI(['misc/MarkerList'], (MarkerList: any) => { - var markerList = new MarkerList({ + AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => { + this.markerList = new MarkerList({ //关联的map对象 map: this.aMap, - - //选中状态（通过点击列表或者marker）时在Marker和列表节点上添加的class，可以借此编写css控制选中时的展示效果 - selectedClassNames: 'selected', - - //返回数据项的Id - getDataId: (dataItem: any, index: any) => { - //index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替 - return dataItem.id; - }, //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989] getPosition: (dataItem: any) => { - console.log(dataItem); - return dataItem.position; }, //返回数据项对应的Marker getMarker: (dataItem: any, context: any, recycledMarker: any) => { - //marker的标注内容 - var content = dataItem.markerLabel; - - var label = { - offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置 - content: content - }; - //存在可回收利用的marker if (recycledMarker) { //直接更新内容返回 - recycledMarker.setLabel(label); + recycledMarker.setIconLabel(context.id); + recycledMarker.setIconStyle(dataItem.iconStyle); return recycledMarker; } //返回一个新的Marker - return new AMap.Marker({ - label: label + return new SimpleMarker({ + //普通文本 + iconLabel: { + //普通文本 + innerHTML: dataItem.markerLabel, + //设置样式 + style: { + color: '#fff', + fontSize: '110%', + marginTop: '2px' + } + }, + iconStyle: dataItem.color, + map: this.aMap, + position: dataItem.position }); }, //返回数据项对应的infoWindow getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => { - var tpl = '

<%- dataItem.id %>：<%- dataItem.infoWinContent %>

'; - - //MarkerList.utils.template支持underscore语法的模板 - var content = MarkerList.utils.template(tpl, { - dataItem: dataItem, - dataIndex: context.index - }); - - if (recycledInfoWindow) { - //存在可回收利用的infoWindow, 直接更新内容返回 - recycledInfoWindow.setContent(content); - return recycledInfoWindow; - } - - //返回一个新的InfoWindow - return new AMap.InfoWindow({ - offset: new AMap.Pixel(0, -32), - content: content - }); - }, - //返回数据项对应的列表节点 - getListElement: (dataItem: any, context: any, recycledListElement: any) => { - var tpl = '

<%- dataItem.id %>：<%- dataItem.listDesc %>

'; - - var content = MarkerList.utils.template(tpl, { - dataItem: dataItem, - dataIndex: context.index - }); - - if (recycledListElement) { - //存在可回收利用的listElement, 直接更新内容返回 - recycledListElement.innerHTML = content; - return recycledListElement; - } - - //返回一段html，MarkerList将利用此html构建一个新的dom节点 - return '

  • ' + content + '
    • '; + this.selectedPOI(dataItem); + return null; } }); - //监听选中改变 - markerList.on('selectedChanged', (event: any, info: any) => { - console.log(event, info); - }); - - //监听Marker和ListElement上的点击 - markerList.on('markerClick listElementClick', (event: any, record: any) => { - //console.log(event, record); - }); - - //构建一个数据项数组，数据项本身没有格式要求，但需要支持getDataId和getPosition - var data = [ - { - id: 'A', - position: [116.020764, 39.904989], - markerLabel: 'X_A', - infoWinContent: 'Hello! A', - listDesc: '店铺 A' - }, - { - id: 'B', - position: [116.405285, 39.904989], - markerLabel: 'X_B', - infoWinContent: 'Hello! B', - listDesc: '店铺 B' - }, - { - id: 'C', - position: [116.789806, 39.904989], - markerLabel: 'X_C', - infoWinContent: 'Hello! C', - listDesc: '店铺 C' - } - ]; - - //展示该数据 - markerList.render(data); + if (this.pois?.length > 0) { + //展示该数据 + this.markerList.render(this.pois); + } }); } @@ -377,7 +198,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { setPathIndex(index: number) { this.pathSimplifierIns.setSelectedPathIndex(index); - // this.startNav(); + this.startNav(); } startNav() { @@ -391,4 +212,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges { this.navigator?.start(); } } + + selectedPOI(location: any) { + this.infoWindow.setContent(`地址: 
    ${location.title}
    `); + this.infoWindow.open(this.aMap, location.position); + this.infoWindow.setPosition(location.position); + this.aMap.setCenter(location.position); + } } diff --git a/src/app/shared/components/amap/amap.service.ts b/src/app/shared/components/amap/amap.service.ts index 4a08b43f..ce1a801e 100644 --- a/src/app/shared/components/amap/amap.service.ts +++ b/src/app/shared/components/amap/amap.service.ts @@ -1,5 +1,5 @@ /* - * @Description : + * @Description : * @Version : 1.0 * @Author : Shiming * @Date : 2021-12-24 15:37:00 @@ -24,8 +24,8 @@ export class AmapService { sub = new Subject(); currentSub = new Subject(); - //计算路径驾车最优路线的长度与所需时间 - drivingCompute(starts: any[], ends: any[]): Observable { + //计算路径驾车最优路线的长度与所需时间 + drivingCompute(starts: any[], ends: any[]): Observable { AMap.plugin('AMap.Driving', () => { let driving = new AMap.Driving({ // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式 @@ -35,7 +35,10 @@ export class AmapService { return { keyword: item.detailedAddress, city: item.city }; }); driving.search(points, (status: any, result: any) => { - const repData = { distance: (result?.routes?.[0]?.distance / 1000).toFixed(2), time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2) }; + const repData = { + distance: (result?.routes?.[0]?.distance / 1000).toFixed(2), + time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2) + }; this.sub.next(repData); }); });