Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

订单

Browse Source
This commit is contained in:
wangshiming
2021-12-06 20:37:41 +08:00
parent 19d73293b9
commit df352618aa
5 changed files with 61 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/app/routes/order-management/components/bulk-detail/bulk-detail.component.ts
View File

@ -1,7 +1,7 @@
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-12-03 15:31:52 * @Date: 2021-12-03 15:31:52
* @LastEditTime: 2021-12-06 20:21:29 * @LastEditTime: 2021-12-06 20:34:08
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts
@ -13,10 +13,6 @@ import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal'; import { NzModalService } from 'ng-zorro-antd/modal';
import { SupplyManagementService } from '../../services/order-management.service'; import { SupplyManagementService } from '../../services/order-management.service';
import { OrderManagementGaodeMapComponent } from '../gaode-map/gaode-map.component';
import * as $ from 'jquery';
declare var AMapUI: any;
declare var AMap: any;
@Component({ @Component({
selector: 'app-supply-management-bulk-detail', selector: 'app-supply-management-bulk-detail',
templateUrl: './bulk-detail.component.html', templateUrl: './bulk-detail.component.html',
@ -52,7 +48,7 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
hand() { hand() {
this.modalService.create({ this.modalService.create({
nzTitle: '', nzTitle: '',
nzContent: OrderManagementGaodeMapComponent, // nzContent: OrderManagementGaodeMapComponent,
nzWidth: 1200 nzWidth: 1200
}); });
} }
@ -61,56 +57,4 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
window.history.go(-1); window.history.go(-1);
} }
// poi选点
PoiPicker() {
AMapUI.setDomLibrary($);
let map = new AMap.Map('container', {
zoom: 10
});
AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker: any) {
let poiPicker = new PoiPicker({
// city:'北京',
input: 'pickerInput'
});
//初始化poiPicker
(window as any).poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
console.log('0000')
console.log(PoiPicker)
//选取了某个POI
poiPicker.on('poiPicked', function (poiResult: any) {
console.log(1111);
console.log(poiResult)
// console.log(this.addressInput)
// this.addressInput = poiResult.item?.name
var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
marker.setMap(map);
infoWindow.setMap(map);
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent(`POI信息: <pre>${JSON.stringify(info, null, 2)}</pre>`);
infoWindow.open(map, marker.getPosition());
map.setCenter(marker.getPosition());
});
poiPicker.onCityReady(() => {
// poiPicker.suggest('美食');
});
});
}
} }

6
src/app/routes/order-management/components/gaode-map/gaode-map.component.html
View File

@ -1,6 +1,6 @@
<div nz-row style="margin-bottom: 24px"> <div nz-row style="margin-bottom: 24px">
<!-- <div nz-col nzSpan="8"> <div nz-col nzSpan="8">
<input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" /> <input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
</div> --> </div>
</div> </div>
<div id="container" style="width: 800px; height: 500px"></div> <div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>

113
src/app/routes/order-management/components/gaode-map/gaode-map.component.ts
View File

@ -1,70 +1,65 @@
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import { _HttpClient } from '@delon/theme'; import { _HttpClient } from '@delon/theme';
import * as $ from 'jquery'; import { load } from '@amap/amap-jsapi-loader';
declare var AMapUI: any; import { BaseService } from 'src/app/shared/services';
declare var AMap: any; import { throwError } from 'rxjs';
import AMapLoader from '@amap/amap-jsapi-loader';
@Component({ @Component({
selector: 'app-ordermanage-map', selector: 'app-gaode-map',
templateUrl: './gaode-map.component.html' templateUrl: './gaode-map.component.html'
}) })
export class OrderManagementGaodeMapComponent implements OnInit { export class GaodeMapComponent implements OnInit, OnDestroy {
addressInput: any; addressInput: any;
constructor() {}
aMap: any;
constructor(private service: BaseService) {}
ngOnInit(): void { ngOnInit(): void {
this.PoiPicker(); this.mapInit();
// this.PoiPicker();
} }
// poi选点 ngOnDestroy(): void {
PoiPicker() { if (this.aMap) {
AMapUI.setDomLibrary($); this.aMap.destroy();
let map = new AMap.Map('container', { }
zoom: 10 }
});
AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker: any) { mapInit() {
let poiPicker = new PoiPicker({ AMapLoader.load({
// city:'北京', // 首次调用 load
input: 'pickerInput' key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
'AMap.Scale',
'AMap.ToolBar',
'AMap.MapType',
'AMap.Driving',
'AMap.Geolocation'
],
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: '1.1', // AMapUI 缺省 1.1
plugins: [] // 需要加载的 AMapUI ui插件
},
Loca: {
// 是否加载 Loca， 缺省不加载
version: '2.0' // Loca 版本，缺省 1.3.2
}
})
.then(AMap => {
console.log(AMap);
this.aMap = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
zoom: 16
});
this.aMap.on('complete', () => {
this.service.msgSrv.info('地图加载完成 !');
});
})
.catch(e => {
throwError(e);
}); });
//初始化poiPicker
(window as any).poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
console.log('0000')
console.log(PoiPicker)
//选取了某个POI
poiPicker.on('poiPicked', function (poiResult: any) {
console.log(1111);
console.log(poiResult)
// console.log(this.addressInput)
// this.addressInput = poiResult.item?.name
var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
marker.setMap(map);
infoWindow.setMap(map);
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent(`POI信息: <pre>${JSON.stringify(info, null, 2)}</pre>`);
infoWindow.open(map, marker.getPosition());
map.setCenter(marker.getPosition());
});
poiPicker.onCityReady(() => {
// poiPicker.suggest('美食');
});
});
} }
} }

