车辆UI优化

src/app/routes/order-management/components/risk-detail/risk-detail.component.html

@@ -1,5 +1,5 @@
 <!--
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2021-12-16 10:19:08
@@ -15,14 +15,27 @@
     </button>
   </ng-template>
 </page-header-wrapper>
-<nz-card nzTitle="运单信息">
-  <sv-container labelWidth="150" col="2">
-    <sv label="订单号">{{i?.billCode}}</sv>
+<nz-card [nzBorderless]="true" class="mb0">
+  <div class="mb-xs" nz-row>
+    <div nz-col nzSpan="16">
+      <button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.representationsStatusLabel }}</button>
+      <b class="ml-md text-md">订单号 : {{ i?.billCode }}</b>
+    </div>
+  </div>
+  <nz-divider class="divider-margin"></nz-divider>
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>运单信息</span>
+  </div>
+  <sv-container labelWidth="100" col="3" class="new-sv-container">
+    <!-- <sv label="订单号">{{i?.billCode}}</sv>
     <sv label="申诉状态">
       <span >{{i?.representationsStatusLabel}}</span>
-    </sv>
-    <sv label="承运司机">{{i?.driverName ? i?.driverName + '/': ''}} {{i?.driverPhone ?i?.driverPhone + '/': '' }}  {{i?.carNo}}</sv>
-    <sv label="车队长"  *ngIf="i?.payeeId !== i?.driverId"> {{i?.carCaptainName ? i?.carCaptainName+ '/' : ''}}{{i?.carCaptainPhone}} </sv>
+    </sv> -->
+    <sv label="承运司机">{{i?.driverName ? i?.driverName + '/': ''}} {{i?.driverPhone ?i?.driverPhone + '/': '' }}
+      {{i?.carNo}}</sv>
+    <sv label="车队长" *ngIf="i?.payeeId !== i?.driverId"> {{i?.carCaptainName ? i?.carCaptainName+ '/' :
+      ''}}{{i?.carCaptainPhone}} </sv>
     <sv label="装货时间">{{i?.loadTime}}</sv>
     <sv label="卸货时间">{{i?.unloadTime}}</sv>
     <sv label="装货地">{{i?.loadingPlace}}</sv>
@@ -43,8 +56,13 @@
     </ng-template>
   </sf>
 </nz-card> -->
-<nz-card nzTitle="申诉信息" >
-  <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="i" [formData]="i">
+<nz-card [nzBorderless]="true" class="mb0">
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>申诉信息</span>
+  </div>
+  <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="i" [formData]="i"
+    class="new-sf-container">
     <ng-template sf-template="uploadVanchor" let-schema="schema" let-me let-ui="ui">
       <!-- <nz-upload *ngIf="me.formProperty.value" [nzFileList]="me.formProperty.value" [nzShowButton]="false"
         [nzShowUploadList]="{showRemoveIcon:false}">
@@ -53,7 +71,11 @@
     </ng-template>
   </sf>
 </nz-card>
-<nz-card class="dealBox" nzTitle="申诉处理">
+<nz-card [nzBorderless]="true" class="dealBox mb0">
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>申诉处理</span>
+  </div>
   <nz-timeline nzMode="left">
     <nz-timeline-item [nzLabel]="item?.operatorTimestamp" nzColor="green" *ngFor="let item of logList">
       <div>{{item?.operationContent}}</div>

src/app/routes/order-management/components/risk-detail/risk-detail.component.ts

@@ -31,12 +31,11 @@ export class OrderManagementRiskDetailComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    if (this.id)
-    {
+    if (this.id) {
       this.getDetail(this.id);
       this.initSF();
-    } 
-    
+    }
+
   }
   initSF() {
     this.schema = {
@@ -77,53 +76,43 @@ export class OrderManagementRiskDetailComponent implements OnInit {
 
     this.ui = {
       '*': {
-        spanLabelFixed: 180,
+        spanLabelFixed: 100,
         grid: { span: 18 },
       },
-      $title1: {
-        spanLabelFixed: 0,
-      },
-      $title2: {
-        spanLabelFixed: 0,
-      },
-      $title3: {
-        spanLabelFixed: 0,
-      },
-      $unit: {
-        spanLabelFixed: 20,
-        grid: { span: 3 },
-      },
       $uploadVanchor: {
-        spanLabelFixed: 180,
+        spanLabelFixed: 100,
         grid: { span: 24 },
       },
+      $representationsDescribe: {
+        grid: { span: 24 },
+      }
     };
   }
-    /**
-   * 获取详情
-   * @param id
-   */
-     getDetail(id: string) {
-      this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
-        if (res) {
-          this.i = Object.assign({}, res);
-          console.log(this.i);
-          let list: any = [];
-          this.i.fileArr.map((item: any, index: number) => {
-            const obj = {
-              uid: index,
-              name: '文件' + (index + 1),
-              status: 'done',
-              url: item,
-            };
-            list.push(obj);
-          });
-          this.i.uploadVanchor = list;
-          this.initSF();
-          this.getLog(this.i?.billCode);
-        }
-      })
-    }
+  /**
+ * 获取详情
+ * @param id
+ */
+  getDetail(id: string) {
+    this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
+      if (res) {
+        this.i = Object.assign({}, res);
+        console.log(this.i);
+        let list: any = [];
+        this.i.fileArr.map((item: any, index: number) => {
+          const obj = {
+            uid: index,
+            name: '文件' + (index + 1),
+            status: 'done',
+            url: item,
+          };
+          list.push(obj);
+        });
+        this.i.uploadVanchor = list;
+        this.initSF();
+        this.getLog(this.i?.billCode);
+      }
+    })
+  }
   // getDetail(id: string) {
 
   //   this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
@@ -152,9 +141,9 @@ export class OrderManagementRiskDetailComponent implements OnInit {
   goBack() {
     window.history.go(-1)
   }
- /**
-   * 获取操作日志
-   */
+  /**
+    * 获取操作日志
+    */
   getLog(operateObject: any) {
     this.service.request(this.service.$api_get_risk_order_log, { operateObject, operateType: '8', size: 100 }).subscribe(res => {
       this.logList = res?.records;