数据查询和表单模块合并，修改密码用户输入框去除

fengxiang

2018-03-26 0e25153037b06851846e80cc745e518ba07bf7af

数据查询和表单模块合并，修改密码用户输入框去除

 src/app/routes/analysis/analysis.module.ts

File was deleted

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

File was deleted

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

New file
@@ -0,0 +1,216 @@
<div class="content__title">
    <h1>数据查询</h1>
</div>
<nz-card [nzBordered]="false">
    <form nz-form (ngSubmit)="loadGrid()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>监测项目</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-popover [nzTitle]="'请选择'" [nzPlacement]="'bottomLeft'" [nzTrigger]="'hover'">
                            <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorNames" [nzReadonly]="true" [nzPlaceHolder]="'请选择监控类型'">
                                <ng-template #suffix>
                                    <i class="anticon anticon-plus ant-input-search-icon"></i>
                                </ng-template>
                            </nz-input>
                            <ng-template #nzTemplate>
                                <div [ngStyle]="{'width': '240px', 'height': '240px', 'overflow-y' :'auto'}">
                                    <nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                </div>
                            </ng-template>
                        </nz-popover>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label>
                        <label>时间类型</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="timeUnit" [(ngModel)]="timeUnit" [nzPlaceHolder]="'选择 数据类型'" (ngModelChange)="setTimeUnit($event)" [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of timeUnitOptions" [nzLabel]="option.label" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-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"
                            [nzMode]="_timeType.mode" [nzFormat]="_timeType.dateFormat" [nzPlaceHolder]="'具体日期'">
                        </nz-datepicker>
                    </div>
                    <ng-template #elseBlock>
                        <div nz-form-control class="flex-1">
                            <nz-select name="actualYear" [(ngModel)]="actualYear" [nzPlaceHolder]="'选择 数据类型'" (ngModelChange)="setTimeUnit($event)" [nzNotFoundContent]="'无法找到'">
                                <nz-option *ngFor="let option of actualYearOptions" [nzLabel]="option + ' 年'" [nzValue]="option">
                                </nz-option>
                            </nz-select>
                        </div>
                    </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': '70px'}" 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]="8" 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="monitorPoint" style="width: 100%;" [(ngModel)]="monitorPoint" nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
                            nzShowSearch (nzSearchChange)="monitorPointsChange($event)" [nzNotFoundContent]="'无法找到'">
                            <nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option.name" [nzValue]="option">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" 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]="'先选择 监控点(输入名称搜索)'" 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">
                <button nz-button [nzType]="'primary'">
                    <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>
</nz-card>
<nz-card>
    <div nz-row [nzGutter]="16">
        <div nz-col [ngStyle]="{'display':isChartCollapse ? 'none' : 'block' }" [nzMd]="24">
            <div echarts style="margin-top: 12px;" [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
        </div>
        <div *ngIf="isChartCollapse" style="width:100%; text-align:center;">
            <span style="font-size:18px; font-weight: bold;">{{ _chartTitleTemp }}</span>
        </div>
        <div *ngIf="!!echartsIntance&&!isChartCollapse" class="chart-switch-select">
            <nz-dropdown>
                <a class="ant-dropdown-link" nz-dropdown>
                    <p class="display-3 text-primary">切换项目
                        <i class="anticon anticon-down"></i>
                    </p>
                </a>
                <ul style="cursor:pointer; max-height: 260px; overflow:auto;" nz-menu>
                    <li [ngClass]="{'ant-dropdown-menu-item-selected':chartSelectedIndex==m}" *ngFor="let item of grid.data,index as m" (click)="switchSensor(m)"
                        nz-menu-item>
                        {{item.sensor.name}}&nbsp;
                        <i *ngIf="chartSelectedIndex==m" class="anticon anticon-check-circle-o"></i>
                    </li>
                </ul>
            </nz-dropdown>
        </div>
        <a *ngIf="!!echartsIntance" style="position: absolute; right: 0; top: -10px;" class="pl-sm" (click)="toggleChartCollapse()">
            折叠
            <i class="anticon" [class.anticon-down]="isChartCollapse" [class.anticon-up]="!isChartCollapse"></i>
        </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>

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

File was renamed from src/app/routes/analysis/query/query.component.less
@@ -9,10 +9,16 @@
}
.table-scroll {
    z-index: 9;
    height: 398px;
    height: auto;
    max-height: 388px;
    overflow: hidden;
}
.table-scroll-box-shadow {
    -moz-box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1); /* 老的 Firefox */
    box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1);
}
.chart-switch-select {
     position: absolute;
     right: 10%;
     top: 2%;
}

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

