扬尘监控-实时监控和警告

xufenglei

2018-08-02 e97df5aa8edc8e2737d5cb0dab4314871cd3bf71

 src/app/routes/reports/query/query.component.html

@@ -4,12 +4,10 @@
<nz-card [nzBordered]="false">
    <form nz-form  [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
            <div nz-col [nzSpan]="6" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div  [ngStyle]="{'width': '100px'}" nz-form-label>
                        <label>
                            项目({{ sensorsSelect+'/'+sensorsLength }})
                        </label>
                        <label>污染因子</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-popover   [nzPlacement]="'bottomLeft'" [(nzVisible)]="sensorSelectVisible" [nzTrigger]="'click'">
@@ -29,20 +27,13 @@
                                </div>
                            </ng-template>
                        </nz-popover>
                        <!-- <div style="top:0; right: -62px; position:absolute; font-size: 16px; color: #696969;">
                            <span>(</span>
                            <span style="display: inline-block; width: 50px; text-align: center;">
                                {{ sensorsSelect+'/'+sensorsLength }}
                            </span>
                            <span>)</span>
                        </div> -->
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="9" class="mb-md">
            <div nz-col [nzSpan]="4" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '128px'}" nz-form-label>
                        <label>时间类型</label>
                        <label>类型</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="timeUnit" [(ngModel)]="timeUnit" [nzPlaceHolder]="'选择 数据类型'" (ngModelChange)="setTimeUnit($event)" [nzNotFoundContent]="'无法找到'">
