工作台 数据填充，监控点 改监控站点

fengxiang

2018-05-02 5e502e366836b3577884bca89372541b42124cd3

工作台 数据填充，监控点  改监控站点

 src/app/business/entity/data.ts

@@ -46,7 +46,7 @@
    version?: Column|any;
  }

  // 监控点
  // 监控站点
  export interface MonitorPoint {
    address?: any|Column;
    areaCode?: any|Column;

 src/app/business/services/http/device.service.ts

@@ -11,7 +11,8 @@
  private urls = {
    list: environment.SERVER_BASH_URL + 'device/page-list',
    save: environment.SERVER_BASH_URL + 'device/add-or-modify',
    delete: environment.SERVER_BASH_URL + 'device/delete-by-ids'
    delete: environment.SERVER_BASH_URL + 'device/delete-by-ids',
    count: environment.SERVER_BASH_URL +'device/count-by-example'
  };
  public getListUrl () {
    return this.urls.list;
@@ -31,6 +32,9 @@
  public save(data: Device): Observable<any> {
    return this.http.post(this.urls.save, data);
  }
  public countByExample(example: ExampleService): Observable<ResultBean<number>> {
    return this.http.get(this.urls.count, { queryParams: example.getSqlParam()});
  };
  public getPageByExample(page: PageBean, example: ExampleService): Observable<PageBean> {
    let orderByClause = '';
    const _queryParams = !!example ? example.getSqlParam() : '';

 src/app/business/services/util/example.service.ts

@@ -20,6 +20,14 @@
        this.addCondition('andEqualTo', col.name, col.value);
        return this;
     }
     public andNotEqualTo(col: { name: string, value: any}): Criteria {
        this.addCondition('andNotEqualTo', col.name, col.value);
        return this;
     }
     public andGreaterThanOrEqualTo(col: { name: string, value: any}): Criteria {
        this.addCondition('andGreaterThanOrEqualTo', col.name, col.value);
        return this;
     }
}

@Injectable()
@@ -27,7 +35,9 @@
  private static OR_SPLIT = 'or|';
  private static  CRITERIA_SPLIT = '|||';
  private criterion: Criteria[] = [];
  
  public clear(): void {
      this.criterion = [];
  }
  public getSqlParam(): string {
      let whereSql = '';
     for (const cri of this.criterion) {

 src/app/business/services/util/tools.service.ts

@@ -28,4 +28,13 @@
                 }
                );
      }
      public static toThousands(num: string): string {
        var num = (num || 0).toString(), result = '';
        while (num.length > 3) {
            result = ',' + num.slice(-3) + result;
            num = num.slice(0, num.length - 3);
        }
        if (num) { result = num + result; }
        return result;
    }
}

 src/app/core/net/default.interceptor.ts

