updata

.angular-cli.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "health-new"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.scss"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {
+      "spec":false
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,13 @@
+# 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

e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('health-new App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "health-new",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "prod": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --target=production --environment=prod"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.2.4",
+    "@angular/common": "^4.2.4",
+    "@angular/compiler": "^4.2.4",
+    "@angular/core": "^4.2.4",
+    "@angular/forms": "^4.2.4",
+    "@angular/http": "^4.2.4",
+    "@angular/platform-browser": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/router": "^4.2.4",
+    "@ngx-loading-bar/core": "^2.0.0-alpha.0",
+    "@ngx-translate/core": "^7.2.2",
+    "@ngx-translate/http-loader": "^0.1.0",
+    "@progress/kendo-angular-l10n": "^1.1.0",
+    "@progress/kendo-angular-sortable": "^1.0.8",
+    "bootstrap": "^4.0.0",
+    "core-js": "^2.4.1",
+    "jquery": "^2.1.4",
+    "ng-zorro-antd": "^0.5.5",
+    "ng2-dragula": "^1.5.0",
+    "notify-angular": "^3.0.1",
+    "popper.js": "^1.12.9",
+    "rxjs": "^5.4.2",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.3.2",
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/jquery": "^3.3.1",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.1.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}

protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

src/app/app-routing.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// 路由守卫
+import { CanActivateTeam } from './common/guard-router';
+
+const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'login'
+    }, {
+        path: 'login',
+        loadChildren: './authorize/authorize.module#AuthorizeModule'
+    }, {
+        path: 'main',
+        canActivate: [CanActivateTeam],
+        loadChildren: './main/main.module#MainModule'
+    }, {
+        path: '**',
+        redirectTo: 'login'
+    }
+];
+
+@NgModule({
+    imports: [ RouterModule.forRoot(routes) ],
+    exports: [ RouterModule ],
+    providers: [CanActivateTeam]
+})
+export class AppRoutingModule { }
+
+

src/app/app.component.html

@@ -0,0 +1,4 @@
+<div class="app-dom">
+    <router-outlet></router-outlet>
+</div>
+

src/app/app.component.scss

@@ -0,0 +1,4 @@
+.app-dom{
+    width:100%;
+    height: 100%;
+}

src/app/app.module.ts

@@ -0,0 +1,79 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { HttpModule, Http } from '@angular/http';
+import { HttpClient, HTTP_INTERCEPTORS, HttpClientModule, HttpHeaders } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+// 功能插件
+import { NgZorroAntdModule, NzMessageService, NZ_MESSAGE_CONFIG, NzNotificationService } from 'ng-zorro-antd'; // UI组件
+import { SortableModule } from '@progress/kendo-angular-sortable';
+// import { NotifyModule, NotifyService } from 'notify-angular'; // 消息提示
+// import { LoadingBarModule, LoadingBarService } from '@ngx-loading-bar/core';
+
+// 国际化
+// import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
+// import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+// 服务
+// import { SharedService } from './common/shared.service';
+import { InterceptorService } from './common/http-interceptor.service';
+
+// 组件
+import { AppComponent } from './app.component';
+
+// 全局指令模块
+import { DirectiveModule } from './common/directive/directive.module';
+
+// 路由
+import { AppRoutingModule } from './app-routing.module';
+
+// // 国际化
+// export function createTranslateLoader(http: Http) {
+//   return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
+// }
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpModule,
+    HttpClientModule,
+    // TranslateModule.forRoot({
+    //   loader: {
+    //     provide: TranslateLoader,
+    //     useFactory: createTranslateLoader,
+    //     deps: [Http]
+    //   }
+    // }),
+    NgZorroAntdModule.forRoot(),
+    FormsModule,
+    ReactiveFormsModule,
+    DirectiveModule,
+    AppRoutingModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: InterceptorService,
+      multi: true
+    },
+    {
+      provide: NZ_MESSAGE_CONFIG,
+      useValue: {
+        nzDuration: 3000,
+        nzMaxStack: 5
+      }
+    },
+    // SharedService,
+    NzMessageService,
+    NzNotificationService
+  ],
+  exports: [SortableModule],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// 组件
+import { AppointmentComponent } from './appointment.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: AppointmentComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AppointmentRoutingModule {}

src/app/appointment/appointment.component.html

@@ -0,0 +1,126 @@
+<div class="scheduling tempoary">
+    <div class="scheduling-setting clearfix">
+      <div class="scheduling-left clearfix">
+        <div>
+          <div class="name">医生排版:</div>
+          <div class="select-depart">
+            <span>科室:</span>
+            <nz-select class="first-one-list" [(ngModel)]="appintmentData.departmentId"
+              nzAllowClear>
+              <nz-option *ngFor="let option of [1,2,3,4,5]" [nzLabel]="option" [nzValue]="option">
+              </nz-option>
+            </nz-select>
+          </div>
+          <div class="search-doctor">
+            <span>医生:</span>
+            <input [(ngModel)]="appintmentData.doctorName" />
+          </div>
+        </div>
+        <button class="search-button">搜索</button>
+      </div>
+    </div>
+    <div class="scheduling-list" [ngClass]="{'week': true}" >
+      <nz-table #nzTable [nzDataSource]="[{},{}]" [nzCustomNoResult]="true" [nzIsPagination]="false" [nzScroll]="{ y: 154 }">
+        <span noResult>暂无数据</span>
+        <ng-template #nzFixedHeader>
+          <thead nz-thead>
+            <tr>
+              <th nz-th [nzWidth]="'12%'">
+                <span>
+                  <div class="select-date">
+                    <i class="today-app">
+                      <nz-datepicker [(ngModel)]="appintmentData.startDate" name="startDate" [nzFormat]="'YYYY-MM-DD'"></nz-datepicker>
+                    </i>
+                    <div class="week">
+                      <i class="icon-arr" ></i>
+                      <b >本周</b>
+                      <i class="icon-arr"></i>
+                    </div>
+                  </div>
+                </span>
+                <span>医生姓名</span>
+              </th>
+              <ng-container *ngFor="let item of [1,2,3,4,6,5,7]">
+                <th nz-th>
+                  <span>周一</span>
+                  <span>2018/2/3</span>
+                </th>
+              </ng-container>
+            </tr>
+          </thead>
+        </ng-template>
+        <!-- <tbody nz-tbody>
+          <ng-container *ngFor="let data of nzTable.data; let index = index;">
+            <tr nz-tbody-tr>
+              <td nz-td>
+                <div class="scheduling-text">
+                  {{data.doctorBo.doctorName}}</div>
+              </td>
+              <ng-container *ngFor="let item of data.closetreatments; let i = index;">
+  
+                <td nz-td [ngClass]="{'active': item.active, 'normal': item.shiftId === normalSettingData.shiftId, 'disable': !(scheduleData.nowDate <= item.scheduleDate)}"
+                  [ngStyle]="{'color': item.closetreatmentVo ? 'rgb(197, 198, 199)' : ''}">
+                  <span [ngStyle]="{'background': item.closetreatmentVo ? 'rgb(197, 198, 199)' : ''}">
+                  </span>
+                  <nz-dropdown [nzTrigger]="'click'" [nzVisible]="item.isShowCloseConsultation" [nzClickHide]="false" [nzPlacement]="'bottomRight'"
+                    (nzVisibleChange)="closeConsultation($event, item,index,i, 'close', data.doctorBo.doctorName)">
+                    <div class="scheduling-text" nz-dropdown>
+                      <i (click)="closeConsultation($event,item,index,i, 'delete', '')" *ngIf="item.closetreatmentVo"></i>
+                      <nz-tooltip *ngIf="item.closetreatmentVo" [nzTitle]="item.closetreatmentVo.startTime + '~' + item.closetreatmentVo.endTime + '&nbsp;&nbsp;' + item.closetreatmentVo.typeName"
+                        [nzPlacement]="'topLeft'">
+                        <div class="text-ellipsis" nz-tooltip>
+                          {{item.closetreatmentVo.startTime}}~{{item.closetreatmentVo.endTime}}&nbsp;&nbsp; {{item.closetreatmentVo.typeName}}
+                        </div>
+                      </nz-tooltip>
+                    </div>
+                    <div nz-menu class="close-consultation-layer" *ngIf="item.isShowCloseConsultation && (scheduleData.nowDate <= item.scheduleDate)">
+                      <form #closeForm="ngForm">
+                        <div class="close-title">
+                          {{'TEMPORARY_CONSULTATION' | translate}}
+                        </div>
+                        <div class="close-content">
+                          <div class="close-name">
+                            <span>{{'DOCTOR' | translate}}:{{data.doctorBo.doctorName}}</span>
+                            <span>{{'SAME_DAY' | translate}}:{{item.shiftName}} {{item.startTime}}~{{item.endTime}}</span>
+                          </div>
+                          <div class="close-reason">
+                            <span>{{'EVENT' | translate}}:</span>
+                            <nz-select required [nzPlaceHolder]="'INSURANCE_STATE_PLC' | translate" class="first-one-list" name="nation" [(ngModel)]="closeData.eventId"
+                              nzAllowClear>
+                              <nz-option *ngFor="let option of scheduleData.consultationList" [nzLabel]="option.name" [nzValue]="option.dictId">
+                              </nz-option>
+                            </nz-select>
+                          </div>
+  
+                          <div class="close-reason">
+                            <span>{{'TIME_INTERVAL' | translate}}:</span>
+                            <nz-timepicker required nzHideDisabledOptions [(ngModel)]="closeData.startTime" [nzFormat]="'HH:mm'" [nzDisabledHours]="disabledHours"
+                              name="stratTime" [nzDisabledMinutes]="disabledMinutes"></nz-timepicker>
+                            <i>~</i>
+                            <nz-timepicker required nzHideDisabledOptions [(ngModel)]="closeData.endTime" [nzFormat]="'HH:mm'" [nzDisabledHours]="disabledHours"
+                              name="endTime" [nzDisabledMinutes]="disabledMinutes"></nz-timepicker>
+                          </div>
+                          <div class="close-reason">
+                            <span>{{'NOTE' | translate}}:</span>
+                            <input name="remark" [(ngModel)]="closeData.remark" class="remark" placeholder="{{'NOTE' | translate}}" />
+                          </div>
+                          <div class="tool-tip">
+                            <i class="required">*</i>
+                            {{'PWM0021' | translate}}
+                          </div>
+                        </div>
+                        <div class="close-button">
+                          <button (click)="item.isShowCloseConsultation = !item.isShowCloseConsultation ;item.active = !item.active">{{'CANCEL' | translate}}</button>
+                          <button [disabled]="!closeForm.form.valid" (click)="closeTemporary(item)">{{'SURE' | translate}}</button>
+                        </div>
+                      </form>
+                    </div>
+                  </nz-dropdown>
+                </td>
+              </ng-container>
+            </tr>
+          </ng-container>
+        </tbody> -->
+      </nz-table>
+    </div>
+  </div>

