copy from ed

.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

README.md

+# abbFront
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+## 测试环境启动
+
+ng serve --base-href / --prod  --configuration=test
+
+ng serve --configuration=test
+
+ng serve --c=test
+
+## 正式环境启动
+
+ng serve --base-href / --prod  --configuration=production
+
+ng serve --configuration=production
+
+ng serve --c=production
+
+## 本地环境启动
+
+ng serve
+
+## 测试环境打包
+
+ng build --base-href / --prod  --configuration=test
+
+ng build --configuration=test
+
+ng build --c=test
+
+## 测试环境打包
+
+ng build --base-href / --prod  --configuration=production
+
+ng build --configuration=production
+
+ng build --c=production
+
+## 本地环境打包
+
+ng build

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "abbFront": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineStyle": true,
+          "styleext": "scss",
+          "spec": false
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
+              "src/assets/iconfont/iconfont.css",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/echarts/dist/echarts.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "test": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.test.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "abbFront:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "abbFront:build:production"
+            },
+            "test": {
+              "browserTarget": "abbFront:build:test"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "abbFront:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
+              "src/assets/iconfont/iconfont.css",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/echarts/dist/echarts.min.js"
+            ],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "abbFront-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "abbFront:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "abbFront:serve:production"
+            },
+            "test": {
+              "devServerTarget": "abbFront:serve:test"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "abbFront"
+}

package.json

+{
+  "name": "abbFront",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod -c=test",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^6.0.9",
+    "@angular/common": "^6.0.9",
+    "@angular/compiler": "^6.0.9",
+    "@angular/core": "^6.0.9",
+    "@angular/forms": "^6.0.9",
+    "@angular/http": "^6.0.9",
+    "@angular/platform-browser": "^6.0.9",
+    "@angular/platform-browser-dynamic": "^6.0.9",
+    "@angular/router": "^6.0.9",
+    "@ngx-translate/core": "^10.0.2",
+    "@ngx-translate/http-loader": "^3.0.1",
+    "classlist.js": "^1.1.20150312",
+    "core-js": "^2.5.4",
+    "echarts": "^4.1.0",
+    "ng-zorro-antd": "^1.8.1",
+    "ngx-echarts": "^3.2.0",
+    "rxjs": "6.2.2",
+    "sass-loader": "^7.0.3",
+    "setprototypeof": "^1.1.0",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.26"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.6.8",
+    "@angular/cli": "~6.0.8",
+    "@angular/compiler-cli": "^6.0.9",
+    "@angular/language-service": "^6.0.9",
+    "@types/jasmine": "~2.8.6",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.2.1",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~1.7.1",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.0",
+    "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "ngx-echarts": "^3.2.0",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2"
+  }
+}

src/app/animation/fade-down.ts

+// 引入 angular 动画组件
+import { trigger, style, state, transition, animate } from '@angular/animations';
+
+export const fadeDown = trigger('fadeDown', [
+  transition('void => *', [
+    style({opacity: 0, transform: 'translateY(-50%)'}),
+    animate('800ms ease-out', style({transform: 'translateY(0px)', opacity: 1}))
+  ]),
+  transition('* => void', [
+    animate('800ms ease-out', style({opacity: 0, transform: 'translateY(0px)'}))
+  ])
+]);

src/app/animation/fade-in.ts

+// 引入 angular 动画组件
+import {trigger, style, state, transition, animate} from '@angular/animations';
+
+export const fadeIn = trigger('fade', [
+  transition('void => *', [
+    style({opacity: 0}),
+    animate('1000ms ease-in', style({opacity: 1}))
+  ]),
+  transition('* => void', [
+    animate('1000ms ease-in', style({opacity: 0}))
+  ])
+]);

src/app/animation/fly-out.ts

+import { trigger, style, state, transition, animate } from '@angular/animations';
+
+// export const Flyout = trigger('Flyout', [state('show', style({
+//   transform: 'translateX(0)'
+// })), state('out', style({
+//   transform: 'translateX(100%)'
+// })), state('in', style({
+//   transform: 'translateX(-100%)'
+// })),
+//   transition('in=>show', animate('600ms ease-in')),
+//   transition('show=>out', animate('600ms ease-out')),
+// ]);
+
+export const Flyout = trigger('Flyout', [
+  state('in', style({transform: 'translateX(0)'})),
+  transition('void => *', [
+    style({transform: 'translateX(-100%)'}),
+    animate('600ms ease-in')
+  ]),
+  transition('* => void', [
+    animate('600ms ease-out', style({transform: 'translateX(100%)'}))
+  ])
+]);

src/app/animation/transition-all.ts

+import {trigger, style, state, transition, animate} from '@angular/animations';
+
+export const transitionAll = trigger('open', [
+  state('in', style({height: '*'})),
+  transition('* => void', [
+    style({height: '*'}),
+    animate(250, style({height: 0}))
+  ])
+]);

src/app/animation/zoom.ts

+import { trigger, style, state, transition, animate } from '@angular/animations';
+
+export const zoom = trigger('zoom', [state('inactive', style({
+  backgroundColor: '#fff',
+  transform: 'scale(1)'
+})), state('active', style({
+  backgroundColor: 'pink',
+  transform: 'scale(1.2)'
+})),
+  transition('inactive => active', animate('300ms ease-in')),
+  transition('active => inactive', animate('300ms ease-out')),
+]);

src/app/app-routing.module.ts

+import { RouterModule, Routes } from '@angular/router';
+import { LayoutComponent } from './layout/layout.component';
+
+const AppRoutes: Routes = [
+  {path: '', redirectTo: '/extra/login', pathMatch: 'full'},
+  {path: 'app', component: LayoutComponent},
+  {path: 'extra', loadChildren: './extra-pages/extra-pages.module#ExtraPagesModule'},
+  {path: '**', redirectTo: '/extra/login', pathMatch: 'full'},
+];
+export const AppRoutingModule = RouterModule.forRoot(AppRoutes, {useHash: true});

src/app/app.component.html

+<router-outlet></router-outlet>

src/app/app.component.scss

+:host ::ng-deep .ant-table-thead>tr>th {
+  font-size: 15px;
+  color: rgba(0,0,0,.65);
+}
+:host ::ng-deep .ant-tabs-nav .ant-tabs-tab-active {
+  font-size: 15px;
+}

src/app/app.component.ts

+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import {zh_CN, en_US, NzI18nService} from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+  constructor(private translateService: TranslateService, private nzI18nService: NzI18nService) {}
+  ngOnInit() {
+    // --- set i18n begin ---
+    this.translateService.addLangs(['zh', 'en', 'jpn']);
+    const lan = localStorage.getItem('witium-default-language');
+    if (lan) {
+      this.translateService.setDefaultLang(lan);
+      // const browserLang = this.translateService.getBrowserLang();
+      this.translateService.use(lan);
+      if (lan === 'zh') {
+        this.nzI18nService.setLocale(zh_CN);
+      } else {
+        setTimeout(() => {
+          if (document.getElementById('loginBtn')) {
+            document.getElementById('loginBtn').style.letterSpacing = '0px';
+          }
+        }, 400);
+        this.nzI18nService.setLocale(en_US);
+      }
+    } else {
+      this.translateService.setDefaultLang('zh');
+      // const browserLang = this.translateService.getBrowserLang();
+      this.translateService.use('zh');
+      this.nzI18nService.setLocale(zh_CN);
+    }
+    // --- set i18n end ---
+  }
+}

src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppRoutingModule } from './app-routing.module';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+// 主模块注册
+import { LayoutModule } from './layout/layout.module';
+import { SharedModule } from './shared/shared.module';
+// 主组件注册
+import { AppComponent } from './app.component';
+import { LayoutComponent } from './layout/layout.component';
+// 公共部分-侧边栏-首部-底部
+import { LeftmenuComponent } from './layout/leftmenu/leftmenu.component';
+import { FooterComponent } from './layout/footer/footer.component';
+import { BreadcrumbComponent } from './layout/breadcrumb/breadcrumb.component';
+// 国际化相关内容
+// import { HttpModule, Http } from '@angular/http';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+// 路由拦截,加token
+import {AuthInterceptor} from './shared/service/authToken';
+// 页面
+import { HomeComponent } from './main/home/home.component';
+import { ActualDataComponent } from './main/actual-data/actual-data.component';
+import { CompareComponent } from './main/compare/compare.component';
+import { AlarmInfoComponent } from './main/alarm-info/alarm-info.component';
+import { WarnInfoComponent } from './main/warn-info/warn-info.component';
+import { CollectorManageComponent } from './main/collector-manage/collector-manage.component';
+import { PersonSetComponent } from './main/person-set/person-set.component';
+import { RoleManageComponent } from './main/role-manage/role-manage.component';
+import { PointManageComponent } from './main/point-manage/point-manage.component';
+import { OperateSetComponent } from './main/operate-set/operate-set.component';
+import { LoginLogComponent } from './main/login-log/login-log.component';
+import { DragComponent } from './main/drag/drag.component';
+import { GatewayManageComponent } from './main/gateway-manage/gateway-manage.component';
+import { XdkHistoryComponent } from './main/xdk-history/xdk-history.component';
+import { CissHistoryComponent } from './main/ciss-history/ciss-history.component';
+import { CissDetailComponent } from './main/ciss-detail/ciss-detail.component';
+import { XdkDetailComponent } from './main/xdk-detail/xdk-detail.component';
+import { AreaManageComponent } from './main/area-manage/area-manage.component';
+import { GaodeMapComponent } from './main/area-manage/gaode-map/gaode-map.component';
+import { FactoryManageComponent } from './main/factory-manage/factory-manage.component';
+import { UserManageComponent } from './main/user-manage/user-manage.component';
+import { DetailHeaderComponent } from './main/detail-header/detail-header.component';
+import { DeviceTypeComponent } from './main/device-type/device-type.component';
+import { DeviceModelComponent } from './main/device-model/device-model.component';
+import { FactoryPaintComponent } from './main/factory-paint/factory-paint.component';
+import { PointPaintComponent } from './main/point-paint/point-paint.component';
+import { XdkCompareComponent } from './main/xdk-compare/xdk-compare.component';
+import { CissHCompareComponent } from './main/ciss-h-compare/ciss-h-compare.component';
+import { CissZCompareComponent } from './main/ciss-z-compare/ciss-z-compare.component';
+import { DepartmentManageComponent } from './main/department-manage/department-manage.component';
+import { HistoryDataComponent } from './main/history-data/history-data.component';
+import { PointTypeComponent } from './main/point-type/point-type.component';
+import { MachineRoomComponent } from './main/machine-room/machine-room.component';
+import { CuttingMachineComponent } from './main/cutting-machine/cutting-machine.component';
+import { CuttingMachineDetailComponent } from './main/cutting-machine-detail/cutting-machine-detail.component';
+import { MachineRoomDetailComponent } from './main/machine-room-detail/machine-room-detail.component';
+import { WarnEditComponent } from './main/warn-edit/warn-edit.component';
+// http
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+
+export function createTranslateHttpLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+/** 配置 angular i18n **/
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+registerLocaleData(zh);
+/** 配置 ng-zorro-antd 国际化 **/
+import { NZ_I18N, en_US, zh_CN } from 'ng-zorro-antd';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    LayoutComponent,
+    LeftmenuComponent,
+    HomeComponent,
+    ActualDataComponent,
+    CompareComponent,
+    AlarmInfoComponent,
+    WarnInfoComponent,
+    CollectorManageComponent,
+    PersonSetComponent,
+    RoleManageComponent,
+    PointManageComponent,
+    OperateSetComponent,
+    DragComponent,
+    GatewayManageComponent,
+    XdkHistoryComponent,
+    CissHistoryComponent,
+    CissDetailComponent,
+    XdkDetailComponent,
+    AreaManageComponent,
+    FactoryManageComponent,
+    UserManageComponent,
+    LoginLogComponent,
+    DetailHeaderComponent,
+    DeviceTypeComponent,
+    DeviceModelComponent,
+    FactoryPaintComponent,
+    PointPaintComponent,
+    FooterComponent,
+    BreadcrumbComponent,
+    GaodeMapComponent,
+    LeftmenuComponent,
+    XdkCompareComponent,
+    CissHCompareComponent,
+    CissZCompareComponent,
+    DepartmentManageComponent,
+    HistoryDataComponent,
+    PointTypeComponent,
+    MachineRoomComponent,
+    CuttingMachineComponent,
+    CuttingMachineDetailComponent,
+    MachineRoomDetailComponent,
+    WarnEditComponent,
+  ],
+  imports: [
+    BrowserModule,
+    NgxEchartsModule,
+    LayoutModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    SharedModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateHttpLoader),
+        deps: [HttpClient]
+      }
+    })
+  ],
+  providers: [
+    {provide: NZ_I18N, useValue: zh_CN},
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: AuthInterceptor,
+      multi: true,
+    }
+  ],
+  bootstrap: [
+    AppComponent,
+  ]
+})
+export class AppModule {
+}

src/app/extra-pages/404/404.component.html

+<div style="width: 100%;
+    height: 100%;
+    background-color: #ee9a30;">
+  <div style="letter-spacing: 40px;
+    font-size: 200px;
+    text-align: center;
+    padding: 130px 0;
+    font-weight: 900;
+    color: #ffffff;">404</div>
+  <div style="text-align: center;
+    font-size: 35px;
+    padding-top: 30px;
+    color: #ffffff;">{{'sorryNotFound' | translate}}...</div>
+</div>

src/app/extra-pages/404/404.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-404',
+  templateUrl: './404.component.html'
+})
+export class NotFoundComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}