@@ -69,8 +69,9 @@
        }        
        // 统一加上服务端前缀
        let url = req.url;
        if (!url.startsWith('https://') && !url.startsWith('http://')) {
            url = environment.SERVER_URL + url;
        if (!url.startsWith('https://') && !url.startsWith('http://')&& !url.startsWith('assets')) {
            // url = environment.SERVER_URL + url;
            url = environment.SERVER_BASH_URL+url;
        }

        const newReq = req.clone({

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

@@ -21,7 +21,7 @@
                <p>8<span> / 24</span></p>
            </div>
            <div>
                <p>监控点</p>
                <p>监控站点</p>
                <p>20</p>
            </div>
        <!--
@@ -40,7 +40,8 @@

<div nz-row [nzGutter]="24" class="pt-lg" style="margin-top: -24px;">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'监控仪台数'" total="{{totalDeviceCount | number: '1.0'}}" contentHeight="46px" [action]="action1" [footer]="footer1">
        <chart-card [title]="'监控仪台数'" total="{{totalDeviceCount | number: '1.0'}}" contentHeight="46px" [action]="action1" [footer]="footer1"
        [loading]="deviceCountLoading">
            <ng-template #action1>
                <nz-tooltip [nzTitle]="'包括最近一年已安装的监控仪设备的总台数'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
@@ -57,23 +58,24 @@
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'正常运行占比'" total="78%" contentHeight="46px" [action]="action2" [footer]="footer2">
        <chart-card [title]="'正常运行占比'" [total]="operNormalPercent + '%'" contentHeight="46px" [action]="action2" [footer]="footer2"
        [loading] = "operationLoading">
            <ng-template #action2>
                <nz-tooltip [nzTitle]="'当前处于正常运行状态的监控设备的占比'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
                </nz-tooltip>
            </ng-template>
            <mini-progress height="46" percent="78" strokeWidth="8" target="80" color="#13C2C2"></mini-progress>
            <mini-progress height="46" [percent]="operNormalPercent" strokeWidth="8" target="80" color="#13C2C2"></mini-progress>
            <ng-template #footer2>
                <div class="d-flex justify-content-between">
                    <trend flag="up">周同比<span class="pl-sm">8%</span></trend>
                    <trend flag="down">日环比<span class="pl-sm">2%</span></trend>
                    <trend flag="up">维保占比<span class="pl-sm">8%</span></trend>
                    <trend flag="down">故障占比<span class="pl-sm">2%</span></trend>
                </div>
            </ng-template>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'报警次数'" total="2,847" contentHeight="46px" [action]="action3" [footer]="footer3">
        <chart-card [title]="'月度报警总数'" [total]="alarmCountCurrMonth" [loading]="alarmCountLoading" contentHeight="46px" [action]="action3" [footer]="footer3">
            <ng-template #action3>
                <nz-tooltip [nzTitle]="'最近一年所属设备的报警次数统计'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
@@ -82,9 +84,9 @@
            <mini-area
                color="#975FE4"
                height="46"
                [data]="data.visitData"></mini-area>
                [data]="alarmCountList"></mini-area>
            <ng-template #footer3>
                <p class="text-truncate">月度报警次数:<span class="ml-sm">1,234</span></p>
                <p class="text-truncate">当天报警总数:<span class="ml-sm">{{ alarmCountCurrDay }}</span></p>
            </ng-template>
        </chart-card>
    </div>

 src/app/routes/dashboard/workplace/workplace.component.ts

@@ -3,50 +3,63 @@
import { NzMessageService } from 'ng-zorro-antd';
import { getTimeDistance, yuan, fixedZero } from '@delon/abc';
import { _HttpClient } from '@delon/theme';
import {HttpClient} from '@angular/common/http';
import { HttpClient } from '@angular/common/http';
import * as moment from 'moment';
import { DeviceService } from '@business/services/http/device.service';
import { ExampleService } from '@business/services/util/example.service';
import { ResultBean } from '@business/entity/grid';
import { TimeUnits } from '@business/enum/types.enum';
import { ToolsService } from '@business/services/util/tools.service';

@Component({
    selector: 'app-dashboard-workplace',
    templateUrl: './workplace.component.html',
    styleUrls: ['./workplace.component.less']
    styleUrls: ['./workplace.component.less'],
    providers: [DeviceService]
})
export class DashboardWorkplaceComponent implements OnInit, OnDestroy {

    totalDeviceCountList: any[] = [];
    totalDeviceCount = 0;
    avgDeviceCount: string;

    totalDeviceCount = '';
    avgDeviceCount = '';
    deviceCountLoading = true;
    // 报警统计
    alarmCountList:{x: string,y: number}[] = null;
    alarmCountCurrMonth = '';
    alarmCountCurrDay = '';// 单月报警次数
    alarmCountLoading = true;
    operationLoading = true;
    operNormalPercent = 0;
    activities: any[] = [];
    radarData: any[] = [];
    loading = true;

    members = [
        {
          id: 'members-1',
          title: '七星官网',
          logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
          link: '',
            id: 'members-1',
            title: '七星官网',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            link: '',
        },
        {
          id: 'members-2',
          title: '七星商城',
          logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
          link: '',
            id: 'members-2',
            title: '七星商城',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
            link: '',
        },
        {
          id: 'members-3',
          title: '外链三',
          logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
          link: '',
            id: 'members-3',
            title: '外链三',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
            link: '',
        },
        {
          id: 'members-4',
          title: '外链四',
          logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
          link: '',
            id: 'members-4',
            title: '外链四',
            logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
            link: '',
        }
      ];
    ];

    data: any = {};

@@ -56,34 +69,85 @@
    };

    rankingListData: any[] = [
        {title: `PM 2.5`, total: 230},
        {title: `PM 10`, total: 175},
        {title: `二氧化硫`, total: 123},
        {title: `二氧化氮`, total: 92},
        {title: `甲醛`, total: 39},
        {title: `氯气`, total: 24},
        {title: `一氧化碳`, total: 8}
        { title: `PM 2.5`, total: 230 },
        { title: `PM 10`, total: 175 },
        { title: `二氧化硫`, total: 123 },
        { title: `二氧化氮`, total: 92 },
        { title: `甲醛`, total: 39 },
        { title: `氯气`, total: 24 },
        { title: `一氧化碳`, total: 8 }
    ];

    constructor(
        private deviceService: DeviceService,
        private http: _HttpClient,
        public msg: NzMessageService,
        private http2: HttpClient) {
    }

    ngOnInit() {
        const today = new Date().getTime();
        const fakeDC = [60, 135, 70, 112, 80, 170, 200, 140, 52, 119, 164, 230];
        for (let i = 0; i < 12; i += 1) {
            this.totalDeviceCountList.push({
                x: moment(today).subtract(-1 * i, 'months').format(
                    'YYYY-MM'
                ),
                y: fakeDC[i]
            });
            this.totalDeviceCount += fakeDC[i];
        }
        this.avgDeviceCount = (this.totalDeviceCount / 12).toFixed(0);
        // const today = new Date().getTime();
        // const fakeDC = [60, 135, 70, 112, 80, 170, 200, 140, 52, 119, 164, 230];
        // for (let i = 0; i < 12; i += 1) {
        //     this.totalDeviceCountList.push({
        //         x: moment(today).subtract(-1 * i, 'months').format(
        //             "YYYY-MM"
        //         ),
        //         y: fakeDC[i]
        //     });
        //     this.totalDeviceCount += fakeDC[i];
        // }
        let example1 = new ExampleService();
        let mo = moment();
        example1.or().andGreaterThanOrEqualTo({ name: "createTime", value: mo.format('YYYY-MM-01 00:00:00') });
        let example2 = new ExampleService();
        let example3 = new ExampleService();
        example3.or().andNotEqualTo({name:'state',value:4});
        zip(this.deviceService.countByExample(example1),
            this.deviceService.countByExample(example2),
            this.http.get<ResultBean<{time: string,count: number}[]>>('device/count-by-times',{start:mo.format('YYYY-01-01 00:00:00'),end:mo.format('YYYY-12-31 23:59:59')}),
            this.deviceService.countByExample(example3)).subscribe(
                ([rWtihAvg, rWithToltal,rWithList,rWithNormal]) => {
                    if (!!rWtihAvg.code && !!rWithToltal&&!!rWithList.code) {
                        this.avgDeviceCount = ToolsService.toThousands(rWtihAvg.data.toString());
                        this.totalDeviceCount = ToolsService.toThousands(rWithToltal.data.toString());
                        rWithList.data.forEach( item =>{
                            this.totalDeviceCountList.push(
                                {
                                    x:item.time,
                                    y:item.count
                                }
                            );
                        });
                        this.operNormalPercent = Math.round(rWithNormal.data/rWithToltal.data*100);
                        this.deviceCountLoading = false;
                        this.operationLoading = false;
                    }
                }
            );
        zip(
            this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null,timeUnits: TimeUnits.DAY}),
            this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-01 00:00:00'),end: null}),
            this.http.get<ResultBean<{time: string,count: number}[]>>("alarm/count-by-times",{start: mo.format('YYYY-MM-DD 00:00:00'),end: null})
        ).subscribe(
            ([rWithList,rWithMonth,rWithDay]) => {
                 if(!!rWithList.code&&!!rWithMonth.code&&!!rWithDay.code){
                    this.alarmCountList = rWithList.data.map(
                        item => {
                            return {x:item.time,y:item.count};
                        }
                    );
                    if(!!rWithMonth.data&&rWithMonth.data.length>0){
                        this.alarmCountCurrMonth = ToolsService.toThousands(rWithMonth.data[0].count.toString());
                    }    
                    if(!!rWithDay.data&&rWithDay.data.length>0) {
                        this.alarmCountCurrDay =  ToolsService.toThousands(rWithDay.data[0].count.toString());
                    }
                    this.alarmCountLoading = false;
                 }
            }
        );
        // this.avgDeviceCount = (this.totalDeviceCount / 12).toFixed(0);

        const alarmData = [];
        const alarmData_1 = [];
@@ -350,9 +414,9 @@
    sort(sortName, sortValue) {
        this.data.searchData = [
            ...(<any[]>this.data.searchData).sort((a, b) => {
                if (a[ sortName ] > b[ sortName ]) {
                if (a[sortName] > b[sortName]) {
                    return (sortValue === 'ascend') ? 1 : -1;
                } else if (a[ sortName ] < b[ sortName ]) {
                } else if (a[sortName] < b[sortName]) {
                    return (sortValue === 'ascend') ? -1 : 1;
                } else {
                    return 0;

 src/app/routes/devices/basic-info/basic-info.component.ts

@@ -23,7 +23,7 @@
    { title: '名称', index: 'name' },
    { title: 'mac', index: 'mac' },
    { title: '型号', index: 'deviceVersion.name' },
    { title: '监控点', index: 'monitorPoint.name' },
    { title: '监控站点', index: 'monitorPoint.name' },
    { title: '维护人', index: 'operateUser.name' },
    { title: '生产时间', width: '100px', type: 'date', index: 'createTime' },
    { title: '安装时间', width: '100px', type: 'date', index: 'installTime' },

 src/app/routes/devices/basic-info/device-edit/device-edit.component.html

@@ -60,10 +60,10 @@
          </div>
          <div nz-form-item  nz-row class="mb-sm">
            <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
              <label>监控点</label>
              <label>监控站点</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="7" nzHasFeedback>
                <nz-select formControlName="monitorPointId" [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
                <nz-select formControlName="monitorPointId" [nzPlaceHolder]="'选择 监控站点(输入名称搜索)'"
                nzAllowClear [nzFilter]="false" nzShowSearch (nzSearchChange)="monitorPointChange($event)" [nzNotFoundContent]="'无法找到'" >
                  <nz-option *ngFor="let option of monitorPoints" [nzLabel]="option.name" [nzValue]="option.id" [nzDisabled]="option.disabled">
                  </nz-option>

 src/app/routes/devices/monitor-point/monitor-point-edit/monitor-point-edit.component.html

@@ -7,7 +7,7 @@
      <label nz-form-item-required>名称</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="7" nzHasFeedback>
      <nz-input formControlName="name" maxlength="20" [nzPlaceHolder]="'监控点名称'">
      <nz-input formControlName="name" maxlength="20" [nzPlaceHolder]="'监控站点名称'">
      </nz-input>
    </div>
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">

 src/app/routes/devices/monitor-point/monitor-point.component.ts

@@ -52,7 +52,7 @@
        width: '300px'
      }
    };
    this.grid.title = '监控点';
    this.grid.title = '监控站点';
    this.grid.setColumns(this.monitorPoint);
    this.grid.pageSize = 10;
  }
@@ -186,7 +186,7 @@
      adress = areaNames.provinceName + areaNames.cityName + areaNames.areaName + record.address;
    }
    this.coorPickerService.data.address = adress;
    this.coorPickerService.data['describe'] = '监控点名称';
    this.coorPickerService.data['describe'] = '监控站点名称';
    this.modalHelper.static(CoordinatesPickerComponent).subscribe(
      (staticComp) => {
        const data: MonitorPoint = {

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

@@ -297,7 +297,7 @@


      });

    } else {

      this.msgSrv.error('没有监控点数据！');

      this.msgSrv.error('没有监控站点数据！');

    }

  }




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

@@ -194,7 +194,7 @@
      }
      window.location.href = url + '_token=' + this.tokenService.get().token;
    } else {
      this.msgSrv.error('开始时间为空或者所选区域没有监控点数据！');
      this.msgSrv.error('开始时间为空或者所选区域没有监控站点数据！');
    }
  }
}

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

