Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop

This commit is contained in:
wangshiming
2022-03-09 16:18:00 +08:00
6 changed files with 103 additions and 255 deletions

View File

@ -203,7 +203,7 @@
</st> </st>
</div> </div>
<div nz-col [nzSpan]="12"> <div nz-col [nzSpan]="12">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList"></amap-path-simplifier> <amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList" [pois]="pois"></amap-path-simplifier>
</div> </div>
</div> </div>
</nz-card> </nz-card>

View File

@ -24,8 +24,9 @@ import { OrderManagementService } from '../../services/order-management.service'
export class OrderManagementVehicleDetailComponent implements OnInit { export class OrderManagementVehicleDetailComponent implements OnInit {
id = this.route.snapshot.params.id; id = this.route.snapshot.params.id;
trajectory = 'car'; trajectory = 'car';
mapList:any[] = []; //地图点位数据组 mapList: any[] = []; //地图点位数据组
addressItems:any[] = []; //打点地址数据组 pois: any[] = [];
addressItems: any[] = []; //打点地址数据组
i: any = { i: any = {
unLoadingPlaceList: [], unLoadingPlaceList: [],
billExpenseDetails: [], billExpenseDetails: [],
@ -40,7 +41,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
isVisible = false; isVisible = false;
logColumns2: STColumn[] = [ logColumns2: STColumn[] = [
{ title: '时间', index: 'vinOutTime' }, { title: '时间', index: 'vinOutTime' },
{ title: '地点', index: 'cityName' }, { title: '地点', index: 'cityName' }
]; ];
logColumns: STColumn[] = [ logColumns: STColumn[] = [
{ title: '款项', index: 'expenseCodeLabel' }, { title: '款项', index: 'expenseCodeLabel' },
@ -72,15 +73,33 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.initData(); this.initData();
this.getTrajectory() this.getTrajectory();
} }
initData() { initData() {
this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => { this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
if (res) { if (res) {
console.log(res);
this.i = res; this.i = res;
this.billExpenses = this.i?.billExpenseDetails?.filter((data:any)=>data.expenseCode ==="PRE" || data.expenseCode ==="RECE" ||data.expenseCode ==="BACK" ) this.pois = [
this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data:any)=>data.displayStatus !=="HIDE"); {
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 => { this.service.request(this.service.$api_get_getTrajectory, { id: this.id }).subscribe(res => {
if (res) { if (res) {
const points = res.trackArray; const points = res.trackArray;
let list :any[] = []; let list: any[] = [];
points?.forEach((item: any) => { points?.forEach((item: any) => {
list.push({ list.push({
name: `${item.spd}km/h`, name: `${item.spd}km/h`,
@ -141,7 +160,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
}); });
this.mapList = list; this.mapList = list;
this.addressItems = res.cityArray; this.addressItems = res.cityArray;
if(this.addressItems && this.addressItems.length > 0){ if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => { this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.vinOutTime); item.vinOutTime = this.getLocalTime(item.vinOutTime);
}); });
@ -151,11 +170,11 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
} }
// 获取司机轨迹 // 获取司机轨迹
getDriverTrajectory(){ getDriverTrajectory() {
this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.id }).subscribe(res => { this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.id }).subscribe(res => {
if (res) { if (res) {
const points = res.tracks; const points = res.tracks;
let list :any[] = []; let list: any[] = [];
points?.forEach((item: any) => { points?.forEach((item: any) => {
list.push({ list.push({
name: item.hgt, name: item.hgt,
@ -164,7 +183,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
}); });
this.mapList = list; this.mapList = list;
this.addressItems = [...res.enclosureDataAppTrack]; this.addressItems = [...res.enclosureDataAppTrack];
if(this.addressItems && this.addressItems.length > 0){ if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => { this.addressItems.forEach(item => {
item.vinOutTime = this.getLocalTime(item.gtm); item.vinOutTime = this.getLocalTime(item.gtm);
item.cityName = item.appAdress; item.cityName = item.appAdress;
@ -173,10 +192,10 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
} }
}); });
} }
trajectoryChange(event:any){ trajectoryChange(event: any) {
if(event ==='car'){ if (event === 'car') {
this.getTrajectory() this.getTrajectory();
}else if(event ==='driver'){ } else if (event === 'driver') {
this.getDriverTrajectory(); this.getDriverTrajectory();
} }
} }

View File

@ -13,7 +13,7 @@
<nz-card class="search-box" nzBordered> <nz-card class="search-box" nzBordered>
<div nz-row nzGutter="8"> <div nz-row nzGutter="8">
<div nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24"> <div nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
<sf #sf [schema]="searchSchema" [ui]="{ '*': { spanLabelFixed: 90, grid: { lg: 8, md: 12, sm: 12, xs: 24 } } }" <sf #sf [schema]="searchSchema" [ui]="{ '*': { spanLabelFixed: 120, grid: { lg: 8, md: 12, sm: 12, xs: 24 } } }"
[compact]="true" [button]="'none'"></sf> [compact]="true" [button]="'none'"></sf>
</div> </div>
<div nz-col [nzXl]="_$expand ? 24 : 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" [class.expend-options]="_$expand" <div nz-col [nzXl]="_$expand ? 24 : 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" [class.expend-options]="_$expand"

View File

@ -38,9 +38,9 @@ export class InvoicedListComponent implements OnInit {
if (this.sf) { if (this.sf) {
Object.assign(requestOptions.body, { Object.assign(requestOptions.body, {
...this.sf.value, ...this.sf.value,
createTime: { invoicedate: {
start: this.sf.value.createTime?.[0] || '', start: this.sf.value.invoicedate?.[0] || '',
end: this.sf.value.createTime?.[1] || '' end: this.sf.value.invoicedate?.[1] || ''
} }
}); });
} }
@ -135,7 +135,7 @@ export class InvoicedListComponent implements OnInit {
autocomplete: 'off' autocomplete: 'off'
} }
}, },
createTime: { invoicedate: {
title: '开票日期', title: '开票日期',
type: 'string', type: 'string',
ui: { ui: {
@ -145,13 +145,11 @@ export class InvoicedListComponent implements OnInit {
nzShowTime: true nzShowTime: true
} as SFDateWidgetSchema } as SFDateWidgetSchema
}, },
arto: { artoname: {
type: 'string', type: 'string',
title: '购买人', title: '购买人',
enum: [{ label: '全部', value: '全部' }],
ui: { ui: {
widget: 'select', placeholder: '请输入',
placeholder: '请选择',
visibleIf: { visibleIf: {
expand: (value: boolean) => value expand: (value: boolean) => value
} }
@ -167,7 +165,7 @@ export class InvoicedListComponent implements OnInit {
visibleIf: { visibleIf: {
expand: (value: boolean) => value expand: (value: boolean) => value
}, },
asyncData: () => this.service.getNetworkFreightForwarder() asyncData: () => this.service.getNetworkFreightForwarder({}, true)
}, },
default: '' default: ''
} }

View File

@ -17,6 +17,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
aMap: any; aMap: any;
pathSimplifierIns: any; pathSimplifierIns: any;
navigator: any; navigator: any;
infoWindow: any;
markerList: any;
@Input() @Input()
pathList: any = []; pathList: any = [];
@Input() @Input()
@ -31,40 +33,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
clcikPointEvent = new EventEmitter<any>(); clcikPointEvent = new EventEmitter<any>();
@Input() @Input()
pois: any = [ 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'
}
];
constructor(public service: BaseService) {} constructor(public service: BaseService) {}
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
@ -73,7 +42,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
this.setPathIndex(this.selectedIndex); this.setPathIndex(this.selectedIndex);
} }
if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) { if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) {
console.log(this.MapList); // console.log(this.MapList);
this.pathList = [ this.pathList = [
{ {
name: '路线1', name: '路线1',
@ -83,6 +52,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
this.setData(this.pathList); this.setData(this.pathList);
this.setPathIndex(this.selectedIndex); 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 { ngOnInit(): void {
this.mapInit(); this.mapInit();
@ -99,7 +73,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
version: CONFIG.version, version: CONFIG.version,
plugins: [ plugins: [
// 需要使用的的插件列表,如比例尺'AMap.Scale'等 // 需要使用的的插件列表,如比例尺'AMap.Scale'等
'AMap.PathSimplifier' 'AMap.PathSimplifier',
'AMap.InfoWindow'
], ],
AMapUI: { AMapUI: {
version: CONFIG.AMapUIVersion, version: CONFIG.AMapUIVersion,
@ -112,10 +87,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
}); });
this.aMap.on('complete', () => { this.aMap.on('complete', () => {
// 信息窗口
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -40)
});
// this.service.msgSrv.info('地图加载完成 !'); // this.service.msgSrv.info('地图加载完成 !');
this.pathInit(); this.pathInit();
// this.setPOIS(); this.setPOIS();
// this.loadPOIS();
}); });
}) })
.catch(e => { .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() { pathInit() {
this.pathSimplifierIns = new AMapUI.PathSimplifier({ this.pathSimplifierIns = new AMapUI.PathSimplifier({
zIndex: 100, zIndex: 100,
@ -222,8 +118,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
return lnglatList; return lnglatList;
}, },
getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) { getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
console.log(pathData, pointIndex);
if (pointIndex >= 0) { if (pointIndex >= 0) {
//point //point
return pathData.name + '' + pathData.points[pointIndex].name; return pathData.name + '' + pathData.points[pointIndex].name;
@ -248,126 +142,53 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
} }
setPOIS() { setPOIS() {
AMapUI.loadUI(['misc/MarkerList'], (MarkerList: any) => { AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
var markerList = new MarkerList({ this.markerList = new MarkerList({
//关联的map对象 //关联的map对象
map: this.aMap, 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] //返回数据项的位置信息需要是AMap.LngLat实例或者是经纬度数组比如[116.789806, 39.904989]
getPosition: (dataItem: any) => { getPosition: (dataItem: any) => {
console.log(dataItem);
return dataItem.position; return dataItem.position;
}, },
//返回数据项对应的Marker //返回数据项对应的Marker
getMarker: (dataItem: any, context: any, recycledMarker: any) => { 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 //存在可回收利用的marker
if (recycledMarker) { if (recycledMarker) {
//直接更新内容返回 //直接更新内容返回
recycledMarker.setLabel(label); recycledMarker.setIconLabel(context.id);
recycledMarker.setIconStyle(dataItem.iconStyle);
return recycledMarker; return recycledMarker;
} }
//返回一个新的Marker //返回一个新的Marker
return new AMap.Marker({ return new SimpleMarker({
label: label //普通文本
iconLabel: {
//普通文本
innerHTML: dataItem.markerLabel,
//设置样式
style: {
color: '#fff',
fontSize: '110%',
marginTop: '2px'
}
},
iconStyle: dataItem.color,
map: this.aMap,
position: dataItem.position
}); });
}, },
//返回数据项对应的infoWindow //返回数据项对应的infoWindow
getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => { getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
var tpl = '<p><%- dataItem.id %><%- dataItem.infoWinContent %><p>'; this.selectedPOI(dataItem);
return null;
//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 = '<p><%- dataItem.id %><%- dataItem.listDesc %><p>';
var content = MarkerList.utils.template(tpl, {
dataItem: dataItem,
dataIndex: context.index
});
if (recycledListElement) {
//存在可回收利用的listElement, 直接更新内容返回
recycledListElement.innerHTML = content;
return recycledListElement;
}
//返回一段htmlMarkerList将利用此html构建一个新的dom节点
return '<li>' + content + '</li>';
} }
}); });
//监听选中改变 if (this.pois?.length > 0) {
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); this.markerList.render(this.pois);
}
}); });
} }
@ -377,7 +198,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
setPathIndex(index: number) { setPathIndex(index: number) {
this.pathSimplifierIns.setSelectedPathIndex(index); this.pathSimplifierIns.setSelectedPathIndex(index);
// this.startNav(); this.startNav();
} }
startNav() { startNav() {
@ -391,4 +212,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
this.navigator?.start(); this.navigator?.start();
} }
} }
selectedPOI(location: any) {
this.infoWindow.setContent(`地址: <pre>${location.title}</pre>`);
this.infoWindow.open(this.aMap, location.position);
this.infoWindow.setPosition(location.position);
this.aMap.setCenter(location.position);
}
} }

View File

@ -35,7 +35,10 @@ export class AmapService {
return { keyword: item.detailedAddress, city: item.city }; return { keyword: item.detailedAddress, city: item.city };
}); });
driving.search(points, (status: any, result: any) => { 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); this.sub.next(repData);
}); });
}); });