Revert "框架调整"

fengxiang

2018-07-11 12b04f145bae740e1971036b1e2dfc1bc224d17b

 src/app/routes/dashboard/monitor/monitor.component.html

New file
@@ -0,0 +1,78 @@
<div nz-row [nzGutter]="24" class="pt-lg">
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="18">
    <nz-card nzTitle="活动实时交易情况" [nzBordered]="false" class="mb-lg">
      <div nz-row>
        <div nz-col nzXs="24" nzSm="12" nzMd="6">
          <number-info subTitle="今日交易总额" [total]="'124,543,233'" suffix="元"></number-info>
        </div>
        <div nz-col nzXs="24" nzSm="12" nzMd="6">
          <number-info subTitle="销售目标完成率" [total]="'92%'"></number-info>
        </div>
        <div nz-col nzXs="24" nzSm="12" nzMd="6">
          <number-info subTitle="活动剩余时间" [total]="lastTotalTime">
            <ng-template #lastTotalTime>
              <count-down [target]="30"></count-down>
            </ng-template>
          </number-info>
        </div>
        <div nz-col nzXs="24" nzSm="12" nzMd="6">
          <number-info subTitle="每秒交易总额" [total]="234" suffix="元"></number-info>
        </div>
      </div>
      <div class="map-chart">
        <nz-tooltip [nzTitle]="'等待后期实现'">
          <img nz-tooltip src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" alt="map" />
        </nz-tooltip>
      </div>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="6">
    <nz-card nzTitle="活动情况预测" [nzBordered]="false" class="mb-lg">
      <div class="active-chart">
        <number-info subTitle="目标评估" total="有望达到预期"></number-info>
        <g2-mini-area [animate]="false" [line]="true" [borderWidth]="2" [height]="84" [yAxis]="activeYAxis" [data]="activeData"></g2-mini-area>
        <ng-container *ngIf="activeData?.length > 0">
          <div class="active-grid">
            <p>{{activeStat.max}} 亿元</p>
            <p>{{activeStat.min}} 亿元</p>
          </div>
          <div class="active-legend">
            <span>00:00</span>
            <span>{{activeStat.t1}}</span>
            <span>{{activeStat.t2}}</span>
          </div>
        </ng-container>
      </div>
    </nz-card>
    <nz-card nzTitle="券核效率" [nzBordered]="false" [nzBodyStyle]="{'text-align': 'center'}" class="mb-lg">
      <g2-gauge [title]="'跳出率'" [height]="180" [percent]="87" [format]="couponFormat"></g2-gauge>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="24">
  <div nz-col nzXs="24" nzSm="24" nzLg="12" class="mb-lg">
    <nz-card nzTitle="各品类占比" [nzBordered]="false" class="pie-card">
      <div nz-row [nzGutter]="4" style="padding:16px 0">
        <div nz-col [nzSpan]="8">
          <g2-pie [animate]="false" [percent]="28" subTitle="中式快餐" total="28%" [height]="128" [lineWidth]="2"></g2-pie>
        </div>
        <div nz-col [nzSpan]="8">
          <g2-pie [animate]="false" color="#5DDECF" [percent]="22" subTitle="西餐" total="22%" [height]="128" [lineWidth]="2"></g2-pie>
        </div>
        <div nz-col [nzSpan]="8">
          <g2-pie [animate]="false" color="#2FC25B" [percent]="32" subTitle="火锅" total="32%" [height]="128" [lineWidth]="2"></g2-pie>
        </div>
      </div>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzSm="24" nzLg="6" class="mb-lg">
    <nz-card nzTitle="热门搜索" [nzBordered]="false" [nzBodyStyle]="{'overflow': 'hidden'}">
      <g2-tag-cloud [data]="tags" [height]="165"></g2-tag-cloud>
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzSm="24" nzLg="6" class="mb-lg">
    <nz-card nzTitle="资源剩余" [nzBordered]="false" [nzBodyStyle]="{'overflow': 'hidden'}">
      <g2-water-wave [title]="'补贴资金剩余'" [percent]="34" [height]="165"></g2-water-wave>
    </nz-card>
  </div>
</div>