src/app/extra-pages/extra-pages-routing-module.ts

+import { RouterModule, Routes } from '@angular/router';
+import { ExtraPagesComponent } from './extra-pages.component';
+import { LoginComponent } from './login/login.component';
+
+const routes: Routes = [{
+  path: '',
+  component: ExtraPagesComponent,
+  children: [
+    {path: '', redirectTo: '/app/monitoring/mapMonitoring', pathMatch: 'full'},
+    {path: 'login', component: LoginComponent}
+  ]
+}];
+
+export const ExtraPagesRoutingModule = RouterModule.forChild(routes);

src/app/extra-pages/extra-pages.component.html

+<router-outlet></router-outlet>

src/app/extra-pages/extra-pages.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-extra-pages',
+  templateUrl: './extra-pages.component.html',
+  styleUrls: ['./extra-pages.component.css']
+})
+export class ExtraPagesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/extra-pages/extra-pages.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ExtraPagesComponent } from './extra-pages.component';
+import { SharedModule } from '../shared/shared.module';
+import { ExtraPagesRoutingModule } from './extra-pages-routing-module';
+import { LoginComponent } from './login/login.component';
+import { NotFoundComponent } from './404/404.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    ExtraPagesRoutingModule,
+  ],
+  declarations: [ExtraPagesComponent, LoginComponent, NotFoundComponent]
+})
+export class ExtraPagesModule {
+}

src/app/extra-pages/login/login.component.css

+.full-screen {
+  height: 100%;
+  width: 100%;
+}
+.mainContent {
+  padding: 40px;
+  position: relative;
+  margin-bottom: 150px;
+  height: calc(100% - 150px);
+}
+.language {
+  height: 70px;
+  text-align: right;
+}
+
+.formPart {
+  position: relative;
+  vertical-align: middle;
+  height: calc(100% - 70px);
+  text-align: center;
+}
+
+.forVertical {
+  width: 100%;
+  height: 400px;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.loginPart {
+  padding: 30px;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 659px;
+  min-width: 361px;
+  height: 400px;
+  display: inline-block;
+}
+
+.formTitle {
+  font-size: 28px;
+  line-height: 63px;
+  height: 120px;
+  letter-spacing: 1px;
+}
+
+.inputItem {
+  height: 50px;
+  line-height: 50px;
+  width: 300px;
+  display: inline-block;
+}
+.buttonItem {
+  margin: 10px 0;
+  line-height: 40px;
+  width: 300px;
+  display: inline-block;
+}
+
+p.required {
+  height: 15px;
+  font-size: 10px;
+  color: red;
+  line-height: 10px;
+  text-align: left;
+}
+:host ::ng-deep .ant-select-selection--single {
+  height: 30px !important;
+}

src/app/extra-pages/login/login.component.html

+<div id="loginForSize" class="full-screen">
+  <div class="mainContent">
+    <div class="language">
+      {{language.selectLanguage}} :
+      <nz-select style="width: 120px" [(ngModel)]="selectLanguage" (ngModelChange)="languageChange()">
+        <nz-option nzLabel="中文" nzValue="Zh"></nz-option>
+        <nz-option nzLabel="English" nzValue="En"></nz-option>
+      </nz-select>
+    </div>
+    <div class="formPart">
+      <div class="forVertical">
+        <div class="loginPart">
+          <div class="formTitle">
+            <div style="height: 45px;">
+              <img src="../../../assets/images/ABBLogo.jpg">
+            </div>
+            <div style="text-indent: 5px;">
+              {{language.login.welcomeTitle}}
+            </div>
+          </div>
+          <div class="inputItem">
+            <input nz-input style="height: 36px;" [(ngModel)]="req.userName" [placeholder]="language.slide.systemSetup.content.username" (keypress)="enterPress($event)">
+            <p class="required" *ngIf="!check.userName">{{language.login.nameWarning}}</p>
+          </div>
+          <div class="inputItem">
+            <input nz-input type="password" style="height: 36px;" [(ngModel)]="req.password" [placeholder]="language.slide.systemSetup.content.dialogModify.password" (keypress)="enterPress($event)">
+            <p class="required" *ngIf="!check.password">{{language.login.psWarning}}</p>
+          </div>
+          <div class="buttonItem">
+            <button nz-button style="height: 36px;width: 100%;
+    color: #ffffff;background-color: #ff000f;border-color: #ff000f;
+    font-size: 16px;letter-spacing: 1px;text-align: center;" (click)="login()">{{language.login.login}}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/extra-pages/login/login.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import {en_US, NzMessageService, zh_CN, NzI18nService} from 'ng-zorro-antd';
+import { ApiService } from '../../shared/service/api.service';
+import { PermissionService } from '../../shared/service/permission.service';
+import {Router} from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+  constructor(private message: NzMessageService, private api: ApiService, private fb: FormBuilder, private router: Router) {
+  }
+
+//  变量声明
+  language = LANGUAGEOBJ;
+  param = PARAM;
+  // public loginForm: FormGroup;
+  private url = this.param.url + this.param.login.login;
+  msgs = []; // 错误提示的数据
+  // public currentLi = 0;
+  // private timer: number;
+  req: any = {};
+  public isLoading = false;
+  check = {
+    userName: true,
+    password: true
+  };
+  selectLanguage;
+
+  ngOnInit() {
+    if (window.localStorage.getItem('usrLang')) {
+      this.selectLanguage = window.localStorage.getItem('usrLang');
+    } else {
+      window.localStorage.getItem('usrLang');
+    }
+  }
+
+  public loginIn(req) {
+    const loginUrl = this.url + this.param.login.loginForToken;
+    // this.http.post(loginUrl, this.loginForm.value, (data) => {
+    this.http.post(loginUrl, req, (data) => {
+      this.msgs = [];
+      if (this.http.handleToken(data)) {
+        if (data['code'] === 1) {
+          window.localStorage.setItem('token', data['message']);
+          this.router.navigate(['app/dashboard']);
+        } else {
+          this.message.error(data['message']);
+        }
+      } else {
+        return;
+      }
+      this.isLoading = false;
+    });
+  }
+
+  login() {
+    if (!this.req.userName) {
+      this.check.userName = false;
+      return;
+    }
+    if (!this.req.password) {
+      this.check.password = false;
+      return;
+    }
+    this.isLoading = true;
+    const req = this.req;
+    this.loginIn(req);
+  }
+
+  languageChange() {
+    window.localStorage.setItem('usrLang', this.selectLanguage);
+    window.location.reload();
+  }
+
+  enterPress(e) {
+    if (e.key === 'Enter') {
+      this.login();
+    }
+  }
+}

src/app/layout/breadcrumb/breadcrumb.component.html

+<nz-breadcrumb nzSeparator=">" *ngIf="bcShow && bShow">
+  <nz-breadcrumb-item *ngFor="let step of _title, let i = index">
+    <span class="breadText" (click)="goTo(i + 1)">{{step | translate}}</span>
+  </nz-breadcrumb-item>
+</nz-breadcrumb>

src/app/layout/breadcrumb/breadcrumb.component.scss

+nz-breadcrumb{
+  line-height: 1.5;
+  background: #fff;
+  padding: 15px 25px;
+  font-size: 15px;
+  color: #bfc0c2;
+}
+.breadText{
+  font-weight: 400;
+  cursor: pointer;
+}

src/app/layout/breadcrumb/breadcrumb.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.scss']
+})
+export class BreadcrumbComponent implements OnInit {
+  bShow = true;
+  _title = [];
+  @Input()
+  get title(): any {
+    return this._title;
+  }
+  set title(_title: any) {
+    this._title = _title;
+    this.whenChange();
+  }
+  @Input()bcShow;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  whenChange() {
+    if (this._title[0] === 'home') {
+      this.bShow = false;
+    } else {
+      this.bShow = true;
+    }
+  }
+
+  goTo(index) {
+    if (index > 1 && this._title[1] !== 'historyData') {
+      const oldAddr = this._title.join('/');
+      const addr = this._title.slice(0, index).join('/');
+      window.location.href = window.location.href.replace(oldAddr, addr);
+    }
+  }
+
+}

src/app/layout/footer/footer.component.html

+<div style="text-align: center;height: 50px;line-height: 50px;">Design ©2018 Implement By Bosch.</div>

src/app/layout/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/layout/layout-routing.modules.ts

+import { RouterModule, Routes } from '@angular/router';
+import { LayoutComponent } from './layout.component';
+import { AuthService } from '../shared/service/auth.service';
+import { HomeComponent } from '../main/home/home.component';
+import { ActualDataComponent } from '../main/actual-data/actual-data.component';
+import { CompareComponent } from '../main/compare/compare.component';
+import { AlarmInfoComponent } from '../main/alarm-info/alarm-info.component';
+import { WarnInfoComponent } from '../main/warn-info/warn-info.component';
+import { WarnEditComponent } from '../main/warn-edit/warn-edit.component';
+import { CollectorManageComponent } from '../main/collector-manage/collector-manage.component';
+import { PersonSetComponent} from '../main/person-set/person-set.component';
+import { OperateSetComponent} from '../main/operate-set/operate-set.component';
+import { RoleManageComponent} from '../main/role-manage/role-manage.component';
+import { PointManageComponent} from '../main/point-manage/point-manage.component';
+import { LoginLogComponent} from '../main/login-log/login-log.component';
+import { GatewayManageComponent } from '../main/gateway-manage/gateway-manage.component';
+import { XdkDetailComponent } from '../main/xdk-detail/xdk-detail.component';
+import { XdkHistoryComponent } from '../main/xdk-history/xdk-history.component';
+import { CissDetailComponent } from '../main/ciss-detail/ciss-detail.component';
+import { CissHistoryComponent } from '../main/ciss-history/ciss-history.component';
+import { AreaManageComponent } from '../main/area-manage/area-manage.component';
+import { FactoryManageComponent } from '../main/factory-manage/factory-manage.component';
+import { UserManageComponent } from '../main/user-manage/user-manage.component';
+import { DeviceTypeComponent } from '../main/device-type/device-type.component';
+import { DeviceModelComponent } from '../main/device-model/device-model.component';
+import { DepartmentManageComponent } from '../main/department-manage/department-manage.component';
+import { FactoryPaintComponent } from '../main/factory-paint/factory-paint.component';
+import { PointPaintComponent } from '../main/point-paint/point-paint.component';
+import { HistoryDataComponent } from '../main/history-data/history-data.component';
+import { PointTypeComponent } from '../main/point-type/point-type.component';
+import { MachineRoomComponent } from '../main/machine-room/machine-room.component';
+import { CuttingMachineComponent } from '../main/cutting-machine/cutting-machine.component';
+import { MachineRoomDetailComponent } from '../main/machine-room-detail/machine-room-detail.component';
+import { CuttingMachineDetailComponent } from '../main/cutting-machine-detail/cutting-machine-detail.component';
+const routes: Routes = [
+  {
+    path: 'app',
+    component: LayoutComponent,
+    canActivateChild: [AuthService],
+    children: [
+      {path: '', redirectTo: '/extra/login', pathMatch: 'full'},
+      {path: 'home', component: HomeComponent},
+      {path: 'dataManage/actualData', component: ActualDataComponent},
+      {path: 'dataManage/compare', component: CompareComponent},
+      {path: 'dataManage/actualData/xdkDetail', component: XdkDetailComponent},
+      {path: 'dataManage/actualData/cissDetail', component: CissDetailComponent},
+      {path: 'dataManage/historyData', component: HistoryDataComponent},
+      {path: 'dataManage/historyData/xdkDetail', component: XdkHistoryComponent},
+      {path: 'dataManage/historyData/cissDetail', component: CissHistoryComponent},
+      {path: 'pointAnalyse/machineRoom', component: MachineRoomComponent},
+      {path: 'pointAnalyse/machineRoom/machineRoomDetail', component: MachineRoomDetailComponent},
+      {path: 'pointAnalyse/cuttingMachine', component: CuttingMachineComponent},
+      {path: 'pointAnalyse/cuttingMachine/cuttingMachineDetail', component: CuttingMachineDetailComponent},
+      {path: 'alarmWarn/alarmInfo', component: AlarmInfoComponent},
+      {path: 'alarmWarn/warnInfo', component: WarnInfoComponent},
+      {path: 'alarmWarn/warnInfo/warnNew', component: WarnEditComponent},
+      {path: 'alarmWarn/warnInfo/warnEdit', component: WarnEditComponent},
+      {path: 'deviceManage/collectorManage', component: CollectorManageComponent},
+      {path: 'deviceManage/gatewayManage', component: GatewayManageComponent},
+      {path: 'deviceManage/deviceType', component: DeviceTypeComponent},
+      {path: 'deviceManage/deviceModel', component: DeviceModelComponent},
+      {path: 'systemSet/personSet', component: PersonSetComponent},
+      {path: 'systemSet/roleManage', component: RoleManageComponent},
+      {path: 'systemSet/areaManage', component: AreaManageComponent},
+      {path: 'systemSet/factoryManage', component: FactoryManageComponent},
+      {path: 'systemSet/factoryManage/factoryPaint', component: FactoryPaintComponent},
+      {path: 'systemSet/userManage', component: UserManageComponent},
+      {path: 'systemSet/pointManage', component: PointManageComponent},
+      {path: 'systemSet/pointType', component: PointTypeComponent},
+      {path: 'systemSet/pointManage/pointPaint', component: PointPaintComponent},
+      {path: 'systemSet/operateSet', component: OperateSetComponent},
+      {path: 'systemSet/loginLog', component: LoginLogComponent},
+      {path: 'systemSet/departmentManage', component: DepartmentManageComponent},
+    ]
+  }
+];
+
+export const LayoutRoutingModule = RouterModule.forChild(routes);
+

