Merge branch 'develop'

This commit is contained in:
wangshiming
2022-04-22 15:54:46 +08:00
14 changed files with 737 additions and 306 deletions

View File

@ -2,8 +2,14 @@
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
<g2-card [title]="AdvanceDepositTitle" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
[footer]="AdvanceDepositFooter" contentHeight="46">
<ng-template #AdvanceDepositTitle>
<p class="mini_area_title">
<span class="title">客户预存款总额</span>
<span class="subtitle">完成率 <span class="percent">32.12%</span></span>
</p>
</ng-template>
<ng-template #AdvanceDepositFooter>
<g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
(clickItem)="handleClick($event)">
@ -12,8 +18,14 @@
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'业绩量总额'" [bordered]="true" [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'"
[footer]="PerformanceVolumeFooter" contentHeight="46">
<g2-card [title]="PerformanceVolumeTitle" [bordered]="true"
[total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'" [footer]="PerformanceVolumeFooter" contentHeight="46">
<ng-template #PerformanceVolumeTitle>
<p class="mini_area_title">
<span class="title">业绩量总额</span>
<span class="subtitle">完成率 <span class="percent">32.12%</span></span>
</p>
</ng-template>
<ng-template #PerformanceVolumeFooter>
<g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []"
(clickItem)="handleClick($event)">
@ -22,18 +34,28 @@
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'司机应付总额'" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'" [footer]="footer"
contentHeight="46">
<ng-template #footer>
<g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalFreight?.list || []"
<g2-card [title]="FreightTitle" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'"
[footer]="Freightfooter" contentHeight="46">
<ng-template #FreightTitle>
<p class="mini_area_title">
<span class="title">司机应付总额</span>
</p>
</ng-template>
<ng-template #Freightfooter>
<g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalFreight?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'附加费总额'" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
<g2-card [title]="SurchargeTitle" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
[footer]="SurchargeFooter" contentHeight="46">
<ng-template #SurchargeTitle>
<p class="mini_area_title">
<span class="title">附加费总额</span>
</p>
</ng-template>
<ng-template #SurchargeFooter>
<g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalSurcharge?.list || []"
(clickItem)="handleClick($event)">
@ -43,12 +65,12 @@
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="7">
<div nz-col class="gutter-row" [nzSpan]="6">
<nz-card><label class="chart_title">订单类型比例</label>
<g2-custom #g2custom delay="100"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="17">
<div nz-col class="gutter-row" [nzSpan]="18">
<nz-card><label class="chart_title">大区业绩完成情况</label>
<!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额(元)', y2: '' }" [height]="200" mask="MM月DD日"
[slider]="false"></g2-timeline> -->
@ -57,7 +79,7 @@
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="7">
<div nz-col class="gutter-row" [nzSpan]="6">
<nz-card> <label class="chart_title">运单直付比例</label>
<!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
(clickItem)="handleClick($event)" [lineWidth]="10">
@ -65,7 +87,7 @@
<g2-custom #BillDirectProportion delay="100"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="17">
<div nz-col class="gutter-row" [nzSpan]="18">
<nz-card>
<label class="chart_title">业绩完成情况</label>
<!-- <g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->

View File

@ -6,4 +6,44 @@
background-clip : text;
-webkit-background-clip: text;
position : absolute;
}
.mini_area_title {
display : flex;
justify-content: space-between;
.title {
font-size : 16px;
font-weight: 500;
color : #1D2129;
}
.subtitle {
font-size : 14px;
font-weight: 400;
color : #575D6C;
text-align : right;
.percent {
color: #E60012
}
}
}
:host::ng-deep {
.g2-card__meta-wrap {
width: 100%;
.g2-card__total {
font-size : 28px;
font-weight: 500;
color : #1D2129;
margin-top : 8px;
}
}
.g2-card__footer {
border: 0px;
}
}

View File

