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

src/app/routes/supply-management/components/gaode-map/gaode-map.component.html

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

src/app/routes/supply-management/components/gaode-map/gaode-map.component.less

@@ -0,0 +1,8 @@
+:host::ng-deep {
+    p.my-desc {
+        max-width      : 300px;
+        margin     : 5px 0;
+        line-height: 150%;
+        padding    : 12px;
+    }
+}

src/app/routes/supply-management/components/gaode-map/gaode-map.component.ts

@@ -1,15 +1,19 @@
-import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
 import { _HttpClient } from '@delon/theme';
 import { load } from '@amap/amap-jsapi-loader';
 import { BaseService } from 'src/app/shared/services';
 import { throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
+declare var AMap: any;
 declare var AMapUI: any;
 @Component({
   selector: 'app-gaode-map',
+  styleUrls: ['./gaode-map.component.less'],
   templateUrl: './gaode-map.component.html'
 })
 export class GaodeMapComponent implements OnInit, OnDestroy {
+  @ViewChild('modal')
+  modal: any;
   addressInput: any;
 
   aMap: any;
@@ -35,7 +39,10 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
       plugins: [
         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         'AMap.SimpleMarker',
+        'AMap.PoiPicker',
         'AMap.Scale',
+        'AMap.Marker',
+        'AMap.InfoWindow',
         'AMap.ToolBar',
         'AMap.MapType',
         'AMap.Driving',
@@ -44,7 +51,7 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
       AMapUI: {
         // 是否加载 AMapUI，缺省不加载
         version: '1.1', // AMapUI 缺省 1.1
-        plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
+        plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
       },
       Loca: {
         // 是否加载 Loca， 缺省不加载
@@ -54,25 +61,121 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
       .then(AMap => {
         console.log(AMap);
 
-        this.aMap = new AMap.Map('container');
+        var poiPicker = new AMapUI.PoiPicker({
+          //city:'北京',
+          input: 'pickerInput'
+        });
+
+        console.log(poiPicker);
+
+        this.aMap = new AMap.Map('container', {
+          resizeEnable: true,
+          zoom: 16
+        });
         console.log(this.aMap);
 
         this.aMap.on('complete', () => {
           this.service.msgSrv.info('地图加载完成 !');
-          new AMapUI.SimpleMarker({
-            //前景文字
-            iconLabel: 'A',
-            //图标主题
-            iconTheme: 'default',
-            //背景图标样式
-            iconStyle: 'red',
-            map: this.aMap,
-            position: this.aMap.getCenter()
-          });
+          this.poiPickerReady(poiPicker);
+          // new AMapUI.SimpleMarker({
+          //   //前景文字
+          //   iconLabel: 'A',
+          //   //图标主题
+          //   iconTheme: 'default',
+          //   //背景图标样式
+          //   iconStyle: 'red',
+          //   map: this.aMap,
+          //   position: this.aMap.getCenter()
+          // });
         });
       })
       .catch(e => {
         throwError(e);
       });
   }
+
+  poiPickerReady(poiPicker: any) {
+    (window as any).poiPicker = poiPicker;
+    const map = this.aMap;
+    const _this = this;
+    var marker = new AMapUI.SimpleMarker();
+    console.log(marker);
+
+    var infoWindow = new AMap.InfoWindow({
+      offset: new AMap.Pixel(0, -20)
+    });
+    console.log(infoWindow);
+
+    //选取了某个POI
+    poiPicker.on('poiPicked', function (poiResult: any) {
+      var source = poiResult.source,
+        poi = poiResult.item,
+        info = {
+          source: source,
+          id: poi.id,
+          name: poi.name,
+          location: poi.location.toString(),
+          address: poi.address
+        };
+      console.log(poi);
+
+      marker.setMap(map);
+      infoWindow.setMap(map);
+
+      marker.setPosition(poi.location);
+      infoWindow.setPosition(poi.location);
+
+      infoWindow.setContent('地址: <pre>' + poi.name + '</pre>');
+      infoWindow.open(map, marker.getPosition());
+
+      map.setCenter(marker.getPosition());
+    });
+
+    poiPicker.onCityReady(function () {
+      poiPicker.suggest('美食');
+    });
+  }
+
+  createInfoWindow(title: any, content: any) {
+    var info = document.createElement('div');
+    info.className = 'custom-info input-card content-window-card';
+
+    //可以通过下面的方式修改自定义窗体的宽高
+    //info.style.width = "400px";
+    // 定义顶部标题
+    var top = document.createElement('div');
+    var titleD = document.createElement('div');
+    var closeX = document.createElement('img');
+    top.className = 'info-top';
+    titleD.innerHTML = title;
+    closeX.src = 'https://webapi.amap.com/images/close2.gif';
+    closeX.onclick = this.closeInfoWindow;
+
+    top.appendChild(titleD);
+    top.appendChild(closeX);
+    info.appendChild(top);
+
+    // 定义中部内容
+    var middle = document.createElement('div');
+    middle.className = 'info-middle';
+    middle.style.backgroundColor = 'white';
+    middle.innerHTML = content;
+    info.appendChild(middle);
+
+    // 定义底部内容
+    var bottom = document.createElement('div');
+    bottom.className = 'info-bottom';
+    bottom.style.position = 'relative';
+    bottom.style.top = '0px';
+    bottom.style.margin = '0 auto';
+    var sharp = document.createElement('img');
+    sharp.src = 'https://webapi.amap.com/images/sharp.png';
+    bottom.appendChild(sharp);
+    info.appendChild(bottom);
+    return info;
+  }
+
+  closeInfoWindow() {
+    this.aMap.clearInfoWindow();
+  }
 }

src/app/routes/supply-management/components/onecar-publish/onecar-publish.component.ts

@@ -11,6 +11,7 @@ import {
   SFUISchema
 } from '@delon/form';
 import { _HttpClient } from '@delon/theme';
+import { AmapPoiPickerComponent } from '@shared';
 import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 
 import { PublishGoodsChooseFamifiarComponent } from '../choose-famifiar/choose-famifiar.component';
@@ -489,8 +490,8 @@ export class  SupplyManagementOnecarPublishComponent implements OnInit {
   openMap() {
     this.modalService.create({
       nzTitle: '',
-      nzContent: GaodeMapComponent,
-      nzWidth: 1200
+      nzContent: AmapPoiPickerComponent,
+      nzWidth: 848
     });
   }
 }

src/app/routes/ticket-management/components/etc-blacklist/etc-blacklist.component.html

@@ -1 +1 @@
-<p>etc-blacklist works!</p>
+<amap-path-simplifier></amap-path-simplifier>

src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html

@@ -0,0 +1 @@
+<div class="map-container" id="container" tabindex="0" [style]="{width: mapWidth, height: mapHeight}"></div>

src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts

@@ -0,0 +1,177 @@
+import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter } from '@angular/core';
+import { BaseService } from 'src/app/shared/services';
+import { throwError } from 'rxjs';
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { amapConf } from '@conf/amap.config';
+declare var AMap: any;
+declare var AMapUI: any;
+declare var Loca: any;
+
+const CONFIG = amapConf;
+@Component({
+  selector: 'amap-path-simplifier',
+  templateUrl: './amap-path-simplifier.component.html',
+  styleUrls: ['./amap-path-simplifier.component.less']
+})
+export class AmapPathSimplifierComponent implements OnInit, OnChanges {
+  aMap: any;
+  pathSimplifierIns: any;
+
+  @Input()
+  pathList = [
+    {
+      name: '路线1',
+      points: [
+        {
+          name: '点a',
+          lnglat: [116.405289, 39.904987]
+        },
+        {
+          name: '点b',
+          lnglat: [113.964458, 40.54664]
+        },
+        {
+          name: '点c',
+          lnglat: [111.47836, 41.135964]
+        },
+        {
+          name: '点d',
+          lnglat: [108.949297, 41.670904]
+        },
+        {
+          name: '点e',
+          lnglat: [106.380111, 42.149509]
+        },
+        {
+          name: '点f',
+          lnglat: [103.774185, 42.56996]
+        },
+        {
+          name: '点g',
+          lnglat: [101.135432, 42.930601]
+        },
+        {
+          name: '点h',
+          lnglat: [98.46826, 43.229964]
+        },
+        {
+          name: '点i',
+          lnglat: [95.777529, 43.466798]
+        },
+        {
+          name: '点j',
+          lnglat: [93.068486, 43.64009]
+        },
+        {
+          name: '点k',
+          lnglat: [90.34669, 43.749086]
+        },
+        {
+          name: '点l',
+          lnglat: [87.61792, 43.793308]
+        }
+      ]
+    }
+  ];
+  @Input()
+  selectedIndex = 0;
+  @Input()
+  mapWidth = '800px';
+
+  @Input()
+  mapHeight = '500px';
+
+  @Output()
+  clcikPointEvent = new EventEmitter<any>();
+
+  constructor() {}
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.pathList.currentValue && this.pathSimplifierIns) {
+      this.setData(changes.pathList.currentValue);
+    }
+  }
+  ngOnInit(): void {
+    this.mapInit();
+  }
+
+  ngOnDestroy(): void {
+    if (this.aMap) {
+      this.aMap.destroy();
+    }
+  }
+
+  mapInit() {
+    AMapLoader.load({
+      key: CONFIG.key,
+      version: CONFIG.version,
+      plugins: [
+        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        'AMap.PathSimplifier'
+      ],
+      AMapUI: {
+        version: CONFIG.AMapUIVersion,
+        plugins: ['misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
+      },
+    })
+      .then(AMap => {
+        this.aMap = new AMap.Map('container', {
+          zoom: 4
+        });
+
+        this.aMap.on('complete', () => {
+          // this.service.msgSrv.info('地图加载完成 !');
+          this.pathInit();
+        });
+      })
+      .catch(e => {
+        throwError(e);
+      });
+  }
+
+  pathInit() {
+    this.pathSimplifierIns = new AMapUI.PathSimplifier({
+      zIndex: 100,
+      //autoSetFitView:false,
+      map: this.aMap, //所属的地图实例
+
+      getPath: function (pathData: any, pathIndex: any) {
+        var points = pathData.points,
+          lnglatList = [];
+
+        for (var i = 0, len = points.length; i < len; i++) {
+          lnglatList.push(points[i].lnglat);
+        }
+
+        return lnglatList;
+      },
+      getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
+        if (pointIndex >= 0) {
+          //point
+          return pathData.name + '，' + pathData.points[pointIndex].name;
+        }
+        return pathData.name + '，点数量' + pathData.points.length;
+      },
+      renderOptions: {
+        renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
+      }
+    });
+
+    (window as any).pathSimplifierIns = this.pathSimplifierIns;
+    this.setData(this.pathList);
+
+    this.setPathIndex(this.selectedIndex);
+
+    this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
+      this.clcikPointEvent.emit({ e, info });
+      console.log('Click: ' + info.pathData.points[info.pointIndex].name);
+    });
+  }
+
+  setData(pathList: Array<any>) {
+    this.pathSimplifierIns.setData(pathList);
+  }
+
+  setPathIndex(index: number) {
+    this.pathSimplifierIns.setSelectedPathIndex(index);
+  }
+}