src/app/layout/layout.component.html

+<nz-layout style="height:100%">
+  <nz-sider style="background-color: #fff;border-right: 1px solid #e6e6e6;overflow-y: auto;" nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="triggerTemplate">
+    <div class="logo logoBackground bottomLine" [ngClass]="{'width-200': !isCollapsed, 'width-80': isCollapsed}">
+      <span *ngIf="!isCollapsed">
+        <img height="54px" [src]="'../../assets/images/BoschLogo.jpg'" alt="bosch">
+      </span>
+      <span *ngIf="isCollapsed" style="width: calc(50% - 64px);display: block;">
+        <i class="iconfont icon-cloud"></i>
+      </span>
+    </div>
+    <app-leftmenu #leftmenu [isCollapsed]="isCollapsed" [selectedItem]="selectedItem"></app-leftmenu>
+  </nz-sider>
+  <nz-layout>
+    <nz-header class="logoBackground bottomLine" style="padding:0;position:fixed; width:100%;z-index: 99;">
+      <i class="iconfont trigger textStyle1 whenHover" [class.icon-toFold]="!isCollapsed"
+         [class.icon-toOpen]="isCollapsed" (click)="changeCollapsed()"></i>
+      <!--<span class="textStyle1 whenHover" style="font-size: 17px;position: fixed;"></span>-->
+      <!--<label class="whenHover textStyle1">-->
+        <!--<span (click)="toZh()">{{'toZh' | translate}}</span>/<span (click)="toEn()">{{'toEn' | translate}}</span>-->
+      <!--</label>-->
+      <label class="linkToPersonSetting whenHover textStyle1" routerLink="/app/systemSet/personSet">
+        <i class="iconfont icon-user"></i>
+        {{'personSet' | translate}}
+      </label>
+      <label class="loginOut whenHover textStyle1" (click)="loginOut()">
+        {{'signOut' | translate}}
+      </label>
+    </nz-header>
+    <nz-content id="layoutCon" style="margin-top:64px;overflow: auto;">
+      <app-breadcrumb [title]="title" [bcShow]="bcShow"></app-breadcrumb>
+      <div style="overflow-y: auto;overflow-x: auto;width: 100%;height: 100%">
+        <router-outlet></router-outlet>
+      </div>
+    </nz-content>
+    <app-footer></app-footer>
+  </nz-layout>
+</nz-layout>
+<ng-template #trigger>
+  <i class="iconfont icon-up"></i>
+</ng-template>
+<!--<div class="footer"></div>-->

src/app/layout/layout.component.scss

+$headerSlideBackground: rgba(255, 255, 255, 1);
+
+:host ::ng-deep .trigger {
+  font-size: 20px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color .3s;
+}
+
+:host ::ng-deep .logo {
+  text-align: center;
+}
+
+.logoBackground {
+  background-color: $headerSlideBackground;
+  height: 64px;
+  line-height: 64px;
+}
+
+.loginOut {
+  position: fixed;
+  right: 40px;
+}
+
+.linkToPersonSetting {
+  position: fixed;
+  right: 100px;
+}
+
+.logo{
+  z-index: 5;
+  position: fixed;
+  padding: 5px;
+  border-right: 1px solid #e6e6e6;
+}
+
+ul {
+  height: calc(100% - 64px);
+  overflow-y: auto;
+  margin-top: 64px;
+  overflow-x: hidden;
+}
+
+.width-200{
+  width: 200px;
+}
+
+.width-80{
+  width: 80px;
+}

src/app/layout/layout.component.ts

