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

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

@@ -8,4 +8,8 @@
  * @FilePath     : \\tms-obc-web\\src\\app\\shared\\components\\amap\\amap-path-simplifier\\amap-path-simplifier.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
-<div class="map-container" id="container" tabindex="0" [style]="{width: mapWidth, height: mapHeight}"></div>
+<div class="map-container" id="container" tabindex="0" [style]="{width: mapWidth, height: mapHeight}"></div>
+<div style="display: flex;align-items: center;">
+    <div>巡航倍数 : <input type="number" [ngModel]="navSpeed" min="1" (ngModelChange)="changeMultiple($event)"
+            style="border-color: #f0f0f0;outline: 0;width: 60px;text-align: center;" class="mt-sm ml-sm"/></div>
+</div>

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

@@ -1,8 +1,10 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter, OnDestroy } from '@angular/core';
 import { amapConf } from '@conf/amap.config';
+import { InputNumber } from '@delon/util';
 import { throwError } from 'rxjs';
 import { BaseService } from 'src/app/shared/services';
+import { AmapService, InfoItem, MapList, PathList, POI } from '../amap.service';
 declare var AMap: any;
 declare var AMapUI: any;
 declare var Loca: any;
@@ -21,41 +23,52 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   infoWindow: any;
   markerList: any;
   SimpleMarker: any;
+  // 简单路径信息
   @Input()
-  pathList: any = [];
+  mapList: MapList[] = [];
+  // 完整路线图信息
+  @Input()
+  pathList: PathList[] = [];
+  // 当前选中路线图下标
   @Input()
   selectedIndex = 0;
+  // 巡航倍数
+  @InputNumber()
+  navSpeed = 1;
+  // 标点数组
+  @Input()
+  pois: POI[] = [];
+  private _pois: any = [];
+
   @Input()
   mapWidth = '800px';
-  @Input() MapList: any;
   @Input()
   mapHeight = '500px';
 
   @Output()
   readonly clcikPointEvent = new EventEmitter<any>();
 
-  @Input()
-  pois: any = [];
-  private _pois: any = [];
-
-  constructor(public service: BaseService) {}
+  constructor(public service: BaseService, private amapService: AmapService) {}
   ngOnChanges(changes: SimpleChanges): void {
+    // 路线图变更: 设置路线图, 指定路线图
     if (changes?.pathList?.currentValue && this?.pathSimplifierIns) {
       this.setData(changes.pathList?.currentValue);
       this.setPathIndex(this.selectedIndex);
     }
-    if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) {
-      // console.log(this.MapList);
+    // 路径信息变更: 更新路线图, 设置路线图, 指定路线图, 获取终点地址信息并标点
+    if (changes?.mapList?.currentValue && this?.pathSimplifierIns && changes.mapList?.currentValue.length > 0) {
+      // console.log(this.mapList);
       this.pathList = [
         {
           name: '路线1',
-          points: changes.MapList?.currentValue
+          points: changes.mapList?.currentValue
         }
       ];
       this.setData(this.pathList);
       this.setPathIndex(this.selectedIndex);
-      this.getPoiByPositon(this.MapList[this.MapList?.length - 1]?.lnglat);
+      this.getPoiByPositon(this.mapList[this.mapList?.length - 1]?.lnglat);
     }
+    // 标点列表变更: 更新标点数据, 绘画标点
     if (changes?.pois?.currentValue) {
       // console.log(this.pois);
       this._pois = changes?.pois?.currentValue;
@@ -68,11 +81,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
     this.mapInit();
   }
   ngOnDestroy(): void {
+    // 销毁地图数据
     if (this.aMap) {
       this.aMap.destroy();
     }
   }
 
+  /** 地图初始化 */
   mapInit() {
     AMapLoader.load({
       key: CONFIG.key,
@@ -94,14 +109,15 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
         });
 
         this.aMap.on('complete', () => {
+          // this.service.msgSrv.info('地图加载完成 !');
           // 信息窗口
           this.infoWindow = new AMap.InfoWindow({
             offset: new AMap.Pixel(0, -40)
           });
+          // 初始化定位工具
           this.geocoder = new AMap.Geocoder({
-            radius: 1000 //范围，默认：500
+            radius: 500 //范围，默认：500
           });
-          // this.service.msgSrv.info('地图加载完成 !');
           this.pathInit();
           this.setPOIS();
         });
@@ -111,34 +127,20 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
       });
   }
 
+  /** 初始化路径工具 */
   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 '';
