From 87d1523c31fee6058b66204f290b2e1f31ca1658 Mon Sep 17 00:00:00 2001 From: Lingzi Date: Mon, 14 Mar 2022 18:23:35 +0800 Subject: [PATCH] fix bug --- .../list/carauth/carauth.component.html | 34 + .../list/carauth/carauth.component.less | 123 ++++ .../list/carauth/carauth.component.spec.ts | 24 + .../freight/list/carauth/carauth.component.ts | 654 ++++++++++++++++++ 4 files changed, 835 insertions(+) create mode 100644 src/app/routes/usercenter/components/freight/list/carauth/carauth.component.html create mode 100644 src/app/routes/usercenter/components/freight/list/carauth/carauth.component.less create mode 100644 src/app/routes/usercenter/components/freight/list/carauth/carauth.component.spec.ts create mode 100644 src/app/routes/usercenter/components/freight/list/carauth/carauth.component.ts diff --git a/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.html b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.html new file mode 100644 index 00000000..1614cf91 --- /dev/null +++ b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.html @@ -0,0 +1,34 @@ +
+
车辆协助认证
+
添加车辆
+
+ +
+ + +
+
+
行驶证首页
+
示例
+
+
+
+ + +
+
+
行驶证副页
+
示例
+
+
+
+ + + + + +
+
+ + +
\ No newline at end of file diff --git a/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.less b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.less new file mode 100644 index 00000000..e3f1fc3f --- /dev/null +++ b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.less @@ -0,0 +1,123 @@ +.sfBox { + position: relative; + .example { + position: absolute; + top: 215px; + right: 265px; + color: #1890ff; + cursor: pointer; + .popBox { + position: absolute; + top: -170px; + left: -125px; + width: 300px; + padding: 20px; + text-align: center; + background: #fff; + border: solid 1px #eee; + border-radius: 6px; + box-shadow: 0 1px 5px 1px #ececec; + &::before { + position: absolute; + bottom: -5px; + left: 50%; + width: 10px; + height: 10px; + margin-left: -5px; + background: #fff; + box-shadow: 0 1px 5px 1px #ececec; + transform: rotate(45deg); + content: ''; + } + &::after { + position: absolute; + bottom: 0; + left: 0; + z-index: 10; + width: 100%; + height: 10px; + background: #fff; + content: ''; + } + img { + max-width: 100%; + max-height: 200px; + } + } + } + .positionSet{ + top: 356px; + right: 235px; + } + .positionSet01{ + top: 500px; + right: 200px; + } + .positionSet02{ + top: 664px; + right: 265px; + } + .positionSet03{ + top: 808px; + right: 205px; + + } +} +.exaA{ + position: absolute; + top: 0; + left: 300px +} +.pr { + position: relative; +} + +.pa { + position: absolute; + top: 35px; + left: 150px; +} + +.tips { + display: flex; + margin-bottom: 0; + color: #333; + + dt { + width: 150px; + } + + dd { + width: 190px; + margin-bottom: 0; + text-align: center; + } +} +.drivercard{ + position: absolute; + top: 0; + left: 330px; + border: solid 1px #ebf0fb; +} +.jopcard{ + position: absolute; + top: 1356px; + left: 330px; + border: solid 1px #ebf0fb; +} +.agreement{ + position: absolute; + top: 425px; + left: 330px; + border: solid 1px #ebf0fb; +} +:host{ + ::ng-deep { + .ant-input-borderless{ + padding: 0; + padding-top: 4px; + color: black; + resize:none; + } + } + } \ No newline at end of file diff --git a/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.spec.ts b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.spec.ts new file mode 100644 index 00000000..8be64dc5 --- /dev/null +++ b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.spec.ts @@ -0,0 +1,24 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { CarCarauthComponent } from './carauth.component'; + +describe('CarCarauthComponent', () => { + let component: CarCarauthComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ CarCarauthComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CarCarauthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.ts b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.ts new file mode 100644 index 00000000..a43173ea --- /dev/null +++ b/src/app/routes/usercenter/components/freight/list/carauth/carauth.component.ts @@ -0,0 +1,654 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { apiConf } from '@conf/api.conf'; +import { cacheConf } from '@conf/cache.conf'; +import { SFUISchema, SFSchema, SFUploadWidgetSchema, SFComponent, SFSelectWidgetSchema } from '@delon/form'; +import { _HttpClient } from '@delon/theme'; +import { EACacheService, EAEnvironmentService } from '@shared'; +import { NzModalRef } from 'ng-zorro-antd/modal'; +import { NzUploadFile } from 'ng-zorro-antd/upload'; +import { Observable, Observer, of } from 'rxjs'; +import { ListService } from '../../services/list.service'; + +@Component({ + selector: 'app-car-carauth', + templateUrl: './carauth.component.html', + styleUrls: ['./carauth.component.less'] +}) +export class CarCarauthComponent implements OnInit { + @ViewChild('sf', { static: false }) sf!: SFComponent; + record: any = {}; + i: any; + ui: SFUISchema = {}; + schema: SFSchema = {}; + showCardFlag = false; + showJopFlag = false; + companyData: any = {}; + detailData: any = {}; + carNo = '' + checked = false + + constructor( + private modal: NzModalRef, + public service: ListService, + private envSrv: EAEnvironmentService, + private eaCacheSrv: EACacheService, + ) { } + + ngOnInit(): void { + this.initData() + this.initSF() + } + initData() { + if(this.i.id){ + this.companyData = this.eaCacheSrv.get(cacheConf.env) + const params = { + id: this.i.id + } + this.service.request(this.service.$api_getShipperCar, params).subscribe(res => { + this.detailData = res + this.detailData.isSelf = res.isSelf ? 1 : 0 + this.detailData.isTrailer = res.isTrailer ? 1 : 0 + this.detailData.carFrontPhotoWatermark = [ + { + uid: -1, + name: 'LOGO', + status: 'done', + url: this.detailData.carFrontPhotoWatermark, + response:this.detailData.carFrontPhotoWatermark, + }, + ]; + this.detailData.carProtocalWatermark = [ + { + uid: -1, + name: 'LOGO', + status: 'done', + url: this.detailData.carProtocalWatermark, + response: this.detailData.carProtocalWatermark, + }, + ]; + this.detailData.certificatePhotoFrontWatermark = [ + { + uid: -1, + name: 'LOGO', + status: 'done', + url: this.detailData.certificatePhotoFrontWatermark, + response: this.detailData.certificatePhotoFrontWatermark, + }, + ]; + this.detailData.certificatePhotoBackWatermark = [ + { + uid: -1, + name: 'LOGO', + status: 'done', + url: this.detailData.certificatePhotoBackWatermark, + response: this.detailData.certificatePhotoBackWatermark, + }, + ]; + if(this.detailData.roadTransportPhotoWatermark !== null) { + this.detailData.roadTransportPhotoWatermark = [ + { + uid: -1, + name: 'LOGO', + status: 'done', + url: this.detailData.roadTransportPhotoWatermark, + response: this.detailData.roadTransportPhotoWatermark, + }, + ]; + } + + }) + } + } + initSF() { + this.schema = { + properties: { + carFrontPhotoWatermark: { + type: 'string', + title: '车头照照片', + ui: { + action: apiConf.fileUpload, + accept: 'image/png,image/jpeg,image/jpg,image/gif', + limit: 1, + limitFileCount: 1, + resReName: 'data.fullFileWatermarkPath', + urlReName: 'data.fullFileWatermarkPath', + widget: 'upload', + descriptionI18n: '请上传车头照照片，支持JPG、PNG格式，文件小于5M。', + data: { + appId: this.envSrv.env.appId, + }, + name: 'multipartFile', + multiple: false, + listType: 'picture-card', + change: (args: any) => { + if (args.type === 'success') { + this.detailData.carFrontPhoto = args.file.response.data.fullFilePath + } + }, + beforeUpload: (file: any, _fileList: any) => { + return new Observable((observer: Observer) => { + const isLt2M = file.size / 1024 / 1024 < 5; + if (!isLt2M) { + this.service.msgSrv.warning('图片大小超过5M!'); + observer.complete(); + return; + } + observer.next(isLt2M); + observer.complete(); + }); + }, + previewFile: (file: NzUploadFile) => of(file.url), + }, + }, + carNo: { + title: '车牌号', + type: 'string', + maxLength: 9, + ui: { + placeholder: '请输入', + }, + }, + carNoColor: { + title: '车牌颜色', + type: 'string', + ui: { + widget: 'dict-select', + params: { dictKey: 'car:color' }, + placeholder: '请选择车牌颜色', + containsAllLabel:false, + } as SFSelectWidgetSchema, + }, + carModel: { + title: '车型', + type: 'string', + ui: { + widget: 'dict-select', + params: { dictKey: 'car:model' }, + placeholder: '请选择车型', + containsAllLabel:false, + } as SFSelectWidgetSchema, + }, + carLength: { + title: '车长', + type: 'string', + ui: { + widget: 'dict-select', + params: { dictKey: 'car:length' }, + placeholder: '请选择车长', + containsAllLabel:false, + } as SFSelectWidgetSchema, + }, + carLoad: { + title: '载重', + type: 'string', + ui: { + placeholder: '请输入', + change: (val: any) =>{ + const value = val.replace(/\D/g,'') + this.sf.setValue('/carLoad', value) + }, + } + }, + isSelf: { + title: '是否挂靠', + type: 'string', + enum: [ + { label: '否', value: 0 }, + { label: '是', value: 1 }, + ], + ui: { + widget: 'select', + placeholder: '请选择', + } + }, + isTrailer: { + title: '是否为挂车', + type: 'string', + enum: [ + { label: '否', value: 0 }, + { label: '是', value: 1 }, + ], + ui: { + widget: 'select', + placeholder: '请选择', + } + }, + carProtocalWatermark: { + type: 'string', + title: '挂靠协议', + ui: { + action: apiConf.fileUpload, + accept: 'image/png,image/jpeg,image/jpg,image/gif', + limit: 1, + limitFileCount: 1, + resReName: 'data.fullFileWatermarkPath', + urlReName: 'data.fullFileWatermarkPath', + widget: 'upload', + descriptionI18n: '请上传挂靠协议，支持JPG、PNG格式，文件小于5M。', + data: { + appId: this.envSrv.env.appId, + }, + name: 'multipartFile', + multiple: false, + listType: 'picture-card', + change: (args: any) => { + if (args.type === 'success') { + this.detailData.certificatePhotoFront = args.file.response.data.fullFilePath + } + }, + beforeUpload: (file: any, _fileList: any) => { + return new Observable((observer: Observer) => { + const isLt2M = file.size / 1024 / 1024 < 5; + if (!isLt2M) { + this.service.msgSrv.warning('图片大小超过5M!'); + observer.complete(); + return; + } + observer.next(isLt2M); + observer.complete(); + }); + }, + previewFile: (file: NzUploadFile) => of(file.url), + }, + }, + titleA: { + title: '行驶证信息(必填）', + type: 'string', + ui: { + widget: 'textarea', + borderless:true, + }, + default: '照片上传后会自动识别文字并填充下列内容栏', + }, + tipsA: { + title: '', + type: 'string', + ui: { + widget: 'custom', + offsetControl: 6, + }, + }, + certificatePhotoFrontWatermark: { + type: 'string', + title: '行驶证首页照片', + ui: { + action: apiConf.fileUpload, + accept: 'image/png,image/jpeg,image/jpg,image/gif', + limit: 1, + limitFileCount: 1, + resReName: 'data.fullFileWatermarkPath', + urlReName: 'data.fullFileWatermarkPath', + widget: 'upload', + descriptionI18n: '请上传行驶证首页照片，支持JPG、PNG格式，文件小于5M。照片信息缺失、拼凑、过度PS、模糊不清，都不会通过审核。', + data: { + appId: this.envSrv.env.appId, + }, + name: 'multipartFile', + multiple: false, + listType: 'picture-card', + change: (args: any) => { + if (args.type === 'success') { + this.detailData.certificatePhotoFront = args.file.response.data.fullFilePath + this.checkCarCard(args.file.response.data.fullFilePath, 'front'); + } + }, + beforeUpload: (file: any, _fileList: any) => { + return new Observable((observer: Observer) => { + const isLt2M = file.size / 1024 / 1024 < 5; + if (!isLt2M) { + this.service.msgSrv.warning('图片大小超过5M!'); + observer.complete(); + return; + } + observer.next(isLt2M); + observer.complete(); + }); + }, + }, + }, + tipsB: { + title: '', + type: 'string', + ui: { + widget: 'custom', + offsetControl: 6, + }, + }, + certificatePhotoBackWatermark: { + type: 'string', + title: '行驶证副页照片', + ui: { + action: apiConf.fileUpload, + accept: 'image/png,image/jpeg,image/jpg,image/gif', + limit: 1, + limitFileCount: 1, + resReName: 'data.fullFileWatermarkPath', + urlReName: 'data.fullFileWatermarkPath', + widget: 'upload', + descriptionI18n: '请上传行驶证副业照片，支持JPG、PNG格式，文件小于5M。', + data: { + appId: this.envSrv.env.appId, + }, + name: 'multipartFile', + multiple: false, + listType: 'picture-card', + change: (args: any) => { + if (args.type === 'success') { + this.detailData.certificatePhotoBack = args.file.response.data.fullFilePath + this.checkCarCard(args.file.response.data.fullFilePath, 'back'); + } + }, + beforeUpload: (file: any, _fileList: any) => { + return new Observable((observer: Observer) => { + const isLt2M = file.size / 1024 / 1024 < 5; + if (!isLt2M) { + this.service.msgSrv.warning('图片大小超过5M!'); + observer.complete(); + return; + } + observer.next(isLt2M); + observer.complete(); + }); + }, + previewFile: (file: NzUploadFile) => of(file.url), + }, + }, + driverLicenseRegisterTime: { + title: '行驶证注册日期', + type: 'string', + format: 'date', + ui: { + placeholder: '请输入', + }, + }, + driverLicenseGetTime: { + title: '行驶证发证日期', + type: 'string', + format: 'date', + ui: { + placeholder: '请输入', + }, + }, + driverLicenseEndTime: { + title: '行驶证到期日期', + type: 'string', + format: 'date', + maxLength: 30, + ui: { + placeholder: '请输入', + }, + }, + driverLicenseSigningOrg: { + title: '行驶证签发机关', + type: 'string', + maxLength: 30, + ui: { + placeholder: '请输入', + }, + }, + carDistinguishCode: { + title: '车辆识别代码', + type: 'string', + maxLength: 30, + ui: { + placeholder: '请输入', + }, + }, + useNature: { + title: '使用性质', + type: 'string', + maxLength: 30, + enum: [ + {label: '非营运', value: 0}, + {label: '营运', value: 1}, + ], + ui: { + widget: 'select', + placeholder: '请选择', + }, + }, + curbWeight: { + title: '整备质量', + type: 'string', + ui: { + placeholder: '请输入', + }, + }, + carOwner: { + title: '所有人', + type: 'string', + maxLength: 30, + ui: { + placeholder: '请输入', + }, + }, + titleB: { + title: '道运证(选填）', + type: 'string', + ui: { + widget: 'text', + }, + default: '照片上传后会自动识别文字并填充下列内容栏', + }, + roadTransportPhotoWatermark: { + type: 'string', + title: '道运证照片', + ui: { + action: apiConf.fileUpload, + accept: 'image/png,image/jpeg,image/jpg,image/gif', + limit: 1, + limitFileCount: 1, + resReName: 'data.fullFileWatermarkPath', + urlReName: 'data.fullFileWatermarkPath', + widget: 'upload', + descriptionI18n: '请上传道运证照片，支持JPG、PNG格式，文件小于5M。蓝牌绿牌车辆，可不用传道运证', + data: { + appId: this.envSrv.env.appId, + }, + name: 'multipartFile', + multiple: false, + listType: 'picture-card', + change: (args: any) => { + if (args.type === 'success') { + this.detailData.roadTransportPhoto = args.file.response.data.fullFilePath + this.checkTransCard(args.file.response.data.fullFilePath); + } else { + this.detailData.roadTransportPhoto = '' + } + }, + beforeUpload: (file: any, _fileList: any) => { + return new Observable((observer: Observer) => { + const isLt2M = file.size / 1024 / 1024 < 5; + if (!isLt2M) { + this.service.msgSrv.warning('图片大小超过5M!'); + observer.complete(); + return; + } + observer.next(isLt2M); + observer.complete(); + }); + }, + previewFile: (file: NzUploadFile) => of(file.url), + }, + }, + roadTransportNo: { + title: '道运证号码', + type: 'string', + maxLength: 30, + ui: { + // widget: this.detailData.commitFlag !== 0 ? 'text' : '', + placeholder: '请输入', + }, + }, + roadTransportLicenceNo: { + title: '经营许可证号', + type: 'string', + maxLength: 30, + ui: { + // widget: this.detailData.commitFlag !== 0 ? 'text' : '', + placeholder: '请输入', + }, + }, + roadTransportStartTime: { + title: '发证日期', + type: 'string', + format: 'date', + ui: { + placeholder: '请输入', + }, + }, + roadTransportEndTime: { + title: '有效期至', + type: 'string', + format: 'date', + ui: { + placeholder: '请输入', + }, + }, + remarks: { + title: '备注', + type: 'string', + ui: { + placeholder: '请输入', + }, + }, + }, + required: [ + 'carFrontPhotoWatermark', + 'carNo', + 'carNoColor', + 'carModel', + 'carLength', + 'carLoad', + 'isSelf', + 'isTrailer', + 'certificatePhotoFrontWatermark', + 'certificatePhotoBackWatermark', + 'driverLicenseRegisterTime', + 'driverLicenseGetTime', + 'driverLicenseEndTime', + 'driverLicenseSigningOrg', + 'carDistinguishCode', + 'useNature', + 'carOwner' + ], + }; + + this.ui = { + '*': { + spanLabelFixed: 180, + grid: { span: 18 }, + width: 600, + }, + $title1: { + spanLabelFixed: 0, + }, + $title2: { + spanLabelFixed: 0, + }, + $title3: { + spanLabelFixed: 0, + }, + $enterpriseRegistrationTime: { + width: 680, + }, + $operatingEndTime: { + grid: { span: 9 }, + }, + $dateType: { + grid: { span: 4 }, + }, + $validEndTime: { + grid: { span: 9 }, + }, + $dateType01: { + grid: { span: 4 }, + }, + $registrationCapital: { + grid: { span: 12 }, + }, + $unit: { + spanLabelFixed: 20, + grid: { span: 3 }, + }, +}; + } +// 道路运输证识别 +checkTransCard(imgurl: any) { + const params = { + transportationLicenseUrl: imgurl, + }; + this.service.request(this.service.$api_recognizeTransportationLicense, params).subscribe((res) => { + if (res) { + this.sf.setValue('/roadTransportNo', res.number); + this.sf.setValue('/roadTransportLicenceNo', res.businessCertificate); + this.sf.setValue('/roadTransportStartTime', res.issueDate); + if(this.carNo === '') { + this.carNo = res.number + } else if(this.carNo && res.vehicleNumber.indexOf(this.carNo) === -1) { + this.service.msgSrv.warning('请上传同一认证车辆的相关证件') + } + } + }); +} +// 行驶证识别 +checkCarCard(imgurl: any, side: any) { + const params = { + vehicleLicenseUrl: imgurl, + side, + }; + this.service.request(this.service.$api_recognizeVehicleLicense, params).subscribe((res) => { + if (res) { + if (side === 'front') { // 正面 + this.sf.setValue('/driverLicenseRegisterTime', res.registerDate); + this.sf.setValue('/carNo', res.number); + this.sf.setValue('/driverLicenseGetTime', res.issueDate); + this.sf.setValue('/driverLicenseSigningOrg', res.issuingAuthority); + this.sf.setValue('/carDistinguishCode', res.vin); + this.sf.setValue('/carOwner', res.name); + this.sf.setValue('/useNature', res.useCharacter === '非营运' ? 0 : 1 ); + } else { + this.sf.setValue('/curbWeight', res.unladenMass); + this.sf.setValue('/remarks', res.remarks); + } + if(this.carNo === '') { + this.carNo = res.number + } else if(this.carNo && this.carNo !== res.number) { + this.service.msgSrv.warning('请上传同一认证车辆的相关证件') + } + } + }); +} + +close(): void { + this.modal.close(true) +} +showExample() { + this.showCardFlag = !this.showCardFlag +} +showJopExample() { + this.showJopFlag = !this.showJopFlag +} +submitForm(){ + const params:any = { + appUserId: this.i.appUserId, + ...this.sf.value, + bindType: this.i.bindType + }; + params.carFrontPhoto = this.detailData.carFrontPhoto + params.carProtocal = this.detailData.carProtocal + params.certificatePhotoFront = this.detailData.certificatePhotoFront + params.certificatePhotoBack = this.detailData.certificatePhotoBack + params.roadTransportPhoto = this.detailData.roadTransportPhoto + delete params.titleA + delete params.titleB + this.checked = true + this.service.request(this.service.$api_updateAssistCertification, params).subscribe(res => { + this.checked = false + if(res){ + this.service.msgSrv.success('添加成功') + this.modal.close(true) + } + }) +} +}