<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-04-06 10:57:56
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-19 14:01:38
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<!-- 页头 -->
<!-- <page-header-wrapper [title]="'运营报表'"></page-header-wrapper> -->
<div>
  <div style="position: relative">
    <h1 style="display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; font-size: 20px; font-weight: 700"
      >运多星网络货运平台</h1
    >
    <div style="position: absolute; right: 0; display: flex">
      <img src="../../../../../assets/images/oclock.svg" alt="" />&nbsp;
      <span style="font-size: 16px; margin-top: 5px">{{ todayTime }}</span>
    </div>
  </div>

  <h1 style="display: flex; justify-content: center; align-items: center; padding: 0; font-size: 20px; font-weight: 700"
    >实时交易监控</h1
  >
</div>
<div nz-row [nzGutter]="24">
  <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
    <nz-card nzTitle="2022全年交易情况">
      <nz-row [nzGutter]="16">
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(allDeal?.dealAmount | currency)!" [nzTitle]="'成交额'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(allDeal?.settlementAmount | currency)!" [nzTitle]="'结算额'"></nz-statistic>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="16">
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(allDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(allDeal?.weight | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
        </nz-col>
      </nz-row>
    </nz-card>
    <nz-card nzTitle="本月交易趋势">
      <app-financetable-curve-min #curve [chartData]="chartData2"></app-financetable-curve-min>
    </nz-card>
    <nz-card nzTitle="实时货源" style="height: 400px">
      <st
        #st
        multiSort
        [columns]="columns"
        [scroll]="{ y: '280px' }"
        [data]="service.$api_getRealTimeSupply"
        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
        [res]="{ reName: { list: 'data' } }"
        [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
        [loading]="service.http.loading"
      >
        <ng-template st-row="index" let-item let-index="index">
          {{ index + 1 }}
        </ng-template>
        <ng-template st-row="weight" let-item let-index="index">
          {{ item.weight ? item.weight + '吨' : '' }}
          {{ item.volume ? item.volume + '方' : '' }}
        </ng-template>
        <ng-template st-row="weight" let-item let-index="index">
          {{ item.weight ? item.weight + '吨' : '' }}
          {{ item.volume ? item.volume + '方' : '' }}
        </ng-template>
      </st>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
    <nz-card>
      <nz-row [nzGutter]="24">
        <nz-col [nzSpan]="8">
          <nz-statistic [nzValue]="(headDeal?.todayAmount | currency)!" [nzTitle]="'今日交易额'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzValue]="(headDeal?.monthAmount | currency)!" [nzTitle]="'本月交易额'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzValue]="(headDeal?.cumulativeAmount | currency)!" [nzTitle]="'累计交易额'"></nz-statistic>
        </nz-col>
      </nz-row>
    </nz-card>
    <div style="min-height: 550px">
      <app-datatable-customindex-map style="max-height: 680px" #map [chartData]="chartData"></app-datatable-customindex-map>
    </div>
    <nz-card>
      <nz-row [nzGutter]="24">
        <g2-bar #bar height="350" [delay]="300" repaint="true" [title]="'本月发货量排名'" [data]="salesData2" (ready)="genData()"></g2-bar>
      </nz-row>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
    <nz-card>
      <nz-row [nzGutter]="24">
        <nz-col [nzSpan]="6">
          <nz-statistic [nzValue]="(classifyDeal?.enterpriseTotal | number)!" [nzTitle]="'货主'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="6">
          <nz-statistic [nzValue]="(classifyDeal?.partnerTotal | number: '1.0-2')!" [nzTitle]="'合伙人'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="6">
          <nz-statistic [nzValue]="(classifyDeal?.driverTotal | number)!" [nzTitle]="'司机'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="6">
          <nz-statistic [nzValue]="(classifyDeal?.carTotal | number: '1.0-2')!" [nzTitle]="'车辆'"></nz-statistic>
        </nz-col>
      </nz-row>
    </nz-card>
    <nz-card nzTitle="今日交易情况">
      <nz-row [nzGutter]="16">
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(todaysDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(todaysDeal?.billEffectiveQuantity | number: '1.0-2')!" [nzTitle]="'有效订单'"></nz-statistic>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="16">
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(todaysDeal?.amount | currency)!" [nzTitle]="'运输金额(元)'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-statistic [nzValue]="(todaysDeal?.weight | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
        </nz-col>
      </nz-row>
    </nz-card>
    <nz-card nzTitle="本月运营质量监测">
      <nz-row [nzGutter]="24">
        <nz-col [nzSpan]="12">
          <div style="width: 200px; display: inline-block">
            <g2-pie percent="28" subTitle="准点率" total="28%" height="100"></g2-pie>
          </div>
        </nz-col>
        <nz-col [nzSpan]="12">
          <div style="width: 200px; display: inline-block">
            <g2-pie percent="22" subTitle="货损率" total="22%" height="100"></g2-pie>
          </div>
        </nz-col>
        <nz-col [nzSpan]="12">
          <div style="width: 200px; display: inline-block">
            <g2-pie percent="22" subTitle="空车率" total="22%" height="100"></g2-pie>
          </div>
        </nz-col>
        <nz-col [nzSpan]="12">
          <div style="width: 200px; display: inline-block">
            <g2-pie percent="22" subTitle="结算率" total="22%" height="100" width="200"></g2-pie>
          </div>
        </nz-col>
      </nz-row>
    </nz-card>
    <nz-card nzTitle="实时运单风控" style="height: 400px">
      <st
        #st
        multiSort
        [scroll]="{ y: '280px' }"
        [columns]="orderColumns"
        [data]="service.$api_getRealTimeWaybillRiskControl"
        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqOrderParams }"
        [res]="{ reName: { list: 'data' } }"
        [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
        [loading]="service.http.loading"
      >
        <ng-template st-row="carNo" let-item let-index="index">
          {{ item?.driverName }}{{ item?.carNo ? '/' + item?.carNo : '' }}
        </ng-template>
      </st>
    </nz-card>
  </div>
</div>