-      },
+      map: this.aMap,
+      // 重组路径数据
+      getPath: (pathData: PathList, pathIndex: number) => pathData.points.map(points => points.lnglat),
+      // 鼠标悬浮事件
+      getHoverTitle: (pathData: PathList, pathIndex: number, pointIndex: number) => '',
       renderOptions: {
-        renderAllPointsIfNumberBelow: 10 //绘制路线节点，如不需要可设置为-1
+        renderAllPointsIfNumberBelow: 20 //绘制路线节点，如不需要可设置为-1
       }
     });
-    (window as any).pathSimplifierIns = this.pathSimplifierIns;
     this.setData(this.pathList);
 
     if (this.pathList.length > 0) {
@@ -147,26 +149,40 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
 
     this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
       this.clcikPointEvent.emit({ e, info });
-      console.log(`Click: ${info.pathData.points[info.pointIndex].name}`);
+      // 弹出信息窗口
+      if (info) {
+        this.geocoder.getAddress(info.pathData.points[info.pointIndex].lnglat, (status: any, result: any) => {
+          if (status === 'complete' && result.info === 'OK') {
+            // result中对应详细地理坐标信息
+            this.selectedPOI({
+              position: info.pathData.points[info.pointIndex].lnglat,
+              content: `
+              <label style="font-weight: bold;">${result.regeocode.formattedAddress}<label/><br/>
+              <label style="font-weight: 400;">车速: ${info.pathData.points[info.pointIndex].name}<label/><br/>
+              <label style="font-weight: 400;">时间: ${this.amapService.formatTime(info.pathData.points[info.pointIndex].time)}<label/>
+              `
+            });
+          }
+        });
+      }
     });
   }
 
+  /** 初始化标点工具 */
   setPOIS() {
     AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
       this.markerList = new MarkerList({
         //关联的map对象
         map: this.aMap,
         //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
-        getPosition: (dataItem: any) => {
-          return dataItem.position;
-        },
+        getPosition: (dataItem: POI) => dataItem.position,
         //返回数据项对应的Marker
-        getMarker: (dataItem: any, context: any, recycledMarker: any) => {
+        getMarker: (dataItem: POI, context: any, recycledMarker: any) => {
           //存在可回收利用的marker
           if (recycledMarker) {
             //直接更新内容返回
             recycledMarker.setIconLabel(context.id);
-            recycledMarker.setIconStyle(dataItem.iconStyle);
+            recycledMarker.setIconStyle(dataItem.color);
             return recycledMarker;
           }
           this.SimpleMarker = SimpleMarker;
@@ -189,7 +205,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
           });
         },
         //返回数据项对应的infoWindow
-        getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
+        getInfoWindow: (dataItem: POI, context: any, recycledInfoWindow: any) => {
           this.selectedPOI(dataItem);
           return null;
         }
@@ -202,28 +218,57 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
     });
   }
 
-  setData(pathList: any[]) {
+  /**
+   * 设置路线图数据
+   * @param pathList
+   */
+  setData(pathList: PathList[]) {
     this.pathSimplifierIns.setData(pathList);
   }
 
+  /**
+   * 指定路线图
+   * @param index
+   */
   setPathIndex(index: number) {
     this.pathSimplifierIns.setSelectedPathIndex(index);
     this.startNav();
   }
 
+  /**
+   * 开启巡航
+   */
   startNav() {
-    if (this.navigator) {
-      this.navigator.start();
+    this.navigator = this.pathSimplifierIns?.createPathNavigator(this.selectedIndex, {
+      loop: true, //循环播放
+      speed: 500000 * this.navSpeed //巡航速度，单位千米/小时
+    });
+    this.navigator?.start();
+  }
+
+  changeMultiple(multiple: number) {
+    if (multiple <= 0) {
+      this.navSpeed = 1;
+      return;
     } else {
-      this.navigator = this.pathSimplifierIns?.createPathNavigator(0, {
-        loop: true, //循环播放
-        speed: 1000000 //巡航速度，单位千米/小时
-      });
-      this.navigator?.start();
+      this.navSpeed = multiple;
+      this.resetNav();
     }
   }
 
-  /** 根据经纬度获取地址信息 */
+  /** 重置巡航 */
+  resetNav() {
+    if (this.navigator) {
+      this.navigator.destroy();
+      setTimeout(() => {
+        this.startNav();
+      }, 200);
+    } else {
+      this.startNav();
+    }
+  }
+
+  /** 根据标点经纬度获取地址信息 */
   getPoiByPositon(position: string[]) {
     this.geocoder.getAddress(position, (status: any, result: any) => {
       if (status === 'complete' && result.info === 'OK') {
@@ -232,7 +277,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
         if (this.markerList) {
           this.markerList.render(this._pois);
         }
-        // this.setPOI({ markerLabel: '终', color: 'red', position: position });
       }
     });
   }
@@ -240,45 +284,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   /**
    * 选中标点，设置窗口信息
    *
-   * @param location
+   * @param infoItem
    */
-  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);
-  }
-
-  /**
-   * 增加标记点
-   *
-   * @param poi
-   */
-  setPOI(poi: POI) {
-    AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => {
-      //启动页面
-      new SimpleMarker({
-        //普通文本
-        iconLabel: {
-          //普通文本
-          innerHTML: poi.markerLabel,
-          //设置样式
-          style: {
-            color: '#fff',
-            fontSize: '110%',
-            marginTop: '2px'
-          }
-        },
-        iconStyle: poi.color,
-        map: this.aMap,
-        position: poi.position
-      });
-    });
+  selectedPOI(infoItem: InfoItem) {
+    this.infoWindow.setContent(infoItem.content || `地址: <pre>${infoItem.title}</pre>`);
+    this.infoWindow.open(this.aMap, infoItem.position);
+    this.infoWindow.setPosition(infoItem.position);
+    // 地图定位居中
+    this.aMap.setCenter(infoItem.position);
   }
 }