src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.html

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

src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.less

@@ -0,0 +1,8 @@
+:host::ng-deep {
+    p.my-desc {
+        max-width  : 300px;
+        margin     : 5px 0;
+        line-height: 150%;
+        padding    : 12px;
+    }
+}

src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts

@@ -0,0 +1,124 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { throwError } from 'rxjs';
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { amapConf } from '@conf/amap.config';
+declare var AMap: any;
+declare var AMapUI: any;
+declare var Loca: any;
+
+const CONFIG = amapConf;
+
+@Component({
+  selector: 'amap-poi-picker',
+  templateUrl: './amap-poi-picker.component.html',
+  styleUrls: ['./amap-poi-picker.component.less']
+})
+export class AmapPoiPickerComponent implements OnInit {
+  @ViewChild('modal')
+  modal: any;
+  addressInput: any;
+
+  aMap: any;
+
+  poi: any;
+
+  constructor() {}
+  ngOnInit(): void {
+    this.mapInit();
+    // this.PoiPicker();
+  }
+
+  ngOnDestroy(): void {
+    if (this.aMap) {
+      this.aMap.destroy();
+    }
+  }
+
+  mapInit() {
+    AMapLoader.load({
+      // 首次调用 load
+      key: CONFIG.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: CONFIG.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: [
+        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        'AMap.SimpleMarker',
+        'AMap.PoiPicker',
+        'AMap.Scale',
+        'AMap.InfoWindow',
+        'AMap.Geolocation'
+      ],
+      AMapUI: {
+        // 是否加载 AMapUI，缺省不加载
+        version: CONFIG.AMapUIVersion, // AMapUI 缺省 1.1
+        plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
+      },
+      Loca: {
+        // 是否加载 Loca， 缺省不加载
+        version: CONFIG.LocaVersion // Loca 版本，缺省 1.3.2
+      }
+    })
+      .then(AMap => {
+        // 搜索picker
+        var poiPicker = new AMapUI.PoiPicker({
+          input: 'pickerInput'
+        });
+
+        // 地图
+        this.aMap = new AMap.Map('container', {
+          resizeEnable: true,
+          zoom: 16
+        });
+
+        // 地图创建成功
+        this.aMap.on('complete', () => {
+          this.poiPickerReady(poiPicker);
+        });
+      })
+      .catch(e => {
+        throwError(e);
+      });
+  }
+
+  poiPickerReady(poiPicker: any) {
+    (window as any).poiPicker = poiPicker;
+    const map = this.aMap;
+    // 定位标志
+    const marker = new AMapUI.SimpleMarker({
+      //图标主题
+      iconTheme: 'default',
+      map: map,
+      position: map.getCenter()
+    });
+
+    // 信息窗口
+    const infoWindow = new AMap.InfoWindow({
+      offset: new AMap.Pixel(0, -20)
+    });
+
+    //选取了某个POI
+    poiPicker.on('poiPicked', (poiResult: any) => {
+      const source = poiResult.source,
+        poi = poiResult.item;
+      console.log(poi);
+      this.poi = poi;
+      marker.setMap(map);
+      infoWindow.setMap(map);
+
+      marker.setPosition(poi.location);
+      infoWindow.setPosition(poi.location);
+
+      infoWindow.setContent('地址: <pre>' + poi.name + '</pre>');
+      infoWindow.open(map, marker.getPosition());
+
+      map.setCenter(marker.getPosition());
+    });
+
+    poiPicker.onCityReady(function () {
+      poiPicker.suggest('美食');
+    });
+  }
+
+  closeInfoWindow() {
+    this.aMap.clearInfoWindow();
+  }
+}