+import {Component, TemplateRef, ViewChild, OnInit} from '@angular/core';
+import {Router, NavigationEnd} from '@angular/router';
+import {ApiService} from '../shared/service/api.service';
+import {NzMessageService, zh_CN, en_US, NzI18nService} from 'ng-zorro-antd';
+import {LeftmenuComponent} from './leftmenu/leftmenu.component';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit {
+
+  isCollapsed = false;
+  triggerTemplate = null;
+  title;
+  bcShow = true;
+  selectedItem;
+  @ViewChild('trigger') customTrigger: TemplateRef<void>;
+  @ViewChild('leftmenu') leftmenu: LeftmenuComponent;
+
+  constructor(private router: Router, private api: ApiService, private message: NzMessageService,
+              private translate: TranslateService, private nzI18nService: NzI18nService) {
+  }
+
+  /** custom trigger can be TemplateRef **/
+  changeTrigger(): void {
+    this.triggerTemplate = this.customTrigger;
+  }
+
+  changeCollapsed () {
+    this.leftmenu.collapseChange(!this.isCollapsed);
+    this.isCollapsed = !this.isCollapsed;
+  }
+
+  ngOnInit() {
+    let hash = window.location.hash;
+    if (hash.indexOf('?') > -1) {
+      hash = hash.slice(0, hash.indexOf('?'));
+    }
+    if (hash !== '#/app') {
+      this.bcShow = true;
+      this.title = hash.replace(/#\/app\//g, '').split('/');
+    } else {
+      this.bcShow = false;
+    }
+    this.selectedItem = hash.replace(/#\/app\//g, '')
+      .replace(/\/detail/g, '/dataMonitoring/')
+      .replace(/\/oldData/g, '/dataMonitoring/').split('/');
+    this.router.events
+      .subscribe((event: NavigationEnd) => {
+        if (event instanceof NavigationEnd) {
+          let hashValue = window.location.hash;
+          if (hashValue.indexOf('?') > -1) {
+            hashValue = hashValue.slice(0, hashValue.indexOf('?'));
+          }
+          if (hashValue !== '#/app') {
+            this.bcShow = true;
+            this.title = hashValue.replace(/#\/app\//g, '').split('/');
+          } else {
+            this.bcShow = false;
+          }
+          this.selectedItem = hashValue.replace(/#\/app\//g, '')
+            .replace(/\/detail/g, '/dataMonitoring')
+            .replace(/\/oldData/g, '/dataMonitoring').split('/');
+        }
+      });
+  }
+
+  loginOut() {
+    this.api.login.logout(['', (data: any) => {
+      const message = data.message ? data.message : this.translate.instant('loginOutSuccess');
+      this.message.success(message);
+      window.sessionStorage.clear();
+      this.router.navigate(['/extra/login']);
+    }]);
+  }
+}

src/app/layout/layout.module.ts

+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { LayoutRoutingModule } from './layout-routing.modules';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  imports: [
+    TranslateModule,
+    NgxEchartsModule,
+    LayoutRoutingModule,
+    SharedModule
+  ],
+  declarations: []
+})
+export class LayoutModule {
+}

src/app/layout/leftmenu/leftmenu.component.html

+<div class="menuPart">
+  <div class="menuFirst" *ngFor="let item of dataArr">
+    <div class="first-floor textStyle1 whenHover" [title]="item.name | translate" *ngIf="(item.child && item.child.length > 0) || item.type" (click)="selectFirstFloor(item)" [ngClass]="{'isSelectedFirst': isSelected[0] === item.name, 'isSelectedSecond': isSelected[0] === item.name && item.type === 1}">
+      <i [class]="item.icon" [ngClass]="{'iconLeft': !isCollapsed,'iconLeftCos': isCollapsed}"></i>
+      <span *ngIf="!isCollapsed">{{item.name | translate}}</span>
+      <i class="iconfont iconRight" [ngClass]="{'icon-down': !isOpen[item.name] && !item.type && !isCollapsed,'icon-up': isOpen[item.name] && !item.type && !isCollapsed, 'icon-right': isCollapsed && !item.type}"></i>
+    </div>
+    <div *ngIf="isOpen[item.name] && !isCollapsed" class="menuSecond whenHover">
+      <div class="second-floor whenHover textStyle2" [title]="one.name | translate" *ngFor="let one of item.child"
+           (click)="selectSecondFloor(item.name, one.name)"
+           [ngClass]="{'isSelectedSecond': isSelected[0] === item.name && isSelected[1] === one.name}">{{one.name | translate}}
+      </div>
+    </div>
+    <div *ngIf="isCollapsed && item.child.length > 0" class="menuSecondCos" [ngClass]="{'isCos': isCollapsed}">
+      <div class="handleTheLeft">
+        <div class="second-floor-cos whenHover textStyle2" *ngFor="let one of item.child"
+             (click)="selectSecondFloor(item.name, one.name)"
+             [ngClass]="{'isSelectedSecond': isSelected[0] === item.name && isSelected[1] === one.name}">{{one.name | translate}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/layout/leftmenu/leftmenu.component.scss

+.menuPart {
+  margin-top: 64px;
+}
+.menuFirst,.menuSecond {
+  padding: 0;
+}
+.menuFirst {
+  position: relative;
+}
+.first-floor {
+  line-height: 48px;
+  height: 48px;
+  color: rgba(0,0,0,.65);
+  padding-left: 14px;
+  padding-right: 34px;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.second-floor {
+  line-height: 40px;
+  height: 40px;
+  text-indent: 48px;
+  color: rgba(0,0,0,.65);
+  cursor: pointer;
+  width: 100%;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+i.iconLeft {
+  padding: 0 10px;
+}
+i.iconRight {
+  position: absolute;
+  top: 0;
+  right: 17px;
+  font-size: 15px;
+  font-weight: bolder;
+}
+.iconLeftCos {
+  padding: 0 5px;
+}
+.menuSecondCos {
+  position: fixed;
+  left: 80px;
+  margin-top: -50px;
+  z-index: 2000;
+  padding-left: 5px;
+}
+.second-floor-cos {
+  line-height: 40px;
+  height: 40px;
+  text-indent: 25px;
+  padding-right: 25px;
+  cursor: pointer;
+}
+.menuFirst .menuSecondCos.isCos{
+  display: none;
+}
+.menuFirst:hover .menuSecondCos.isCos{
+  display: block;
+}
+.handleTheLeft {
+  min-width: 160px;
+  background-color: #FFFFFF;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+}
+.isSelectedSecond {
+  color: #005691 !important;
+  background-color: #efefef;
+}

src/app/layout/leftmenu/leftmenu.component.ts

+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { PermissionService } from '../../shared/service/permission.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-leftmenu',
+  templateUrl: './leftmenu.component.html',
+  styleUrls: ['./leftmenu.component.scss']
+})
+export class LeftmenuComponent implements OnInit, OnDestroy {
+
+  constructor(private message: NzMessageService, private permissionS: PermissionService, private router: Router) {
+  }
+
+  _selectedItem: any;
+  @Input() isCollapsed;
+  @Input()
+  get selectedItem() {
+    return this._selectedItem;
+  }
+  set selectedItem(_selectedItem: any) {
+    this._selectedItem = _selectedItem;
+    this.init();
+  }
+  dataArr = [{
+    name: 'home',
+    icon: 'iconfont icon-home',
+    type: 1,
+    child: []
+  }, {
+    name: 'dataManage',
+    icon: 'iconfont icon-data',
+    type: 0,
+    // {name: 'actualData'}, {name: 'compare'}
+    child: []
+  }, {
+    name: 'pointAnalyse',
+    icon: 'iconfont icon-alarmUp',
+    type: 0,
+    child: []
+  }, {
+    name: 'alarmWarn',
+    icon: 'iconfont icon-warn',
+    type: 0,
+    // {name: 'warnInfo'}, {name: 'alarmInfo'}
+    child: []
+  }, {
+    name: 'deviceManage',
+    icon: 'iconfont icon-device',
+    type: 0,
+    // {name: 'gatewayManage'}, {name: 'collectorManage'}, {name: 'deviceModel'}, {name: 'deviceType'}
+    child: []
+  // }, {
+  //   name: 'moduleCenter',
+  //   icon: 'iconfont icon-edit',
+  //   type: 0,
+  //   child: [{name: 'moduleManage'}, {name: 'partManage'}, {name: 'channelTopic'}, {name: 'subjectManage'}]
+  }, {
+    name: 'systemSet',
+    icon: 'iconfont icon-setting',
+    type: 0,
+    // child: [{name: 'personSet'}, {name: 'roleManage'}, {name: 'areaManage'}, {name: 'departmentManage'}, {name: 'pointManage'}, {name: 'factoryManage'}, {name: 'userManage'}, {name: 'operateSet'}, {name: 'loginLog'}]
+    child: []
+  }];
+  isOpen = {monitoring: false, deviceManage: false, pileManage: false, moduleCenter: false, systemSet: false};
+  isSelected = ['', ''];
+
+  ngOnInit() {
+    this.init();
+    this.getPermission();
+  }
+
+  init() {
+    if (this._selectedItem && this._selectedItem.length > 0) {
+      this.isOpen[this._selectedItem[0]] = true;
+      this.isSelected = this._selectedItem;
+    }
+  }
+
+  ngOnDestroy() {
+  }
+
+  getPermission() {
+    const arr = [...this.dataArr];
+    const obj = this.permissionS.getTiny();
+    arr.map((item, index) => {
+      if (item.name !== 'home') {
+        item.child = obj[item.name].child;
+      }
+      if (index === arr.length - 1 ) {
+        this.dataArr = arr;
+      }
+    });
+  }
+
+  selectFirstFloor(item) {
+    if (item.type) {
+      this.isOpen = {monitoring: false, deviceManage: false, pileManage: false, moduleCenter: false, systemSet: false};
+      this.isSelected = [item.name];
+      this.router.navigate(['app/' + item.name]);
+    } else if (!this.isCollapsed) {
+      this.isOpen[item.name] = !this.isOpen[item.name];
+    }
+  }
+
+  selectSecondFloor(item1, item2) {
+    const isOpen = {monitoring: false, deviceManage: false, pileManage: false, moduleCenter: false, systemSet: false};
+    isOpen[item1] = true;
+    this.isOpen = isOpen;
+    this.isSelected = [item1, item2];
+    this.router.navigate(['app/' + item1 + '/' + item2]);
+  }
+
+  collapseChange(e) {
+    if (!e) {
+      const isOpen = {monitoring: false, deviceManage: false, pileManage: false, moduleCenter: false, systemSet: false};
+      isOpen[this.isSelected[0]] = true;
+      this.isOpen = isOpen;
+    }
+  }
+}

src/app/main/actual-data/actual-data.component.ts

+import { Component, OnInit, HostListener } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { fadeIn } from '../../animation/fade-in';
+import { ApiService } from '../../shared/service/api.service';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-actual-data',
+  templateUrl: './actual-data.component.html',
+  animations: [fadeIn],
+  styles: [`
+    :host ::ng-deep .ant-tabs-nav-scroll {
+      background-color: #ffffff;
+      border-top: 1px solid #e6e6e6;
+      padding: 0 15px;
+    }
+    :host ::ng-deep .ant-tabs-bar {
+      margin: 0;
+    }
+    .tag{
+      border: 1px solid #ccc;
+      display: inline-block;
+      padding: 0 5px;
+      font-size: 13px;
+      border-radius: 5px;
+      height: 24px;
+      line-height: 21px;
+    }
+  `]
+})
+export class ActualDataComponent implements OnInit {
+
+  req: any = {};
+  req2: any = {};
+  cissData = [];
+  xdkData = [];
+  status = [{label: 'online', value: 1}, {label: 'offline', value: 0}];
+  data = [];
+  param = ['temp', 'press', 'humid'];
+  param2 = ['x', 'y', 'z'];
+  deviceModels = [];
+  params: any = [{value: 'temp'}, {value: 'press'}, {value: 'humid'},
+    {value: 'mag_x'}, {value: 'mag_y'}, {value: 'mag_z'},
+    {value: 'mag_r'}, {value: 'gyros_x'}, {value: 'gyros_y'},
+    {value: 'gyros_z'}, {value: 'gyros'}, {value: 'light'},
+    {value: 'noise'}];
+  params2: any = [{value: 'x'}, {value: 'y'}, {value: 'z'},
+    {value: 'temp'}, {value: 'press'}, {value: 'humid'},
+    {value: 'mag_x'}, {value: 'mag_y'}, {value: 'mag_z'},
+    {value: 'mag_r'}, {value: 'gyros_x'}, {value: 'gyros_y'},
+    {value: 'gyros_z'}, {value: 'gyros'}, {value: 'light'},
+    {value: 'noise'}];
+  devices: any = [];
+  isLoading = false;
+  points = [];
+  constructor(private api: ApiService, private message: NzMessageService,
+              private router: Router, private translate: TranslateService) { }
+
+  ngOnInit() {
+    this.init();
+  }
+
+  init() {
+    this.getXdkData();
+    this.getCissData();
+    this.getPoints();
+    this.getDeviceTypes();
+    this.getDeviceModels();
+  }
+
+  getDeviceModels() {
+    this.isLoading = true;
+    this.api.deviceModel.getAll(['', (data) => {
+      if (data.constructor === Array) {
+        this.deviceModels = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  getDeviceTypes() {
+    this.isLoading = true;
+    this.api.deviceType.getAll(['', (data) => {
+      if (data.constructor === Array) {
+        this.devices = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  getPoints() {
+    this.isLoading = true;
+    this.api.monitoringPoint.getAll(['', (data) => {
+      if (data.constructor === Array) {
+        this.points = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  getCissData() {
+    this.isLoading = true;
+    this.api.data.getCISSData(['', (data) => {
+      if (data.constructor === Array) {
+        this.cissData = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  queryCiss() {
+    this.isLoading = true;
+    const req = {
+      deviceModel: null,
+      factoryNo: null,
+      monitoringPointName: this.req2.monitoringPointName,
+      sensorName: this.req2.sensorName,
+      sensorSN: this.req2.sensorSN,
+      state: this.req2.state
+    };
+    this.api.data.getCISSDataByTerm([req, (data) => {
+      if (data.constructor === Array) {
+        this.cissData = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  getXdkData() {
+    this.isLoading = true;
+    this.api.data.getXDKData(['', (data) => {
+      if (data.constructor === Array) {
+        this.xdkData = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  queryXdk() {
+    this.isLoading = true;
+    const req = {
+      deviceModel: this.req.deviceModel,
+      monitoringPointName: this.req.monitoringPointName,
+      sensorName: this.req.sensorName,
+      sensorSN: this.req.sensorSN,
+      state: this.req.state
+    };
+    this.api.data.getXDKDataByTerm([req, (data) => {
+      if (data.constructor === Array) {
+        this.xdkData = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  searchCiss() {
+    this.queryCiss();
+  }
+
+  getAllCiss() {
+    this.req2 = {};
+    this.getCissData();
+  }
+
+  searchXdk() {
+    this.queryXdk();
+  }
+
+  getAllXdk() {
+    this.req = {};
+    this.getXdkData();
+  }
+
+  toDetail(one, type) {
+    this.router.navigate(['app/dataManage/actualData/' + type + 'Detail'], { queryParams: {deviceNo: one.deviceNo} });
+  }
+}

src/app/main/alarm-info/alarm-info.component.html

+<div class="searchBar" @fade>
+  <app-search-item [label]="'monitoringPointName' | translate" [(value)]="query.monitoringPointName"></app-search-item>
+  <app-search-select [label]="'factoryLine' | translate" [(value)]="query.factoryNo" [data]="factorys" optL="factoryName" optV="factoryNo"></app-search-select>
+  <app-search-date [label]="'startTime' | translate" showTime="true" [(value)]="query.startTime"></app-search-date>
+  <app-search-date [label]="'endTime' | translate" showTime="true" [(value)]="query.endTime"></app-search-date>
+  <div class="btnLine">
+    <button nz-button [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()"><span>{{'search' | translate}}</span></button>
+    <button nz-button class="btnAll" [nzLoading]="isLoading" (click)="onGetAll()"><span>{{'allData' | translate}}</span></button>
+    <button nz-button class="btnAdd" [nzLoading]="isLoading" (click)="download()"><span>{{'downloadByTerm' | translate}}</span></button>
+  </div>
+</div>
+<div class="tableBar" @fade>
+  <nz-table #nzTable
+            [nzData]="data"
+            [nzLoading]="isLoading"
+            nzShowSizeChanger
+            [nzShowPagination]="true"
+            [nzFrontPagination]="false"
+            [nzTotal]="total"
+            [(nzPageIndex)]="page"
+            [(nzPageSize)]="rows"
+            (nzPageIndexChange)="searchData()"
+            (nzPageSizeChange)="searchData()">
+    <thead nz-thead>
+    <tr>
+      <th nz-th><span>{{'num' | translate}}</span></th>
+      <th nz-th><span>{{'alarmNo' | translate}}</span></th>
+      <th nz-th><span>{{'sensorSN' | translate}}</span></th>
+      <th nz-th><span>{{'sensorType' | translate}}</span></th>
+      <th nz-th><span>{{'belongMonitoringPoint' | translate}}</span></th>
+      <th nz-th><span>{{'alarmType' | translate}}</span></th>
+      <th nz-th><span>{{'alarmData' | translate}}</span></th>
+      <th nz-th><span>{{'alarmDes' | translate}}</span></th>
+      <th nz-th><span>{{'alarmTime' | translate}}</span></th>
+      <th nz-th *ngIf="per.testFuncs('alarmDispose')"><span>{{'operate' | translate}}</span></th>
+    </tr>
+    </thead>
+    <tbody nz-tbody>
+    <tr *ngFor="let one of data,let i = index">
+      <td nz-td>{{i + 1}}</td>
+      <td nz-td>{{one?.alarmLogNo}}</td>
+      <td nz-td>{{one?.sn}}</td>
+      <td nz-td>{{one?.deviceType}}</td>
+      <td nz-td>{{one?.monitoringPointName}}</td>
+      <td nz-td>{{one?.alarmType}}</td>
+      <td nz-td>{{one && one.parameter ? one.parameter : '' | translate}} {{one && one.alarmData ? one.alarmData + ': ' : ''}}</td>
+      <td nz-td>{{one?.description}}</td>
+      <td nz-td>{{one?.alarmTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
+      <td nz-td *ngIf="per.testFuncs('alarmDispose')">
+        <span class="editSpan" *ngIf="one.disposeState === '未处理'" (click)="handle(one)">{{'dispose' | translate}}</span>
+        <span *ngIf="one.disposeState === '已处理'">{{'disposed' | translate}}</span>
+      </td>
+    </tr>
+    </tbody>
+  </nz-table>
+</div>
+
+<nz-modal [(nzVisible)]="isVisible" nzTitle="&nbsp;" nzMaskClosable="false"
+          [nzContent]="modalContent" nzWidth="400"
+          [nzFooter]="modalFooter" (nzOnCancel)="cancel()">
+  <ng-template #modalContent>
+    <app-search-item [label]="'disposer' | translate" [(value)]="req.faultHandle" inModal="true" readonly="true"></app-search-item>
+    <app-search-item [label]="'disposeResult' | translate" [(value)]="req.result" inModal="true"></app-search-item>
+    <app-search-item [label]="'remark' | translate" [(value)]="req.remark" inModal="true"></app-search-item>
+  </ng-template>
+  <ng-template #modalFooter>
+    <button nz-button [nzLoading]="isLoading" nzType="default" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
+    <button nz-button [nzLoading]="isLoading" nzType="primary" (click)="confirm()"><span>{{'confirm' | translate}}</span></button>
+  </ng-template>
+</nz-modal>

src/app/main/alarm-info/alarm-info.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../../shared/service/api.service';
+import { NzMessageService, NzModalService } from 'ng-zorro-antd';
+import { fadeIn } from '../../animation/fade-in';
+import { PermissionService } from '../../shared/service/permission.service';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-alarm-info',
+  templateUrl: './alarm-info.component.html',
+  animations: [fadeIn]
+})
+export class AlarmInfoComponent implements OnInit {
+
+  req: any = {};
+  data = [];
+  isVisible = false;
+  isLoading = false;
+  factorys = [];
+  page = 1;
+  rows = 10;
+  total;
+  query: any = {};
+
+  constructor(private api: ApiService, private message: NzMessageService,
+              public per: PermissionService, private translate: TranslateService) {
+  }
+
+  ngOnInit() {
+    this.init();
+  }
+
+  init() {
+    this.getData();
+    this.getAllFactory();
+  }
+
+  getData() {
+    this.isLoading = true;
+    this.api.alarmLog.getAll(this.page, this.rows, ['', (data) => {
+      if (data.rows && data.rows.constructor === Array) {
+        this.data = data.rows;
+        this.total = data.total;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  queryData() {
+    this.isLoading = true;
+    const req = {
+      monitoringPointName: this.query.monitoringPointName,
+      monitoringPointNo: this.query.monitoringPointNo,
+      factoryNo: this.query.factoryNo,
+      startAlarmTime: this.query.startTime,
+      stopAlarmTime: this.query.endTime
+    };
+    this.api.alarmLog.getForTerm(this.page, this.rows, [req, (data) => {
+      if (data.rows && data.rows.constructor === Array) {
+        this.data = data.rows;
+        this.total = data.total;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  getAllFactory() {
+    this.isLoading = true;
+    this.api.factory.getAllForFactoryLine(['', (data) => {
+      if (data.constructor === Array) {
+        this.factorys = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  onSearch() {
+    this.page = 1;
+    this.queryData();
+  }
+
+  onGetAll() {
+    this.page = 1;
+    this.req = {};
+    this.getData();
+  }
+
+  searchData() {
+    if (this.query.alarmName || this.query.deviceName || this.query.factoryNo || this.query.sn || this.query.startTime || this.query.endTime) {
+      this.queryData();
+    } else {
+      this.getData();
+    }
+  }
+
+  handle(one) {
+    this.req = {};
+    this.req.alarmLogNo = one.alarmLogNo;
+    this.req.faultHandle = JSON.parse(decodeURIComponent(window.sessionStorage.getItem(encodeURIComponent('_AMap_AMap.IndoorMapFunc')))).userName;
+    this.isVisible = true;
+    }
+
+  cancel() {
+    this.isVisible = false;
+  }
+
+  confirm() {
+    this.isLoading = true;
+    this.api.alarmLog.disposeAlarm([this.req, (data) => {
+      if (data.code === 1) {
+        this.isVisible = false;
+        this.message.success(data.message || this.translate.instant('operateSuccess'));
+        this.init();
+      } else {
+        this.message.error(data.message || this.translate.instant('operateFail'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  download() {
+    this.isLoading = true;
+    const req = {
+      monitoringPointName: this.query.monitoringPointName,
+      monitoringPointNo: this.query.monitoringPointNo,
+      factoryNo: this.query.factoryNo,
+      startAlarmTime: this.query.startTime,
+      stopAlarmTime: this.query.endTime
+    };
+    this.api.alarmLog.downloadExcel([req, (data) => {
+      if (data.code === 1) {
+        window.location.href = data.message;
+      } else {
+        this.message.error(data.message);
+      }
+      this.isLoading = false;
+    }]);
+  }
+}

src/app/main/area-manage/area-manage.component.html

+<div class="tableBar" @fade>
+  <div class="addIcon" *ngIf="per.testFuncs('factoryLineInsert')">
+    <i class="iconfont icon-tianjia" (click)="add()"></i>
+  </div>
+  <nz-table #nzTable
+            [nzData]="data"
+            [nzSize]="'middle'"
+            [nzLoading]="isLoading"
+            nzShowSizeChanger>
+    <thead nz-thead>
+    <tr>
+      <th nz-th><span>{{'num' | translate}}</span></th>
+      <th nz-th><span>{{'factoryLineName' | translate}}</span></th>
+      <th nz-th><span>{{'belongDepartment' | translate}}</span></th>
+      <th nz-th><span>{{'detailAddress' | translate}}</span></th>
+      <th nz-th><span>{{'remark' | translate}}</span></th>
+      <th nz-th><span>{{'createTime' | translate}}</span></th>
+      <th nz-th *ngIf="per.testFuncs('factoryLineUpdate') || per.testFuncs('factoryLineDelete')"><span>{{'operate' | translate}}</span></th>
+    </tr>
+    </thead>
+    <tbody nz-tbody>
+    <tr *ngFor="let one of nzTable.data,let i = index">
+      <td nz-td>{{i + 1}}</td>
+      <td nz-td>{{one.factoryName}}</td>
+      <td nz-td>{{one.parentFactoryName}}</td>
+      <!--<td nz-td>{{one.factoryLine}}</td>-->
+      <td nz-td>{{one.city}} - {{one.area}} - {{one.addressDetail}}</td>
+      <td nz-td>{{one.remark}}</td>
+      <td nz-td>{{one.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
+      <td nz-td *ngIf="per.testFuncs('factoryLineUpdate') || per.testFuncs('factoryLineDelete')">
+        <span class="editSpan" *ngIf="per.testFuncs('factoryLineUpdate')" (click)="edit(one)">{{'edit' | translate}}</span>
+        <nz-divider nzType="vertical" *ngIf="per.testFuncs('factoryLineUpdate') && per.testFuncs('factoryLineDelete')"></nz-divider>
+        <span class="deleteFontColor" *ngIf="per.testFuncs('factoryLineDelete')" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
+      </td>
+    </tr>
+    </tbody>
+  </nz-table>
+</div>
+<nz-modal [(nzVisible)]="isVisible" [nzTitle]="(isUpdate ? 'editFactoryLine' : 'addFactoryLine') | translate" [nzContent]="modalContent" nzWidth="500"
+          [nzFooter]="modalFooter" (nzOnCancel)="cancel()" nzMaskClosable="false">
+  <ng-template #modalContent>
+    <app-search-select *ngIf="!isUpdate" [(value)]="req.parentFactoryNo" [label]="'belongDepartment' | translate" inModal="true" [data]="departments" optL="factoryName" optV="factoryNo"></app-search-select>
+    <app-search-item [(value)]="req.factoryName" [label]="'factoryLineName' | translate" inModal="true"></app-search-item>
+    <app-search-item [(value)]="req.manager" [label]="'contact' | translate" inModal="true"></app-search-item>
+    <app-search-item [(value)]="req.phone" [label]="'contactLinkWay' | translate" inModal="true" [maxlength]="11" [maxlength]="11"></app-search-item>
+    <app-search-select *ngIf="!isUpdate" [(value)]="req.roleNo" [label]="'factoryLineHighestPermission' | translate" inModal="true" [data]="roles" optL="roleName" optV="roleNo"></app-search-select>
+    <app-search-item [(value)]="req.remark" [label]="'remark' | translate" inModal="true"></app-search-item>
+  </ng-template>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
+    <button nz-button nzType="primary" [nzLoading]="isLoading" (click)="save()"><span>{{'confirm' | translate}}</span></button>
+  </ng-template>
+</nz-modal>

src/app/main/area-manage/area-manage.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ApiService } from '../../shared/service/api.service';
+import { CheckService } from '../../shared/service/check.service';
+import { PermissionService } from '../../shared/service/permission.service';
+import { NzMessageService, NzModalService } from 'ng-zorro-antd';
+import { fadeIn } from '../../animation/fade-in';
+import { GaodeMapComponent } from './gaode-map/gaode-map.component';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-area-manage',
+  templateUrl: './area-manage.component.html',
+  animations: [fadeIn],
+  styles: []
+})
+export class AreaManageComponent implements OnInit {
+
+  req: any = {};
+  data: any = [];
+  isLoading = false;
+  isVisible = false;
+  isUpdate = false;
+  nzOptions: any = {};
+  area: any;
+  departments = [];
+  roles = [];
+  @ViewChild('gaode')
+  gaode: GaodeMapComponent;
+  constructor(private api: ApiService, private message: NzMessageService,
+              private modalService: NzModalService, private ck: CheckService,
+              public per: PermissionService, private translate: TranslateService) { }
+
+  ngOnInit() {
+    this.init();
+  }
+
+  init() {
+    this.getData();
+    this.getDepartments();
+    this.getRoles();
+    // this.getAreas();
+  }
+
+  getRoles() {
+    this.isLoading = true;
+    this.api.role.getAll(['', (data) => {
+      if (data.constructor === Array) {
+        this.roles = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+    }]);
+  }
+
+  getDepartments() {
+    this.isLoading = true;
+    this.api.factory.getAllForDepartment(['', (data) => {
+      if (data.constructor === Array) {
+        this.departments = data;
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+    }]);
+  }
+
+  getData() {
+    this.isLoading = true;
+    this.api.factory.getAllForFactoryLine(['', this.next]);
+  }
+
+  // getAreas() {
+  //   this.isLoading = true;
+  //   this.api.area.getAll(['', (data) =>{
+  //     if(data.constructor === Array) {
+  //       this.initTree(data);
+  //     } else {
+  //       this.message.error(data.message || this.translate.instant('wrongToGetData'));
+  //     }
+  //   }])
+  // }
+
+  next = (data) => {
+    if (data.constructor === Array) {
+      this.data = data;
+    } else if (data.code === 1) {
+      this.message.success(data.message || this.translate.instant('operateSuccess'));
+      this.isVisible = false;
+      this.init();
+    } else if (data.code === 0) {
+      this.message.error(data.message || this.translate.instant('operateFail'));
+    } else {
+      this.message.error(data.message || this.translate.instant('wrongToGetData'));
+    }
+    this.isLoading = false;
+  }
+
+  add() {
+    this.isUpdate = false;
+    this.req = {};
+    this.isVisible = true;
+    // this.area = [];
+    // setTimeout(() => {
+    //   this.gaode.clearMarker();
+    // }, 1);
+  }
+
+  edit(item) {
+    this.isUpdate = true;
+    this.req = {...item};
+    // this.area = [item.province, item.city, item.area];
+    this.isVisible = true;
+  }
+
+  cancel() {
+    this.isVisible = false;
+  }
+
+  save() {
+    this.isLoading = true;
+    const req: any = {...this.req};
+    const check = {
+      field: this.isUpdate ? ['parentFactoryNo', 'factoryName'] : ['parentFactoryNo', 'factoryName', 'roleNo'],
+      tel: ['phone']
+    };
+    if (!this.ck.formCheck(req, check)) {
+      this.isLoading = false;
+      return;
+    }
+    if (this.isUpdate) {
+      this.api.factory.updateFactoryLine([req, this.next]);
+    } else {
+      this.api.factory.addFactoryLine([req, this.next]);
+    }
+  }
+
+  deleteConfirm(one) {
+    this.modalService.confirm({
+      nzTitle  : '<i></i>',
+      nzContent: '<b>' + this.translate.instant('confirmDeleteThisRecord') + '</b>',
+      nzOnOk   : () => this.delete(one)
+    });
+  }
+
+  delete(one) {
+    this.isLoading = true;
+    const req = {factoryNo: one.factoryNo};
+    this.api.factory.deleteFactory([req, this.next]);
+  }
+}

src/app/main/area-manage/gaode-map/gaode-map.component.html

+<div id="container"></div>

src/app/main/area-manage/gaode-map/gaode-map.component.ts

+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+
+declare var AMap: any;
+@Component({
+  selector: 'app-gaode-map',
+  templateUrl: './gaode-map.component.html',
+  styles: [`
+    #container {
+      width: 100%;
+      height: 300px;
+      margin-bottom: 15px;
+    }
+  `]
+})
+export class GaodeMapComponent implements OnInit {
+
+  map;
+  lastMarker;
+  selectPoint = {lng: '', lat: ''};
+  distinct;
+  @Output() childEvent = new EventEmitter<any>();
+  constructor() {}
+
+  ngOnInit() {
+    this.init();
+  }
+
+  init() {
+    this.map = new AMap.Map('container');
+    this.map.setZoomAndCenter(10, [119.943141, 31.772073]);
+    this.map.on('click', (event) => {this.addMarker(event); });
+  }
+
+  addMarker(e) {
+    if (e.lnglat && e.lnglat.lng && e.lnglat.lat) {
+      this.selectPoint.lat = e.lnglat.lat;
+      this.selectPoint.lng = e.lnglat.lng;
+      const marker = new AMap.Marker({
+        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        position: [e.lnglat.lng, e.lnglat.lat]
+      });
+      if (this.lastMarker) {
+        this.map.remove(this.lastMarker);
+      }
+      this.map.add(marker);
+      this.map.setZoomAndCenter(13, [e.lnglat.lng, e.lnglat.lat]);
+      this.childEvent.emit(this.selectPoint);
+      this.lastMarker = marker;
+    }
+  }
+
+  clearMarker() {
+    if (this.lastMarker) {
+      this.map.remove(this.lastMarker);
+      this.map.setZoomAndCenter(10, [119.943141, 31.772073]);
+      this.selectPoint = {lng: '', lat: ''};
+      this.childEvent.emit(this.selectPoint);
+    }
+  }
+
+  moveToArea(city, area) {
+    // this.map.setCity(area);
+    this.distinct = new AMap.DistrictSearch({level: 'district', showbiz: false, subdistrict: 0});
+    this.distinct.search(area, (a, b) => {
+      if (a === 'complete' && b.districtList.length >= 1) {
+        const point = [b.districtList[0].center.lng, b.districtList[0].center.lat];
+        this.map.setZoomAndCenter(12, point);
+      }
+    });
+  }
+}

src/app/main/ciss-detail/ciss-detail.component.html

+<app-detail-header type="ciss" [isLoading]="isLoading" [deviceNo]="selectDeviceNo" [detail]="data"></app-detail-header>
+<div class="tableBar" @fade>
+  <div class="right">
+    <div *ngIf="optionArray.length === 0" class="noData">{{'noData' | translate}}</div>
+    <div *ngFor="let one of optionArray" echarts class="echartsPart" [ngClass]="{'hidden': !one}" [options]="one"></div>
+  </div>
+</div>

src/app/main/ciss-detail/ciss-detail.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ApiService } from '../../shared/service/api.service';
+import { NzMessageService } from 'ng-zorro-antd';
+import { fadeIn } from '../../animation/fade-in';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-ciss-detail',
+  templateUrl: './ciss-detail.component.html',
+  animations: [fadeIn],
+  styles: [`
+    /*.tableBar {*/
+      /*display: flex;*/
+    /*}*/
+
+    .echartsPart {
+      min-width: 300px;
+      width: 100%;
+      height: 500px;
+    }
+
+    .left {
+      width: 400px;
+      padding: 30px 15px 0 0;
+      border-right: 1px solid #ccc;
+    }
+
+    .right {
+      width: 100%;
+      /*flex: 1;*/
+    }
+  `]
+})
+export class CissDetailComponent implements OnInit {
+
+  alarmData: Array<object> = [{label: 111}];
+  selectDeviceNo = '';
+  optionArray = [];
+  data: any = {sensorType: ''};
+  option = {
+    title: {
+      text: 'Step Line',
+      left: '5%',
+      top: '3%'
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (value) => {
+        return value[0].data[1];
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    dataZoom: [
+      {
+        show: true,
+        start: 0,
+        end: 100,
+        xAxisIndex: 0
+      }
+    ],
+    xAxis: {
+      type: 'value'
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        name: 'max',
+        type: 'line',
+        data: [],
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: 'gray',
+            width: 2,
+            type: 'dashed'
+          }
+        },
+      }, {
+        name: 'min',
+        type: 'line',
+        data: [],
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: 'gray',
+            width: 2,
+            type: 'dashed'
+          }
+        },
+      }
+    ]
+  };
+  isLoading = false;
+
+  constructor(private api: ApiService, private acRouter: ActivatedRoute,
+              private message: NzMessageService, private translate: TranslateService) {
+  }
+
+  ngOnInit() {
+    this.acRouter.queryParams.subscribe((params) => {
+      this.selectDeviceNo = params.deviceNo;
+      if (params.deviceNo) {
+        this.getData();
+      }
+    });
+  }
+
+  getData() {
+    this.isLoading = true;
+    const req = {
+      deviceNo: this.selectDeviceNo,
+      // startTime: 1548832153000,
+      // endTime: 1548833953000
+      startTime: new Date().getTime() - 1000 * 60 * 10,
+      endTime: new Date().getTime() - 1000 * 60 * 5
+    };
+    this.api.data.getCISS([req, (data) => {
+      if (data && data.resultSensorVo) {
+        this.data = data.resultSensorVo;
+        const xyz = ['X', 'Y', 'Z'];
+        if (data.sensorType === 'CISS-Stepworking') {
+          xyz.map((item, index) => {
+            if (data[item] && data[item].lineDataVos && data[item].up.length > 0) {
+              this.calc(data[item].lineDataVos, data[item].up, data[item].down, index);
+            } else if (data[item] && data[item].lineDataVos && data[item].lineDataVos.length > 0) {
+              this.initNormalChart(data[item].lineDataVos, index);
+            }
+          });
+        } else {
+          xyz.map((item, index) => {
+            if (data[item] && data[item].lineDataVos) {
+              this.initNormalChart(data[item].lineDataVos, index);
+            }
+          });
+        }
+      } else {
+        this.message.error(data.message || this.translate.instant('wrongToGetData'));
+      }
+      this.isLoading = false;
+    }]);
+  }
+
+  init() {
+    this.getData();
+  }
+
+  initCharts(obj, max, min, num) {
+    const option = {...this.option};
+    option.series[0].data = max;
+    option.series[1].data = min;
+    option.series = obj.concat(option.series);
+    option.title.text = num === 0 ? 'X(mg)' : num === 1 ? 'Y(mg)' : 'Z(mg)';
+    this.optionArray[num] = option;
+  }
+
+  initNormalChart(data, num) {
+    const len = data.length - 1;
+    const obj = [];
+    data.map((item, index) => {
+      obj.push([index, item]);
+      if (index === len) {
+        const option: any = JSON.parse(JSON.stringify(this.option));
+        option.title.text = num === 0 ? 'X(mg)' : num === 1 ? 'Y(mg)' : 'Z(mg)';
+        option.series = [{name: 'value', type: 'line', symbol: 'none', data: obj, lineStyle: {normal: {color: 'red'}}}];
+        this.optionArray[num] = option;
+      }
+    });
+  }
+
+  calc(obj, max, min, num) {
+    const series = [];
+    const maxObj = [];
+    const minObj = [];
+    let last;
+    max.map((item, index) => {
+      maxObj.push([index, item]);
+      minObj.push([index, min[index]]);
+      if (obj[index] && index !== max.length - 1) {
+        const red: any = {name: 'value', type: 'line', symbol: 'none', data: [], lineStyle: {normal: {color: '#FA0D09'}}};
+        const normal: any = {
+          name: 'value',
+          type: 'line',
+          symbol: 'none',
+          data: [],
+          lineStyle: {normal: {color: '#64BAFA'}}
+        };
+        if (index === 0) {
+          last = obj[index] > item || obj[index] < min[index] ? red : normal;
+        }
+        if (obj[index] > item && obj[index + 1] < max[index + 1]) {
+          // youshuangjiaocha
+          const data = this.cross(obj[index], obj[index + 1], item, max[index + 1], index);
+          last.data.push(data[0][0]);
+          last.data.push({value: data[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+          series.push({...last});
+          last = normal;
+          last.data.push({value: data[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+          if (obj[index + 1] < min[index + 1]) {
+            const data2 = this.cross(obj[index], obj[index + 1], min[index], min[index + 1], index);
+            last.data.push({value: data2[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+            series.push({...last});
+            last = red;
+            last.data.push({value: data2[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+          }
+        } else if (obj[index] < min[index] && obj[index + 1] > min[index + 1]) {
+          // youshuangjiaocha
+          const data = this.cross(obj[index], obj[index + 1], min[index], min[index + 1], index);
+          last.data.push(data[0][0]);
+          last.data.push({value: data[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+          series.push({...last});
+          last = normal;
+          last.data.push({value: data[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+          if (obj[index + 1] > max[index + 1]) {
+            const data2 = this.cross(obj[index], obj[index + 1], item, max[index + 1], index);
+            last.data.push({value: data2[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+            series.push({...last});
+            last = red;
+            last.data.push({value: data2[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+          }
+        } else if (obj[index] > item && obj[index + 1] > max[index + 1]) {
+          last = last || red;
+          last.data.push([index, obj[index]]);
+        } else if (obj[index] < min[index] && obj[index + 1] < min[index + 1]) {
+          last = last || red;
+          last.data.push([index, obj[index]]);
+        } else if (obj[index] < item && obj[index + 1] > max[index + 1]) {
+          // meiyoushuangjiaocha
+          const data = this.cross(obj[index], obj[index + 1], item, max[index + 1], index);
+          last.data.push(data[0][0]);
+          last.data.push({value: data[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+          series.push({...last});
+          last = red;
+          last.data.push({value: data[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+        } else if (obj[index] > min[index] && obj[index + 1] < min[index + 1]) {
+          // meiyoushuangjiaocha
+          const data = this.cross(obj[index], obj[index + 1], min[index], min[index + 1], index);
+          last.data.push(data[0][0]);
+          last.data.push({value: data[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+          series.push({...last});
+          last = red;
+          last.data.push({value: data[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+        } else if (obj[index] < min[index] && obj[index + 1] > min[index + 1]) {
+          // youshuangjiaocha
+          const data = this.cross(obj[index], obj[index + 1], min[index], min[index + 1], index);
+          last.data.push(data[0][0]);
+          last.data.push({value: data[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+          series.push({...last});
+          last = normal;
+          last.data.push({value: data[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+          if (obj[index + 1] > max[index + 1]) {
+            const data2 = this.cross(obj[index], obj[index + 1], item, max[index + 1], index);
+            last.data.push({value: data2[0][1], symbol: 'none', tooltip: {formatter: '-'}});
+            series.push({...last});
+            last = red;
+            last.data.push({value: data2[1][0], symbol: 'none', tooltip: {formatter: '-'}});
+          }
+        } else {
+          last = last || normal;
+          last.data.push([index, obj[index]]);
+        }
+      } else if (index === max.length - 1) {
+        series.push({...last});
+        this.initCharts(series, maxObj, minObj, num);
+      }
+    });
+  }
+
+  cross(po11, po12, po21, po22, num) {
+    const n1 = po12 - po11;
+    const n2 = po22 - po21;
+    const c1 = po12 - n1 * (num + 1);
+    const c2 = po22 - n2 * (num + 1);
+    const x = ( c2 - c1 ) / ( n1 - n2 );
+    const y = n1 * x + c1;
+    return [[[num, po11], [x, y]], [[x, y], [num + 1, po12]]];
+  }
+}

src/app/main/ciss-h-compare/ciss-h-compare.component.html

+<div class="searchBar" @fade>
+  <div class="searchItem">
+    <div class="item-label">{{'startTime' | translate}}</div>
+    <div class="item-input">
+      <nz-date-picker [(ngModel)]="req.startTime" nzPlaceHolder="" nzShowTime [nzStyle]="{'width': '100%'}"
+                      style="width: 100%" (ngModelChange)="onDateChange()"></nz-date-picker>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'endTime' | translate}}</div>
+    <div class="item-input">
+      <nz-date-picker [(ngModel)]="req.endTime" nzPlaceHolder="" nzShowTime [nzStyle]="{'width': '100%'}"
+                      style="width: 100%" (ngModelChange)="onDateChange()"></nz-date-picker>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'compareParams' | translate}}</div>
+    <div class="item-input">
+      <nz-select [(ngModel)]="req.parameter" style="width: 100%;" nzMode="tags">
+        <nz-option *ngFor="let one of params" [nzLabel]="one.value | translate" [nzValue]="one.value"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+  <app-search-select [label]="'sensorType' | translate" [readonly]="selectDevices.length > 0" [(value)]="selectDeviceType"
+                     [data]="deviceTypes"></app-search-select>
+  <div class="addIcon">
+    <i class="iconfont icon-tianjia" (click)="add()"></i>
+  </div>
+  <div *ngFor="let one of selectDevices, let i = index">
+    <div class="searchItem">
+      <div class="item-label">{{'selectSensor' | translate}}</div>
+      <div class="item-input">
+        <nz-select [(ngModel)]="one.deviceNo" style="width: 100%;" (ngModelChange)="onDeviceChange(one)">
+          <nz-option *ngFor="let item of canBeSelected" [nzLabel]="item.sensorName" [nzValue]="item.sensorDeviceNo"></nz-option>
+        </nz-select>
+      </div>
+    </div>
+    <div class="searchItemGroup" *ngIf="selectDeviceType === 'CISS-Stepworking'">
+      <div class="item-label-group">{{'egNum' | translate}}</div>
+      <div class="item-input-group">
+        <nz-input-group [nzAddOnBefore]="one.min + '<='" [nzAddOnAfter]="'<=' + one.max" [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
+          <input nz-input [(ngModel)]="one.num" (keyup)="onNumChange(one)">
+        </nz-input-group>
+        <ng-template #prefixTemplate><i class="iconfont icon-left inputNumIcon" (click)="numDel(one)" *ngIf="one.num || one.num === 0"></i></ng-template>
+        <ng-template #suffixTemplate><i class="iconfont icon-right inputNumIcon" (click)="numAdd(one)" *ngIf="one.num || one.num === 0"></i></ng-template>
+      </div>
+    </div>
+    <div class="addIcon">
+      <i class="iconfont icon-delete" (click)="deleteDevice(i)"></i>
+    </div>
+  </div>
+  <div class="btnLine">
+    <button nz-button [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()"><span>{{'startCompare' | translate}}</span></button>
+  </div>
+</div>
+<div class="tableBar" @fade>
+  <div *ngIf="optionArray.length <= 0" class="noData">{{'noData' | translate}}</div>
+  <div echarts *ngFor="let one of optionArray" class="echartsPart" [ngClass]="{'hidden': !one}" [options]="one"></div>
+</div>

src/app/main/ciss-history/ciss-history.component.html

+<div class="searchBar" @fade>
+  <div class="searchItem">
+    <div class="item-label">{{'selectSensor' | translate}}</div>
+    <div class="item-input">
+      <nz-select [(ngModel)]="req.device" style="width: 100%;" (ngModelChange)="onDeviceChange($event)">
+        <nz-option *ngFor="let one of devices" [nzLabel]="one.sensorName" [nzValue]="one"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'startTime' | translate}}</div>
+    <div class="item-input">
+      <nz-date-picker [(ngModel)]="req.startTime" nzPlaceHolder="" nzShowTime [nzStyle]="{'width': '100%'}"
+                      style="width: 100%" (ngModelChange)="onDateChange(false)" (nzOnOk)="onDateChange(true)"></nz-date-picker>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'endTime' | translate}}</div>
+    <div class="item-input">
+      <nz-date-picker [(ngModel)]="req.endTime" nzPlaceHolder="" nzShowTime [nzStyle]="{'width': '100%'}"
+                      style="width: 100%" (ngModelChange)="onDateChange(false)" (nzOnOk)="onDateChange(true)"></nz-date-picker>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'searchParams' | translate}}</div>
+    <div class="item-input">
+      <nz-select [(ngModel)]="req.params" style="width: 100%;" [nzMode]="'tags'">
+        <nz-option *ngFor="let one of params" [nzLabel]="one.value | translate" [nzValue]="one.value"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+  <div class="searchItemGroup" *ngIf="req.sensorType === 'CISS-Stepworking'">
+    <div class="item-label-group">{{'egNum' | translate}}</div>
+    <div class="item-input-group">
+      <nz-input-group [nzAddOnBefore]="num[0]" [nzAddOnAfter]="num[1]" [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
+        <input nz-input [(ngModel)]="req.num" (keyup)="onNumChange()">
+      </nz-input-group>
+      <ng-template #prefixTemplate><i class="iconfont icon-left inputNumIcon" (click)="numDel()" *ngIf="req.num || req.num === 0"></i></ng-template>
+      <ng-template #suffixTemplate><i class="iconfont icon-right inputNumIcon" (click)="numAdd()" *ngIf="req.num || req.num === 0"></i></ng-template>
+    </div>
+  </div>
+  <div class="btnLine">
+    <button nz-button [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()"><span>{{'search' | translate}}</span></button>
+    <button *ngIf="!selectDevice.deviceNo" nz-button class="btnAdd" [nzLoading]="isLoading" (click)="download()"><span>{{'downloadByTerm' | translate}}</span></button>
+    <button *ngIf="selectDevice.deviceNo" nz-button [nzType]="'primary'" [nzLoading]="isLoading" routerLink="/app/dataManage/actualData">
+      <span>{{'backToList' | translate}}</span></button>
+  </div>
+  <!--</div>-->
+</div>
+
+<div class="tableBar" @fade>
+  <div *ngIf="optionArray.length === 0" class="noData">{{'noData' | translate}}</div>
+  <div *ngFor="let item of optionArray" echarts class="echartsPart" [ngClass]="{'hidden': !item}" [options]="item"></div>
+</div>

src/app/main/ciss-z-compare/ciss-z-compare.component.html

+<div class="searchBar" @fade>
+  <div class="searchItem">
+    <div class="item-label">{{'selectSensor' | translate}}</div>
+    <div class="item-input">
+      <nz-select [(ngModel)]="selectDevice" style="width: 100%;" (ngModelChange)="onChange($event)">
+        <nz-option *ngFor="let one of deviceNos" [nzLabel]="one.sensorName" [nzValue]="one"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'startTime' | translate}}</div>
+    <div class="item-input">
+      <nz-date-picker [(ngModel)]="req.startTime" nzPlaceHolder="" nzShowTime [nzStyle]="{'width': '100%'}"
+                      style="width: 100%" (ngModelChange)="onDateChange(false)"></nz-date-picker>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'endTime' | translate}}</div>
+    <div class="item-input">
+      <nz-date-picker [(ngModel)]="req.endTime" nzPlaceHolder="" nzShowTime [nzStyle]="{'width': '100%'}"
+                      style="width: 100%" (ngModelChange)="onDateChange(false)"></nz-date-picker>
+    </div>
+  </div>
+  <div class="searchItem">
+    <div class="item-label">{{'compareParams' | translate}}</div>
+    <div class="item-input">
+      <nz-select [(ngModel)]="req.parameter" style="width: 100%;" nzMode="tags">
+        <nz-option *ngFor="let one of params" [nzLabel]="one.value | translate" [nzValue]="one.value"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+  <div class="searchItemGroup" *ngIf="showNum">
+    <div class="item-label-group">{{'egNum' | translate}}</div>
+    <div class="item-input-group">
+      <nz-input-group [nzAddOnBefore]="num[0]" [nzAddOnAfter]="num[1]" [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
+        <input nz-input [(ngModel)]="req.num" (keyup)="onNumChange()">
+      </nz-input-group>
+      <ng-template #prefixTemplate><i class="iconfont icon-left inputNumIcon" (click)="numDel()" *ngIf="req.num || req.num === 0"></i></ng-template>
+      <ng-template #suffixTemplate><i class="iconfont icon-right inputNumIcon" (click)="numAdd()" *ngIf="req.num || req.num === 0"></i></ng-template>
+    </div>
+  </div>
+  <div class="btnLine">
+    <button nz-button [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()"><span>{{'startCompare' | translate}}</span></button>
+  </div>
+</div>
+<div class="tableBar" @fade>
+  <div *ngIf="optionQuery.temp.length <= 0 && optionQuery.press.length <= 0
+  && optionQuery.humid.length <= 0 && optionQuery.x.length <= 0
+  && optionQuery.y.length <= 0 && optionQuery.z.length <= 0
+  && optionQuery.mag_r.length <= 0 && optionQuery.noise.length <= 0
+  && optionQuery.mag_x.length <= 0 && optionQuery.mag_y.length <= 0
+  && optionQuery.mag_z.length <= 0 && optionQuery.acc_x.length <= 0
+  && optionQuery.acc_y.length <= 0 && optionQuery.acc_z.length <= 0
+  && optionQuery.gyros_x.length <= 0 && optionQuery.gyros_y.length <= 0
+  && optionQuery.gyros_z.length <= 0 && optionQuery.light.length <= 0" class="noData">{{'noData' | translate}}
+  </div>
+  <nz-tabset  *ngIf="!(optionQuery.temp.length <= 0 && optionQuery.press.length <= 0
+  && optionQuery.humid.length <= 0 && optionQuery.x.length <= 0
+  && optionQuery.y.length <= 0 && optionQuery.z.length <= 0
+  && optionQuery.mag_r.length <= 0 && optionQuery.noise.length <= 0
+  && optionQuery.mag_x.length <= 0 && optionQuery.mag_y.length <= 0
+  && optionQuery.mag_z.length <= 0 && optionQuery.acc_x.length <= 0
+  && optionQuery.acc_y.length <= 0 && optionQuery.acc_z.length <= 0
+  && optionQuery.gyros_x.length <= 0 && optionQuery.gyros_y.length <= 0
+  && optionQuery.gyros_z.length <= 0 && optionQuery.light.length <= 0)">
+    <nz-tab *ngIf="optionQuery.x.length > 0" [nzTitle]="'x' | translate">
+      <div *ngFor="let one of optionQuery.x" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.y.length > 0" [nzTitle]="'y' | translate">
+      <div *ngFor="let one of optionQuery.y" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.z.length > 0" [nzTitle]="'z' | translate">
+      <div *ngFor="let one of optionQuery.z" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.temp.length > 0" [nzTitle]="'temp' | translate">
+      <div *ngFor="let one of optionQuery.temp" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.press.length > 0" [nzTitle]="'press' | translate">
+      <div *ngFor="let one of optionQuery.press" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.humid.length > 0" [nzTitle]="'humid' | translate">
+      <div *ngFor="let one of optionQuery.humid" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.mag_x.length > 0" [nzTitle]="'mag_x' | translate">
+      <div *ngFor="let one of optionQuery.mag_x" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.mag_y.length > 0" [nzTitle]="'mag_y' | translate">
+      <div *ngFor="let one of optionQuery.mag_y" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.mag_z.length > 0" [nzTitle]="'mag_z' | translate">
+      <div *ngFor="let one of optionQuery.mag_z" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.mag_r.length > 0" [nzTitle]="'mag_r' | translate">
+      <div *ngFor="let one of optionQuery.mag_r" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.acc_x.length > 0" [nzTitle]="'acc_x' | translate">
+      <div *ngFor="let one of optionQuery.acc_x" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.acc_y.length > 0" [nzTitle]="'acc_y' | translate">
+      <div *ngFor="let one of optionQuery.acc_y" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.acc_z.length > 0" [nzTitle]="'acc_z' | translate">
+      <div *ngFor="let one of optionQuery.acc_z" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.gyros_x.length > 0" [nzTitle]="'gyros_x' | translate">
+      <div *ngFor="let one of optionQuery.gyros_x" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.gyros_y.length > 0" [nzTitle]="'gyros_y' | translate">
+      <div *ngFor="let one of optionQuery.gyros_y" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.gyros_z.length > 0" [nzTitle]="'gyros_z' | translate">
+      <div *ngFor="let one of optionQuery.gyros_z" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.light.length > 0" [nzTitle]="'light' | translate">
+      <div *ngFor="let one of optionQuery.light" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+    <nz-tab *ngIf="optionQuery.noise.length > 0" [nzTitle]="'noise' | translate">
+      <div *ngFor="let one of optionQuery.noise" echarts class="echartsPart" [options]="one"></div>
+    </nz-tab>
+  </nz-tabset>
+</div>

src/app/main/collector-manage/collector-manage.component.html

+<div class="searchBar" @fade>
+  <app-search-item [label]="'sensorName' | translate" [(value)]="sensorName"></app-search-item>
+  <div class="btnLine">
+    <button nz-button [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()"><span>{{'search' | translate}}</span></button>
+    <button nz-button class="btnAll" [nzLoading]="isLoading" (click)="onGetAll()"><span>{{'allData' | translate}}</span></button>
+  </div>
+</div>
+<div class="tableBar" @fade>
+  <div class="addIcon" *ngIf="per.testFuncs('sensorInsert')">
+    <i class="iconfont icon-tianjia" (click)="add()"></i>
+  </div>
+  <nz-table #nzTable
+            [nzData]="data"
+            [nzSize]="'middle'"
+            [nzLoading]="isLoading"
+            nzShowSizeChanger>
+    <thead nz-thead>
+    <tr>
+      <th nz-th><span>{{'num' | translate}}</span></th>
+      <th nz-th><span>{{'sensorSN' | translate}}</span></th>
+      <th nz-th><span>{{'sensorName' | translate}}</span></th>
+      <th nz-th><span>{{'sensorType' | translate}}</span></th>
+      <th nz-th><span>{{'monitoringPointName' | translate}}</span></th>
+      <th nz-th><span>{{'deviceModel' | translate}}</span></th>
+      <th nz-th><span>{{'belongFactory' | translate}}</span></th>
+      <th nz-th><span>{{'gatewaySN' | translate}}</span></th>
+      <th nz-th><span>{{'createTime' | translate}}</span></th>
+      <th nz-th *ngIf="per.testFuncs('sensorUnbindGateway') || per.testFuncs('gatewayBindingSensor') || per.testFuncs('sensorUpdate') || per.testFuncs('sensorAllocation')"><span>{{'operate' | translate}}</span></th>
+    </tr>
+    </thead>
+    <tbody nz-tbody>
+    <tr *ngFor="let one of nzTable.data,let i = index">
+      <td nz-td>{{i + 1}}</td>
+      <td nz-td>{{one.sensorSN}}</td>
+      <td nz-td>{{one.sensorName}}</td>
+      <td nz-td>{{one.sensorType}}</td>
+      <td nz-td>{{one.monitoringPointName}}</td>
+      <td nz-td>{{one.sensorModel}}</td>
+      <td nz-td>{{one.factoryName}}</td>
+      <td nz-td>{{one.gatewaySN}}</td>
+      <td nz-td>{{one.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
+      <td nz-td *ngIf="per.testFuncs('sensorUnbindGateway') || per.testFuncs('gatewayBindingSensor') || per.testFuncs('sensorUpdate') || per.testFuncs('sensorAllocation') || per.testFuncs('sensorDelete')">
+        <span class="delSpan" *ngIf="one.gatewaySN && per.testFuncs('sensorUnbindGateway')" (click)="unbindConfirm(one)">{{'unbindGateway' | translate}}</span>
+        <span class="addSpan" *ngIf="!one.gatewaySN && per.testFuncs('gatewayBindingSensor')" (click)="bind(one)">{{'bindGateway' | translate}}</span>
+        <nz-divider *ngIf="(((one.gatewaySN && per.testFuncs('sensorUnbindGateway')) || (!one.gatewaySN && per.testFuncs('gatewayBindingSensor'))) && per.testFuncs('sensorUpdate'))
+        || ((one.gatewaySN && per.testFuncs('sensorUnbindGateway')) || (!one.gatewaySN && per.testFuncs('gatewayBindingSensor'))) && per.testFuncs('sensorAllocation')" nzType="vertical"></nz-divider>
+        <span class="editSpan" *ngIf="per.testFuncs('sensorUpdate')" (click)="edit(one)">{{'edit' | translate}}</span>
+        <nz-divider nzType="vertical" *ngIf="per.testFuncs('sensorUpdate') && per.testFuncs('sensorAllocation')"></nz-divider>
+        <span class="addSpan" *ngIf="per.testFuncs('sensorAllocation')" (click)="divide(one)">{{'distribute' | translate}}</span>
+        <nz-divider *ngIf="per.testFuncs('sensorDelete') && per.testFuncs('sensorAllocation')" nzType="vertical"></nz-divider>
+        <span class="deleteFontColor" *ngIf="per.testFuncs('sensorDelete')" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
+      </td>
+    </tr>
+    </tbody>
+  </nz-table>
+</div>
+<nz-modal [(nzVisible)]="isVisible" [nzTitle]="(isUpdate ? 'editSensor' : 'addSensor') | translate" [nzContent]="modalContent" nzWidth="500"
+          [nzFooter]="modalFooter" (nzOnCancel)="cancel()" nzMaskClosable="false">
+  <ng-template #modalContent>
+    <div *ngIf="!isUpdate" class="searchItem" class="inModal" style="margin-bottom: 15px;">
+      <div class="item-label">{{'sensorType' | translate}}</div>
+      <div class="item-input">
+        <nz-select [(ngModel)]="req.deviceType" style="width: 100%;" (ngModelChange)="onTypeChange()">
+          <nz-option *ngFor="let one of types" [nzLabel]="one.deviceType" [nzValue]="one.deviceType"></nz-option>
+        </nz-select>
+      </div>
+    </div>
+    <app-search-select *ngIf="!isUpdate && req.deviceType !== 'XDK'" [(value)]="req.deviceModel" [label]="'deviceModel' | translate" inModal="true" [data]="models" optL="deviceModel" optV="deviceModel"></app-search-select>
+    <app-search-item [(value)]="req.sensorName" [label]="'sensorName' | translate" inModal="true"></app-search-item>
+    <app-search-item *ngIf="!isUpdate" [(value)]="req.sensorSN" [label]="'sensorSN' | translate" inModal="true"></app-search-item>
+    <app-search-select *ngIf="isUpdate && req.monitoringPointNo" [(value)]="req.alarmNo" [label]="'warnNo' | translate" inModal="true" [data]="alarms" optL="alarmName" optV="alarmNo"></app-search-select>
+    <app-search-item [(value)]="req.remark" [label]="'remark' | translate" inModal="true"></app-search-item>
+  </ng-template>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
+    <button nz-button nzType="primary" [nzLoading]="isLoading" (click)="save()"><span>{{'confirm' | translate}}</span></button>
+  </ng-template>
+</nz-modal>
+
+<nz-modal [(nzVisible)]="isVisible2" [nzTitle]="'bindGateway' | translate" [nzContent]="modal2Content" nzWidth="500"
+          [nzFooter]="modal2Footer" (nzOnCancel)="cancel2()" nzMaskClosable="false">
+  <ng-template #modal2Content>
+    <app-search-select [(value)]="req2.gatewayDeviceNo" [data]="gateways" [label]="'gateway' | translate" inModal="true" optL="sn" optV="deviceNo"></app-search-select>
+  </ng-template>
+  <ng-template #modal2Footer>
+    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel2()"><span>{{'cancel' | translate}}</span></button>
+    <button nz-button nzType="primary" [nzLoading]="isLoading" (click)="save2()"><span>{{'confirm' | translate}}</span></button>
+  </ng-template>
+</nz-modal>
+
+<nz-modal [(nzVisible)]="isVisible3" [nzTitle]="'bindMonitoringPoint' | translate" [nzContent]="modal3Content" nzWidth="500"
+          [nzFooter]="modal3Footer" (nzOnCancel)="cancel3()" nzMaskClosable="false">
+  <ng-template #modal3Content>
+    <app-search-select [(value)]="req3.monitoringPointNo" [data]="points" [label]="'monitoringPoint' | translate" inModal="true" optL="monitoringPointName" optV="monitoringPointNo"></app-search-select>
+    <app-search-select [(value)]="req3.alarmNo" [data]="alarms" [label]="'warnInfo' | translate" inModal="true" optL="alarmName" optV="alarmNo"></app-search-select>
+  </ng-template>
+  <ng-template #modal3Footer>
+    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel3()"><span>{{'cancel' | translate}}</span></button>
+    <button nz-button nzType="primary" [nzLoading]="isLoading" (click)="save3()"><span>{{'confirm' | translate}}</span></button>
+  </ng-template>
+</nz-modal>
+
+<nz-modal [(nzVisible)]="isVisible4" [nzTitle]="'distributeSensor' | translate" [nzContent]="modal4Content" nzWidth="500"
+          [nzFooter]="modal4Footer" (nzOnCancel)="cancel4()" nzMaskClosable="false">
+  <ng-template #modal4Content>
+    <!--<app-search-select [(value)]="req4.factoryNo" [data]="factorys" [label]="'factory' | translate" inModal="true" optL="factoryName" optV="factoryNo"></app-search-select>-->
+    <div class="searchItem" class="inModal" style="margin-bottom: 15px;">
+      <div class="item-label">{{'belongGroup' | translate}}</div>
+      <div class="item-input">
+        <!--<nz-select [(ngModel)]="req.factoryNo" style="width: 100%;" (ngModelChange)="onChange()">-->
+        <!--<nz-option *ngFor="let one of factorys" [nzLabel]="one.factoryName" [nzValue]="one.factoryNo"></nz-option>-->
+        <!--</nz-select>-->
+        <nz-tree-select [nzNodes]="factorys" style="width: 100%" [(ngModel)]="req4.factoryNo" nzMultiple="false"
+                        (nzTreeClick)="onTreeClick($event)" (nzCleared)="onClear()" nzAllowClear="false"></nz-tree-select>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #modal4Footer>
+    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel4()"><span>{{'cancel' | translate}}</span></button>
+    <button nz-button nzType="primary" [nzLoading]="isLoading" (click)="save4()"><span>{{'confirm' | translate}}</span></button>
+  </ng-template>
+</nz-modal>

src/app/main/compare/compare.component.html

+<nz-tabset @fade>
+  <nz-tab nzTitle="&nbsp;&nbsp;&nbsp;XDK&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
+    <app-xdk-compare></app-xdk-compare>
+  </nz-tab>
+  <nz-tab nzTitle="&nbsp;&nbsp;&nbsp;CISS&nbsp;&nbsp;&nbsp;">
+    <nz-tabset>
+      <nz-tab [nzTitle]="'horizontalContrast' | translate">
+        <app-ciss-h-compare></app-ciss-h-compare>
+      </nz-tab>
+      <nz-tab [nzTitle]="'verticalContrast' | translate">
+        <app-ciss-z-compare></app-ciss-z-compare>
+      </nz-tab>
+    </nz-tabset>
+  </nz-tab>
+</nz-tabset>

src/app/main/compare/compare.component.ts

+import { Component, OnInit } from '@angular/core';
+import { fadeIn } from '../../animation/fade-in';
+
+@Component({
+  selector: 'app-compare',
+  templateUrl: './compare.component.html',
+  styles: [`
+    :host ::ng-deep .ant-tabs-nav-scroll {
+      background-color: #ffffff;
+      border-top: 1px solid #e6e6e6;
+      padding: 0 15px;
+    }
+    :host ::ng-deep .ant-tabs-bar {
+      margin: 0;
+    }
+  `],
+  animations: [fadeIn]
+})
+export class CompareComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/main/cutting-machine-detail/cutting-machine-detail.component.html

+<div class="tableBar" style="display: flex;" @fade>
+  <div class="left">
+    <div>
+      <div class="label label1"><div class="cut-icon cut1"></div>{{'monitoringPointName' | translate}} :</div>
+      <div class="value">{{data.monitoringPointName || '-'}}</div>
+    </div>
+    <div>
+      <div class="label label3"><div class="cut-icon cut3"></div>{{'sensorSN' | translate}} :</div>
+      <div class="value">
+        <div style="line-height: 25px;">
+          <span *ngIf="!data || !data.resultSensorVos || data.resultSensorVos.length <= 0">{{'noData' | translate}}</span>
+          <span *ngFor="let one of data.resultSensorVos"
+                style="margin-right: 10px;display: inline-block;height: 40px;line-height: 40px;">{{one.sensorSN}}</span>
+        </div>
+      </div>
+      <div class="label label4"><div class="cut-icon cut4"></div>{{'lastMonthAlarmCounts' | translate}} :</div>
+      <div class="value">{{data.alarmNum || 0}} {{'times' | translate}}</div>
+    </div>
+    <div>
+      <div class="label label5"><div class="cut-icon cut5"></div>{{'nowKnifeTimes' | translate}} :</div>
+      <div class="value">{{data.totalNum || 0}} {{'times' | translate}}</div>
+      <div class="label label6"><div class="cut-icon cut6"></div>{{'lastAlarmTime' | translate}} :</div>
+      <div class="value">{{transTime(data.lastAlarmTime || 'noData', 1)}}</div>
+    </div>
+  </div>
+  <div class="right">
+    <div echarts class="titleChart" [options]="option1"></div>
+  </div>
+</div>
+<div class="tableBar" @fade style="padding: 15px 0;">
+  <div class="half" style="width: 35%;">
+    <div class="searchItem">
+      <div class="item-label">{{'alarmTime' | translate}}</div>
+      <div class="item-input">
+        <nz-select [(ngModel)]="req.selectTime2" style="width: 100%;" nzMode="default">
+          <nz-option *ngFor="let one of timeData" [nzLabel]="one.label | translate" [nzValue]="one.value"></nz-option>
+        </nz-select>
+      </div>
+    </div>
+    <!--<app-search-date in [label]="'alarmTime' | translate" [(value)]="req.startTime"></app-search-date>-->
+    <button nz-button [nzType]="'primary'" style="margin-left: 10px" [nzLoading]="isLoading" (click)="onAlarmSearch()">
+      <span>{{'search' | translate}}</span></button>
+    <nz-table #nzTable
+              [nzData]="alarmData"
+              [nzSize]="'middle'"
+              [nzPageSize]="20"
+              [nzLoading]="isLoading"
+              nzShowSizeChanger>
+      <thead nz-thead>
+      <tr>
+        <th nz-th><span>{{'num' | translate}}</span></th>
+        <th nz-th><span>{{'alarmTime' | translate}}</span></th>
+        <th nz-th><span>{{'sensorSN' | translate}}</span></th>
+        <th nz-th><span>{{'wrongReason' | translate}}</span></th>
+        <th nz-th><span>{{'operate' | translate}}</span></th>
+      </tr>
+      </thead>
+      <tbody nz-tbody>
+      <tr *ngFor="let one of nzTable.data,let i = index">
+        <td nz-td>{{i + 1}}</td>
+        <td nz-td>{{one.alarmTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
+        <td nz-td>{{one.sn}}</td>
+        <td nz-td>{{one.description}}</td>
+        <td nz-td>
+          <span class="addSpan" *ngIf="!one.parameter" (click)="showDispose(one)">{{'knifeDispose' | translate}}</span>
+          <nz-divider nzType="vertical" *ngIf="!one.parameter"></nz-divider>
+          <span class="editSpan" (click)="getAlarmDetail(one)">{{'see' | translate}}</span>
+        </td>
+      </tr>
+      </tbody>
+    </nz-table>
+  </div>
+  <div class="half" style="width:65%;border-left: 1px solid #ccc;">
+    <div class="searchItem">
+      <div class="item-label">{{'selectTime' | translate}}</div>
+      <div class="item-input">
+        <nz-select [(ngModel)]="req.selectTime" style="width: 100%;" nzMode="default">
+          <nz-option *ngFor="let one of timeData" [nzLabel]="one.label | translate" [nzValue]="one.value"></nz-option>
+        </nz-select>
+      </div>
+    </div>
+    <!--<app-search-select [label]="'selectTime' | translate" [(value)]="req.selectTime" [data]="timeData"></app-search-select>-->
+    <button nz-button [nzType]="'primary'" style="margin-left: 10px" [nzLoading]="isLoading" (click)="onSearch()">
+      <span>{{'search' | translate}}</span></button>
+    <nz-spin [nzTip]="'loading' | translate" [nzSpinning]="isLoading">
+      <div echarts class="chartBox" [options]="option2"></div>
+    </nz-spin>
+    <div class="dividePart"></div>
+    <div class="searchItem">
+      <div class="item-label">{{'selectTime' | translate}}</div>
+      <div class="item-input">
+        <nz-select [(ngModel)]="req.selectTime3" style="width: 100%;" nzMode="default">
+          <nz-option *ngFor="let one of [{label: 'lastAHour', value: 1}].concat(timeData)" [nzLabel]="one.label | translate" [nzValue]="one.value"></nz-option>
+        </nz-select>
+      </div>
+    </div>
+    <button nz-button [nzType]="'primary'" style="margin-left: 10px" [nzLoading]="isLoading" (click)="onLineSearch()">
+      <span>{{'search' | translate}}</span></button>
+      <!--<div echarts class="echartsPart" [options]="chartOther1"></div>-->
+    <nz-spin [nzTip]="'loading' | translate" [nzSpinning]="isLoading2">
+      <div echarts class="chartBox" [options]="chartOther2"></div>
+    </nz-spin>
+    <!--<nz-spin [nzTip]="'loading' | translate" [nzSpinning]="isLoading2">-->
+      <!--<div echarts class="chartBox" [options]="chartOther3"></div>-->
+    <!--</nz-spin>-->
+  </div>
+<!--</div>-->
+<!--<div class="tableBar" @fade>-->
+</div>
+
+<nz-modal [(nzVisible)]="isVisible" [nzTitle]="'alarmDataGraph' | translate" [nzContent]="modalContent" nzWidth="900"
+          (nzOnCancel)="cancel()" nzMaskClosable="false" [nzFooter]="null">
+  <ng-template #modalContent>
+    <div *ngFor="let one of alarmCharts" echarts class="modalChart" [options]="one"></div>
+  </ng-template>
+</nz-modal>

src/app/main/cutting-machine-detail/cutting-machine-detail.component.scss

+.left {
+  min-height: 200px;
+  width: 66.6666%;
+  display: inline-block;
+  line-height: 40px;
+  font-size: 15px;
+}
+
+.right {
+  width: 33.3333%;
+  display: inline-block;
+}
+
+.label {
+  display: inline-block;
+  vertical-align: top;
+  width: 50%;
+  @media screen and (min-width: 1500px) {
+    width: 37%;
+    max-width: 320px;
+  }
+}
+
+.value {
+  display: inline-block;
+  vertical-align: top;
+  width: 50%;
+  @media screen and (min-width: 1500px) {
+    width: 13%;
+    min-width: calc(50% - 320px);
+  }
+}
+
+.titleChart {
+  height: 200px;
+  min-width: 160px;
+  width: 100%;
+}
+.half {
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 15px;
+}
+
+.cut-icon {
+
+}
+
+.chartBox {
+  min-width: 300px;
+  width: 100%;
+  height: 400px;
+}
+
+.cut1 {
+  background: url('../../../assets/images/cut1.png');
+  background-size: cover;
+}
+.cut3 {
+  background: url('../../../assets/images/cut3.png');
+  background-size: cover;
+}
+.cut4 {
+  background: url('../../../assets/images/cut4.png');
+}
+.cut5 {
+  background: url('../../../assets/images/cut5.png');
+  background-size: cover;
+}
+.cut6 {
+  background: url('../../../assets/images/cut6.png');
+  background-size: cover;
+}
+.cut-icon {
+  height: 40px;
+  width: 40px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.modalChart {
+  width: 820px;
+  height: 400px;
+}
+
+.dividePart {
+  border-top: 1px solid #cccccc;
+  margin: 20px 0;
+}

src/app/main/detail-header/detail-header.component.html

+<div class="searchBar detailHeader" @fade>
+    <div class="word">
+      <div class="oneLine">
+        <div style="height: 50px;width: 50px;position: absolute;top: 0;left: 0;background: url('../../../assets/images/top1.png') no-repeat;background-size: 100%"></div><div class="text textStyle1">{{'sensorName' | translate}}: {{detail.sensorName}}</div>
+      </div>
+      <div class="oneLine">
+        <div style="height: 50px;width: 50px;position: absolute;top: 0;left: 0px;background: url('../../../assets/images/top2.png') no-repeat;background-size: 100%"></div><div class="text textStyle1">{{'sensorSN' | translate}}: {{detail.SN || detail.sensorSN}}</div>
+      </div>
+    </div>
+    <div class="button">
+      <button nz-button class="btnAdd" *ngIf="per.testFuncs('historyDataSelect')" (click)="toHistory()" [nzLoading]="isLoading"><span>{{'seeHistory' | translate}}</span></button>
+      <button nz-button routerLink="/app/dataManage/actualData" [nzType]="'primary'" style="margin-left: 10px" [nzLoading]="isLoading"><span>{{'backToList' | translate}}</span></button>
+    </div>
+</div>

src/app/main/drag/drag.component.html

+<div id="item" [nz-tooltip]="(_data.resultMonitoringPointForHomePageVo ? (_data.resultMonitoringPointForHomePageVo.monitoringPointType === '切削机' ? ('cutMachine' | translate) + ' : ' : ('macRoom' | translate) + ' : ') : '') + (_data.sensorName || _data.monitoringPointName)" style="width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    display: inline-block;position: relative;cursor: pointer" [ngStyle]="type !== 'home' ? {backgroundColor: '#1890ff'} : {backgroundColor: _data.state === 0 ? '#52c41a' : _data.state === 3 ? '#f5222d' : _data.state === 2 ? '#1890ff' : '#bfbfbf', border: '2px solid #722ed1'}">
+</div>

src/app/main/history-data/history-data.component.html

+<nz-tabset @fade>
+  <nz-tab nzTitle="&nbsp;&nbsp;&nbsp;XDK&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
+    <app-xdk-history></app-xdk-history>
+  </nz-tab>
+  <nz-tab nzTitle="&nbsp;&nbsp;&nbsp;CISS&nbsp;&nbsp;&nbsp;">
+    <app-ciss-history></app-ciss-history>
+  </nz-tab>
+</nz-tabset>