60
src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts
View File

@ -1,7 +1,7 @@
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-12-03 15:31:52 * @Date: 2021-12-03 15:31:52
* @LastEditTime: 2021-12-06 19:36:24 * @LastEditTime: 2021-12-06 20:34:43
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts
@ -13,10 +13,6 @@ import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal'; import { NzModalService } from 'ng-zorro-antd/modal';
import { SupplyManagementService } from '../../services/order-management.service'; import { SupplyManagementService } from '../../services/order-management.service';
import { OrderManagementGaodeMapComponent } from '../gaode-map/gaode-map.component';
import * as $ from 'jquery';
declare var AMapUI: any;
declare var AMap: any;
@Component({ @Component({
selector: 'app-supply-management-vehicle-detail', selector: 'app-supply-management-vehicle-detail',
templateUrl: './vehicle-detail.component.html', templateUrl: './vehicle-detail.component.html',
@ -52,7 +48,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
hand() { hand() {
this.modalService.create({ this.modalService.create({
nzTitle: '', nzTitle: '',
nzContent: OrderManagementGaodeMapComponent, // nzContent: OrderManagementGaodeMapComponent,
nzWidth: 1200 nzWidth: 1200
}); });
} }
@ -61,56 +57,4 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
window.history.go(-1); window.history.go(-1);
} }
// poi选点
PoiPicker() {
AMapUI.setDomLibrary($);
let map = new AMap.Map('container', {
zoom: 10
});
AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker: any) {
let poiPicker = new PoiPicker({
// city:'北京',
input: 'pickerInput'
});
//初始化poiPicker
(window as any).poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
console.log('0000')
console.log(PoiPicker)
//选取了某个POI
poiPicker.on('poiPicked', function (poiResult: any) {
console.log(1111);
console.log(poiResult)
// console.log(this.addressInput)
// this.addressInput = poiResult.item?.name
var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
marker.setMap(map);
infoWindow.setMap(map);
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent(`POI信息: <pre>${JSON.stringify(info, null, 2)}</pre>`);
infoWindow.open(map, marker.getPosition());
map.setCenter(marker.getPosition());
});
poiPicker.onCityReady(() => {
// poiPicker.suggest('美食');
});
});
}
} }

2
src/app/routes/order-management/order-management.module.ts
View File

@ -2,7 +2,6 @@ import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared'; import { SharedModule } from '@shared';
import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component'; import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
import { OrderManagementBulkComponent } from './components/bulk/bulk.component'; import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
import { OrderManagementGaodeMapComponent } from './components/gaode-map/gaode-map.component';
import { OrderManagementVehicleDetailComponent } from './components/vehicle-detail/vehicle-detail.component'; import { OrderManagementVehicleDetailComponent } from './components/vehicle-detail/vehicle-detail.component';
import { OrderManagementVehicleComponent } from './components/vehicle/vehicle.component'; import { OrderManagementVehicleComponent } from './components/vehicle/vehicle.component';
@ -11,7 +10,6 @@ import { OrderManagementRoutingModule } from './order-management-routing.module'
const COMPONENTS: Type<void>[] = [ const COMPONENTS: Type<void>[] = [
OrderManagementVehicleComponent, OrderManagementVehicleComponent,
OrderManagementVehicleDetailComponent, OrderManagementVehicleDetailComponent,
OrderManagementGaodeMapComponent,
OrderManagementBulkComponent, OrderManagementBulkComponent,
OrderManagementBulkeDetailComponent OrderManagementBulkeDetailComponent
]; ];