src/app/shared/components/amap/amap.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AmapPoiPickerComponent } from './amap-poi-picker/amap-poi-picker.component';
+import { FormsModule } from '@angular/forms';
+import { AmapPathSimplifierComponent } from './amap-path-simplifier/amap-path-simplifier.component';
+
+const COMPONENTS = [AmapPoiPickerComponent, AmapPathSimplifierComponent];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule, FormsModule],
+  exports: COMPONENTS
+})
+export class AmapModule {}

src/app/shared/components/amap/amap.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AmapService {
+
+  constructor() { }
+}

src/app/shared/components/amap/index.ts

@@ -0,0 +1,4 @@
+export * from './amap.module';
+export * from './amap.service';
+export * from './amap-poi-picker/amap-poi-picker.component';
+export * from './amap-path-simplifier/amap-path-simplifier.component';

src/app/shared/index.ts

@@ -16,6 +16,7 @@ export * from './components/status-label/index';
 export * from './components/scrollbar/index';
 export * from './components/address/index';
 export * from './components/captcha/index';
+export * from './components/amap/index';
 
 // Utils
 export * from './utils';

src/app/shared/shared.module.ts

@@ -27,6 +27,7 @@ import { ScrollbarModule } from './components/scrollbar';
 import { StatusLabelModule } from './components/status-label';
 import { SharedThirdModule } from './shared-third.module';
 import { LogisticsTimeLineComponent } from './components/logistics-time-line/logistics-time-line.component';
+import { AmapModule } from './components/amap/amap.module';
 
 const MODULES = [
   AddressModule,
@@ -38,6 +39,7 @@ const MODULES = [
   ScrollbarModule,
   StatusLabelModule,
   SharedThirdModule,
+  AmapModule,
   ...PRO_SHARED_MODULES
 ];
 // #endregion

src/conf/amap.config.ts

@@ -0,0 +1,21 @@
+/**
+ * 高德地图资源配置
+ */
+export const amapConf = {
+  /**
+   * 文件上传路径
+   */
+  key: '63f9573ca55fef2b92d4ffe0c85dea8f',
+  /**
+   * JSAPI版本
+   */
+  version: '2.0',
+  /**
+   * AMapUI版本
+   */
+  AMapUIVersion: '1.1',
+  /**
+   * Loca版本
+   */
+  LocaVersion: '2.0'
+};

src/index.html

@@ -57,10 +57,10 @@
 </body>
 
 </html>
-<!-- <script type="text/javascript">
+<script type="text/javascript">
   window._AMapSecurityConfig = {
     securityJsCode: 'dde4610c3bd04617b99fb55ba5adbe9d',
   }
 </script>
-<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script>
+<!-- <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script>
 <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> -->