@ -126,7 +126,7 @@ export class DatatableDataindexComponent implements OnInit {
const chart = new Chart({
container: el,
autoFit: true,
height: 400
height: 380
});
// 新建一个 view 用来单独渲染Annotation
const innerView = chart.createView();
@ -208,21 +208,21 @@ export class DatatableDataindexComponent implements OnInit {
position: ['50%', '50%'],
content: data[0].item,
style: {
fontSize: 20,
fontSize: 14,
fill: '#8c8c8c',
textAlign: 'center'
},
offsetY: -20
offsetY: -10
})
.text({
position: ['50%', '50%'],
content: data[0].count,
style: {
fontSize: 28,
fontSize: 16,
fill: '##000',
textAlign: 'center'
},
offsetY: 20
offsetY: 10
});
innerView.render(true);
@ -260,21 +260,21 @@ export class DatatableDataindexComponent implements OnInit {
position: ['50%', '50%'],
content: data.item,
style: {
fontSize: 20,
fontSize: 14,
fill: '#8c8c8c',
textAlign: 'center'
},
offsetY: -20
offsetY: -10
})
.text({
position: ['50%', '50%'],
content: data.count,
style: {
fontSize: 28,
fontSize: 16,
fill: '##000',
textAlign: 'center'
},
offsetY: 20
offsetY: 10
});
innerView.render(true);
lastItem = data.item;
@ -404,7 +404,7 @@ export class DatatableDataindexComponent implements OnInit {
const chart = new Chart({
container: el,
autoFit: true,
height: 400
height: 380
});
chart.data(data);
// 设置坐标轴

View File

@ -4,14 +4,14 @@
* @Author : Shiming
* @Date : 2021-12-15 13:17:42
* @LastEditors : Shiming
* @LastEditTime : 2022-04-22 11:03:26
* @LastEditTime : 2022-04-22 15:27:20
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\audit\\voucher-view\\voucher-view.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<div class="sfBox" [ngClass]="Status !== 1 ? 'hideBtn' : ''">
<sf #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="formData" button="none">
<ng-template sf-template="no0" let-me let-ui="ui" let-schema="schema">
<div style="color: #1890ff">
<div style="color: #1890ff; cursor: pointer;">
<div (click)="openlaod(1)"
>电子装货单
<!-- <span style="color: red;">
@ -21,7 +21,7 @@
</div>
</ng-template>
<ng-template sf-template="no6" let-me let-ui="ui" let-schema="schema">
<div style="color: #1890ff" (click)="openlaod(2)"
<div style="color: #1890ff; cursor: pointer;" (click)="openlaod(2)"
>电子卸货单
<!-- <span style="color: red;"> {{datas?.unloadingElectronicsLadingBillFilePath ? '已签署' :'未签署'}}</span> -->
</div>

View File

@ -509,11 +509,75 @@ export class orderManagementVoucherViewComponent implements OnInit {
});
}
sure() {
const params = [this.i?.id];
this.service.downloadFile(this.service.$api_createBillTakeGoods, params);
this.service.downloadFile(this.service.$api_createBillDischargeGoods, params);
this.service.msgSrv.success('生成电子单据成功!');
this.modal.destroy(true);
// const params = [this.i?.id];
// this.service.downloadFile(this.service.$api_createBillTakeGoods, params);
// this.service.downloadFile(this.service.$api_createBillDischargeGoods, params);
// 逻辑: 先判断电子提货单是否已生成,文件为空则触发签署文件,再查询是否签署成功,成功则退出,刷新页面,再次点击为预览
let time = 10;
setInterval(function () {
time -= 1;
}, 1000);
const modal = this.modalService.success({
nzTitle: '电子装货单和电子卸货单签署中!',
nzContent: `
请等待${time}秒后自动关闭
`
});
this.service.request(this.service.$api_createBillTakeGoods, [this.datas?.id]).subscribe(res => {
if (res) {
switch (res[0]?.esignFlowStatus) {
case 1:
case '1':
setTimeout(() => {
this.service.request(this.service.$api_getBillTakeEsignFile, [this.datas?.id]).subscribe(res => {
if (res[0]?.esignFlowStatus == '2') {
}
});
}, 9000);
return;
case 2:
return;
case '13':
default:
this.service.msgSrv.error('电子装货单签署异常!');
modal.destroy();
return;
}
} else {
this.service.msgSrv.error('电子装货单签署异常!');
modal.destroy();
}
});
this.service.request(this.service.$api_createBillDischargeGoods, [this.datas?.id]).subscribe(res => {
if (res) {
switch (res[0]?.esignFlowStatus) {
case 1:
case '1':
setTimeout(() => {
this.service.request(this.service.$api_getBillDischargeEsignFile, [this.datas?.id]).subscribe(res => {
if (res[0]?.esignFlowStatus == '2') {
this.service.msgSrv.success('生成电子单据成功!');
this.modal.destroy(true);
}
});
modal.destroy();
}, 9000);
return;
case 2:
modal.destroy();
return;
default:
this.service.msgSrv.error('电子卸货单签署异常!');
modal.destroy();
return;
}
} else {
this.service.msgSrv.error('电子卸货单签署异常!');
modal.destroy();
}
});
}
// 确认到车界面信息(两个只能看的图片)
initData() {
@ -590,101 +654,4 @@ export class orderManagementVoucherViewComponent implements OnInit {
});
}
}
// openlaod2(value: any) {
// if (value === 1) {
// // 逻辑: 先判断电子提货单是否已生成,文件为空则触发签署文件,再查询是否签署成功,成功则退出,刷新页面,再次点击为预览
// let time = 10;
// setInterval(function () {
// time -= 1;
// }, 1000);
// const modal = this.modalService.success({
// nzTitle: '电子装货单签署中!',
// nzContent: `
// 请等待${time}秒后自动关闭
// `
// });
// if (!this.datas?.loadingElectronicsLadingBillFilePath) {
// this.service.request(this.service.$api_createBillTakeGoods, [this.datas?.id]).subscribe(res => {
// if (res) {
// switch (res[0]?.esignFlowStatus) {
// case 1:
// case '1':
// setTimeout(() => {
// this.service.request(this.service.$api_getBillTakeEsignFile, [this.datas?.id]).subscribe(res => {
// if (res[0]?.esignFlowStatus == '2') {
// this.service.msgSrv.success('电子装货单已生效!');
// this.modal.destroy(true);
// }
// });
// modal.destroy();
// }, 10000);
// return;
// case 2:
// modal.destroy();
// return;
// case '13':
// case 13:
// this.service.msgSrv.error('签署异常!');
// modal.destroy();
// return;
// }
// }
// });
// } else {
// const a = document.createElement('a');
// a.href = this.datas?.loadingElectronicsLadingBillFilePath;
// document.body.appendChild(a);
// a.click(); //点击下载
// document.body.removeChild(a); //下载完成移除元素
// }
// } else {
// // 逻辑: 先判断电子提货单是否已生成,文件为空则触发签署文件,再查询是否签署成功,成功则退出,刷新页面,再次点击为预览
// let time = 10;
// setInterval(function () {
// time -= 1;
// }, 1000); //反复执行函数本身
// const modal = this.modalService.success({
// nzTitle: '电子卸货单签署中!',
// nzContent: `
// 请等待${time}秒后自动关闭
// `
// });
// if (!this.datas?.unloadingElectronicsLadingBillFilePath) {
// this.service.request(this.service.$api_createBillDischargeGoods, [this.datas?.id]).subscribe(res => {
// if (res) {
// switch (res[0]?.esignFlowStatus) {
// case 1:
// case '1':
// setTimeout(() => {
// this.service.request(this.service.$api_getBillDischargeEsignFile, [this.datas?.id]).subscribe(res => {
// if (res[0]?.esignFlowStatus == '2') {
// this.service.msgSrv.success('电子卸货单已生效!');
// this.modal.destroy(true);
// }
// });
// modal.destroy();
// }, 10000);
// return;
// case 2:
// modal.destroy();
// return;
// case '13':
// case 13:
// this.service.msgSrv.error('签署异常!');
// modal.destroy();
// return;
// }
// }
// });
// } else {
// const a = document.createElement('a');
// a.href = this.datas?.unloadingElectronicsLadingBillFilePath;
// document.body.appendChild(a);
// a.click(); //点击下载
// document.body.removeChild(a); //下载完成移除元素
// }
// }
// }
}

