bbq/src/app/routes/waybill-management/components/vehicle-detail/vehicle-detail.component.ts

/*
 * @Author: your name
 * @Date: 2021-12-03 15:31:52
 * @LastEditTime : 2022-05-06 09:55:19
 * @LastEditors  : Shiming
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\vehicle-detail\\vehicle-detail.component.ts
 */
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { STColumn } from '@delon/abc/st';
import { _HttpClient } from '@delon/theme';
import format from 'date-fns/format';
import { NzCardComponent } from 'ng-zorro-antd/card';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { Subscription, fromEvent } from 'rxjs';
import { VehicleSureArriveComponent } from 'src/app/routes/order-management/modal/vehicle/sure-arrive/sure-arrive.component';
import { VehicleSureDepartComponent } from 'src/app/routes/order-management/modal/vehicle/sure-depart/sure-depart.component';
import { WaybillManagementServe } from '../../services/waybill-management.service';
@Component({
  selector: 'app-supply-management-vehicle-detail',
  templateUrl: './vehicle-detail.component.html',
  styleUrls: ['./vehicle-detail.component.less', '../../../commom/less/trajectory.less']
})
export class WaybillManagementVehicleDetailComponent implements OnInit, OnDestroy {
  id = this.route.snapshot.params.id;
  MapList: any[] = [];
  trajectory = 'car';
  mapList: any[] = []; //地图点位数据组
  addressItems: any[] = []; //打点地址数据组
  i: any;
  totalObj: any;
  attObj: any;
  isVisible = false;
  imges: any;
  unLoadingPlaceVOList: any = [];
  logColumns2: STColumn[] = [
    { title: '停车时间', index: 'parkBte' },
    { title: '停车地点', index: 'parkAdr' }
  ];
  modalcontent: any;
  modalTitle: string = '';
  billExpenses: any[] = []; //运费信息表格信息
  logColumns: STColumn[] = [
    { title: '款项', index: 'costCodeLabel' },
    { title: '小计（元）', render: 'prices' },
    { title: '运输费（元）', render: 'price' },
    { title: '附加费（元）', render: 'surcharge' },
    { title: '支付时间', index: 'paymentTime' },
    {
      title: '支付状态',
      className: 'text-center',
      index: 'paymentStatusLabel'
    }
  ];

  scrollTop = 0;
  subscribeScoll!: Subscription;
  constructor(
    private route: ActivatedRoute,
    private msgSrv: NzMessageService,
    private service: WaybillManagementServe,
    private modal: NzModalService
  ) {}

  ngOnDestroy(): void {
    this.subscribeScoll.unsubscribe();
  }

  ngOnInit(): void {
    this.initData();
    this.getTrajectory();
    this.subscribeScoll = fromEvent(window, 'scroll').subscribe(event => {
      this.scrollTop = document.documentElement.scrollTop;
    });
  }
  initData() {
    const params = {
      id: this.id
    };
    this.service.request(this.service.$api_get_getWholeDetail, params).subscribe(res => {
      console.log(res);
      this.unLoadingPlaceVOList.push(...res.loadingPlace);
      this.unLoadingPlaceVOList.push(...res.dischargePlace);
      console.log(this.unLoadingPlaceVOList);
      this.i = res;
      this.billExpenses = this.i?.billExpenseDetails?.filter(
        (data: any) => data.costCode === 'PRE' || data.costCode === 'RECE' || data.costCode === 'BACK'
      );
      this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data: any) => data.displayStatus !== 'HIDE');
    });
  }

  goBack() {
    window.history.go(-1);
  }
  agreement(value: any) {
    if (value === '1') {
      this.modalTitle = '附件信息';
      this.modalcontent = this.i?.contractContent?.contractContent;
    } else if (value === '2') {
      this.modalTitle = '补充协议';
      this.modalcontent = this.i?.supplementContent?.contractContent;
    }
    this.isVisible = true;
  }
  handleCancel() {
    this.isVisible = false;
  }
  handleOK() {
    this.isVisible = false;
  }
  goDistance(elf: any) {
    if (elf) {
      elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
    }
  }
  //  *确认发车

  sureDepart(item: any) {
    const modalRef = this.modal.create({
      nzTitle: '确认发车',
      nzWidth: '50%',
      nzContent: VehicleSureDepartComponent,
      nzComponentParams: {
        i: item,
        Status: 1
      },
      nzFooter: null
    });
    modalRef.afterClose.subscribe((result: any) => {
      this.initData();
    });
  }
  // 确认到车
  sureArrive(item: any) {
    const modalRef = this.modal.create({
      nzTitle: '确认到车',
      nzWidth: '50%',
      nzContent: VehicleSureArriveComponent,
      nzComponentParams: {
        i: item,
        Status: 1
      },
      nzFooter: null
    });
    modalRef.afterClose.subscribe((result: any) => {
      this.initData();
    });
  }

  // 获取车辆轨迹
  getTrajectory() {
    this.service.request(this.service.$api_get_getTrajectory, { id: this.id }).subscribe(res => {
      if (res) {
        const points = res.trackArray;
        let list: any[] = [];
        points?.forEach((item: any) => {
          list.push({
            name: item.hgt,
            lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
            time: item.gtm
          });
        });
        this.mapList = list;
        this.addressItems = res.parkArray;
        if (this.addressItems && this.addressItems.length > 0) {
          this.addressItems.forEach(item => {
            item.parkBte = this.getLocalTime(item.parkBte);
          });
        }
      }
    });
  }

  // 获取司机轨迹
  getDriverTrajectory() {
    this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.id }).subscribe(res => {
      if (res) {
        const points = res.tracks;
        let list: any[] = [];
        points?.forEach((item: any) => {
          list.push({
            name: item.hgt,
            lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
            time: item.gtm
          });
        });
        this.mapList = list;
        const addressItems = [...res.tracks];
        if (addressItems) {
          addressItems.forEach(item => {
            // item.parkBte = item.gtm;
            item.parkBte = this.getLocalTime(item.gtm);
            item.parkAdr = item.appAdress;
          });
          this.addressItems = [...addressItems];
        } else {
          this.addressItems = [];
        }
      }
    });
  }
  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');
  }
}