src/app/appointment/appointment.component.scss

@@ -0,0 +1,187 @@
+@import "../common/scss/all-color.scss";
+
+.scheduling{
+  background-color: $base-color;
+}
+.scheduling.tempoary .scheduling-list {
+  /deep/ .ant-table table tbody td {
+    color: #b8d4fb;
+  }
+}
+.close-consultation-layer {
+  line-height: 20px;
+  background: $base-color;
+  box-shadow: 0 1px 10px 0 $color-dark-176-40;
+  border-radius: 2px;
+  width: 300px;
+  height: auto;
+  .close-title {
+    font-size: 14px;
+    color: $border-color1;
+    padding: 10px 16px;
+  }
+  .close-content {
+    width: 300px;
+    border-top: 1px solid $dropdown-hover-bg-color;
+    border-bottom: 1px solid $dropdown-hover-bg-color;
+    padding: 5px 16px;
+  }
+  .close-name {
+    font-size: 14px;
+    color: $warn-font-color;
+    span {
+      padding-right: 10px;
+    }
+  }
+  /deep/.close-reason {
+    margin-top: 10px;
+    overflow: hidden;
+    font-size: 14px;
+    color: $normal-font-color;
+    line-height: 28px;
+    >span {
+      float: left;
+      width: 50px;
+    }
+    > i{
+      float:left;
+      width: 7%;
+      text-align: center;
+    }
+    .remark {
+      background: #f5f8fb;
+      border: 1px solid #dee2ee;
+      border-radius: 2px;
+      width: 218px;
+      height: 26px;
+      padding: 0 5px;
+      font-size: 12px;
+    }
+    .ant-select {
+      width: 216px;
+    }
+    .ant-select-selection,
+    .ant-input {
+      background: $dropdown-hover-bg-color;
+      border: 1px solid $list-border-color;
+      border-radius: 2px;
+      width: 100%;
+      height: 26px;
+      font-size: 13px;
+      color: $color-blue-ab8;
+    }
+    .ant-select-selection:hover {
+      border-color: none;
+    }
+    .ant-select-focused .ant-select-selection,
+    .ant-select-selection:focus,
+    .ant-select-selection:active {
+      border-color: none;
+      outline: 0;
+      box-shadow: none;
+    }
+    nz-timepicker {
+      display:block;
+      float:left;
+      width: 37%;
+      height: 26px;
+      .ant-time-picker {
+        width: auto;
+        display: block;
+        margin-top: -1px;
+      }
+
+    }
+    .ant-time-picker-input {
+      background: #f5f8fb;
+      border: 1px solid #dee2ee;
+      border-radius: 2px;
+      height: 26px;
+    }
+
+  }
+  .tool-tip {
+    font-size: 12px;
+    color: $color-gray-4cd;
+    margin: 5px 0;
+    i {
+      color: $btn-bg-color6;
+    }
+  }
+  .close-button {
+    font-size: 14px;
+    color: $color-blue-ab9;
+    text-align: right;
+    padding: 5px 15px;
+    button {
+      height: 28px;
+      text-align: center;
+      &:last-child {
+        margin-left: 15px;
+        color: $border-color1;
+      }
+    }
+  }
+}
+.common-prompt {
+  background:#ffffff;
+  border:1px solid #dee2ee;
+  box-shadow:0 2px 6px 0 rgba(117,153,220,0.50);
+  border-radius:2px;
+  width:298px;
+  padding-bottom: 10px;
+  .prompt-title {
+      font-size:12px;
+      color:#fa7c74;
+      text-align:left;  
+      padding: 7px 12px; 
+  }
+  .prompt-content {
+      font-size:12px;
+      color:#2d405e;
+      margin: 0 27px;
+      position: relative;
+      i {
+          color:#f5a623;
+          font-size:14px;
+          height:13px; 
+          position: absolute;
+          left: -18px;
+      }
+     margin-top: 4px;
+  }
+
+  .prompt-info {
+      font-size:12px;
+      color:#4f5e7b;
+      margin: 0 27px;
+      margin-top: 4px;
+  }
+
+  .prompt-time {
+      font-size:12px;
+      color:#5c79b0;
+      margin: 0 27px;
+  }
+
+  .promot-button {
+    margin-top: 4px;
+    text-align: right;
+      button {
+          border:1px solid #dee2ee;
+          border-radius:100px;
+          width:59px;
+          height:22px;
+          font-size:14px;
+          color:#869ab9;
+          margin-right:20px;
+          &:last-child {
+            color: #fff;
+              background:rgba(120,203,29,0.70);
+              border:1px solid #78cb1d;
+          } 
+      }
+  }
+
+}
+

src/app/appointment/appointment.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+// 公共服务
+// import { SharedService } from '../common/shared.service';
+
+@Component({
+    selector: 'app-main-appointment',
+    templateUrl: './appointment.component.html',
+    styleUrls: ['./appointment.component.scss']
+})
+export class AppointmentComponent implements OnInit {
+    public appintmentData: any = {};
+    constructor() {}
+
+    ngOnInit() {}
+}

src/app/appointment/appointment.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 全局公共模块
+import { SharedModule } from '../common/shared.module';
+
+// 组件
+import { AppointmentComponent } from './appointment.component';
+
+// 路由
+import { AppointmentRoutingModule } from './appointment-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    AppointmentRoutingModule
+  ],
+  declarations: [
+    AppointmentComponent
+  ]
+})
+export class AppointmentModule { }

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AuthorizeComponent } from './authorize.component';
+import { LoginMainComponent } from './login-main/login-main.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: AuthorizeComponent,
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'login-main'
+            }, {
+                path: 'login-main',
+                component: LoginMainComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AuthorizeRoutingModule {}
+

src/app/authorize/authorize.component.html

@@ -0,0 +1,6 @@
+<p *appPermissions="newPermission">
+  authorize works!
+</p>
+<!-- <a [routerLink]="['/main']">进入主内容模块</a> -->
+<button (click)="loginAppliction()">登陆</button>
+<router-outlet></router-outlet>

src/app/authorize/authorize.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+// 公共服务
+// import { SharedService } from '../common/shared.service';
+
+import { AuthorizeService } from './authorize.service';
+
+@Component({
+  selector: 'app-authorize',
+  templateUrl: './authorize.component.html',
+  styleUrls: ['./authorize.component.scss']
+})
+export class AuthorizeComponent implements OnInit {
+  public newPermission = 'FUN_PROVIDER_ENCOUNTER_CM';
+  constructor(
+    // public translate: SharedService,
+    public authorize: AuthorizeService,
+    public router: Router) { }
+
+  ngOnInit() {
+  }
+
+  loginAppliction() {
+    const userInfo = {
+      orgId: 3,
+      password: '123456',
+      practiceId: 17,
+      userName: 'xiaoyu'
+    };
+    this.router.navigate(['main']);
+    // this.authorize.getUserInfo(userInfo).subscribe((data: any) => {
+    //   console.log(data);
+    //   window.lkHealth = data.values;
+    //   window.sessionStorage.setItem('userInfo', JSON.stringify(data.values));
+    // });
+  }
+
+}

src/app/authorize/authorize.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 全局公共模块
+import { SharedModule } from '../common/shared.module';
+
+// 组件
+import { AuthorizeRoutingModule } from './authorize-routing.module';
+import { AuthorizeComponent } from './authorize.component';
+import { LoginMainComponent } from './login-main/login-main.component';
+
+// 服务
+import { AuthorizeService } from './authorize.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    AuthorizeRoutingModule
+  ],
+  declarations: [AuthorizeComponent, LoginMainComponent],
+  providers: [
+    AuthorizeService
+  ],
+})
+export class AuthorizeModule { }