View File

@ -4,7 +4,7 @@
* @Author : Shiming
* @Date : 2021-12-30 14:45:39
* @LastEditors : Shiming
* @LastEditTime : 2022-03-24 10:28:48
* @LastEditTime : 2022-04-22 15:42:08
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\modify-captain\\modify-captain.component.ts
* Copyright (C) 2022 huzhenhong. All rights reserved.
*/
@ -44,7 +44,8 @@ export class VehicleModifyCaptainComponent implements OnInit {
mobile: {
type: 'string',
title: '车队长手机号',
maxLength: 11
maxLength: 11,
default: ''
}
},
required: ['mobile']
@ -103,8 +104,6 @@ export class VehicleModifyCaptainComponent implements OnInit {
if (res) {
this.modal.destroy();
this.service.msgSrv.success('修改成功');
} else {
this.service.msgSrv.error(res?.msg);
}
});
}
@ -114,7 +113,6 @@ export class VehicleModifyCaptainComponent implements OnInit {
...this.sf?.value
};
this.service.request(this.service.$api_get_getCarCaptainByMobile, params).subscribe((res: any) => {
console.log(res);
if (res) {
this.dataList = [res];
}

View File

@ -10,11 +10,11 @@
-->
<div nz-row>
<div nz-col [nzSpan]="24">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="MapList">
<amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="mapList" [pois]="pois">
</amap-path-simplifier>
<st [scroll]="{ y: '350px' }" #st [data]="addressItems" [columns]="logColumns2" [ps]="0"
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
[page]="{ show: false, showSize: false }" size="small" class="map_st">
</st>
<nz-radio-group [(ngModel)]="trajectory" (ngModelChange)="trajectoryChange($event)" class="map_radio">
<label nz-radio-button nzValue="car">车辆轨迹</label>
<label nz-radio-button nzValue="driver">司机轨迹</label>

View File

@ -1,11 +1,84 @@
:host {
::ng-deep {
// .mapBox {
// iframe, canvas {
// width: 400px !important;
// }
// }
}
}
.btn-size {
font-size: 14px;
}
.bdr {
border-right: 1px solid #ccc;
}
.bdl {
border-left: 1px solid #ccc;
}
.source-info {
p {
margin-bottom: .5em;
}
}
.freight-info-box {
width: 95%;
}
.freigth-label {
display : inline-block;
width : 50px;
text-align: right;
}
::ng-deep {
.approval-status {
.ant-steps {
width : 70%;
margin: 0 auto;
}
}
}
.leftPadding {
padding-right: 100px;
}
.hide{
display: none;
}
.handling-info {
min-height: 100px;
border: 1px solid #ccc;
.loading-row {
display: flex;
}
.handling-info-icon {
width: 32px;
height: 32px;
margin-right: 24px;
color: #fff;
line-height: 32px;
text-align: center;
border-radius: 50%;
&.loading-bg {
background-color: #50D4AB;
}
&.unloaing-bg {
background: #F66F6A;
}
}
.info {
flex: 1;
}
.time-info {
margin-left: 56px;
}
}
.target-fix {
display: block;
margin-top: 290px;
}
}

View File

@ -4,7 +4,7 @@
* @Author : Shiming
* @Date : 2022-02-22 13:53:29
* @LastEditors : Shiming
* @LastEditTime : 2022-03-08 16:11:58
* @LastEditTime : 2022-04-22 15:49:04
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\view-track\\view-track.component.ts
* Copyright (C) 2022 huzhenhong. All rights reserved.
*/
@ -24,6 +24,7 @@ import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { OrderManagementService } from '../../../services/order-management.service';
import { ThisReceiver } from '@angular/compiler';
@Component({
selector: 'app-order-management-view-track',
@ -37,9 +38,11 @@ export class OneCarOrderViewtrackComponent implements OnInit {
mapList: any[] = []; //地图点位数据组
addressItems: any[] = []; //打点地址数据组
logColumns2: STColumn[] = [
{ title: '时间', index: 'parkBte' },
{ title: '时间', index: 'parkBte', width: 120, className: 'text-center' },
{ title: '地点', index: 'parkAdr' }
];
pois: any[] = [];
constructor(
private modalRef: NzModalRef,
private modal: NzModalService,
@ -56,23 +59,48 @@ export class OneCarOrderViewtrackComponent implements OnInit {
}
// 获取车辆轨迹
getTrajectory() {
this.service.request(this.service.$api_get_getTrajectory, { id: this.i?.id }).subscribe(res => {
this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.i.id }).subscribe(res => {
if (res) {
this.pois = [
{
markerLabel: '装',
color: 'blue',
position: [res.startingPoint.longitude, res.startingPoint.latitude],
title: `发货地:${res.startingPoint.province}${res.startingPoint.city}${res.startingPoint.area || ''}${
res.startingPoint.detailedAddress
}`,
time: '计划出发时间:' + res.loadPlanTime
},
{
markerLabel: '卸',
color: 'red',
position: [res.endPoint.longitude, res.endPoint.latitude],
title: `卸货地:${res.endPoint.province}${res.endPoint.city}${res.endPoint.area}${res.endPoint.detailedAddress}`,
time: '计划卸货时间:' + res.unloadPlanTime
}
];
}
});
this.service.request(this.service.$api_get_getTrajectory, { id: this.i.id }).subscribe(res => {
if (res) {
const points = res.trackArray;
let list: any[] = [];
points?.forEach((item: any) => {
list.push({
name: item.hgt,
name: `${item.spd}`,
lnglat: [Number((Number(item.lon) / 600000).toFixed(6)), Number((Number(item.lat) / 600000).toFixed(6))],
time: item.gtm
});
});
this.mapList = list;
this.addressItems = res.parkAdr;
if (this.addressItems && this.addressItems.length > 0) {
this.addressItems.forEach(item => {
const addressItems: any[] = res.parkArray;
if (addressItems?.length > 0) {
addressItems.forEach(item => {
item.parkBte = this.getLocalTime(item.parkBte);
});
this.addressItems = [...addressItems];
} else {
this.addressItems = [];
}
}
});
@ -80,7 +108,7 @@ export class OneCarOrderViewtrackComponent implements OnInit {
// 获取司机轨迹
getDriverTrajectory() {
this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.i?.id }).subscribe(res => {
this.service.request(this.service.$api_get_getAppDriverPosition, { id: this.i.id }).subscribe(res => {
if (res) {
const points = res.tracks;
let list: any[] = [];
@ -91,7 +119,7 @@ export class OneCarOrderViewtrackComponent implements OnInit {
time: item.gtm
});
});
this.mapList = list;
this.mapList = list || [];
const addressItems = [...res.tracks];
if (addressItems) {
addressItems.forEach(item => {

View File

@ -1,5 +1,5 @@
<!-- 页头 -->
<page-header-wrapper [logo]="logo" title="车辆详情" [content]="content" [ngClass]="{'affix': scrollTop>210}">
<page-header-wrapper [logo]="logo" title="车辆详情" [content]="content" [ngClass]="{ affix: scrollTop > 210 }">
<ng-template #logo>
<button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
<i nz-icon nzType="left" nzTheme="outline"></i>
@ -7,23 +7,28 @@
</ng-template>
<ng-template #content>
<sv-container col="3">
<h2>车牌号:{{detailData?.carNo}}</h2>
<sv-title style="font-weight: 700;">
<h2>车牌号:{{ detailData?.carNo }}</h2>
<sv-title style="font-weight: 700">
<span *ngIf="detailData?.approvalStatus === 1 || detailData?.approvalStatus === '1'">未上传</span>
<span *ngIf="detailData?.approvalStatus === 0 || detailData?.approvalStatus === '0'">草稿</span>
<span *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">待审核</span>
<span *ngIf="detailData?.approvalStatus === 20 || detailData?.approvalStatus === '20'">已审核</span>
<span *ngIf="detailData?.approvalStatus === 30 || detailData?.approvalStatus === '30'">已驳回</span>
<span *ngIf="detailData?.approvalStatus === 40 || detailData?.approvalStatus === '40'">证件过期</span>
<div style="float: right;" *ngIf="detailData?.approvalStatus !== 20 && detailData?.approvalStatus !== '20'">
<ng-container *ngIf="!isEdit ">
<button nz-button nzType="default" nzDanger (click)="approveDriver()" acl
acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
<button nz-button nzType="default" nzDanger (click)="rejectedDriver()" acl
<div style="float: right" *ngIf="detailData?.approvalStatus !== 20 && detailData?.approvalStatus !== '20'">
<ng-container *ngIf="!isEdit">
<button nz-button nzType="default" nzDanger (click)="approveDriver()" acl acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
<button
nz-button
nzType="default"
nzDanger
(click)="rejectedDriver()"
acl
acl-ability="VEHICLE-AUDIT-DETAIL-reject"
*ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">驳回</button>
<button nz-button nzType="default" nzDanger (click)="ratify()" acl
acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</button>
*ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'"
>驳回</button
>
<button nz-button nzType="default" nzDanger (click)="ratify()" acl acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</button>
</ng-container>
<ng-container *ngIf="isEdit">
<button nz-button nzType="default" (click)="reset()">取消</button>
@ -41,14 +46,17 @@
</ng-template>
</page-header-wrapper>
<nz-card [class]="isEdit?'edit-box':'readOnly-box'">
<nz-card [class]="isEdit ? 'edit-box' : 'readOnly-box'">
<sv-container col="3">
<sv-title style="font-weight: 700;">车辆基础信息
</sv-title>
<sv-title style="font-weight: 700">车辆基础信息 </sv-title>
<sv label="车牌颜色">
<nz-select [(ngModel)]="detailData.carNoColor" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.carNoColor"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
</nz-select>
</sv>
@ -57,25 +65,46 @@
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
</nz-select> -->
<input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.carModel"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="车长">
<nz-select [(ngModel)]="detailData.carLength" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.carLength"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
</nz-select>
</sv>
<sv label="是否为挂车">
<nz-select [(ngModel)]="detailData.isTrailer" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.isTrailer"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option [nzValue]="false" nzLabel="否"></nz-option>
<nz-option [nzValue]="true" nzLabel="是"></nz-option>
</nz-select>
</sv>
<sv label="是否挂靠">
<nz-select [(ngModel)]="detailData.isSelf" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.isSelf"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option [nzValue]="false" nzLabel="否"></nz-option>
<nz-option [nzValue]="true" nzLabel="是"></nz-option>
</nz-select>
@ -84,23 +113,38 @@
<sv-container col="1" class="mt-md">
<sv label="车头照">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.carFrontPhotoWatermark,key:'carFrontPhotoWatermark',hover: 'PhotoWatermark2'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
"
>
</ng-container>
</sv>
</sv-container>
<nz-divider></nz-divider>
<sv-container col="3">
<sv-title style="font-weight: 700;">行驶证信息</sv-title>
<sv-title style="font-weight: 700">行驶证信息</sv-title>
<sv label="档案编号">
<input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.archivesNo"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="行驶证注册日期">
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
<nz-date-picker
[(ngModel)]="detailData.driverLicenseRegisterTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
></nz-date-picker>
</sv>
</sv-container>
@ -108,12 +152,24 @@
<sv label="行驶证到期日">
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
<nz-date-picker
[(ngModel)]="detailData.driverLicenseEndTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
></nz-date-picker>
</sv>
<sv label="行驶证签发机关">
<input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.driverLicenseSigningOrg"
[readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
style="width: '300px'"
type="text"
[(ngModel)]="detailData.driverLicenseSigningOrg"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
</sv-container>
@ -121,16 +177,32 @@
<sv label="行驶证发证日期">
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
<nz-date-picker
[(ngModel)]="detailData.driverLicenseGetTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
></nz-date-picker>
</sv>
<sv label="车辆识别代码">
<input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.carDistinguishCode"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="使用性质">
<nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.useNature"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option [nzValue]="'1'" nzLabel="营运"></nz-option>
<nz-option [nzValue]="'0'" nzLabel="非营运"></nz-option>
</nz-select>
@ -139,64 +211,127 @@
<sv-container col="3">
<sv label="载重(吨)">
<input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.carLoad"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="整备质量">
<input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.curbWeight"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="所有人">
<input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
style="width: '300px'"
type="text"
[(ngModel)]="detailData.carOwner"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
</sv-container>
<sv-container col="1">
<sv label="行驶证照片">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark',hover: 'FrontWatermark'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
"
>
</ng-container>
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoBackWatermark,key:'certificatePhotoBackWatermark',hover: 'BackWatermark'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
"
>
</ng-container>
</sv>
</sv-container>
<nz-divider></nz-divider>
<sv-container col="3" class="mt16">
<sv-title style="font-weight: 700;">道路运输证信息</sv-title>
<sv-title style="font-weight: 700">道路运输证信息</sv-title>
<sv label="道路运输证号">
<input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.roadTransportNo"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="经营许可证号">
<input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.roadTransportLicenceNo"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="发证日期">
<!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
<nz-date-picker
[(ngModel)]="detailData.roadTransportStartTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
></nz-date-picker>
</sv>
<sv label="有效期至">
<!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
<nz-date-picker
[(ngModel)]="detailData.roadTransportEndTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
></nz-date-picker>
</sv>
<sv label="道路运输证照片">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.roadTransportPhotoWatermark,key:'roadTransportPhotoWatermark', hover: 'Watermark'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
"
>
</ng-container>
</sv>
</sv-container>
<nz-divider></nz-divider>
<sv-container col="2" class="mt16">
<sv-title style="font-weight: 700;">认证司机</sv-title>
<sv-title style="font-weight: 700">认证司机</sv-title>
</sv-container>
<st #st [bordered]="true" [columns]="columns" [data]="service.$api_get_queryDriverByCarId"
[req]="{ method: 'POST', allInBody: true, params: reqParams }" [res]="{ reName: { list: 'data', total: 'data' } }"
[ngStyle]="{ margin: '1rem 0' }" multiSort size="small" [page]="{ show: false }">
<st
#st
[bordered]="true"
[columns]="columns"
[scroll]="{x: '1200px'}"
[data]="service.$api_get_queryDriverByCarId"
[req]="{ method: 'POST', allInBody: true, params: reqParams }"
[res]="{ reName: { list: 'data', total: 'data' } }"
[ngStyle]="{ margin: '1rem 0' }"
multiSort
size="small"
[page]="{ show: false }"
>
<ng-template st-row="auditStatusEnum" let-item let-index="index">
<div>
<span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
@ -210,7 +345,6 @@
</st>
</nz-card>
<ng-template #redectModal>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="120">
@ -218,30 +352,42 @@
{{ detailData?.carNo }}
</se>
<se [col]="1" label="备注" required>
<textarea nz-input rows="3" style="margin-left: 14px;" [(ngModel)]="approvalOpinion"></textarea>
<textarea nz-input rows="3" style="margin-left: 14px" [(ngModel)]="approvalOpinion"></textarea>
</se>
</div>
</div>
</ng-template>
<ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
<nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
[nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
[nzDisabled]="!isEdit || disabledUpload" (nzChange)="changeUpload($event,key)">
<nz-upload
class="avatar-uploader"
[nzAction]="uploadURl"
nzName="multipartFile"
nzListType="picture-card"
[nzShowUploadList]="false"
nzFileType="image/png,image/jpeg,image/jpg,image/gif"
[nzDisabled]="!isEdit || disabledUpload"
(nzChange)="changeUpload($event, key)"
>
<ng-container *ngIf="!image && isEdit">
<i class="upload-icon" nz-icon [nzType]="false ? 'loading' : 'plus'"></i>
<div class="ant-upload-text">上传</div>
</ng-container>
<div *ngIf="image" (mouseover)="detailData[hover]=true" (mouseleave)="detailData[hover]=false"
(click)="$event.cancelBubble=true" class="image-hover">
<img (click)="showImg(image)" [src]="image" style="width: 200px;height: 160px;" />
<div
*ngIf="image"
(mouseover)="detailData[hover] = true"
(mouseleave)="detailData[hover] = false"
(click)="$event.cancelBubble = true"
class="image-hover"
>
<img (click)="showImg(image)" [src]="image" style="width: 200px; height: 160px" />
<div class="mask" *ngIf="detailData[hover] && isEdit"></div>
<div class="mask-over" *ngIf="detailData[hover] && isEdit">
<i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
<div style="display: flex;align-items: center;">
<div style="display: flex; align-items: center">
<i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
</div>
</div>
</div>
</nz-upload>
</ng-template>
</ng-template>

View File

@ -61,10 +61,10 @@ export class VehicleComponentsAuditDetailComponent implements OnInit, OnDestroy
initST() {
this.columns = [
{ title: '司机姓名', index: 'name', className: 'text-center' },
{ title: '司机手机号', index: 'mobile', className: 'text-center' },
{ title: '身份证号', index: 'idCardNo', className: 'text-center' },
{ title: '挂靠协议', render: 'auditStatusEnum', className: 'text-center' },
{ title: '司机姓名', index: 'name', width: 150, className: 'text-center' },
{ title: '司机手机号', index: 'mobile', width: 200,className: 'text-center' },
{ title: '身份证号', index: 'idCardNo', width: 200, className: 'text-center' },
{ title: '挂靠协议', render: 'auditStatusEnum', width: 100,className: 'text-center' },
{
title: '车主申明/挂靠协议',
fixed: 'right',

View File

@ -8,11 +8,10 @@
</ng-template>
<ng-template #content>
<sv-container col="1">
<sv-title style="font-weight: 700;">
<div style="float: right;">
<sv-title style="font-weight: 700">
<div style="float: right">
<ng-container *ngIf="!isEdit">
<button nz-button nzType="default" nzDanger (click)="ratify()" acl
acl-ability="VEHICLE-LIST-DETAIL-save">修改</button>
<button nz-button nzType="default" nzDanger (click)="ratify()" acl acl-ability="VEHICLE-LIST-DETAIL-save">修改</button>
</ng-container>
<ng-container *ngIf="isEdit">
<button nz-button nzType="default" (click)="reset()">取消</button>
@ -23,45 +22,76 @@
</sv-container>
<sv-container col="3">
<sv-title style="font-weight: 700;">车辆基础信息</sv-title>
<sv-title style="font-weight: 700">车辆基础信息</sv-title>
<sv label="车牌号">
<input nz-input type="text" [(ngModel)]="detailData.carNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.carNo"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="车牌颜色">
<!-- <input nz-input type="text" [(ngModel)]="detailData.carNoColor" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-select [(ngModel)]="detailData.carNoColor" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.carNoColor"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
</nz-select>
</sv>
<sv label="车型">
<!-- <input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-select [(ngModel)]="detailData.carModel" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.carModel"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
</nz-select>
</sv>
<sv label="车长(米)">
<!-- <input nz-input type="text" [(ngModel)]="detailData.carLength" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-select [(ngModel)]="detailData.carLength" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.carLength"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
</nz-select>
</sv>
<sv label="是否挂靠">
<nz-select [(ngModel)]="detailData.isSelf" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.isSelf"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option [nzValue]="false" nzLabel="否"></nz-option>
<nz-option [nzValue]="true" nzLabel="是"></nz-option>
</nz-select>
</sv>
<sv label="是否为挂车">
<nz-select [(ngModel)]="detailData.isTrailer" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.isTrailer"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option [nzValue]="false" nzLabel="否"></nz-option>
<nz-option [nzValue]="true" nzLabel="是"></nz-option>
</nz-select>
@ -71,7 +101,11 @@
<sv label="车头照">
<!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]"></app-imagelist> -->
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.carFrontPhotoWatermark,key:'carFrontPhotoWatermark',hover: 'PhotoWatermark2'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
"
>
</ng-container>
</sv>
</sv-container>
@ -79,33 +113,62 @@
</page-header-wrapper>
<nz-card>
<sv-container col="3">
<sv-title style="font-weight: 700;">行驶证信息</sv-title>
<sv-title style="font-weight: 700">行驶证信息</sv-title>
<sv label="档案编号">
<input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.archivesNo"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="车辆品牌">
<input nz-input type="text" [(ngModel)]="detailData.carBrand" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.carBrand"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="行驶证注册日期">
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
<nz-date-picker
[(ngModel)]="detailData.driverLicenseRegisterTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
>
</nz-date-picker>
</sv>
</sv-container>
<sv-container col="3">
<sv label="行驶证到期日">
<nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
<nz-date-picker
[(ngModel)]="detailData.driverLicenseEndTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
>
</nz-date-picker>
</sv>
<sv label="行驶证签发机关">
<input style="width: '300px'" nz-input type="text" [(ngModel)]="detailData.driverLicenseSigningOrg"
[readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
style="width: '300px'"
nz-input
type="text"
[(ngModel)]="detailData.driverLicenseSigningOrg"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
</sv-container>
@ -113,17 +176,33 @@
<sv label="行驶证发证日期">
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
<nz-date-picker
[(ngModel)]="detailData.driverLicenseGetTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
>
</nz-date-picker>
</sv>
<sv label="车辆识别代码">
<input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.carDistinguishCode"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="使用性质">
<nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-select
[(ngModel)]="detailData.useNature"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzShowArrow]="isEdit"
[nzDisabled]="!isEdit"
>
<nz-option [nzValue]="'1'" nzLabel="营运"></nz-option>
<nz-option [nzValue]="'0'" nzLabel="非营运"></nz-option>
</nz-select>
@ -132,68 +211,130 @@
<sv-container col="3">
<sv label="载重(吨)">
<input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.carLoad"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="整备质量">
<input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.curbWeight"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="所有人">
<input style="width: '300px'" nz-input type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
style="width: '300px'"
nz-input
type="text"
[(ngModel)]="detailData.carOwner"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
</sv-container>
<sv-container col="1">
<sv label="行驶证照片">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark',hover: 'FrontWatermark'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
"
>
</ng-container>
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoBackWatermark,key:'certificatePhotoBackWatermark',hover: 'BackWatermark'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
"
>
</ng-container>
</sv>
</sv-container>
<nz-divider></nz-divider>
<sv-container col="3" class="mt16">
<sv-title style="font-weight: 700;">道路运输证信息</sv-title>
<sv-title style="font-weight: 700">道路运输证信息</sv-title>
<sv label="道路运输证号">
<input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.roadTransportNo"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="经营许可证号">
<input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
<input
nz-input
type="text"
[(ngModel)]="detailData.roadTransportLicenceNo"
[readonly]="!isEdit"
[nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'"
/>
</sv>
<sv label="发证日期">
<!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
<nz-date-picker
[(ngModel)]="detailData.roadTransportStartTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
>
</nz-date-picker>
</sv>
<sv label="有效期至">
<!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''">
<nz-date-picker
[(ngModel)]="detailData.roadTransportEndTime"
[nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit ? '' : '-'"
[nzBorderless]="!isEdit"
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
>
</nz-date-picker>
</sv>
<sv label="道路运输证照片">
<!-- <app-imagelist [imgList]="[detailData?.roadTransportPhoto,detailData?.roadTransportPhotoWatermark ]"></app-imagelist> -->
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.roadTransportPhotoWatermark,key:'roadTransportPhotoWatermark', hover: 'Watermark'}">
*ngTemplateOutlet="
uploadTemplate;
context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
"
>
</ng-container>
</sv>
</sv-container>
<nz-divider></nz-divider>
<sv-container col="2" class="mt16">
<sv-title style="font-weight: 700;">认证司机</sv-title>
<sv-title style="font-weight: 700">认证司机</sv-title>
</sv-container>
<st #st [bordered]="true" [columns]="columns" [data]="service.$api_get_queryDriverByCarId"
[req]="{ method: 'POST', allInBody: true, params: reqParams }"
[res]="{ reName: { list: 'data', total: 'data' } }" [ngStyle]="{ margin: '1rem 0' }" multiSort size="small"
[page]="{ show: false }">
<st
#st
[bordered]="true"
[columns]="columns"
[scroll]="{x: '1200px'}"
[data]="service.$api_get_queryDriverByCarId"
[req]="{ method: 'POST', allInBody: true, params: reqParams }"
[res]="{ reName: { list: 'data', total: 'data' } }"
[ngStyle]="{ margin: '1rem 0' }"
multiSort
size="small"
[page]="{ show: false }"
>
<ng-template st-row="auditStatusEnum" let-item let-index="index">
<div>
<span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
@ -208,8 +349,13 @@
</nz-card>
</ng-container>
<nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate" (nzOnOk)="handleOK()"
(nzOnCancel)="handleCancel('2')">
<nz-modal
[(nzVisible)]="isVisible"
[nzWidth]="600"
[nzFooter]="nzModalFooterEvaluate"
(nzOnOk)="handleOK()"
(nzOnCancel)="handleCancel('2')"
>
<ng-container *nzModalContent>
<nz-tabset>
<nz-tab nzTitle="我的评价">
@ -219,9 +365,7 @@
</div>
</nz-tab>
<nz-tab nzTitle="司机评价">
<div>
暂无评价内容
</div>
<div> 暂无评价内容 </div>
</nz-tab>
</nz-tabset>
</ng-container>
@ -232,23 +376,35 @@
</nz-modal>
<ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
<nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
[nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
[nzDisabled]="!isEdit || disabledUpload" (nzChange)="changeUpload($event,key)">
<nz-upload
class="avatar-uploader"
[nzAction]="uploadURl"
nzName="multipartFile"
nzListType="picture-card"
[nzShowUploadList]="false"
nzFileType="image/png,image/jpeg,image/jpg,image/gif"
[nzDisabled]="!isEdit || disabledUpload"
(nzChange)="changeUpload($event, key)"
>
<ng-container *ngIf="!image && isEdit">
<i class="upload-icon" nz-icon [nzType]="false ? 'loading' : 'plus'"></i>
<div class="ant-upload-text">上传</div>
</ng-container>
<div *ngIf="image" (mouseover)="detailData[hover]=true" (mouseleave)="detailData[hover]=false"
(click)="$event.cancelBubble=true" class="image-hover">
<img (click)="showImg(image)" [src]="image" style="width: 200px;height: 160px;" />
<div
*ngIf="image"
(mouseover)="detailData[hover] = true"
(mouseleave)="detailData[hover] = false"
(click)="$event.cancelBubble = true"
class="image-hover"
>
<img (click)="showImg(image)" [src]="image" style="width: 200px; height: 160px" />
<div class="mask" *ngIf="detailData[hover] && isEdit"></div>
<div class="mask-over" *ngIf="detailData[hover] && isEdit">
<i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
<div style="display: flex;align-items: center;">
<div style="display: flex; align-items: center">
<i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
</div>
</div>
</div>
</nz-upload>
</ng-template>
</ng-template>

View File

@ -89,9 +89,10 @@ export class VehicleComponentsListDetailComponent implements OnInit {
}
initST() {
this.columns = [
{ title: '司机姓名', index: 'name', width: 300, className: 'text-center' },
{ title: '司机手机号', index: 'mobile', width: 300, className: 'text-center' },
{ title: '挂靠协议', render: 'auditStatusEnum', className: 'text-center' },
{ title: '司机姓名', index: 'name', width: 150, className: 'text-center' },
{ title: '司机手机号', index: 'mobile', width: 200, className: 'text-center' },
{ title: '身份证号', index: 'idCardNo',width: 200, className: 'text-center' },
{ title: '挂靠协议', render: 'auditStatusEnum', width: 100,className: 'text-center' },
{ title: '录入人员', index: 'saveUser', className: 'text-center' },
{
title: '车主申明/挂靠协议',