File was renamed from src/app/routes/analysis/query/query.component.ts
@@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { Sensor, Device, DataCondition, MonitorPoint, Organization, LineChartCriteria, PairData } from '@business/entity/data';
import { Sensor, Device, DataCondition, MonitorPoint, Organization, LineChartCriteria } from '@business/entity/data';
import { TimeUnits, AreaRange, ResultCode } from '@business/enum/types.enum';
import { SensorsService } from '@business/services/http/sensors.service';
import { PageBean, ResultBean, Grid } from '@business/entity/grid';
@@ -454,7 +454,7 @@
      // 清空数据
      this.grid.data = [];
      this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
        (res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
        (res: ResultBean<{[key: string]: Array<Array<number>>}>) => {
           if (res.code === 1) {
              const data =  res.data;
              if (!!data) {
@@ -470,13 +470,13 @@
                       weight = !!weight ? weight : 101;
                    //    this.gridSensors.push(sensor);
                       const sensorData = data[key][0].map(
                           pair => {
                           value => {
                                if (weight > 100) {
                                    // pair.value 为null,权重后移
                                    weight = !!pair.value ? weight : weight + 1;
                                    weight = !!value ? weight : weight + 1;
                                }
                                // 四舍五入，保留2位
                                return !!pair.value ? String(Math.round(pair.value * 100) / 100) : '-';
                                return !!value ? String(Math.round(value * 100) / 100) : '-';
                           }
                       );
                       this.grid.data.push({sensor: sensor, data: sensorData, weight: weight});
@@ -560,6 +560,7 @@
    }
    // 报表标题暂存 防止联动
    public _chartTitleTemp = '';
    public _tableTitleTemp = '';
    public reloadChartTitle(): void {
        const names = ['辖区', '地区', '时间', '项目'];
        switch ( this.dataCondition.areaRange ) {
@@ -582,6 +583,10 @@
        if (title.trim() !== this._chartTitleTemp.trim()) {
             this._chartTitleTemp = title;
        }
        const tableTile = names.slice(0, -1).join('  ') + ' 各项数据';
        if (tableTile.trim() !== this._tableTitleTemp.trim()) {
            this._tableTitleTemp = tableTile;
       }
    }
    public switchSensor(index: number): void {
        this.chartSelectedIndex = index;

 src/app/routes/reports/reports.module.ts

@@ -6,13 +6,24 @@

import { DemoComponent } from './demo/demo.component';
import { ExcelComponent } from './excel/excel.component';
import { QueryComponent } from './query/query.component';
import { PipeModule } from '@business/pipe/pipe.module';
import { NzTreeModule } from 'ng-tree-antd';
import { NgxEchartsModule } from 'ngx-echarts';
import { SensorsService } from '@business/services/http/sensors.service';
import { NzMessageService } from 'ng-zorro-antd';
import { AreacodeService } from '@business/services/http/areacode.service';
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { DeviceService } from '@business/services/http/device.service';
import { DateService } from '@business/services/util/date.service';

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'query', component: QueryComponent },
      { path: 'demo', component: DemoComponent },
      { path: 'excel', component: ExcelComponent }
      { path: 'excel', component: ExcelComponent },

    ]
  }
@@ -22,6 +33,10 @@

@NgModule({
  imports: [
    // 管道模块必须当前模块导入
    PipeModule,
    NzTreeModule,
    NgxEchartsModule,
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes)
@@ -29,8 +44,11 @@
  declarations: [
    ...COMPONENTS_NOROUNT,
    DemoComponent,
    ExcelComponent
    ExcelComponent,
    QueryComponent
  ],
  providers: [SensorsService, NzMessageService, AreacodeService,
     MonitorPointService, DeviceService, DateService],
  entryComponents: COMPONENTS_NOROUNT
})
export class ReportsModule { }

 src/app/routes/routes-routing.module.ts

@@ -29,8 +29,7 @@
            { path: 'devices', loadChildren: './devices/devices.module#DevicesModule' },
            { path: 'sensors', loadChildren: './sensors/sensors.module#SensorsModule' },
            { path: 'systems', loadChildren: './systems/systems.module#SystemsModule' },
            { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' },
            { path: 'analysis', loadChildren: './analysis/analysis.module#AnalysisModule' },
            { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' }
        ]
    },    // passport
    {

 src/app/routes/systems/account/account.component.html

@@ -144,7 +144,7 @@
                    <label for="accountName" >账号</label>
                </div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                    <nz-input [nzSize]="'large'" nzReadonly="true" formControlName="accountName" [nzId]="'accountName'"></nz-input>
                    <h4 class="h4">{{ getFormControl('accountName').value }}</h4>
                </div>
            </div>
            <div nz-form-item nz-row>

 src/assets/app-data.json

@@ -52,19 +52,14 @@
                  "link": "/sensors/basic"
                }]
              }, {
                "text": "数据分析",
                "icon": "icon-graph",
                "children": [
                  {
                  "text": "数据查看",
                  "link": "/analysis/query"
                  }
                ]
              }, {
                "text": "报表管理",
                "icon": "icon-chart",
                "children": [
                  {
                  "text": "数据查询",
                  "link": "/reports/query"
                  },
                  {
                  "text": "柱状图比较",
                  "link": "/reports/demo"
                  },