手机 适配

xufenglei

2018-08-03 ba26f3f66151ee19b0230c38fdbb989886e84c8c

 src/app/routes/raise-dust/statistical-query/statistical-query.component.html

@@ -1,4 +1,70 @@
<div class="content__title">

    <h1>Page Name</h1>

    <h1>数据查询</h1>

</div>

<pro-header [title]="'Page Name'"></pro-header>



<nz-card [nzBordered]="false">

   <form nz-form  (ngSubmit)="reportQuery()" [nzLayout]="'inline'">

      <div nz-row [nzGutter]="24" >

         <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">

            <div nz-form-item class="d-flex">

               <div nz-form-label class="label-width-70">

                  <label>项目</label>

               </div>

               <div nz-form-control class="flex-1">

                  <nz-select [(ngModel)]="sensor" name="sensor" [nzSize]="'large'" [nzPlaceHolder]="'请选择  项目'">

                     <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option"></nz-option>

                     </nz-select>

               </div>

            </div>

         </div>

         <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

            <div nz-form-item class="d-flex">

               <div nz-form-label class="label-width-70">

                  <label>监测站点</label>

               </div>

               <div nz-form-control class="flex-1">

                  <nz-select [(ngModel)]="monitorPoint" name="monitorPoint" [nzPlaceHolder]="'请选择 监测站点'" [nzSize]="'large'"  
                     [nzNotFoundContent]="'无法找到'"  nzShowSearch> 
                     <nz-option *ngFor="let option of monitorPointOptions"  [nzLabel]="option['name']" [nzValue]="option"> </nz-option> 
                  </nz-select>

               </div>

            </div>

         </div>

         <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

            <div nz-form-item class="d-flex">

               <div nz-form-label class="label-width-70">

                  <label>类型</label>

               </div>

               <div nz-form-control class="flex-1">

                  <nz-select [(ngModel)]="timeType" name="timeType" [nzSize]="'large'">

                     <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>

                     </nz-select>

               </div>

            </div>

         </div>

         <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

            <div nz-form-item class="d-flex">

               <div nz-form-label class="label-width-70">

                  <label>时间</label>

               </div>

               <div nz-form-control class="flex-1">

                  <nz-datepicker style="width: 100%;" [(ngModel)]="time" name="time" [nzFormat]="timeType.format" [nzDisabledDate]="_disabledDate" [nzAllowClear]="false"

                     [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker>

               </div>

            </div>

         </div>

      </div>



      <div nz-row [nzGutter]="24">

         <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

            <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">

               查询

            </button>

         </div>

      </div>

   </form>

</nz-card>



<nz-card [nzBordered]="false">

   <div id="mydiv" style="height: 485.35px; width: 100%"></div>

</nz-card>