src/app/authorize/authorize.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable()
+export class AuthorizeService {
+    constructor(public http: HttpClient) {}
+    getUserInfo(body) {
+        return this.http.post('users/authorize', body);
+    }
+}

src/app/authorize/login-main/login-main.component.html

@@ -0,0 +1,3 @@
+<p>
+  login-main works!
+</p>

src/app/authorize/login-main/login-main.component.ts

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

src/app/clinic/clinic-list/clinic-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  clinic-list works!
+</p>

src/app/clinic/clinic-list/clinic-list.component.ts

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

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

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// 组件
+import { ClinicComponent } from './clinic.component';
+import { ClinicListComponent } from './clinic-list/clinic-list.component';
+const routse: Routes = [
+    {
+        path: '',
+        component: ClinicComponent,
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'clinic-list'
+            }, {
+                path: 'clinic-list',
+                component: ClinicListComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routse)],
+    exports: [RouterModule]
+})
+export class ClinicRoutingModule {}

src/app/clinic/clinic.component.html

@@ -0,0 +1,4 @@
+<p>
+  clinic works!
+</p>
+<router-outlet></router-outlet>

src/app/clinic/clinic.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+// 公共服务
+// import { SharedService } from '../common/shared.service';
+
+@Component({
+  selector: 'app-clinic',
+  templateUrl: './clinic.component.html',
+  styleUrls: ['./clinic.component.scss']
+})
+export class ClinicComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/clinic/clinic.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 全局公共模块
+import { SharedModule } from '../common/shared.module';
+
+// 组件
+import { ClinicComponent } from './clinic.component';
+import { ClinicListComponent } from './clinic-list/clinic-list.component';
+
+// 路由
+import { ClinicRoutingModule } from './clinic-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    ClinicRoutingModule
+  ],
+  declarations: [ClinicComponent, ClinicListComponent]
+})
+export class ClinicModule { }

src/app/common/components/main-left-menu/main-left-menu.component.html

@@ -0,0 +1,12 @@
+<div class="main-left pull-left m-r-20">
+  <span class="mask-column font-size-14 p-l-15 p-r-15">任务栏<a class="config-btn pull-right"><i class="confguration-icon"></i></a></span>
+  <ul class="mask-list" *ngIf="maskList.length > 0">
+    <li class="mask-item" *ngFor="let mask of maskList; let i = index;">
+      <a class="mask-item-link p-l-15 p-r-15" [ngClass]="{'active':mask.active}" (click)="switchActive(i)">
+          <i class="mask-icon font-size-16 m-r-5 pull-left" [ngClass]="mask.iconClass"></i>
+          <span class="mask-title font-size-14 pull-left" [innerHTML]="mask.name"></span>
+          <i class="message font-size-12" *ngIf="socketNum" [innerHTML]="mask.num > 99 ? '99+' : mask.num"></i>
+      </a>
+    </li>
+  </ul>
+</div>

src/app/common/components/main-left-menu/main-left-menu.component.scss

@@ -0,0 +1,71 @@
+@import "../../scss/all-color.scss";
+.main-left{
+    .mask-column{
+        width:100%;
+        height: 30px;
+        display: block;
+        line-height: 30px;
+        background-color:$menu-bg-color;
+        color:$btn-bg-color5;
+        .config-btn{
+            color:$icon-font-bg-color;
+        }
+    }
+    .mask-list{
+        width:100%;
+        height: calc(100% - 30px);
+        overflow-y: auto;
+        .mask-item{
+            width: 100%;
+            height: 42px;
+            .mask-item-link{
+                width: 100%;
+                display: block;
+                height: 42px;
+                line-height: 42px;
+                color:$normal-font-color;
+                position: relative;
+                border-bottom:1px solid $dropdown-bg-color;
+                .mask-icon{
+                    width: 16px;
+                    height: 42px;
+                    display: block;
+                }
+                .mask-title{
+                    width:calc(100% - 21px);
+                    height: 42px;
+                    padding-right:28px;
+                    display: block;
+                }
+                .message{
+                    display: block;
+                    min-width:22px;
+                    height: 22px;
+                    line-height: 19px;
+                    text-align: center;
+                    position: absolute;
+                    right:15px;
+                    top:11px;
+                    border:1px solid $list-no-border-color;
+                    border-radius:20px;
+                    color:$list-no-border-color;
+                }
+                &:hover{
+                    background-color:$dropdown-hover-bg-color;
+                }
+            }
+            .active{
+                color:$base-color;
+                background-color:$active-bg-color;
+                .message{
+                    color:$base-color;
+                    background-color:$btn-bg-color3;
+                    border:1px solid $btn-bg-color3;
+                }
+                &:hover{
+                    background-color:$active-bg-color;
+                }
+            }
+        }
+    }
+}

src/app/common/components/main-left-menu/main-left-menu.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-main-left-menu',
+  templateUrl: './main-left-menu.component.html',
+  styleUrls: ['./main-left-menu.component.scss']
+})
+export class MainLeftMenuComponent implements OnInit {
+  @Input() maskList: Array<any> = []; // 侧栏列表数据
+  @Input() socketNum: Boolean = true;  // 是否显示长连接
+  @Output() switchComponent: EventEmitter<any> = new EventEmitter(); // 选中一项触发事件
+  constructor() { }
+
+  ngOnInit() {
+    if (this.maskList.length > 0 ) {
+      this.maskList.forEach((item, index) => {
+        if (index === 0 ) {
+          item.active = true;
+        }else {
+          item.active = false;
+        }
+      });
+    }
+  }
+  switchActive(index) {
+    this.switchComponent.emit(index);
+    this.maskList.forEach((item, i) => {
+      if (i === index) {
+        item.active = true;
+      }else {
+        item.active = false;
+      }
+    });
+  }
+}

src/app/common/directive/directive.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 权限控制指令
+import { PermissionsDirective } from './permissions.directive';
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [PermissionsDirective],
+    exports: [PermissionsDirective]
+})
+export class DirectiveModule {}

src/app/common/directive/permissions.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[appPermissions]'
+})
+export class PermissionsDirective {
+    private permissionsList: Array<string>;
+    constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
+    @Input() set appPermissions(permission: string) {
+        // console.log(permission);
+        this.permissionsList = window.sessionStorage.getItem('userInfo') ? JSON.parse(window.sessionStorage.getItem('userInfo')).authorities : [];
+        if (this.permissionsList.length > 0) {
+            const equalPer = this.permissionsList.filter(item => item === permission);
+            if (equalPer.length === 0) {
+                this.viewContainer.clear();
+            }else {
+                this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+        }else {
+            this.viewContainer.clear();
+        }
+    }
+}

src/app/common/guard-router.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+
+@Injectable()
+export class CanActivateTeam implements CanActivate {
+    constructor(public route: Router) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) {
+        console.log(route);
+        console.log(state);
+        const isSkip = true;
+        if (!isSkip) {
+            this.route.navigate(['/login']);
+            return isSkip;
+        }
+        return true;
+    }
+}

src/app/common/http-interceptor.service.ts