-
-export interface POI {
-  markerLabel: string;
-  color: string;
-  position: string[];
-}

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

@@ -12,7 +12,10 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject, throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { amapConf } from '@conf/amap.config';
+import { formatDate } from '@angular/common';
+import { DateTimePickerUtil } from '@delon/util';
 declare var AMap: any;
+declare var AMapUI: any;
 
 const CONFIG = amapConf;
 @Injectable({
@@ -82,4 +85,59 @@ export class AmapService {
 
     return this.currentSub;
   }
+
+  /**
+   * 增加标记点
+   *
+   * @param poi
+   */
+  setPOI(poi: POI, aMap: any) {
+    AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => {
+      //启动页面
+      new SimpleMarker({
+        //普通文本
+        iconLabel: {
+          //普通文本
+          innerHTML: poi.markerLabel,
+          //设置样式
+          style: {
+            color: '#fff',
+            fontSize: '110%',
+            marginTop: '2px'
+          }
+        },
+        iconStyle: poi.color,
+        map: aMap,
+        position: poi.position
+      });
+    });
+  }
+
+  formatTime(time: string): string {
+    return `${time.slice(0, 4)}-${time.slice(4, 6)}-${time.slice(6, 8)} ${time.slice(9, 11)}:${time.slice(11, 13)}:${time.slice(13, 15)}`;
+  }
+}
+
+export interface POI {
+  markerLabel?: string;
+  title: string;
+  color: string;
+  position: string[];
+}
+
+export interface InfoItem {
+  title?: string;
+  content?: string;
+  position: string[];
+}
+
+export interface MapList {
+  name: string;
+  time: string;
+  lnglat: string[];
+}
+
+export interface PathList {
+  name: string;
+  points: MapList[];
 }

src/app/shared/components/dynamic-setting/dynamic-setting-modal/dynamic-setting-modal.component.ts

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-10 16:06:17
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-17 13:28:39
+ * @LastEditTime : 2022-03-22 10:05:15
  * @FilePath     : \\tms-obc-web\\src\\app\\shared\\components\\dynamic-setting\\dynamic-setting-modal\\dynamic-setting-modal.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -34,6 +34,8 @@ export class DynamicSettingModalComponent implements OnInit {
   @Input()
   extendType!: string;
   @Input()
+  spareBusinessId!: string;
+  @Input()
   businessId!: string;
   @Input()
   configvalue!: string;
@@ -54,7 +56,8 @@ export class DynamicSettingModalComponent implements OnInit {
       .request('/api/mdc/pbc/sysConfigItemExtend/getSysConfigExtend', {
         configFullKey: this.configFullKey,
         extendType: this.extendType,
-        businessId: this.businessId
+        businessId: this.businessId,
+        spareBusinessId: this.spareBusinessId,
       })
       .pipe(
         map((res: Array<any>) => {

src/app/shared/shared-zorro.module.ts

@@ -47,6 +47,7 @@ import { NzAffixModule } from 'ng-zorro-antd/affix';
 import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
 import { NzImageModule } from 'ng-zorro-antd/image';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 export const SHARED_ZORRO_MODULES = [
   NzButtonModule,
   NzGridModule,
@@ -87,5 +88,6 @@ export const SHARED_ZORRO_MODULES = [
   NzAffixModule,
   NzTypographyModule,
   NzSwitchModule,
-  NzImageModule
+  NzImageModule,
+  NzDrawerModule 
 ];