@@ -54,8 +45,22 @@
            </div>
            <div nz-col [nzSpan]="7" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '128px'}" nz-form-label>
                        <label>监测站点</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="deviceDimension" style="width: 100%;" [(ngModel)]="deviceDimension" nzAllowClear [nzPlaceHolder]="'选择 '+ dimensionItem.label +'(输入名称搜索)'"
                                   nzShowSearch (nzSearchChange)="dimensionsChange($event)" [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.name" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="5" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div  nz-form-label>
                        <label>选择日期</label>
                        <label>时间:</label>
                    </div>
                    <div *ngIf="timeUnit.value!='MONTH'; else elseBlock" nz-form-control class="flex-1">
                        <nz-datepicker [ngStyle]="{'width': '100%'}" name="actualTime" [(ngModel)]="actualTime" [nzAllowClear]="false" [nzShowTime]="_timeType.showTime"
@@ -72,68 +77,11 @@
                    </ng-template>
                </div>
            </div>
        </div>
        <div [ngStyle]="{'display':isCollapse ? 'none' : 'block' }" nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '100px'}" nz-form-label>
                        <label>省市区</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-cascader [class.class123]="true" (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'" (nzSelectionChange)="setAreasData($event)"
                            [nzAllowClear]="false" [nzChangeOnSelect]="true" [ngModel]="_areas" name="areasData">
                        </nz-cascader>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="9" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '128px'}" nz-form-label>
                            <label>
                                    <nz-dropdown>
                                        <button nz-button nz-dropdown ><span>{{dimensionItem.label}}</span> <i class="anticon anticon-down"></i></button>
                                            <ul nz-menu>
                                              <li *ngFor="let option of otherDimensions;let i = index;"  nz-menu-item>
                                                <a (click)="selectDimension(option)">{{option.label}}</a>
                                              </li>
                                            </ul>
                                    </nz-dropdown>
                            </label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="deviceDimension" style="width: 100%;" [(ngModel)]="deviceDimension" nzAllowClear [nzPlaceHolder]="'选择 '+ dimensionItem.label +'(输入名称搜索)'"
                            nzShowSearch (nzSearchChange)="dimensionsChange($event)" [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.name" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="7" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '70px'}" nz-form-label>
                        <label>设 备</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="device" style="width: 100%;" [(ngModel)]="device" nzAllowClear [nzPlaceHolder]="'先选择 '+ dimensionItem.label +'(输入名称搜索设备)'" nzShowSearch
                            (nzSearchChange)="devicesChange($event)" [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
        </div>
        <div nz-row>
            <div nz-col [nzSpan]="24" class="text-right">
            <div nz-col [nzSpan]="2" class="mb-md">
                <button nz-button [nzType]="'primary'" (click)="loadGrid()">
                    <i class="anticon anticon-search"></i>
                    <span>查询</span>
                </button>
                <a class="pl-sm" (click)="toggleCollapse()">
                    折叠
                    <i class="anticon" [class.anticon-down]="isCollapse" [class.anticon-up]="!isCollapse"></i>
                </a>
            </div>
        </div>
    </form>
@@ -168,72 +116,73 @@
        </a>
    </div>
</nz-card>
<nz-card>
    <div nz-row [nzGutter]="16">
        <div nz-col [nzMd]="24">
            <div style="width:100%; text-align:center;">
                <span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>
            </div>
        </div>
    </div>
    <div nz-row [nzGutter]="16">
        <div nz-col [nzMd]="24">
            <nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
                <ng-template #nzFixedHeader>
                    <thead nz-thead>
                        <tr>
                            <th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">
                                <span>监测项目</span>
                            </th>
                            <th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
                                <span>{{ col.text }}</span>
                            </th>
                        </tr>
                    </thead>
                </ng-template>
                <tbody nz-tbody>
                    <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"
                        (mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">
                        <td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">
                            <span>
                                <span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>&nbsp;
                                <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>
                            </span>
                        </td>
                        <td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
                            <span [ngSwitch]="col.type">
                                <!-- 要使用管道，无法自动生成 -->
                                <span title="{{ row.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
                                    *ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>
                                <!-- 要使用管道，无法自动生成 -->
                            </span>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
            <div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">
                <nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">
                    <thead nz-thead>
                        <tr>
                            <th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">
                                <span>监测项目</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">
                        <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"
                            [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"
                            (click)="switchSensor(i)">
                            <td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">
                                <span>
                                    <span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>&nbsp;
                                    <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
    </div>
</nz-card>
<!--<nz-card>-->
    <!--<div nz-row [nzGutter]="16">-->
        <!--<div nz-col [nzMd]="24">-->
            <!--<div style="width:100%; text-align:center;">-->
                <!--<span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div nz-row [nzGutter]="16">-->
        <!--<div nz-col [nzMd]="24">-->
            <!--<nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">-->
                <!--<ng-template #nzFixedHeader>-->
                    <!--<thead nz-thead>-->
                        <!--<tr>-->
                            <!--<th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">-->
                                <!--<span>监测项目</span>-->
                            <!--</th>-->
                            <!--<th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">-->
                                <!--<span>{{ col.text }}</span>-->
                            <!--</th>-->
                        <!--</tr>-->
                    <!--</thead>-->
                <!--</ng-template>-->
                <!--<tbody nz-tbody>-->
                    <!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"-->
                        <!--(mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">-->
                        <!--<td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">-->
                            <!--<span>-->
                                <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>&nbsp;-->
                                <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>-->
                            <!--</span>-->
                        <!--</td>-->
                        <!--<td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">-->
                            <!--<span [ngSwitch]="col.type">-->
                                <!--&lt;!&ndash; 要使用管道，无法自动生成 &ndash;&gt;-->
                                <!--<span title="{{ row.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"-->
                                    <!--*ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>-->
                                <!--&lt;!&ndash; 要使用管道，无法自动生成 &ndash;&gt;-->
                            <!--</span>-->
                        <!--</td>-->
                    <!--</tr>-->
                <!--</tbody>-->
            <!--</nz-table>-->
            <!---->
            <!--<div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">-->
                <!--<nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">-->
                    <!--<thead nz-thead>-->
                        <!--<tr>-->
                            <!--<th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">-->
                                <!--<span>监测项目</span>-->
                            <!--</th>-->
                        <!--</tr>-->
                    <!--</thead>-->
                    <!--<tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">-->
                        <!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"-->
                            <!--[ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"-->
                            <!--(click)="switchSensor(i)">-->
                            <!--<td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">-->
                                <!--<span>-->
                                    <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>&nbsp;-->
                                    <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>-->
                                <!--</span>-->
                            <!--</td>-->
                        <!--</tr>-->
                    <!--</tbody>-->
                <!--</nz-table>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</nz-card>-->