@@ -0,0 +1,92 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler } from '@angular/common/http';
+import { HttpSentEvent, HttpUserEvent, HttpHeaderResponse, HttpProgressEvent } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/Rx';
+
+
+
+
+// 消息提示
+// import { NotifyService } from 'notify-angular';
+import { NzMessageService, NzNotificationService } from 'ng-zorro-antd';
+// loading状态
+// import { LoadingBarService } from '@ngx-loading-bar/core';
+
+@Injectable()
+export class InterceptorService implements HttpInterceptor {
+    public serverUrl: string = environment.serverUrl;
+    public urlTime = {};
+    public loading;
+    constructor(public router: Router, public nofityServ: NzNotificationService, public loadingBar: NzMessageService) {}
+    intercept(req: HttpRequest<any>, next: HttpHandler):
+        Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any>> {
+        let _req;
+        // 一秒内不允许多次请求数据
+        if (req.method !== 'GET' && this.urlTime[req.url] && Date.now() - this.urlTime[req.url] < 500) {
+            this.nofityServ.error('错误提示', '500毫秒内不能多次请求！');
+            return Observable.throw('overrequest');
+        } else if (req.method !== 'GET') {
+            this.urlTime[req.url] = Date.now();
+        }
+        // 显示loading
+        this.loading = this.loadingBar.loading('数据加载中...', { nzDuration: 0});
+        // 添加请求地址
+        if (req.url.indexOf('//') < 0) {
+            _req = req.clone({
+                url: `${this.serverUrl}/${req.url}`,
+                withCredentials: true
+            });
+        }
+
+        // 设置header
+        if (!_req.headers.get('Content-Type')) {
+            _req = _req.clone({
+                setHeaders: {
+                    'Content-Type': 'application/json'
+                }
+            });
+        }
+
+        // 设置token
+        if (_req.url.indexOf('users/authorize') < 0) {
+            const userinfo = JSON.parse(window.sessionStorage.getItem('userInfo'));
+            if (userinfo) {
+                _req = _req.clone({
+                    setHeaders: {
+                        'X-Auth-Token': userinfo.token
+                    }
+                });
+            }else {
+                this.router.navigate(['/login']);
+            }
+        }
+        // 监听请求时的错误
+        return next.handle(_req)
+                    .flatMap((event: any) => {
+                        // console.log(event);
+                        if (event instanceof HttpResponse) { // && event.type === 0
+                            // console.log('请求结束');
+                            this.loadingBar.remove(); // 隐藏loading
+                            // return Observable.create(observer => {
+                            //     observer.error(event);
+                            // });
+                        }
+                        return Observable.create(observer => {
+                            observer.next(event);
+                        });
+                    })
+                    .catch((errorMsg: any) => {
+                        // console.log(errorMsg);
+                        this.loadingBar.remove(); // 隐藏loading
+                        if (errorMsg.status === 401) { // token过期
+                            this.router.navigateByUrl('/login/login-main');
+                        }
+                        this.nofityServ.error('错误提示', errorMsg.error.message);
+                        return Observable.throw(errorMsg);
+                    });
+    }
+}

src/app/common/scss/all-color.scss

@@ -0,0 +1,134 @@
+$sys-bg-color: #ECF0F7;
+$menu-bg-color: #0049b0;
+$active-bg-color: #4991f5;
+$active-user-operation-color: #013f96;
+$base-color: #ffffff;
+$normal-font-color: #4f5e7b;
+$warn-font-color: #879bba;
+$icon-font-normal-color: #727e8e;
+$list-no-border-color: rgba(73, 145, 245, 0.80);
+$icon-font-bg-color: #acc3e4;
+$dropdown-hover-bg-color: #f5f8fb;
+$dropdown-bg-color: #ecf0f7;
+$dropdown-bottom-border-color: #eceff3;
+$list-bg-color: #005fe4;
+$list-title-bg-color: #ebf2fa;
+$list-border-color: #dee2ee;
+$btn-bg-color1: #ffc021;
+$btn-bg-color2: #dfe1e6;
+$btn-bg-color3: #f5a623;
+$btn-bg-color4: #37c0cd;
+$btn-bg-color5: #b3c8e7;
+$box-shadow-color: #eff2f7;
+$flyout-bg-color1: #ecf2fa;
+$flyout-bg-color2: #f9fafc;
+$flyout-bg-color3: #d7e5f9;
+$font-color1: #657a9d;
+$btn-bg-color6: #fa7c74;
+$btn-bg-color7: rgb(73, 145, 245);
+$font-color2: #5c79b0;
+$border-color1: #4278c4;
+$patients-title-color: #2d405e;
+$box-shadow-color2: rgb(117, 153, 220);
+$box-shadow-color3: rgb(191, 205, 214);
+$box-shadow-color4:rgba(92, 121, 176, 0.30);
+$color-blue-870:#5f6870;
+$color-blue-6f6: #6ca6f6;
+$color-blue-254-70:rgba(73, 145, 245, 0.70);
+$color-white-2f9: #eef2f9;
+$color-white-cfd: #fbfcfd;
+$color-white-afa: #dfeafa;
+$color-white-6fa: #f4f6fa;
+$color-white-8fc: #f6f8fc;
+$color-gray-ccc: #cccccc;
+$color-gray-8fa: #F5F8FA;
+$color-black-333: #333;
+$color-blue-B67: #394B67;
+$color-blue-1BE: #8FA1BE;
+$color-gray-4cd: #bdc4cd;
+$color-gray-598: #919598;
+$color-gray-3cb: #a4b3cb;
+$color-gray-020: rgba(240, 186, 94, 0.20);
+$color-gray-176-40: rgba(92, 121, 176, 0.40);
+$color-blue-7e1: #cfd7e1;
+$color-white-0f7: #ebf0f7;
+$color-red-116: rgba(250, 124, 116, 0.81);
+$color-blue-7f9: #99a7f9;
+$color-blue-5aa: #65d5aa;
+$color-blue-df2: #6dcdf2;
+$color-blue-bf2: #6fbbf2;
+$color-blue-6f2: #6fa6f2;
+$color-blue-aff: #bfdaff;
+$color-blue-255: rgb(191, 218, 255);
+$color-blue-a5e: #f0ba5e;
+$color-blue-8d3: #51c8d3;
+$color-yellow-035:rgba(245,166,35,0.70);
+$color-yellow-094-20: rgba(240, 186, 94, 0.20);
+$color-white-220-20: rgba(117, 153, 220, 0.20);
+$color-white-220-12: rgba(117, 153, 220, 0.12);
+$color-dark-176-40: rgba(92, 121, 176, 0.40);
+$color-dark-176-20: rgba(92, 121, 176, 0.20);
+$color-black-aad: #547aad;
+$color-green-321: #7ed321;
+$color-green-01b: #49a01b;
+$color-gray-1c9: #a2b1c9;
+$color-yellow-094-80: rgba(240, 186, 94, 0.80);
+$color-yellow-756: #f0b756;
+$color-blue-1f9: #99c1f9;
+$color-blue-df1:#71bdf1;
+$color-purple-cf6:#a1acf6;
+$color-red-c74:#fa7c74;
+$color-red-116-20:rgba(250, 124, 116, 0.20);
+$color-red-96b: #f1796b;
+$color-red-442: #a94442;
+$color-blue-ee9:#108ee9;
+$color-gray-aca:#cacaca;
+$color-gray-7fa:#d9e7fa;
+$color-black-000:#000;
+$color-white-1EC:#F3F1EC;
+$color-blue-ab9:#869ab9;
+$color-blue-75e:#49575e;
+$color-white-9ed:#e7e9ed;
+$color-green-b1d:#78cb1d;
+$color-green-d20:#50cd20;
+$color-green-029-70:rgba(120, 203, 29, 0.70);
+$color-green-032-80: rgba(123, 205, 32, 0.80);
+$color-yellow-02159:rgba(255, 192, 33, 0.349);
+$color-yellow-ec1:#ffeec1;
+$color-yellow-bd7:#ffdbd7;
+$colo-blue-9ee:#49a9ee;
+$colo-black-9d9: #d9d9d9;
+$color-gray-9d9:#d9d9d9;
+$color-gray-205-70:rgba(189, 196, 205, 0.70);
+$color-red-20566:rgba(250, 124, 116, 0.4);
+$color-gray-ff8:#efeff8;
+$color-black-000-085:rgba(0, 0, 0, 0.85);
+$color-red-116-010:rgba(250, 124, 116, 0.10);
+$color-red-116-010:rgba(250, 124, 116, 0.10);
+$color-blue-220-020:rgba(117, 153, 220, 0.2);
+$color-blue-220-040:rgba(117, 153, 220, 0.4);
+$color-blue-220-050:rgba(117, 153, 220, 0.5);
+$color-blue-244-056:rgba(0, 102, 244, 0.56);
+$color-blue-0e3:#3a80e3;
+$color-black-178-022:rgba(19, 86, 178, 0.22);
+$color-black-26e: #42526e;
+$color-blue-1eb: #6671eb;
+$color-blue-bf4: #a96bf4;
+$color-blue-bf4-015: rgba(169, 107, 244, 0.15);
+$color-yellow-b0c: #c0bb0c;
+$color-gray-098: #8a9098;
+$color-gray-123-070: rgba(79, 94, 123, 0.70);
+$color-gray-255-050: rgba(255, 255, 255, 0.5);
+$btn-blue-073-028: rgba(73, 145, 245, 0.28);
+$color-blue-ab8: #678ab8;
+$color-black-0b1: #b0b0b1;
+$color-gray-205-070:rgba(189,196,205,0.70);
+$color-green-029-070:rgba(120,203,29,0.70);
+$color-green-220-020:rgba(117,153,220,0.20);
+$color-blue-245-070:rgba(73,145,245,0.70);
+$color-blue-88d:#46588d;
+$color-black-055-000:rgba(55, 55, 55, 0);
+$color-black-000-080:rgba(0, 0, 0, 0.08);
+$color-black-220-050:rgba(117, 153, 220, 0.50);
+$color-orange-350-070:rgba(245, 166, 35, 0.70);
+$color-bule-ee9: #108ee9;

src/app/common/scss/icon-font.scss