@@ -80,10 +80,10 @@
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div [ngStyle]="{'width': '70px'}" nz-form-label>
                        <label>监控点</label>
                        <label>监控站点</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="monitorPoint" style="width: 100%;" [(ngModel)]="monitorPoint" nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
                        <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>
@@ -97,7 +97,7 @@
                        <label>设 备</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-select name="device" style="width: 100%;" [(ngModel)]="device" nzAllowClear [nzPlaceHolder]="'先选择 监控点(输入名称搜索)'" nzShowSearch
                        <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>

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

@@ -278,11 +278,11 @@
                ); break;
        }
    }
    // 第一步，省市区 赋值变 并 改变监控点选项
    // 第一步，省市区 赋值变 并 改变监控站点选项
    public  setAreasData(areas: {label: string, value: string}[] ) {
        let isChanged = false;
        isChanged = areas.some( (item , index: number) => {
            // this._areas[index] 为null 改变 监控点选项
            // this._areas[index] 为null 改变 监控站点选项
            return this._areas.length < areas.length 
            || !this._areas[index] 
            || this._areas[index].value !== item.value;
@@ -294,7 +294,7 @@
        }
    }

     // 第二步 设置 监控点, 值变 改变设备选项，值为null 置空设备选项和设备值
     // 第二步 设置 监控站点, 值变 改变设备选项，值为null 置空设备选项和设备值
     public _monitorPoint: MonitorPoint;
     get monitorPoint(): MonitorPoint {
         return this._monitorPoint;
@@ -315,7 +315,7 @@
        }
        
     }
    // 第三步 设置 监控点
    // 第三步 设置 监控站点
    public _device: Device;
    set device(val: Device) {
        this._device = val;
@@ -616,7 +616,7 @@
        const names = ['辖区', '地区', '时间', '项目'];
        switch ( this.dataCondition.areaRange ) {
            case AreaRange.MONITORPOINT :
            names[0] = '监控点';
            names[0] = '监控站点';
            names[1] = this._monitorPoint.name; break;          
            case AreaRange.DEVICE :
              names[0] = '设备';

 src/assets/app-data.json

@@ -41,7 +41,7 @@
                  "text": "型号配置",
                  "link": "/devices/version"
                }, {
                  "text": "监测区管理",
                  "text": "监测站点管理",
                  "link": "/devices/monitor-point"
                }]
              }, {

 src/assets/i18n/zh-CN.json

@@ -6,7 +6,7 @@
    "logout": "登出",
    "more": "更多",
    "full": "完整",
    "top-search-ph": "搜索：账户、组织、监控点等",
    "top-search-ph": "搜索：账户、组织、监控站点等",
    "theme": "主题",
    "theme-switch": "切换主题",
    "light": "亮",