提交 更新

fengxiang

2018-07-13 6c22c02b40f94e7511d6943a4d77bbe0ec1ade12

 src/app/routes/home-page/home-page/home-page.component.html

@@ -1,37 +1,159 @@
<div class="content__title">
  <h1>实时数据概览</h1>
    <h1>实时数据概览</h1>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">AQI</p>
      </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.api }}</div>
                <p class="text-nowrap mb0">AQI</p>
            </div>
        </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">温度</p>
      </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.temperature }} ℃</div>
                <p class="text-nowrap mb0">温度</p>
            </div>
        </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">风向</p>
      </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.windDirection }}</div>
                <p class="text-nowrap mb0">风向</p>
            </div>
        </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md">
      <div nz-col nzSpan="24" class="p-md text-white" style="text-align: center;">
        <div class="h2 mt0">123,456</div>
        <p class="text-nowrap mb0">PM2.5</p>
      </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
        <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">
            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
                <div style="height: 40px;" class="h2 mt0">{{ cardData.pm25 }} mg/m³</div>
                <p class="text-nowrap">PM2.5</p>
            </div>
        </div>
    </div>
  </div>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
        <chart-card [title]="'API优良天数'" total="216天" contentHeight="46px">
            <mini-progress height="46" percent="60" target="60" strokeWidth="8" color="#13C2C2"></mini-progress>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
        <chart-card [title]="'PM2.5优良天数'" total="158天" contentHeight="46px">
            <mini-progress height="46" percent="50" target="50" strokeWidth="8" color="#108ee9"></mini-progress>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
        <chart-card [title]="'PM10优良天数'" total="112天" contentHeight="46px">
            <mini-progress height="46" percent="40" target="40" strokeWidth="8" color="#00a854"></mini-progress>
        </chart-card>
    </div>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzMd="24">
        <nz-card [nzBordered]="false">
            <ng-template #title>
                AQI因子柱形图 &nbsp;
                <nz-dropdown>
                    <a class="ant-dropdown-link" nz-dropdown>
                     PM2.5 <i class="anticon anticon-down"></i>
                    </a>
                    <ul nz-menu>
                      <li nz-menu-item>
                        PM10
                      </li>
                      <li nz-menu-item>
                        一氧化碳
                      </li>
                      <li nz-menu-item>
                        二氧化氮
                      </li>
                      <li nz-menu-item>
                        二氧化硫
                      </li>
                      <li nz-menu-item>
                        臭氧
                      </li>
                    </ul>
                  </nz-dropdown>
            </ng-template>
            <bar height="275" [data]="salesData"></bar>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzMd="24">
        <nz-card [nzBordered]="false">
            <ng-template #title>
               监控站点GIS分布
               <small class="text-sm font-weight-normal">总共: 128</small>
            </ng-template>
            <iframe style="width: 100%; height: 500px;" target="_top" src="http://monitor-api2.7drlb.com/screen/map-page?areaCode=320583&accountId=1" frameborder="0"></iframe>
        </nz-card>
    </div>
  </div>
  <div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col style="display: block;" nzXs="24" nzMd="24">
       <nz-card [nzBordered]="false">
            <ng-template #title>
                    空气质量预报 &nbsp;
                    <nz-dropdown>
                        <a class="ant-dropdown-link" nz-dropdown>
                         PM2.5 <i class="anticon anticon-down"></i>
                        </a>
                        <ul nz-menu>
                          <li nz-menu-item>
                            PM10
                          </li>
                          <li nz-menu-item>
                            一氧化碳
                          </li>
                          <li nz-menu-item>
                            二氧化氮
                          </li>
                          <li nz-menu-item>
                            二氧化硫
                          </li>
                          <li nz-menu-item>
                            臭氧
                          </li>
                        </ul>
                      </nz-dropdown>
                </ng-template>
            <div echarts style="margin-top: 12px;" class="line-chart" [options]="aqiChartOption" [loading]="aqiChartLoading" (chartInit)="onApiChartInit($event)"></div>
       </nz-card>
    </div>
  </div>
  <div nz-row [nzGutter]="24" class="pt-lg">
        <div nz-col style="display: block;" nzXs="24" nzMd="24">
           <nz-card [nzBordered]="false">
                <ng-template #title>
                        气象预报 &nbsp;
                        <nz-dropdown>
                            <a class="ant-dropdown-link" nz-dropdown>
                             温度<i class="anticon anticon-down"></i>
                            </a>
                            <ul nz-menu>
                              <li nz-menu-item>
                                气压
                              </li>
                              <li nz-menu-item>
                                湿度
                              </li>
                              <li nz-menu-item>
                                风向
                              </li>
                              <li nz-menu-item>
                                风速
                              </li>
                            </ul>
                          </nz-dropdown>
                    </ng-template>
                <div echarts style="margin-top: 12px;" class="line-chart" [options]="meteChartOption" [loading]="meteChartLoading" (chartInit)="onMeteChartInit($event)"></div>
           </nz-card>
        </div>
      </div>