@@ -0,0 +1,392 @@
+@import "./all-color.scss";
+@font-face {
+  font-family: 'iconfont';  /* project id 561531 */
+  src: url('//at.alicdn.com/t/font_561531_h1lfwmkpwdi.eot');
+  src: url('//at.alicdn.com/t/font_561531_h1lfwmkpwdi.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_561531_h1lfwmkpwdi.woff') format('woff'),
+  url('//at.alicdn.com/t/font_561531_h1lfwmkpwdi.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_561531_h1lfwmkpwdi.svg#iconfont') format('svg');
+}
+.icon-nocircle-true::before {
+  font-family: 'iconfont';
+  content: '\e633';
+}
+
+.icon-patients-message::before {
+  font-family: 'iconfont';
+  content: '\e671';
+}
+
+.icon-patients-encounter::before {
+  font-family: 'iconfont';
+  content: '\e658';
+}
+
+.icon-patients-appointment::before {
+  font-family: 'iconfont';
+  content: '\e656';
+}
+
+.icon-arrow-left-mini::before {
+  font-family: 'iconfont';
+  content: '\e63c';
+}
+
+.icon-arrow-right-mini::before {
+  font-family: 'iconfont';
+  content: '\e638';
+}
+
+.icon-arrow-top::before {
+  font-family: 'iconfont';
+  content: '\e647';
+}
+
+.icon-true::before {
+  font-family: 'iconfont';
+  content: '\e612';
+}
+
+.icon-add::before {
+  font-family: 'iconfont';
+  content: '\e644';
+}
+
+.icon-reduce::before {
+  font-family: 'iconfont';
+  content: '\e643';
+}
+
+.confguration-icon::before {
+  font-family: 'iconfont';
+  content: '\e6d8';
+}
+
+.account-icon::before {
+  font-family: 'iconfont';
+  content: '\e6b3';
+}
+
+.password-icon::before {
+  font-family: 'iconfont';
+  content: '\e6e5';
+}
+
+.help-icon::before {
+  font-family: 'iconfont';
+  content: '\e696';
+}
+
+.lock-icon::before {
+  font-family: 'iconfont';
+  content: '\e750';
+}
+
+.exit-icon::before {
+  font-family: 'iconfont';
+  content: '\e64f';
+}
+
+.weichat-icon::before {
+  font-family: 'iconfont';
+  content: '\e628';
+}
+
+.information-icon::before {
+  font-family: 'iconfont';
+  content: '\e639';
+}
+
+.clear::before {
+  font-family: 'iconfont';
+  content: '\e636';
+  font-size: 15px;
+}
+
+.ping::before {
+  font-family: 'iconfont';
+  content: '\e681';
+}
+
+.add-icon::before {
+  font-family: 'iconfont';
+  content: '\e655';
+}
+
+.close-icon::before {
+  font-family: 'iconfont';
+  content: '\e61a';
+}
+
+.show-down::before {
+  font-family: 'iconfont';
+  content: '\e63b';
+}
+
+.search-icon::before {
+  font-family: 'iconfont';
+  content: '\e611';
+}
+
+.mrn-icon::before {
+  font-family: 'iconfont';
+  content: '\e66b';
+}
+
+.phon-icon::before {
+  font-family: 'iconfont';
+  content: '\e606';
+}
+
+.today-app::before {
+  font-family: 'iconfont';
+  content: '\e807';
+}
+
+.tomorow-app::before {
+  font-family: 'iconfont';
+  content: '\e600';
+}
+
+.today-new-patient::before {
+  font-family: 'iconfont';
+  content: '\e62e';
+}
+
+.today-new-members::before {
+  font-family: 'iconfont';
+  content: '\e63a';
+}
+
+.today-follow-num::before {
+  font-family: 'iconfont';
+  content: '\e630';
+}
+
+.today-paid-amount::before {
+  font-family: 'iconfont';
+  content: '\e614';
+}
+
+.mini-delete::before {
+  font-family: 'iconfont';
+  content: '\e80a';
+  font-size: 12px;
+}
+
+.icon-switch::before {
+  font-family: 'iconfont';
+  content: '\e769';
+}
+
+.patient-appointment-b::before {
+  font-family: 'iconfont';
+  content: '\e634';
+}
+
+.patient-appointment-l::before {
+  font-family: 'iconfont';
+  content: '\e61d';
+}
+
+.patient-information::before {
+  font-family: 'iconfont';
+  content: '\e671';
+}
+
+.patient-sex-F::before {
+  font-family: 'iconfont';
+  content: '\e665';
+  color: $btn-bg-color6;
+}
+
+.patient-sex-M::before {
+  font-family: 'iconfont';
+  content: '\e63d';
+  color: $active-bg-color;
+}
+
+// 打印图标
+.icon-print::before {
+  font-family: 'iconfont';
+  content: '\e645';
+}
+
+// 设置图标
+.icon-system::before {
+  font-family: 'iconfont';
+  content: '\e65b';
+}
+
+// 生命体征图标
+.icon-signs::before {
+  font-family: 'iconfont';
+  content: '\e650';
+}
+
+// 过敏史图标
+.icon-anaphylaxis::before {
+  font-family: 'iconfont';
+  content: '\e60b';
+}
+
+// 诊断图标
+.icon-diagnosis::before {
+  font-family: 'iconfont';
+  content: '\e689';
+}
+
+// 实验室图标
+.icon-laboratory::before {
+  font-family: 'iconfont';
+  content: '\e60c';
+}
+
+// 影像学图标
+.icon-imaging::before {
+  font-family: 'iconfont';
+  content: '\e65c';
+}
+
+// 接种记录图标
+.icon-record::before {
+  font-family: 'iconfont';
+  content: '\e619';
+}
+
+// 药品信息图标
+.icon-drugs::before {
+  font-family: 'iconfont';
+  content: '\e601';
+}
+
+// 预约图标
+.icon-appointment::before {
+  font-family: 'iconfont';
+  content: '\e671';
+}
+
+//更多加载图标
+.icon-more::before {
+  font-family: 'iconfont';
+  content: '\e63b';
+}
+
+//上传图标
+.icon-upload-file::before {
+  font-family: 'iconfont';
+  content: '\e682';
+}
+
+//文档图标
+.icon-file::before {
+  font-family: 'iconfont';
+  content: '\e617';
+}
+
+//文档小图标
+.icon-file-1::before {
+  font-family: 'iconfont';
+  content: '\e613';
+}
+
+//文档预览图标
+.icon-file-review::before {
+  font-family: 'iconfont';
+  content: '\e658';
+}
+
+//文档下载图标
+.icon-file-download::before {
+  font-family: 'iconfont';
+  content: '\e62a';
+}
+
+//撤销图标
+.icon-revoke::before {
+  font-family: 'iconfont';
+  content: '\e61b';
+}
+
+//打印图标
+.icon-print::before {
+  font-family: 'iconfont';
+  content: '\e63e';
+}
+
+//列表图标
+.icon-list::before {
+  font-family: 'iconfont';
+  content: '\e615';
+}
+
+//图表图标
+.icon-echarts::before {
+  font-family: 'iconfont';
+  content: '\e60d';
+}
+
+// 向右的箭头
+.icon-gointo::before {
+  font-family: 'iconfont';
+  content: '\e67b';
+}
+
+// 客服电话
+.icon-server::before {
+  font-family: 'iconfont';
+  content: '\e61c';
+}
+
+// 三角箭头
+.icon-arr::before {
+  font-family: 'iconfont';
+  content: '\e78f';
+}
+
+// 三角箭头
+.icon-waterfall::before {
+  font-family: 'iconfont';
+  content: '\e602';
+}
+
+.prevBtn::before {
+  font-family: 'iconfont';
+  content: '\e792';
+}
+.nextBtn::before {
+  font-family: 'iconfont';
+  content: '\e790';
+}
+.icon-warring::before {
+  font-family: 'iconfont';
+  content: '\e603';
+}
+.icon-ower-money::before {
+  font-family: 'iconfont';
+  content: '\e604';
+}
+.icon-refund::before {
+  font-family: 'iconfont';
+  content: '\e616';
+}
+.icon-apporve::before {
+  font-family: 'iconfont';
+  content: '\e607';
+}
+.icon-confirm::before {
+  font-family: 'iconfont';
+  content: '\e6bd';
+}
+.icon-continue::before { // 继续看诊
+  font-family: 'iconfont';
+  content: '\e69c';
+}
+.icon-copy::before { // 复制
+  font-family: 'iconfont';
+  content: '\e637';
+}
+.icon-export::before { // 导出
+  font-family: 'iconfont';
+  content: '\e605';
+}

src/app/common/scss/scss-common.scss

@@ -0,0 +1,4 @@
+// 边框样式 $tb 上下  $lr  左右 $n 弧度
+@mixin radiusStyle($tb,$lr,$n){
+  border-#{$tb}-#{$lr}-radius: $n !important;
+}

src/app/common/shared.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+// 国际化
+// import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
+// import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+// 公共服务
+// import { SharedService } from './shared.service';
+
+// 功能插件
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { SortableModule } from '@progress/kendo-angular-sortable';
+
+// 全局指令模块
+import { DirectiveModule } from '../common/directive/directive.module';
+import { MainLeftMenuComponent } from './components/main-left-menu/main-left-menu.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    // TranslateModule.forChild(),
+    NgZorroAntdModule,
+    DirectiveModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  // providers: [SharedService],
+  declarations: [MainLeftMenuComponent],
+  exports: [ NgZorroAntdModule, DirectiveModule, SortableModule, FormsModule, ReactiveFormsModule, MainLeftMenuComponent],
+})
+export class SharedModule {}
+

src/app/common/shared.service.ts

@@ -0,0 +1,26 @@
+import { Injectable, OnInit } from '@angular/core';
+
+// 国际化
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable()
+export class SharedService {
+  LocalLang: string;
+  constructor(public translate: TranslateService ) {
+    translate.addLangs(['zh', 'en']);
+    translate.setDefaultLang('zh');
+    if (!window.localStorage.getItem('lang')) {
+      window.localStorage.setItem('lang', 'zh');
+    }
+    this.LocalLang = window.localStorage.getItem('lang') || 'zh';
+    translate.use(this.LocalLang);
+  }
+  getLang() {
+    return window.localStorage.getItem('lang') || 'zh';
+  }
+  setLang(lang) {
+    window.localStorage.setItem('lang', lang);
+    this.translate.use(lang);
+  }
+}
+

src/app/home/home-head/home-head.component.html

@@ -0,0 +1,46 @@
+<div class="common-head m-t-15">
+  <ul class="home-head-list">
+    <li class="head-list-item pull-left">
+      <a class="item-btn">
+          <span class="item-num pull-left"><b class="num font-size-34">999+</b>人</span>
+          <i class="today-app item-icon pull-left"></i>
+          <span class="item-title pull-left font-size-14">今日新增预约</span>
+      </a>
+    </li>
+    <li class="head-list-item pull-left">
+        <a class="item-btn">
+            <span class="item-num pull-left"><b class="num font-size-34">999+</b>人</span>
+            <i class="tomorow-app item-icon pull-left"></i>
+            <span class="item-title pull-left font-size-14">明日预约确认</span>
+        </a>
+    </li>
+    <li class="head-list-item pull-left">
+        <a class="item-btn">
+            <span class="item-num pull-left"><b class="num font-size-34">999+</b>人</span>
+            <i class="today-new-patient item-icon pull-left"></i>
+            <span class="item-title pull-left font-size-14">今日新增患者</span>
+        </a>
+    </li>
+    <li class="head-list-item pull-left">
+        <a class="item-btn">
+            <span class="item-num pull-left"><b class="num font-size-34">999+</b>人</span>
+            <i class="today-new-members item-icon pull-left"></i>
+            <span class="item-title pull-left font-size-14">今日新增会员</span>
+        </a>
+    </li>
+    <li class="head-list-item pull-left">
+        <a class="item-btn">
+            <span class="item-num pull-left"><b class="num font-size-34">999+</b>人</span>
+            <i class="today-follow-num item-icon pull-left"></i>
+            <span class="item-title pull-left font-size-14">今日随访人次</span>
+        </a>
+    </li>
+    <li class="head-list-item pull-left">
+        <a class="item-btn">
+            <span class="item-num pull-left"><b class="num font-size-34">999+</b>人</span>
+            <i class="today-paid-amount item-icon pull-left font-size-34"></i>
+            <span class="item-title pull-left font-size-14">今日实收金额</span>
+        </a>
+    </li>
+  </ul>
+</div>

src/app/home/home-head/home-head.component.scss

@@ -0,0 +1,36 @@
+@import '../../common/scss/all-color.scss';
+.home-head-list{
+    width:100%;
+    height:88px;
+    .head-list-item{
+        width:calc((100% - 10px)/6);
+        height: 88px;
+        border-right:2px solid $dropdown-bg-color;
+        .item-btn{
+            display: block;
+            padding:10px 20px;
+            overflow: hidden;
+            .item-num{
+                width:70%;
+                height: 46px;
+                line-height: 46px;
+                color:$active-bg-color;
+                font-size: 14px;
+                overflow: hidden;
+            }
+            .item-icon{
+                width:30%;
+                height: 46px;
+                font-size: 30px;
+                text-align: center;
+            }
+            .item-title{
+                color:$warn-font-color;
+            }
+        }
+        &:last-child{
+            border:none;
+        }
+    }
+    
+}

src/app/home/home-head/home-head.component.ts

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

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

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// 引入组件、
+import { HomeComponent } from './home.component';
+import { PatientAppointmentComponent } from './patient-appointment/patient-appointment.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: HomeComponent,
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'patient-appointment'
+            }, {
+                path: 'patient-appointment',
+                component: PatientAppointmentComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+
+export class HomeRoutingModule { }

src/app/home/home.component.html

@@ -0,0 +1,9 @@
+<div class="main-content">
+    <app-home-head></app-home-head>
+    <div class="main-content-wrrap m-t-15">
+        <app-main-left-menu [maskList]='maskListMock' [socketNum]="socketIsConnect" (switchComponent)="chooiseCom($event)"></app-main-left-menu>
+        <div class="main-right pull-left">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

src/app/home/home.component.scss

@@ -0,0 +1 @@
+@import "../common/scss/all-color.scss";

src/app/home/home.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+
+// 公共服务
+// import { SharedService } from '../common/shared.service';
+
+@Component({
+    selector: 'app-main-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+    public maskListMock: Array<MaskList> = [];
+    public socketIsConnect: Boolean;
+    constructor(
+        // public translate: SharedService
+    ) {}
+
+    ngOnInit() {
+        this.maskListMock = [
+            new MaskList(1, '患者预约', 'today-app', 120),
+            new MaskList(2, '就诊病历', 'today-app', 3),
+            new MaskList(3, '就诊账单', 'today-app', 30)
+        ];
+        this.socketIsConnect = true;
+    }
+    chooiseCom (index) {
+        console.log(index);
+    }
+}
+export class MaskList {
+    constructor(
+        public id: number,
+        public name: string,
+        public iconClass: string,
+        public num: number
+    ) {}
+}

src/app/home/home.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 全局公共模块
+import { SharedModule } from '../common/shared.module';
+
+// 子组件
+import { HomeComponent } from './home.component';
+import { PatientAppointmentComponent } from './patient-appointment/patient-appointment.component';
+
+// 路由
+import { HomeRoutingModule } from './home-routing.module';
+import { HomeHeadComponent } from './home-head/home-head.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    HomeRoutingModule
+  ],
+  declarations: [
+    HomeComponent,
+    PatientAppointmentComponent,
+    HomeHeadComponent
+  ]
+})
+export class HomeModule { }

src/app/home/patient-appointment/patient-appointment.component.html

@@ -0,0 +1,3 @@
+<p>
+  patient-appointment works!
+</p>

src/app/home/patient-appointment/patient-appointment.component.ts

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

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

@@ -0,0 +1,24 @@
+<div class="header">
+  <!-- <div class="pull-left logo">
+    <img [src]="logoPic" alt="">
+  </div> -->
+  <div class="menu pull-left m-l-20">
+    <ul class="menu-ul">
+      <li class="menu-item pull-left" *ngFor="let menu of menus" routerLinkActive="menu-item-active">
+        <div *ngIf="!menu.levelTwo.length; else dropDownList">
+          <a class="menu-link" [routerLink]="menu.route">{{menu.levelOne}}</a>
+        </div>
+        <ng-template #dropDownList>
+          <nz-dropdown [nzTrigger]="'hover'">
+            <a class="menu-link" nz-dropdown [routerLink]="menu.route">{{menu.levelOne}}</a>  
+            <ul nz-menu>
+              <ng-container *ngFor="let itemMenu of menu.levelTwo">
+                <li nz-menu-item><a [innerHtml]="itemMenu.item" class="font-size-14"></a></li>
+              </ng-container>
+            </ul>
+          </nz-dropdown>
+        </ng-template>
+      </li>
+    </ul>
+  </div>
+</div>

src/app/main/header/header.component.scss

@@ -0,0 +1,59 @@
+@import "../../common/scss/all-color.scss";
+$width100:100%;
+.header{
+    width:100%;
+    height:44px;
+    background-color:$menu-bg-color;
+    box-shadow:0 2px 4px 0 rgba(0,36,87,0.29);
+    .logo{
+        width:10%;
+        height: 44px;
+        padding:10px 15px;
+        img{
+            display: block;
+            width:auto;
+            height: 100%;
+        }
+    }
+    .menu{
+        max-width:45%;
+        height: 44px;
+        font-size: 14px;
+        .menu-ul{
+            width:100%;
+            height: 44px;
+            .menu-item{
+                // width:$width100/7;
+                height: 44px;
+                line-height: 44px;
+                .menu-link{
+                    padding:0px 15px;
+                    display: block;
+                    color:$base-color;
+                }
+                &:hover{
+                    background:$active-bg-color;
+                }
+            }
+            .menu-item-active{
+                background:$active-bg-color;
+            }
+            .menu-config{
+                width:200px;
+                height: auto;
+                overflow: hidden;
+            }
+        }
+    }
+    .menu-more{
+        height:44px;
+        padding:0px 10px;
+        .changeLang{
+            margin-top:11px;
+            // transform: rotate(90deg);
+        }
+    }
+}
+.ant-dropdown-menu-item > a, .ant-dropdown-menu-submenu-title > a{
+    padding:7px 24px 7px 8px;
+}

src/app/main/header/header.component.ts

@@ -0,0 +1,173 @@
+import { Component, OnInit } from '@angular/core';
+// import '../../../assets/images/logo.png';
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+  public menus: Array<any>;
+  public menuAllList: Array<any>;
+  public changelang: Boolean = true;
+  public logoPic = '../../../assets/images/logo.png';
+
+  constructor() { }
+
+  ngOnInit() {
+    this.menuAllList = [
+      {
+        levelOne: '首页',
+        permissions: 'FUN_CRM_CUSTOM_EXPORT',
+        route: ['home'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }
+        ]
+      }, {
+        levelOne: '预约',
+        permissions: 'FUN_NURSE_PATIENT_LIST',
+        route: ['appointment'],
+        levelTwo: []
+      }, {
+        levelOne: '患者',
+        permissions: 'FUN_CONSULT_SCHEDULE',
+        route: ['patients'],
+        levelTwo: []
+      }, {
+        levelOne: '报表',
+        permissions: 'FUN_INVOICE_PAID',
+        route: ['report'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: [
+              {
+                permissions: 'FUN_CRM_CUSTOM_EXPORT',
+                subItem: '三级菜单1'
+              }
+            ]
+          }
+        ]
+      }, {
+        levelOne: '诊所',
+        permissions: 'FUN_PHARMACY_DIC_WD',
+        route: ['clinic'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: [
+              {
+                permissions: 'FUN_CRM_CUSTOM_EXPORT',
+                subItem: '三级菜单1'
+              }
+            ]
+          }
+        ]
+      }, {
+        levelOne: '收费',
+        permissions: 'FUN_MEMBER_INFO',
+        route: ['billing'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: [
+              {
+                permissions: 'FUN_CRM_CUSTOM_EXPORT',
+                subItem: '三级菜单1'
+              }
+            ]
+          }
+        ]
+      }, {
+        levelOne: '运营',
+        permissions: 'FUN_PROVIDE_RECORD',
+        route: ['operation'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: [
+              {
+                permissions: 'FUN_CRM_CUSTOM_EXPORT',
+                subItem: '三级菜单1'
+              }
+            ]
+          }
+        ]
+      }, {
+        levelOne: 'SCRM',
+        permissions: 'FUN_LABORATORY_ALL',
+        route: ['scrm'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }
+        ]
+      }, {
+        levelOne: '知识库',
+        permissions: 'FUN_WAREHOUSE_DELIVER_ALL',
+        route: ['knowledge'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_NURSE_PATIENT_LIST',
+            subMenu: []
+          }
+        ]
+      }, {
+        levelOne: '系统配置',
+        permissions: 'FUN_PHARMACY_STOCK_IN',
+        route: ['configuration'],
+        levelTwo: [
+          {
+            item: '患者预约',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }, {
+            item: '就诊病历',
+            permissions: 'FUN_CRM_CUSTOM_EXPORT',
+            subMenu: []
+          }
+        ]
+      }
+    ];
+    this.menus = this.menuAllList.splice(0, 5);
+  }
+
+}

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

@@ -0,0 +1,61 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// 组件
+import { MainComponent } from './main.component';
+
+
+const routes: Routes = [
+    {
+        path: '',
+        component: MainComponent,
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'home'
+            }, {
+                path: 'home',
+                loadChildren: '../home/home.module#HomeModule'
+            }, {
+                path: 'appointment',
+                loadChildren: '../appointment/appointment.module#AppointmentModule'
+            }, {
+                path: 'patients',
+                loadChildren: '../patients/patients.module#PatientsModule'
+            }, {
+                path: 'report',
+                loadChildren: '../report/report.module#ReportModule'
+            }, {
+                path: 'clinic',
+                loadChildren: '../clinic/clinic.module#ClinicModule'
+            }
+            // , {
+            //     path: 'billing',
+            //     loadChildren: '../billing/billing.module#BillingModule'
+            // }, {
+            //     path: 'operation',
+            //     loadChildren: '../operation/operation.module#OperationModule'
+            // }, {
+            //     path: 'scrm',
+            //     loadChildren: '../scrm/scrm.module#ScrmModule'
+            // }, {
+            //     path: 'knowledge',
+            //     loadChildren: '../knowledge/knowledge.module#KnowledgeModule'
+            // }, {
+            //     path: 'configuration',
+            //     loadChildren: '../configuration/configuration.module#ConfigurationModule'
+            // }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class MainRoutingModule { }

src/app/main/main.component.html

@@ -0,0 +1,4 @@
+<div class="main">
+    <app-header></app-header>
+    <router-outlet></router-outlet>
+</div>

src/app/main/main.component.scss

@@ -0,0 +1,5 @@
+.main{
+    width:100%;
+    height: 100%;
+    overflow: hidden;
+}

src/app/main/main.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-main',
+    templateUrl: './main.component.html',
+    styleUrls: ['./main.component.scss']
+})
+
+export class MainComponent {
+    public permissionsOne: 'sdfj';
+    constructor() {}
+}

src/app/main/main.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpModule } from '@angular/http';
+import { HttpClient, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+
+// 全局公共模块
+import { SharedModule } from '../common/shared.module';
+
+// 路由
+import { MainRoutingModule } from './main-routing.module';
+
+// 组件
+import { MainComponent } from './main.component';
+import { HeaderComponent } from './header/header.component';
+import { MenuConfigComponent } from './menu-config/menu-config.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpModule,
+    SharedModule,
+    MainRoutingModule
+  ],
+  declarations: [
+    MainComponent,
+    HeaderComponent,
+    MenuConfigComponent
+  ],
+  providers: []
+})
+export class MainModule { }

src/app/main/menu-config/menu-config.component.html

@@ -0,0 +1,34 @@
+<!-- [disabledIndexes]="!palette.isLeft ? disabledIndexes : []"  [ngClass]="classObj"-->
+<div class="menu-config-main">
+  <div class="menu-config-head">
+    <span class="config-head-l">导航配置</span>
+    <span class="config-head-r">最多选5个</span>
+  </div>
+  <div class="menu-config-content">
+    <kendo-sortable class="kendo-list" [data]="palettes" [disabledIndexes]="[0, 1]">
+      <ng-template let-palette="item">
+        <div [ngClass]="{'config-content-l':palette.isLeft,'config-content-r':!palette.isLeft}">
+          <span class="content-head" [ngClass]="{'l-head':palette.isLeft,'r-head':!palette.isLeft}">{{palette.name}}</span>
+          <ul class="config-content-list" [ngClass]="{'left-content':palette.isLeft,'right-content':!palette.isLeft}">
+            <kendo-sortable 
+              [data]="palette.data" 
+              [animation]="true"
+              zone="innerZone"
+              emptyText="不能为空"
+              (dataAdd)="onDataAdd(palette, $event)"
+              (dataRemove)="onDataRemove(palette, $event)"
+              (dragEnd)="onDragEnd(palette, $event)">
+              <ng-template let-item="item">
+                  <li class="config-li">{{item.name}}<i class="ye"></i></li>
+              </ng-template>
+            </kendo-sortable>
+          </ul>
+        </div>
+      </ng-template>
+    </kendo-sortable>
+    <div class="bottom-btn">
+      <a class="cancle font-size-12 m-r-15">取消</a>
+      <a class="sure font-size-12">确定</a>
+    </div>
+  </div>
+</div>

src/app/main/menu-config/menu-config.component.scss

@@ -0,0 +1,124 @@
+@import "../../common/scss/all-color.scss";
+.menu-config-main{
+    width:200px;
+    .menu-config-head{
+        width:100%;
+        height:30px;
+        line-height:30px;
+        background:$base-color;
+        box-shadow:0 1px 0 0 $box-shadow-color;
+        border-radius:2px 2px 1px 1px;
+        font-size: 12px;
+        .config-head-l{
+            float: left;
+            color:$warn-font-color;
+            padding-left:10px;
+        }
+        .config-head-r{
+            float:right;
+            color:$active-bg-color;
+            padding-right:10px;
+        }
+    }
+    .menu-config-content{
+        width:100%;
+        height: auto;
+        display: flow-root;
+        .content-head{
+            display: block;
+            height:24px;
+            line-height: 24px;
+            font-size: 12px;
+            padding-left:10px;
+        }
+        .config-content-l{
+            float: left;
+            width:50%;
+            background:$flyout-bg-color1;
+            .l-head{
+                color:$active-bg-color;
+            }
+            .left-content{
+                overflow-y: auto;
+                li{
+                    color:$menu-bg-color;
+                    background-color:transparent;
+                    cursor: move;
+                    &:hover{
+                        color:$base-color;
+                        background-color:$active-bg-color;
+                    }
+                    .ye{
+                        display: inline-block;
+                        margin-left:10px;
+                        font-size:12px;
+                        &::before{
+                            font-family: 'iconfont';
+                            content:'\e633';
+                        }
+                    }
+                }
+            }
+        }
+        .config-content-r{
+            float: left;
+            width:50%;
+            background:$flyout-bg-color2;
+            .r-head{
+                color:$warn-font-color;
+            }
+            .right-content{
+                overflow-y: auto;
+                li{
+                    color:$normal-font-color;
+                    background-color:transparent;
+                    &:hover{
+                        background-color:$flyout-bg-color3;
+                    }
+                }
+            }
+        }
+        .dragable{
+            li{
+                &:hover{
+                    cursor: move;
+                }
+            }
+            
+        }
+        .undragable{
+            &:hover{
+                cursor: no-drop;
+            }
+        }
+        .config-content-list{
+            width:100%;
+            height: 160px;
+            .config-li{
+                width:calc("~100% - 10px");
+                height: 32px;
+                line-height: 32px;
+                padding-left:10px;
+                font-size: 14px;
+            }
+        }
+        .kendo-list{
+            display: flow-root;
+        }
+        .bottom-btn{
+            width:100%;
+            height: 30px;
+            line-height: 30px;
+            text-align: right;
+            padding:0px 6px;
+            .cancle{
+                display: inline-block;
+                color:$warn-font-color;
+            }
+            .sure{
+                display: inline-block;
+                color:$active-bg-color;
+            }
+        }
+    }
+}

src/app/main/menu-config/menu-config.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { SortableModule } from '@progress/kendo-angular-sortable';
+
+@Component({
+  selector: 'app-menu-config',
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './menu-config.component.html',
+  styleUrls: ['./menu-config.component.scss']
+})
+export class MenuConfigComponent implements OnInit {
+  public chooised: Array<MenuList> = [];
+  public noChooised: Array<MenuList> = [];
+  public classObj;
+  public palettes: any[];
+  public disabledIndexes: number[] = [];
+
+  constructor() {}
+
+  ngOnInit() {
+    const menulist = [
+      {id: 1, name: '患者', ischooise: false},
+      {id: 2, name: 'SCRM', ischooise: true},
+      {id: 3, name: '诊所', ischooise: false},
+      {id: 4, name: '报表', ischooise: true},
+      {id: 5, name: '系统配置', ischooise: true},
+      {id: 6, name: '预约', ischooise: false},
+      {id: 7, name: '运营', ischooise: true},
+      {id: 8, name: '知识库', ischooise: false},
+      {id: 9, name: 'REM', ischooise: false},
+      {id: 10, name: '首页', ischooise: true},
+      {id: 11, name: '测试', ischooise: false},
+      {id: 12, name: '个人信息', ischooise: false}
+    ];
+    menulist.forEach(item => {
+      if (item.ischooise) {
+        this.chooised.push(item);
+      }else {
+        this.noChooised.push(item);
+      }
+    });
+    this.palettes = [
+      { data: this.chooised, name: '已选择', isLeft: true },
+      { data: this.noChooised, name: '未选择', isLeft: false }
+    ];
+    // this.classObj = {
+    //   'dragable': (this.chooised.length < 5) ? true : false,
+    //   'undragable': (this.chooised.length >= 5) ? true : false
+    // };
+  }
+  // 某列添加数据
+  onDataAdd(i, e) {
+    console.log('add:', i, e);
+  }
+  // 某列移除数据
+  onDataRemove(i, e) {
+    console.log('remove:', i, e);
+  }
+  // 列内拖拽结束
+  onDragEnd(i, e) {
+    console.log('end:', i, e);
+  }
+  // 禁用拖拽
+  // disableItem() {
+  //   this.disabledIndexes = [];
+  //   if (this.chooised.length >= 5) {
+  //     this.noChooised.forEach((item, index) => {
+  //       this.disabledIndexes.push(index);
+  //     });
+  //   }
+  //   console.log(this.disabledIndexes);
+  // }
+}
+export class MenuList {
+    public id: number;
+    public name: string;
+    public ischooise: boolean;
+}

src/app/patients/patients-list/patients-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  patients-list works!
+</p>

src/app/patients/patients-list/patients-list.component.ts

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

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+//  组件
+import { PatientsComponent } from './patients.component';
+import { PatientsListComponent } from './patients-list/patients-list.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: PatientsComponent,
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'patients-list'
+            }, {
+                path: 'patients-list',
+                component: PatientsListComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class PatientsRoutingModule { }

src/app/patients/patients.component.html

@@ -0,0 +1,9 @@
+<div class="main-content">
+  <!-- <app-patients-header></app-patients-header> -->
+  <div class="main-content-wrrap m-t-15">
+      <app-main-left-menu [maskList]='maskListMock' [socketNum]="socketIsConnect" (switchComponent)="chooiseCom($event)"></app-main-left-menu>
+      <!-- <div class="main-right pull-left">
+          <router-outlet></router-outlet>
+      </div> -->
+  </div>
+</div>

src/app/patients/patients.component.scss

@@ -0,0 +1 @@
+@import "../common/scss/all-color.scss";

src/app/patients/patients.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+// 公共服务
+// import { SharedService } from '../common/shared.service';
+
+@Component({
+  selector: 'app-patients',
+  templateUrl: './patients.component.html',
+  styleUrls: ['./patients.component.scss']
+})
+export class PatientsComponent implements OnInit {
+  public maskListMock: Array<MaskList> = [];
+    public socketIsConnect: Boolean;
+    constructor(
+        // public translate: SharedService
+    ) {}
+    ngOnInit() {
+        this.maskListMock = [
+            new MaskList(1, '患者预约', 'today-app', 120),
+            new MaskList(2, '就诊病历', 'today-app', 3),
+            new MaskList(3, '就诊账单', 'today-app', 30)
+        ];
+        this.socketIsConnect = true;
+    }
+    chooiseCom (index) {
+        console.log(index);
+    }
+}
+export class MaskList {
+  constructor(
+      public id: number,
+      public name: string,
+      public iconClass: string,
+      public num: number
+  ) {}
+}

src/app/patients/patients.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 全局公共模块
+import { SharedModule } from '../common/shared.module';
+
+// 组件
+import { PatientsComponent } from './patients.component';
+import { PatientsListComponent } from './patients-list/patients-list.component';
+
+// 路由
+import { PatientsRoutingModule } from './patients-routing.module';
+// import { PatientsHeaderComponent } from './patients-header/patients-header.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    PatientsRoutingModule
+  ],
+  declarations: [PatientsComponent, PatientsListComponent]
+})
+export class PatientsModule { }

src/app/report/report-list/report-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  report-list works!
+</p>

src/app/report/report-list/report-list.component.ts

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

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// 组件
+import { ReportComponent } from './report.component';
+import { ReportListComponent } from './report-list/report-list.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ReportComponent,
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'report-list'
+            }, {
+                path: 'report-list',
+                component: ReportListComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class ReportRoutingModule {}

src/app/report/report.component.html

@@ -0,0 +1,4 @@
+<p>
+  report works!
+</p>
+<router-outlet></router-outlet>

src/app/report/report.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+// 公共服务
+// import { SharedService } from '../common/shared.service';
+@Component({
+  selector: 'app-report',
+  templateUrl: './report.component.html',
+  styleUrls: ['./report.component.scss']
+})
+export class ReportComponent implements OnInit {
+
+  constructor(
+    // public translate: SharedService
+  ) { }
+
+  ngOnInit() {
+  }
+
+}

src/app/report/report.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 全局公共模块
+import { SharedModule } from '../common/shared.module';
+
+// 组件
+import { ReportComponent } from './report.component';
+import { ReportListComponent } from './report-list/report-list.component';
+
+// 路由
+import { ReportRoutingModule } from './report-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    ReportRoutingModule
+  ],
+  declarations: [ReportComponent, ReportListComponent]
+})
+export class ReportModule { }

src/assets/menu-route.ts

@@ -0,0 +1,38 @@
+export const MenuRouteList: Array<RouteObj> = [
+    {
+        id: 1,
+        route: 'home'
+    }, {
+        id: 2,
+        route: 'appointment'
+    }, {
+        id: 3,
+        route: 'patients'
+    }, {
+        id: 4,
+        route: 'report'
+    }, {
+        id: 5,
+        route: 'clinic'
+    }, {
+        id: 6,
+        route: 'billing'
+    }, {
+        id: 7,
+        route: 'operation'
+    }, {
+        id: 8,
+        route: 'scrm'
+    }, {
+        id: 9,
+        route: 'knowledge'
+    }, {
+        id: 10,
+        route: 'configuration'
+    }
+];
+
+export class RouteObj {
+    public id: number;
+    public route: string;
+}

src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  serverUrl: 'https://libratest.yunpractice.com/rest'
+};

src/environments/environment.ts

@@ -0,0 +1,9 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false,
+  serverUrl: 'https://libratest.yunpractice.com/rest'
+};