[完善]预案状态字段

angular.json

@@ -18,15 +18,13 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist/anxin119",
+            "sourceMap": false,
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss",
               "./node_modules/swiper/css/swiper.min.css",
@@ -46,10 +44,12 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [{
-                "replace": "src/environments/environment.ts",
-                "with": "src/environments/environment.prod.ts"
-              }],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -58,7 +58,8 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "budgets": [{
+              "budgets": [
+                {
                   "type": "initial",
                   "maximumWarning": "18mb",
                   "maximumError": "18mb"
@@ -97,13 +98,8 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         },
@@ -115,9 +111,7 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         },
         "e2e": {

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config  proxy.config.json  --open --port 51423",
+    "start": "ng serve --proxy-config  proxy.config.json  --open",
     "build": "ng build",
     "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod",
     "publish": "ng build --prod --verbose",

proxy.config.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://10.81.73.39:8000/",
+    "target": "http://121.36.37.70:8201/",
     "生产": "http://10.81.73.39:8000/",
     "测试": "http://121.36.37.70:8201/",
     "生产2": "http://183.194.244.232:8088/",

src/app/app-routing.module.ts

@@ -41,7 +41,7 @@ const routes: Routes = [
   {path:'keyUnit/viewunitinfoplans', component:ViewUnitDetailsPlanComponent,canActivate: [AuthGuard],},
   {path:'getNoMToken',component:MTokenK1Component, canActivate: [AuthGuard],}, //K1秘钥验证失败是跳转页面
   {path:'planAudit/planpass', component: PlanPassComponent , canActivate: [AuthGuard]},
-  {path:'test', component: TestComponent },
+  // {path:'test', component: TestComponent },
   {path:'linksPlan', component: ExternalLinksPlanComponent },
   {path:'CreatePlanOnlineFive',component:CreatePlanOnlineFiveComponent},
   {path:'exportExcel',component:ExportExcelComponent, canActivate: [AuthGuard]},

src/app/app.component.ts

@@ -25,6 +25,8 @@ export class AppComponent {
   isMaskLayerShow: boolean = false;
 
   ngOnInit(): void {
+    console.log("更新日期2025.01.07");
+    
     //监听遮罩层
     this.maskLayerService.getMessage().subscribe((message: any) => {
       this.isMaskLayerShow = message;
@@ -53,4 +55,7 @@ export class AppComponent {
       this.token.startUp();
     }
   }
+
+
+
 }

src/app/app.module.ts

@@ -1,63 +1,69 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { NavigationModule } from './navigation/navigation.module';
-import { HomeComponent } from './home/home.component';
-import { TabbarComponent } from './tabbar/tabbar.component';
-import { PagesModule } from './pages/pages.module';
-import { FormsModule } from '@angular/forms';
-import { UiModule } from './ui/ui.module';
-import { HttpClientModule } from '@angular/common/http';
-import { httpInterceptorProviders } from './http-interceptors/index'
-import { CacheTokenService } from './http-interceptors/cache-token.service'
-import { TreeService } from './http-interceptors/tree.service';
-import { MTokenK1Component } from './m-token-k1/m-token-k1.component' //K1秘钥
-import { CountdownModule } from 'ngx-countdown'; //倒计时插件
-import { GISManagementModule } from './gis-management/gis-management.module';
-import { DataCollectionModule } from './data-collection/data-collection.module';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { TestComponent } from './test/test.component';
-import { ExternalLinksPlanComponent } from './external-links-plan/external-links-plan.component';
-import { SearchDownList } from '../modules/map/declare/component/SearchDownListPlugins/SearchDownList';
-import { ExportExcelComponent } from './export-excel/export-excel.component';
-import { registerLocaleData } from '@angular/common';
-import zh from '@angular/common/locales/zh';
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatIconModule } from "@angular/material/icon";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { NavigationModule } from "./navigation/navigation.module";
+import { HomeComponent } from "./home/home.component";
+import { TabbarComponent } from "./tabbar/tabbar.component";
+import { PagesModule } from "./pages/pages.module";
+import { FormsModule } from "@angular/forms";
+import { UiModule } from "./ui/ui.module";
+import { HttpClientModule } from "@angular/common/http";
+import { httpInterceptorProviders } from "./http-interceptors/index";
+import { CacheTokenService } from "./http-interceptors/cache-token.service";
+import { TreeService } from "./http-interceptors/tree.service";
+import { MTokenK1Component } from "./m-token-k1/m-token-k1.component"; //K1秘钥
+import { CountdownModule } from "ngx-countdown"; //倒计时插件
+import { GISManagementModule } from "./gis-management/gis-management.module";
+import { DataCollectionModule } from "./data-collection/data-collection.module";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { TestComponent } from "./test/test.component";
+import { ExternalLinksPlanComponent } from "./external-links-plan/external-links-plan.component";
+import { SearchDownList } from "../modules/map/declare/component/SearchDownListPlugins/SearchDownList";
+import { ExportExcelComponent } from "./export-excel/export-excel.component";
+import { registerLocaleData } from "@angular/common";
+import zh from "@angular/common/locales/zh";
+import { KeyUnitModule } from "./key-unit/key-unit.module";
+import { MatTabsModule } from "@angular/material/tabs";
+import { PlanManagementModule } from "./plan-management/plan-management.module";
 registerLocaleData(zh);
 @NgModule({
-    declarations: [
-        AppComponent,
-        HomeComponent,
-        MTokenK1Component,
-        TestComponent,
-        ExternalLinksPlanComponent,
-        SearchDownList,
-        ExportExcelComponent
-    ],
-    imports: [
-        BrowserModule,
-        AppRoutingModule,
-        BrowserAnimationsModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatSidenavModule,
-        NavigationModule,
-        MatIconModule,
-        PagesModule,
-        FormsModule,
-        HttpClientModule,
-        CountdownModule,
-        GISManagementModule,
-        DataCollectionModule,
-        MatProgressSpinnerModule,
-        UiModule
-    ],
-    providers: [httpInterceptorProviders, CacheTokenService, TreeService],
-    bootstrap: [AppComponent]
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    MTokenK1Component,
+    TestComponent,
+    ExternalLinksPlanComponent,
+    SearchDownList,
+    ExportExcelComponent,
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatSidenavModule,
+    NavigationModule,
+    MatIconModule,
+    PagesModule,
+    FormsModule,
+    HttpClientModule,
+    CountdownModule,
+    GISManagementModule,
+    DataCollectionModule,
+    MatProgressSpinnerModule,
+    UiModule,
+    KeyUnitModule,
+    MatTabsModule,
+    PlanManagementModule,
+  ],
+  providers: [httpInterceptorProviders, CacheTokenService, TreeService],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/auth.guard.ts

@@ -1,31 +1,70 @@
-import { Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import {
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  Router,
+} from "@angular/router";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class AuthGuard implements CanActivate {
+  constructor(private http: HttpClient, private router: Router) {}
 
-    constructor(private router: Router) {
+  // 路由守卫
+  async canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Promise<boolean> {
+    console.log("next", next);
+    console.log("state", state);
 
+    if (
+      next.queryParams.singleSignOn &&
+      next.queryParams.singleSignOn === "true"
+    ) {
+      //执行自动登录逻辑
+      await this.onSubmit();
     }
+    return this.checkLogin();
+  }
 
-    // 路由守卫
-    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+  checkLogin(): boolean {
+    // 判断本地有没有token
+    const token = sessionStorage.getItem("token");
 
-        return this.checkLogin();
+    // 如果有token,允许访问
+    if (token) {
+      return true;
     }
 
-    checkLogin(): boolean {
+    //如果没有token,跳转登录页
+    this.router.navigate(["/login"]);
+    return false;
+  }
 
-        // 判断本地有没有token
-        const token = sessionStorage.getItem('token');
-
-        // 如果有token,允许访问
-        if (token) { return true; }
-
-        //如果没有token,跳转登录页
-        this.router.navigate(['/login']);
-        return false;
-    }
+  onSubmit() {
+    return new Promise<void>((resolve, reject) => {
+      this.http
+        .post("/api/Account/SignIn", {
+          name: "superadmin",
+          password: "SHya119!@",
+        })
+        .subscribe(
+          (data: any) => {
+            sessionStorage.setItem("level", data.level);
+            sessionStorage.setItem("token", data.token);
+            sessionStorage.setItem("refreshToken", data.refreshToken);
+            sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword); //是否需要修改默认密码
+            sessionStorage.setItem("singleSignOn", "true"); //是否需要修改默认密码
+            resolve();
+          },
+          (err) => {
+            reject();
+          }
+        );
+    });
+  }
 }

src/app/external-links-plan/external-links-plan.component.html

@@ -1,11 +1,73 @@
-<!-- 株洲项目:传入预案id显示相应预案 -->
-<div *ngIf="showType == 0">
-    <iframe id="inneriframe" [src]='iframeSrc' frameborder="0" style="width: 100%;height: 100%;"></iframe>
-</div>
-<div *ngIf="showType == 1" id="viewer"></div>
-<div *ngIf="showType == 2">
-    <iframe id="inneriframe2" [src]='threedUrl' frameborder="0" style="width: 100%;height: 100%;"></iframe>
-</div>
-<div *ngIf="showType == 3">
-    <app-collection-tools></app-collection-tools>
-</div>
+<mat-tab-group *ngIf="planId" selectedIndex="10" style="height: 99%;">
+    <mat-tab label="1.基本信息">
+        <ng-template matTabContent>
+            <app-basicinfo-look></app-basicinfo-look>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="2.四周毗邻">
+        <ng-template matTabContent>
+            <app-allaround></app-allaround>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="3.消防设施">
+        <ng-template matTabContent>
+            <app-fire-fighting-device-look></app-fire-fighting-device-look>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="4.重点部位">
+        <ng-template matTabContent>
+            <app-key-site-look></app-key-site-look>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="5.功能分区">
+        <ng-template matTabContent>
+            <app-function-division-look></app-function-division-look>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="6.行车路线">
+        <ng-template matTabContent>
+            <app-router-gis></app-router-gis>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="7.周边水源及力量">
+        <ng-template matTabContent>
+            <app-water-road></app-water-road>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="8.实景图">
+        <ng-template matTabContent>
+            <app-realistic-picture-look></app-realistic-picture-look>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="9.上传CAD">
+        <ng-template matTabContent>
+            <app-uploading-cad-look></app-uploading-cad-look>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="10.特别警示">
+        <ng-template matTabContent>
+            <app-special-warning></app-special-warning>
+        </ng-template>
+    </mat-tab>
+    <mat-tab label="11.作战部署">
+        <ng-template matTabContent>
+            <div *ngIf="showType == 0">
+                <iframe id="inneriframe" [src]='iframeSrc' frameborder="0" style="width: 100%;height: 100%;"></iframe>
+            </div>
+            <div *ngIf="showType == 1" id="viewer"></div>
+            <div *ngIf="showType == 3">
+                <app-collection-tools></app-collection-tools>
+            </div>
+
+            <!-- 在线编制预案 -->
+            <div *ngIf="showType == 2">
+                <app-create-plan-online-five></app-create-plan-online-five>
+            </div>
+        </ng-template>
+    </mat-tab>
+
+</mat-tab-group>
+
+<div *ngIf="unitId">
+    <app-basicinfo-look></app-basicinfo-look>
+</div>

src/app/external-links-plan/external-links-plan.component.ts

@@ -1,11 +1,10 @@
 import { HttpClient } from "@angular/common/http";
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { CacheTokenService } from "../http-interceptors/cache-token.service";
 import { Viewer } from "photo-sphere-viewer";
 import { DomSanitizer } from "@angular/platform-browser";
 
-declare var CryptoJS;
 @Component({
   selector: "app-external-links-plan",
   templateUrl: "./external-links-plan.component.html",
@@ -16,55 +15,136 @@ export class ExternalLinksPlanComponent implements OnInit {
     private http: HttpClient,
     private token: CacheTokenService,
     public route: ActivatedRoute,
-    private sanitizer: DomSanitizer
+    private sanitizer: DomSanitizer,
+    private router: Router
   ) {}
+
   planId: any; //预案id
   viewer; //全景图对象
   fetchUrl; //预案文件地址
   showType; //预案类型  1：全景图
   planData; //预案信息
+
+  unitId;
   async ngOnInit(): Promise<void> {
     await this.login(); //登录存储token
     this.route.queryParams.subscribe((paramsData) => {
-      this.planId = paramsData.planId;
-      this.http
-        .get(`/api/PlanComponents/${this.planId}`)
-        .subscribe((data: any) => {
-          console.log("单个预案详细信息", data);
-          this.planData = data;
-          if (data.planType != 1 && data.planType != 2) {
-            this.fetchUrl = data.attachmentUrls[0];
-            var index = this.fetchUrl.indexOf("/");
-            if (this.fetchUrl.substr(0, index) == "psw") {
-              this.showType = 1;
-              var obj = document.getElementById("viewer");
-              if (obj != null) {
-                obj.innerHTML = "";
+      console.log(paramsData.planId)
+      if (paramsData.planId) {
+        this.planId = paramsData.planId;
+        this.http
+          .get(`/api/PlanComponents/${this.planId}`)
+          .subscribe((data: any) => {
+            console.log("单个预案详细信息", data);
+            sessionStorage.setItem("planId", data.id);
+            sessionStorage.setItem("companyId", data.companyId);
+            sessionStorage.setItem(
+              "buildingTypeId",
+              data.company.buildingTypes[0].id
+            );
+            sessionStorage.setItem("editable", "0");
+            sessionStorage.setItem("planName", data.name);
+            let queryParams = {};
+            if (data.webTextData && data.planType === 16) {
+              queryParams = {
+                id: data.companyId,
+                planId: data.id,
+                orName: data.company.organizationName,
+                orId: data.company.organizationId,
+                companyId: data.companyId,
+                planName: data.name,
+                unitName: data.companyName,
+                planCategory: data.planCategory,
+                unitTypeId: data.company.buildingTypes[0].id,
+                pattern: "false",
+              };
+            } else {
+              queryParams = {
+                id: data.companyId,
+                planId: data.id,
+                orName: data.company.organizationName,
+                orId: data.company.organizationId,
+              };
+            }
+            this.router.navigate([`/linksPlan`], {
+              queryParams: queryParams,
+            });
+            this.planData = data;
+
+            //如果是查看文件类型
+
+            console.log("data.planType", data.planType);
+            if (data.planType != 1 && data.planType != 2) {
+              this.fetchUrl = data.attachmentUrls ? data.attachmentUrls[0] : "";
+              var index = this.fetchUrl.indexOf("/");
+
+              // 在线编制预案
+              if (data.webTextData && data.planType === 16) {
+                this.showType = 2;
+                return;
               }
-              window.setTimeout(() => {
-                this.viewer = new Viewer({
-                  container: document.querySelector("#viewer"),
-                  panorama: "/api/Objects/PlanPlatform/" + this.fetchUrl,
+
+              //全景图图片
+              if (this.fetchUrl.substr(0, index) == "psw") {
+                this.showType = 1;
+                var obj = document.getElementById("viewer");
+                if (obj != null) {
+                  obj.innerHTML = "";
+                }
+                window.setTimeout(() => {
+                  this.viewer = new Viewer({
+                    container: document.querySelector("#viewer"),
+                    panorama: "/api/Objects/PlanPlatform/" + this.fetchUrl,
+                  });
                 });
-              });
+              } else {
+                //word文档
+                this.lookWord();
+              }
             } else {
-              //毕生
-              this.lookWord();
+              // 如果是二三维预案
+              this.handleData();
             }
-          } else {
-            // 二维三维预案
-            this.handleData();
-          }
-        });
+          });
+      } else if (paramsData.unitId) {
+        this.http
+          .get(`/api/Companies/${paramsData.unitId}`)
+          .subscribe((data: any) => {
+            console.log("单位信息", data);
+            sessionStorage.setItem("editable", "0");
+            sessionStorage.setItem("companyName", data.name);
+            sessionStorage.setItem("companyId", data.id);
+            sessionStorage.setItem(
+              data.id,
+              JSON.stringify(data.companyIntegrityScore)
+            );
+            let queryParams = {
+              id: data.id,
+              usci: data.usci,
+            };
+            this.unitId = paramsData.unitId;
+            this.router.navigate([`/linksPlan`], {
+              queryParams: queryParams,
+            });
+          });
+      }
     });
   }
 
   async login() {
     await new Promise((resolve, reject) => {
+      let { appKey, signature, timestamp } = this.route.snapshot.queryParams;
+      if (!appKey || !signature || !timestamp) {
+        alert("url参数不完整");
+        return;
+      }
       this.http
-        .post("/api/Account/SignIn", {
-          name: "zhuzhouyuanchakan",
-          password: "12345678",
+        .get("/api/Account/VerifyAppInfo", {
+          params: {
+            appKey: appKey,
+            signature: signature,
+            timestamp: timestamp,
+          },
         })
         .subscribe((data: any) => {
           sessionStorage.setItem("level", data.level);
@@ -76,8 +156,7 @@ export class ExternalLinksPlanComponent implements OnInit {
         });
     });
   }
-  iframeSrc; //毕生服务器链接
-  src; //文件存储地址
+  iframeSrc; //word服务器链接
   lookWord() {
     this.showType = 0;
     let src;
@@ -101,50 +180,17 @@ export class ExternalLinksPlanComponent implements OnInit {
     let data = this.planData;
     if (this.planData.planMode == 1 || this.planData.planMode == 2) {
       //预案planMode=2时, 跳查看页面组件
-
-      this.http.get(`/api/Plans/${data.companyId}`).subscribe((data: any) => {
-        console.log(data);
-        data && data.company ? (this.companyData = data.company) : null;
-        sessionStorage.setItem(
-          "buildingTypeId",
-          this.companyData.buildingTypes.length
-            ? this.companyData.buildingTypes[0].id
-            : undefined
-        );
-        sessionStorage.setItem("companyId", data.companyId);
-        sessionStorage.setItem("planId", this.planId);
-        sessionStorage.setItem("editable", "0");
-        sessionStorage.setItem("planName", this.planData.name);
-        this.showType = 3;
-        // this.threedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`/keyUnit/viewunitinfoplans?id=${data.companyId}`)
-      });
+      this.showType = 3;
     } else if (this.planData.planMode == 3) {
-      //预案planMode=3时, 第三方网址'
-      // this.http.get(`/api/Plans/${data.companyId}`).subscribe((data: any) => {
-      //   data && data.company ? this.companyData = data.company : null
-      //   this.threedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(data.url)
-      //   this.showType = 2
-      // })
+      //网页地址
       let localhostPath = window.document.location.href.substring(
         0,
         window.document.location.href.indexOf(window.document.location.pathname)
       );
-      //localhostPath : http://39.106.78.171:8000/
       let url = data.url;
       if (url.indexOf(localhostPath) != -1) {
         window.location.href = `${url}?unitId=${data.company.id}&unitName=${data.company.name}&editMode=false`;
       } else {
-        // let substr = url.split('/').splice(3,url.split('/').length)
-        // let port = url.split(':')[2]
-        // if(port.indexOf('/') != -1){
-        //   port = port.split('/')[0]
-        // }
-        // let ip = localhostPath.split(':')
-        // ip.pop()
-        // let newurl = ip.join(':') + ":" + port + "/" + substr.join('/');
-        // // console.log('xxx',newurl)
-        // window.location.href = `${newurl}?unitId=${data.company.id}&unitName=${data.company.name}&editMode=false`
-
         window.location.href = `${url}?unitId=${data.company.id}&unitName=${data.company.name}&editMode=false`;
       }
     }

src/app/gis-management/gis-labeling/gis-labeling.component.ts

@@ -121,7 +121,12 @@ export class GisLabelingComponent implements OnInit {
       });
     });
   }
-  ngOnInit(): void {
+  isHN = false; //是否是海南
+  async ngOnInit(): Promise<void> {
+    await this.getProfiles();
+    this.Profiles.organizationName.indexOf("海南") !== -1
+      ? (this.isHN = true)
+      : (this.isHN = false);
     window.setTimeout(() => {
       this.mapInit();
     }, 0);
@@ -182,6 +187,16 @@ export class GisLabelingComponent implements OnInit {
     });
   }
 
+  Profiles;
+  getProfiles() {
+    return new Promise<void>((resolve, reject) => {
+      this.http.get("/api/Account/Profiles").subscribe((res) => {
+        this.Profiles = res;
+        resolve();
+      });
+    });
+  }
+
   //构造重点单位checkbox控制器
   buildUnits() {
     const arr = this.keyUnitList.map((item) => {
@@ -287,7 +302,7 @@ export class GisLabelingComponent implements OnInit {
   ketUnitSubmit(value) {
     if (this.markers.length == 0) {
       let paramsdata: any = {
-        PageSize: 99999,
+        PageSize: 9999,
         BuildingTypeIdList:
           this.selectedUnitList.length != 0 ? this.selectedUnitList : ["123"],
       };
@@ -322,7 +337,7 @@ export class GisLabelingComponent implements OnInit {
       if (this.unitAreaDefault == "-1") {
         //如果勾选全部
         let paramsdata: any = {
-          PageSize: 99999,
+          PageSize: 9999,
           BuildingTypeIdList:
             this.selectedUnitList.length != 0 ? this.selectedUnitList : ["123"],
         };
@@ -1264,7 +1279,7 @@ export class GisLabelingComponent implements OnInit {
         features: ["bg", "road", "point", "building"],
         mapStyle: "amap://styles/light",
       });
-      this.map.setCity("上海市");
+      this.isHN ? this.map.setCity("海南省") : this.map.setCity("上海市");
     }
     this.satelliteModel = false;
     this.loadModel = false;
@@ -1284,7 +1299,7 @@ export class GisLabelingComponent implements OnInit {
       layers: [layer],
       WebGLParams: { preserveDrawingBuffer: true },
     });
-    that.map.setCity("上海市");
+    this.isHN ? that.map.setCity("海南省") : that.map.setCity("上海市");
     that.mouseTool = MapFactory.MouseToolInstance(that.map);
   }
 
@@ -1744,8 +1759,7 @@ export class GisLabelingComponent implements OnInit {
                 console.log("走这里了吗2", that.routeStartList);
                 that.routeStartList = [];
                 setTimeout(() => {
-   
-                    that.routeStartList = [...result.tips];
+                  that.routeStartList = [...result.tips];
 
                   console.log("走这里了吗3", that.routeStartList);
                 }, 0);

src/app/interface.ts

@@ -1,93 +1,102 @@
 /*
- * @Descripttion: 
- * @version: 
+ * @Descripttion:
+ * @version:
  * @Author: sueRimn
  * @Date: 2020-12-24 10:59:48
  * @LastEditors: sueRimn
  * @LastEditTime: 2021-04-09 17:12:59
  */
 export interface Data {
-    token:string,
-    refreshToken:string,
-    expires: number,
-    realName:string,
-    level:any,
-    isDefaultPassword:string
+  token: string;
+  refreshToken: string;
+  expires: number;
+  realName: string;
+  level: any;
+  isDefaultPassword: string;
 }
 
 export interface windows {
-    token:string
+  token: string;
 }
 export enum isno {
-    "是",
-    "否"
+  "是",
+  "否",
 }
 
 export enum PlanTypeEnum {
-    "zero",
-    "二维预案",
-    "三维预案",
-    "three",
-    "其他预案",
-    "five",
-    "six",
-    "seven",
-    "卡片预案",
-    "none",
-    "teen",
-    "shiyi",
-    "shier",
-    "shisan",
-    "shisi",
-    "shiwu",
-    "文本预案"
+  "zero",
+  "二维预案",
+  "三维预案",
+  "three",
+  "其他预案",
+  "five",
+  "six",
+  "seven",
+  "卡片预案",
+  "none",
+  "teen",
+  "shiyi",
+  "shier",
+  "shisan",
+  "shisi",
+  "shiwu",
+  "文本预案",
 }
 
 export enum AuditStatusEnum {
-    "zero",
-    "审核中",
-    "审核通过",
-    "two",
-    "终审退回",
-    "five",
-    "six",
-    "seven",
-    "未提交审核",
-    "nine",
-    "ten",
-    "eleven",
-    "twelve",
-    "thieteen",
-    "fourteen",
-    "fifteen",
-    "待终审",
-    "shiqi",
-    "shiba",
-    "shijiu",
-    "ershi",
-    "ershiyi",
-    "ershier",
-    "ershis",
-    "t1",
-    "t2",
-    "t3",
-    "t4",
-    "t5",
-    "t6",
-    "t7",
-    "t8",
-    "初审退回",
+  "zero",
+  "审核中",
+  "审核通过",
+  "two",
+  "终审退回",
+  "five",
+  "six",
+  "seven",
+  "未提交审核",
+  "nine",
+  "ten",
+  "eleven",
+  "twelve",
+  "thieteen",
+  "fourteen",
+  "fifteen",
+  "待终审",
+  "shiqi",
+  "shiba",
+  "shijiu",
+  "ershi",
+  "ershiyi",
+  "ershier",
+  "ershis",
+  "t1",
+  "t2",
+  "t3",
+  "t4",
+  "t5",
+  "t6",
+  "t7",
+  "t8",
+  "初审退回",
 }
 
 export enum PlanLevelEnum {
-    "编制级别0",
-    "总队",
-    "支队",
-    "编制级别3",
-    "大队",
-    "编制级别5",
-    "编制级别6",
-    "编制级别7",
-    "中队"
+  "编制级别0",
+  "总队",
+  "支队",
+  "编制级别3",
+  "大队",
+  "编制级别5",
+  "编制级别6",
+  "编制级别7",
+  "中队",
 }
 
+export enum PlanAuditStatusEnum {
+  "非审核状态" = 0,
+  "未提交审核" = 8,
+  "待审核" = 1,
+  "初审通过" = 16,
+  "初审退回" = 32,
+  "终审通过" = 2,
+  "终审退回" = 4,
+}

src/app/key-unit/basicinfo/basicinfo.component.html

@@ -51,8 +51,7 @@
                                 <span>联系电话：</span>
                                 <mat-form-field>
                                     <input type="number" matInput id="linkphone" name="linkphone" #linkphone="ngModel"
-                                        required
-                                        [(ngModel)]="unitinfo.phone" (focus)="closeorganizationbox()">
+                                        required [(ngModel)]="unitinfo.phone" (focus)="closeorganizationbox()">
                                 </mat-form-field>
                                 <!-- <div *ngIf="linkphone.invalid && (linkphone.dirty || linkphone.touched)"
                                     class="alert-danger">
@@ -263,7 +262,7 @@
                                                     (click)="removeline(element.propertyInfos)">
                                                     <mat-icon>remove_circle_outline</mat-icon>
                                                 </button>
-                                                {{item.propertyName}}
+                                                {{item.propertyName}}{{item.physicalUnit? '('+item.physicalUnit+')' : ''}}
                                                 <span style="color: red;" *ngIf="item.required">*</span>
                                             </th>
                                         </tr>
@@ -369,7 +368,7 @@
                                                     (click)="removeline(element.propertyInfos)">
                                                     <mat-icon>remove_circle_outline</mat-icon>
                                                 </button>
-                                                {{item.propertyName}}
+                                                {{item.propertyName}}{{item.physicalUnit? '('+item.physicalUnit+')' : ''}}
                                                 <span style="color: red;" *ngIf="item.required">*</span>
                                             </th>
                                         </tr>

src/app/key-unit/basicinfo/basicinfo.component.ts

@@ -591,6 +591,7 @@ export class BasicinfoComponent implements OnInit {
           }
         }
       })
+      console.log('this.houses',this.houses)
     })
   }
   //点击选项卡

src/app/key-unit/fire-fighting-device/fire-fighting-device.component.ts

@@ -532,7 +532,7 @@ export class FireFightingDeviceComponent implements OnInit {
       data.push(msg)
       if (index == item.facilityItems.length - 1) {
         this.http.post('/api/BuildingFacilityItems/Batch', data, { params: header }).subscribe(data => {
-          let putBody
+          let putBody = []
           if (item.name == '消防水源') {
             putBody = returnBody(this.fireWaterSupply, '消防水源')
           } else if (item.name == '消防水系统') {

src/app/key-unit/key-unit-management/key-unit-management.component.html

@@ -352,7 +352,7 @@
                 <ng-container matColumnDef="operation">
                     <th mat-header-cell *matHeaderCellDef>操作</th>
                     <td mat-cell *matCellDef="let element" class="operation">
-                        <span (click)="drill(element)">演练</span>
+                        <!-- <span (click)="drill(element)">演练</span> -->
                         <span (click)="unitdetails(element)">查看详情</span>
                         <span style="color: blue;margin-left: 4px;"
                             *ngIf="(element.isNewData && (element.newVerifyState=='未提交审核'||element.newVerifyState=='审核通过'

src/app/key-unit/key-unit-management/key-unit-management.component.ts

@@ -121,7 +121,6 @@ export class KeyUnitManagementComponent implements OnInit {
     //   }
 
     // });
-
     if (e.direction == "asc") {
       //从小到大排序
       data.sort(function (a, b) {
@@ -651,7 +650,6 @@ export class KeyUnitManagementComponent implements OnInit {
     const config = new MatSnackBarConfig();
     config.verticalPosition = "top";
     config.duration = 3000;
-    //console.log(this.deleteAll)
     if (this.verifyState == 0 || this.verifyState == 3) {
       this.snackBar.open("审核中，不能删除", "确定", config);
     } else {
@@ -665,12 +663,6 @@ export class KeyUnitManagementComponent implements OnInit {
       if (selectedunitArr.length == 0) {
         this.snackBar.open("请先选择要删除的单位", "确定", config);
       }
-      /* if(selectedunitArr.length != 1 && selectedunitArr.length != 0){
-      const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('只能选择一个单位删除','确定',config);
-    } */
       if (this.deleteAll.length == 1) {
         //带着id跳到删除页面
         let isTrue = confirm("重点单位删除需审核员审核，审核通过方可删除");
@@ -759,8 +751,10 @@ export class KeyUnitManagementComponent implements OnInit {
       data: element,
     });
     dialogRef.afterClosed().subscribe((result) => {
-      //console.log(result);
-      element.name = result;
+      if (result) {
+        element.name = result;
+        element.modifiedTime = new Date()
+      }
     });
   }
 
@@ -1033,12 +1027,13 @@ export class upname {
         .subscribe(
           (data: any) => {
             this.snackBar.open("修改名字成功", "确定", config);
+            this.dialogRef.close(this.unitname);
           },
           (err) => {
             this.snackBar.open(err, "确定", config);
+            this.dialogRef.close();
           }
         );
-      this.dialogRef.close(this.unitname);
     }
   }
 }

src/app/key-unit/key-unit.module.ts

@@ -185,7 +185,19 @@ import { NzButtonModule } from "ng-zorro-antd/button";
     SpecialWarningComponent,
     UploadDrillComponent,
   ],
-  exports: [ViewUnitDetailsPlanComponent, WaterRoadComponent],
+  exports: [
+    ViewUnitDetailsPlanComponent,
+    WaterRoadComponent,
+    BasicinfoLookComponent,
+    AllaroundComponent,
+    FireFightingDeviceLookComponent,
+    KeySiteLookComponent,
+    FunctionDivisionLookComponent,
+    RouterGISComponent,
+    RealisticPictureLookComponent,
+    UploadingCADLookComponent,
+    SpecialWarningComponent,
+  ],
   imports: [
     CommonModule,
     KeyUnitRoutingModule,

src/app/pipes/boolean.pipe.ts

@@ -1,83 +1,95 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { isno, PlanTypeEnum, AuditStatusEnum, PlanLevelEnum } from '../interface'
-@Pipe({ name: 'isno' })
+import { Pipe, PipeTransform } from "@angular/core";
+import {
+  isno,
+  PlanTypeEnum,
+  AuditStatusEnum,
+  PlanLevelEnum,
+  PlanAuditStatusEnum,
+} from "../interface";
+@Pipe({ name: "isno" })
 export class IsnoPipe implements PipeTransform {
-    transform(value: boolean): string {
-        if (value) {
-            var x = 0
-        } else {
-            x = 1
-        }
-        return isno[x]
+  transform(value: boolean): string {
+    if (value) {
+      var x = 0;
+    } else {
+      x = 1;
     }
+    return isno[x];
+  }
 }
-@Pipe({ name: 'plantype' })
+@Pipe({ name: "plantype" })
 export class PlanType implements PipeTransform {
-    transform(value: number): string {
-        return PlanTypeEnum[value]
-    }
+  transform(value: number): string {
+    return PlanTypeEnum[value];
+  }
 }
 
-@Pipe({ name: 'auditsatus' })
+@Pipe({ name: "auditsatus" })
 export class AuditSatus implements PipeTransform {
-    transform(value: number): string {
-        return AuditStatusEnum[value]
-    }
+  transform(value: number): string {
+    return AuditStatusEnum[value];
+  }
 }
-@Pipe({ name: 'planlevel' })
+@Pipe({ name: "planlevel" })
 export class PlanLevel implements PipeTransform {
-    transform(value: number): string {
-        return PlanLevelEnum[value]
-    }
+  transform(value: number): string {
+    return PlanLevelEnum[value];
+  }
 }
 
-@Pipe({ name: 'state' })
+@Pipe({ name: "state" })
 export class state implements PipeTransform {
-    transform(value: number): string {
-        if (value == 3) {
-            return '维护中'
-        } else if (value == 4) {
-            return '维护通过审核'
-        } else if (value == 5) {
-            return '维护驳回审核'
-        } else {
-            return '未维护'
-        }
+  transform(value: number): string {
+    if (value == 3) {
+      return "维护中";
+    } else if (value == 4) {
+      return "维护通过审核";
+    } else if (value == 5) {
+      return "维护驳回审核";
+    } else {
+      return "未维护";
     }
+  }
 }
 
-@Pipe({ name: 'differentContentTitle' })
-export class differentContentTitle implements PipeTransform {
-    transform(value: string): string {
-        if (typeof (value) == 'boolean' && value) {
-            return '是'
-        } else if (typeof (value) == 'boolean' && !value) {
-            return '否'
-        } else if (JSON.stringify(value) == "{}") {
-            return '空'
-        } else if (!value) {
-            return '空'
-        } else {
-            return value
-        }
+@Pipe({ name: "auditState" })
+export class auditState implements PipeTransform {
+  transform(value: number): string {
+    return PlanAuditStatusEnum[value];
+  }
+}
 
+@Pipe({ name: "differentContentTitle" })
+export class differentContentTitle implements PipeTransform {
+  transform(value: string): string {
+    if (typeof value == "boolean" && value) {
+      return "是";
+    } else if (typeof value == "boolean" && !value) {
+      return "否";
+    } else if (JSON.stringify(value) == "{}") {
+      return "空";
+    } else if (!value) {
+      return "空";
+    } else {
+      return value;
     }
+  }
 }
-@Pipe({ name: 'yuan' })
+@Pipe({ name: "yuan" })
 export class yuan implements PipeTransform {
-    transform(value: string): string {
-        if (value == 'LevelOne') {
-            return '一级预案'
-        } else if (value == 'LevelTwo') {
-            return '二级预案'
-        } else if (value == 'LevelThree') {
-            return '三级预案'
-        }else if (value == 'LevelFour') {
-            return '四级预案'
-        }else if (value == 'LevelFive') {
-            return '五级预案'
-        }else if (value == 'PlanText') {
-            return '文本预案'
-        }
+  transform(value: string): string {
+    if (value == "LevelOne") {
+      return "一级预案";
+    } else if (value == "LevelTwo") {
+      return "二级预案";
+    } else if (value == "LevelThree") {
+      return "三级预案";
+    } else if (value == "LevelFour") {
+      return "四级预案";
+    } else if (value == "LevelFive") {
+      return "五级预案";
+    } else if (value == "PlanText") {
+      return "文本预案";
     }
+  }
 }

src/app/plan-audit/plan-record/plan-record.component.html

@@ -104,7 +104,12 @@
               <td style="width: 10%;">
                 <!-- <input type="radio" name="yuan"  value={{item.id}} [(ngModel)]="checked" (click)='radioClick(item)'> -->
                 {{item.contentType=='1'?'Ⅰ级预案':item.contentType=='2'?'Ⅱ级预案':item.contentType=='3'?'Ⅲ级预案':item.contentType=='4'?'Ⅳ级预案':item.contentType=='5'?
-                'Ⅴ级预案':item.contentType=='6'?'应急预案（国家级）':item.contentType=='7'?'应急预案（市级）':item.contentType=='8'?'类型预案':item.contentType=='11'?'重点单位':item.contentType=='12'?'水源':item.contentType=='13'?'消防力量':item.contentType=='14'?'联动力量':'未知'}}
+                'Ⅴ级预案':item.contentType=='6'?'应急预案（国家级）':item.contentType=='7'?'应急预案（市级）':item.contentType=='8'?'类型预案':(item.contentType=='11'
+                &&item.itemObj&&
+                item.itemObj?.isFollowed)?'重点单位':(item.contentType=='11'
+                &&item.itemObj&&
+                !item.itemObj?.isFollowed)?'一般单位':(item.contentType=='11'
+                &&!item.itemObj)?'已删除':item.contentType=='12'?'水源':item.contentType=='13'?'消防力量':item.contentType=='14'?'联动力量':'未知'}}
               </td>
               <td style="width: 10%;">
                 {{item.planType=='1'?'二维预案':item.planType=='2'?'三维预案':item.planType=='4'?'其它预案':item.planType=='16'?'文本预案':''}}

src/app/plan-audit/plan-record/plan-record.component.ts

@@ -109,6 +109,7 @@ export class PlanRecordComponent implements OnInit {
       IsNewData: this.IsNewData,
       PageNumber: this.PageNumber,
       PageSize: 10,
+      PageType: 2,
     };
     this.http
       .get("/api/ContentVerifies", { params: paramsdata })

src/app/plan-audit/wait-examineer/wait-examineer.component.html

@@ -90,9 +90,13 @@
               {{item.itemMaintenanceState=='0'?'新增':'维护'}}
             </td>
             <td style="width: 10%;">
-
               {{item.contentType=='1'?'Ⅰ级预案':item.contentType=='2'?'Ⅱ级预案':item.contentType=='3'?'Ⅲ级预案':item.contentType=='4'?'Ⅳ级预案':item.contentType=='5'?
-              'Ⅴ级预案':item.contentType=='6'?'应急预案（国家级）':item.contentType=='7'?'应急预案（市级）':item.contentType=='8'?'类型预案':item.contentType=='11'?'重点单位':item.contentType=='12'?'水源':item.contentType=='13'?'消防力量':item.contentType=='14'?'联动力量':'未知'}}
+              'Ⅴ级预案':item.contentType=='6'?'应急预案（国家级）':item.contentType=='7'?'应急预案（市级）':item.contentType=='8'?'类型预案':(item.contentType=='11'
+              &&item.itemObj&&
+              item.itemObj?.isFollowed)?'重点单位':(item.contentType=='11'
+              &&item.itemObj&&
+              !item.itemObj?.isFollowed)?'一般单位':(item.contentType=='11'
+              &&!item.itemObj)?'已删除':item.contentType=='12'?'水源':item.contentType=='13'?'消防力量':item.contentType=='14'?'联动力量':'未知'}}
             </td>
             <td style="width: 10%;">
               {{item.planType=='1'?'二维预案':item.planType=='2'?'三维预案':item.planType=='4'?'其它预案':item.planType=='16'?'文本预案':''}}
@@ -102,10 +106,22 @@
               [ngClass]="{'green': item.operation == '0','red':item.operation == '2','yellow':item.operation == '1'}">
               {{item.operation=='0'?'新增':item.operation=='1'?'更新':'删除'}}</td>
             <td style="width: 20%;">{{item.organizationName}}</td>
-            <td style="width: 10%;"
+            <!-- <td style="width: 10%;"
               [ngClass]="{'green': item.verifyState == '1'||item.verifyState == '4','red':item.verifyState == '2'||item.verifyState == '5'}">
               {{item.verifyState=='0'?'待初审':item.verifyState=='1'?
-              '初审通过':item.verifyState=='2'?'初审驳回':item.verifyState=='3'?'待终审':item.verifyState=='4'?'终审通过':'终审驳回'}}
+              '初审通过':item.verifyState=='2'?'初审驳回':item.verifyState=='3'?'待终审':item.verifyState=='4'?'终审通过':'终审驳回'}} -->
+            <td style="width: 10%;">
+              <span
+                *ngIf="item.verifyState=='0' && (item.contentType == 3 || item.contentType == 4 || item.contentType == 5) && item.itemObj?.isFollowed">待初审</span>
+              <span
+                *ngIf="item.verifyState=='0' && (item.contentType !== 3 && item.contentType !== 4 && item.contentType !== 5)">待初审</span>
+              <span
+                *ngIf="item.verifyState=='0' && (item.contentType == 3 || item.contentType == 4 || item.contentType == 5) && !item.itemObj?.isFollowed">待终审</span>
+              <span class="green" *ngIf="item.verifyState=='1'">初审通过</span>
+              <span class="red" *ngIf="item.verifyState=='2'">初审驳回</span>
+              <span *ngIf="item.verifyState=='3'">待终审</span>
+              <span class="green" *ngIf="item.verifyState=='4'">终审通过</span>
+              <span class="red" *ngIf="item.verifyState=='5'">终审驳回</span>
             </td>
             <td style="width: 7%;">{{item.creatorName}}</td>
             <td style="width: 13%;">{{item.createTime|date:'yyyy-MM-dd'}}</td>
@@ -133,8 +149,6 @@
       </div>
       <div class="rightheadone" style="display: block;" *ngIf="showtype == 3">
         <button mat-raised-button color="primary" (click)="buttonChange()">{{isallDate?'显示变更数据':'显示完整数据'}} </button>
-        <!-- <button mat-raised-button *ngIf="isallDate" style="background-color: #FFCC00; color: #FFFFFF;"
-          (click)="preview()"><img src="../../../assets/images/change.png" style="margin-bottom: 2px;"> 预览得分</button> -->
       </div>
     </div>
 
@@ -332,13 +346,15 @@
 
     <!-- 点击每条表格右边显示内容 -->
     <div style="height: 100%;" *ngIf="isallDate">
-      <!-- word文档 -->
+      <!-- 在新编辑或自定义预案 -->
       <div class="word" *ngIf="showtype == 0">
         <div class="shadow" *ngIf="!iftrue">
           <mat-spinner [diameter]="30"></mat-spinner>
         </div>
         <iframe [src]='iframeSrc' (load)='ifranmeLoad()' id="myiframe"></iframe>
       </div>
+      <!-- 图片 -->
+      <img [src]="src" alt="" *ngIf="showtype == 'img'">
       <!-- 全景图 -->
       <div id="viewer" *ngIf="showtype == 1"></div>
       <div class="twoD" *ngIf="showtype == 2">

src/app/plan-audit/wait-examineer/wait-examineer.component.ts

@@ -101,7 +101,7 @@ export class WaitExamineerComponent implements OnInit {
   chuorzhong; //判断初审还是终审
   radioid; //选中的id
   shenheTable = []; //选中要审核的对象
-  showtype = -1; //0:word,1:全景图，2:二维三维，3:重点单位
+  showtype: any = -1; //0:word,1:全景图，2:二维三维，3:重点单位
   compantData = { name: "", buildingTypes: [], address: "" };
   organizationName;
   planData;
@@ -111,7 +111,7 @@ export class WaitExamineerComponent implements OnInit {
   fetchUrl;
   companyName;
   plantypes;
-  IsNewData:any = [true, false];
+  IsNewData: any = [true, false];
 
   //获取表格数据
   PageNumber = 1;
@@ -196,14 +196,18 @@ export class WaitExamineerComponent implements OnInit {
   differentContentOfPicture: any; //当前单位变更数据 之 实景图
   bianzhi = false;
   radioClick(e, item) {
+    console.log(item);
+    //重置状态
+    this.showtype = -1;
     this.selectedItem = item;
-
-    // console.log('当前选择的信息',JSON.parse(this.selectedItem.differentContent) )
+    this.organizationName = "";
+    this.itemid = item.itemId;
+    this.id = item.id;
+    this.fetchUrl = "";
+    this.viewer = {};
+    // 单位信息审核并且与上次有差异
     if (item.contentType == 11 && this.selectedItem.differentContent) {
       let differentContent = JSON.parse(this.selectedItem.differentContent);
-
-      //console.log('差异信息', differentContent)
-
       // 单位信息
       this.differentContentOfUnitInfo = differentContent.filter(
         (item) => item.propertyName == "basicInfo"
@@ -272,16 +276,7 @@ export class WaitExamineerComponent implements OnInit {
         });
       }
     }
-
-    // console.log('功能分区', this.differentContentOfFunction)
-
-    this.showtype = -1;
-    this.organizationName = "";
-    this.itemid = item.itemId;
-    this.id = item.id;
-    this.fetchUrl = "";
-    this.viewer = {};
-
+    // 单位信息审核
     if (item.contentType == 11) {
       this.bianzhi = false;
       window.setTimeout(() => {
@@ -330,13 +325,17 @@ export class WaitExamineerComponent implements OnInit {
           this.showtype = 14;
         });
     } else {
+      // 预案相关审核
       this.http
         .get(`/api/PlanComponents/${item.itemId}`)
         .subscribe((data: any) => {
-          //console.log('预案信息',data)
+          console.log("预案信息", data);
+          item.planData = data;
           this.companyId = data.companyId;
           this.companyName = data.companyName;
-          if (data.planType != 2 && data.planType != 1) {
+          // 不是二维也不是三维预案
+          if (data.planType != 1 && data.planType != 2) {
+            //在线编辑或者自定义编辑预案
             if (data.planMode == 2 || data.planMode == 4) {
               this.showtype = 0;
               this.bianzhi = true;
@@ -344,11 +343,11 @@ export class WaitExamineerComponent implements OnInit {
               this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(
                 this.src
               );
-              //this.src=`/keyUnit/viewunitinfoplan?id=${data.companyId}&orName=${data.company.organizationId}&orId=${data.company.organizationName}`
             } else {
               this.bianzhi = false;
               this.fetchUrl = data.attachmentUrls[0];
               var index = this.fetchUrl.indexOf("/");
+              //如果是实景图
               if (this.fetchUrl.substr(0, index) == "psw") {
                 this.showtype = 1;
                 var obj = document.getElementById("viewer");
@@ -362,10 +361,12 @@ export class WaitExamineerComponent implements OnInit {
                   });
                 });
               } else {
+                //其余格式的文件
                 this.lookWord();
               }
             }
           } else {
+            //二三维预案查看
             this.bianzhi = false;
             this.organizationName = item.organizationName;
             this.planData = data;
@@ -388,9 +389,7 @@ export class WaitExamineerComponent implements OnInit {
 
   //毕升
   lookWord() {
-    console.log("lookWord");
     this.showtype = 0;
-    //let src
     let suffix = this.fetchUrl
       .split(".")
       [this.fetchUrl.split(".").length - 1].toLowerCase();
@@ -400,7 +399,12 @@ export class WaitExamineerComponent implements OnInit {
       this.src = `/api/Objects/PlanPlatform/` + arr.join(".");
     } else if (suffix == "pdf") {
       this.src = `/api/Objects/PlanPlatform/` + this.fetchUrl;
+    } else {
+      this.showtype = "img";
+      this.src = `/api/Objects/PlanPlatform/` + this.fetchUrl;
     }
+    console.log("查看附件111", this.fetchUrl);
+    console.log("查看附件222", this.src);
     this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.src);
   }
   //查看按钮跳转
@@ -726,12 +730,14 @@ export class remark {
   }
   //确定
   define() {
+    console.log(this.data);
+    // return;
+    //type == 1同意  type == 12拒绝
     const config = new MatSnackBarConfig();
     config.verticalPosition = "top";
     config.duration = 3000;
+    //同意操作
     if (this.data.type == 1) {
-      //同意操作
-      // console.log(this.shenheTable)
       //单个审核
       if (this.shenheTable.length == 1) {
         //重点单位审核
@@ -746,8 +752,7 @@ export class remark {
           };
           this.http.put(`/api/ContentVerifies`, body).subscribe((data) => {
             this.snackBar.open("操作成功!", "确定", config);
-            this.dialogRef.close();
-            //this.getAlltabledate()
+            this.dialogRef.close("操作成功!");
           });
         } else if (
           this.shenheTable[0].contentType == 12 ||
@@ -769,8 +774,8 @@ export class remark {
           });
         } else {
           //预案审核
+          //verifyState == 0待初审
           if (this.shenheTable[0].verifyState == 0) {
-            //待初审
             let body: any = {
               auditStatus: 16, //初审通过，待终审
               auditOpinion: this.remark || "",
@@ -781,14 +786,17 @@ export class remark {
                 this.snackBar.open("操作成功!", "确定", config);
                 this.dialogRef.close();
               });
-          } else if (this.shenheTable[0].verifyState == 3) {
+          } else if (
+            //verifyState == 3待终审
+            this.shenheTable[0].verifyState == 3
+          ) {
             //待终审
             let body: any = {
               auditStatus: 2, //审核(终审)通过
               auditOpinion: this.remark || "",
             };
             this.http
-              .put(`/api/PlanAudits/${this.radioid}`, body)
+              .put(`/api/PlanAudits/${this.shenheTable[0].itemId}`, body)
               .subscribe((data) => {
                 this.snackBar.open("操作成功!", "确定", config);
                 this.dialogRef.close();

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

@@ -674,7 +674,7 @@
                                             height: 40px;
                                             line-height: 40px;
                                             color: #ffffff;">{{element.surveyName}}</span>
-                                            <!-- <img src="../../../assets/images/deletered.png" > -->
+
                                             <img src="../../../assets/images/delyello.png"
                                                 *ngIf="haveNew!=undefined&&pattern == 'edit'">
                                             <img src="../../../assets/images/updatabai.png"
@@ -758,7 +758,7 @@
                                                             [readonly]='info.zdy==undefined'>
                                                         <input type="text" placeholder="请输入内容"
                                                             style="width: 40%;background-color: #FFFFFF;"
-                                                            [(ngModel)]="info.propertyValue" *ngIf="pattern == 'edit'">
+                                                            [(ngModel)]="info.value" *ngIf="pattern == 'edit'">
                                                         <input type="text"
                                                             style="width: 27%;background-color: #FFFFFF;color: #999;"
                                                             *ngIf="pattern == 'edit'&&oldData"
@@ -786,7 +786,7 @@
                                                         width: 70%;
                                                         font-size: 16px;
                                                         text-align: center;" *ngIf="info.completed">
-                                                            <span>{{info.propertyValue}}</span>
+                                                            <span>{{info.value}}</span>
                                                         </td>
                                                     </tr>
                                                 </table>
@@ -1054,7 +1054,8 @@
                                 line-height: 40px;
                                 color: #b99a00;">{{element.headName}}</span>
                                                         <img src="../../../assets/images/delyello.png"
-                                                            *ngIf="pattern == 'edit'" (click)='delTd2(key,i,uniti,elei)'>
+                                                            *ngIf="pattern == 'edit'"
+                                                            (click)='delTd2(key,i,uniti,elei)'>
                                                         <img src="../../../assets/images/updateyello.png"
                                                             *ngIf="(element.level==1||element.level==2)&&pattern == 'edit'"
                                                             (click)='updataHl(key,uniti,elei,i)'>

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

@@ -94,7 +94,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
   planMode; //预案类型
   xiazai; //是否点击下载按钮进来的
   //index
-  orName
+  orName;
   async ngOnInit() {
     //this.index = this.getArrayIndex(this.planTemplateData,'单位概况')
     this.xiazai = this.route.snapshot.queryParams.xiazai;
@@ -239,7 +239,8 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
   pilinData = [];
   async getpili() {
     let index = this.getArrayIndex(this.planTemplateData, "单位概况");
-    let result = await new Promise((resolve) => {
+    console.log("index", index);
+    await new Promise((resolve) => {
       this.planTemplateData[index].building.forEach((element) => {
         let id = { buildingId: element.buildingId };
         this.http
@@ -250,25 +251,32 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
           });
       });
     });
-    //this.pilinData.push(result)
     this.pilinData = JSON.parse(JSON.stringify(this.pilinData));
-    console.log(this.pilinData);
-    this.pilinData.forEach((pvalue, pindex, parr) => {
-      parr[pindex].forEach((nval, nindex, narr) => {
-        this.planTemplateData[index].building.forEach((value, i, arr) => {
-          if (narr[nindex].buildingId == arr[i].buildingId) {
-            if (nval.direction == 0) {
-              this.planTemplateData[index].building[i].body[2].attinf[0].value =
-                nval.name;
-            } else if (nval.direction == 1) {
-              this.planTemplateData[index].building[i].body[2].attinf[1].value =
-                nval.name;
-            } else if (nval.direction == 2) {
-              this.planTemplateData[index].building[i].body[2].attinf[2].value =
-                nval.name;
-            } else if (nval.direction == 3) {
-              this.planTemplateData[index].building[i].body[2].attinf[3].value =
-                nval.name;
+    this.pilinData.forEach((pvalue) => {
+      pvalue.forEach((nval) => {
+        this.planTemplateData[index].building.forEach((value, i) => {
+          if (nval.buildingId == value.buildingId) {
+            let plIndex = this.planTemplateData[index].building[
+              i
+            ].body.findIndex((v) => v.surveyName === "四周毗邻");
+            if (plIndex !== -1) {
+              if (nval.direction == 0) {
+                this.planTemplateData[index].building[i].body[
+                  plIndex
+                ].attinf[0].value = nval.name;
+              } else if (nval.direction == 1) {
+                this.planTemplateData[index].building[i].body[
+                  plIndex
+                ].attinf[1].value = nval.name;
+              } else if (nval.direction == 2) {
+                this.planTemplateData[index].building[i].body[
+                  plIndex
+                ].attinf[2].value = nval.name;
+              } else if (nval.direction == 3) {
+                this.planTemplateData[index].building[i].body[
+                  plIndex
+                ].attinf[3].value = nval.name;
+              }
             }
           }
         });
@@ -317,7 +325,6 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
   selectedItem: string = "封面";
   selectedContent: any;
   async clickTitleItem(item) {
-    //this.planTemplateData[key].new=true
 
     this.selectedContent = item;
     this.addNumber = -1;
@@ -397,6 +404,8 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
     this.js = "";
     this.zdysearch = "";
     this.selectedItem = item.groupName;
+
+
     if (this.selectedItem == "重点图示") {
       this.getAllBuildings();
       this.getSitePlan();
@@ -406,32 +415,38 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
       await this.getAllBuildingsInfo();
       await this.getpili();
       await this.getbuwei();
-      //console.log(this.buildZong)
       let index = this.getArrayIndex(this.planTemplateData, "单位概况");
       this.planTemplateData[index].building.forEach((element) => {
         if (element.body[0].completed) {
           element.body[0].attinf.forEach((arrval, atti, attarr) => {
             if (arrval.propertyName == "统一社会信用代码") {
-              arrval.value = arrval.olddata = this.unitData.usci;
+              arrval.value
+                ? null
+                : (arrval.value = arrval.olddata = this.unitData.usci);
             } else if (arrval.propertyName == "单位类型") {
-              arrval.value = arrval.olddata =
-                this.unitData.buildingTypes[0].name;
+              arrval.value
+                ? null
+                : (arrval.value = arrval.olddata =
+                    this.unitData.buildingTypes[0].name);
             } else if (arrval.propertyName == "联系人") {
-              arrval.value = arrval.olddata = this.unitData.contacts;
+              arrval.value
+                ? null
+                : (arrval.value = arrval.olddata = this.unitData.contacts);
             } else if (arrval.propertyName == "联系电话") {
-              arrval.value = arrval.olddata = this.unitData.phone;
+              arrval.value
+                ? null
+                : (arrval.value = arrval.olddata = this.unitData.phone);
             } else if (arrval.propertyName == "辖区中队") {
-              arrval.value = arrval.olddata = this.unitData.organizationName;
+              arrval.value
+                ? null
+                : (arrval.value = arrval.olddata =
+                    this.unitData.organizationName);
             } else if (arrval.propertyName == "单位地址") {
-              arrval.value = arrval.olddata = this.unitData.address;
+              arrval.value
+                ? null
+                : (arrval.value = arrval.olddata = this.unitData.address);
             }
           });
-          /* element.body[0].attinf[0].value = element.body[0].attinf[0].olddata = this.unitData.usci
-          element.body[0].attinf[1].value = element.body[0].attinf[1].olddata = this.unitData.buildingTypes[0].name
-          element.body[0].attinf[2].value = element.body[0].attinf[2].olddata = this.unitData.contacts
-          element.body[0].attinf[3].value = element.body[0].attinf[3].olddata = this.unitData.phone
-          element.body[0].attinf[4].value = element.body[0].attinf[4].olddata = this.unitData.organizationName
-          element.body[0].attinf[5].value = element.body[0].attinf[5].olddata = this.unitData.address */
 
           if (element.body.length > 1 && element.body[1].attinf != undefined) {
             element.body[1].attinf.forEach((eBuild) => {
@@ -737,9 +752,7 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
             this.planTemplateData = JSON.parse(data.webTextData).filter(
               (item) => item.completed == true
             );
-            //this.planTemplateData=JSON.parse(data.webTextData)
-            console.log(888, this.route.snapshot.queryParams.planName);
-            console.log(999, this.planTemplateData);
+            // return
             if (this.planTemplateData[0].groupName != "封面") {
               let obj = {
                 completed: true,
@@ -798,6 +811,29 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
                 }
               }
               if (element.groupName == "单位概况") {
+                element.building.forEach((item) => {
+                  item.body.forEach((i) => {
+                    if (i.surveyName === "单位基本信息") {
+                      i.attinf
+                        ? i.attinf.forEach((v) => {
+                            if (v.completed) {
+                              !v.value ? (v.value = v.propertyValue) : null;
+                            }
+                          })
+                        : null;
+                    }
+                    if (i.surveyName === "建筑信息") {
+                      i.attinf
+                        ? i.attinf.forEach((v) => {
+                            if (v.completed) {
+                              v.value ? null : (v.value = v.propertyValue);
+                            }
+                          })
+                        : null;
+                    }
+                  });
+                });
+
                 this.clickTitleItem(this.planTemplateData[1]);
               }
             });
@@ -812,11 +848,6 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
             }
             this.planTemplateData.forEach((element) => {
               if (element.attribute != undefined) {
-                /* element.attribute.forEach((item,index,value) => {
-                if(value[index].level!=undefined&&value[index].level==1){
-                  value[index].lieNumber=value[index].tableth.length
-                }
-              }); */
                 for (let i = 0; i < element.attribute.length; i++) {
                   if (
                     element.attribute[i].level != undefined &&
@@ -828,9 +859,9 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
                 }
               }
             });
-            console.log(this.planTemplateData);
+
+            console.log("处理完成后的预案数据", this.planTemplateData);
           }
-          console.log("6666", this.planTemplateData);
           resolve(data);
         });
     });
@@ -1297,10 +1328,17 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
 
   //重点图示增加分组
   addkeyImgItem(item) {
+    console.log(item);
+    if (!item.attribute) {
+      item.attribute = [];
+    }
     item.attribute.push({ name: "", imgArr: [] });
   }
   //处置要点增加分组
   addDisposalPointItem(item) {
+    if (!item.attribute) {
+      item.attribute = [];
+    }
     item.attribute.push({ name: "", content: "" });
   }
   //通过左侧查看实景图
@@ -2887,6 +2925,7 @@ export class adddwsurveys {
     @Inject(MAT_DIALOG_DATA) public data,
     public snackBar: MatSnackBar
   ) {}
+
   addAttinfBuild = [];
   buildnewDate = [];
   addAttinfFile; //过滤消防设施外层数据
@@ -3146,10 +3185,12 @@ export class adddwsurveys {
       this.facilityItems.push(...this.zdyData);
     }
   }
+
   //取消按钮
   close() {
     this.dialogRef.close(undefined);
   }
+
   //确定按钮
   defineClick() {
     this.dialogRef.close(

src/app/plan-management/entry-plan-look/AddPlanone.html

@@ -7,105 +7,108 @@
  * @LastEditTime: 2021-07-27 10:44:51
 -->
 <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
-    <div class="topbox" style="text-align: center;">
-        <span  mat-dialog-title>新建预案</span>
-    </div>
-    <div class="mainbox">  
-          <mat-horizontal-stepper [linear]="isLinear" #stepper>
-            <mat-step [stepControl]="firstFormGroup">
-              <form [formGroup]="firstFormGroup">
-                <ng-template matStepLabel>填写名称与类型</ng-template>
-                <mat-form-field>
-                    <input matInput id="name" name="name" type='text'
-                    required  autocomplete="off"
-                    placeholder="请输入预案名称" formControlName="firstCtrlone">
-                </mat-form-field>
-                
-                <div>
-                    <!-- <label style="margin-right: 10px;">编制级别:</label> -->
-                    <mat-form-field>
-                    <mat-select placeholder='请选择预案类型' required  formControlName="firstCtrltwo" [(ngModel)]='cadPlan'>
-                        <mat-option value="16">文本预案</mat-option>
-                        <mat-option value="1">二维预案</mat-option>
-                        <mat-option value="2">三维预案</mat-option>
-                        <mat-option value="4">其他预案</mat-option>
-                    </mat-select>
-                    </mat-form-field>
-                </div>
-                <div>
-                  <mat-form-field>
-                    <mat-select name="reservePlanType" formControlName="firstCtrlthree"  placeholder='请选择预案级别'  required>
-                      <mat-option value='3'>Ⅲ级预案</mat-option>
-                      <mat-option value='4'  *ngIf="cadPlan=='16'||(levels!='1'&&levels!='2')">Ⅳ级预案</mat-option>
-                      <mat-option value='5' *ngIf="cadPlan=='16'||(levels!='1'&&levels!='2')">Ⅴ级预案</mat-option>
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-                <div>
-                  <button type="button" mat-button matStepperNext (click)="next(firstFormGroup)">下一步</button>
-                  <button  type="button" mat-button  (click)="closediv()">取消</button>
-                </div>
-              </form>
-            </mat-step>
-            <mat-step [stepControl]="secondFormGroup">   
-              <form  (ngSubmit)="onSubmit(form)" #form="ngForm">
-                <ng-template matStepLabel >上传预案完成创建</ng-template>
-                <div class="upbox">
-                    <div style="float: left;margin-top: 10px;"> 
-                        <span class="pigepadding">预案形式：</span>
-                    </div>
-                    
-                    <mat-radio-group required name="planup" [(ngModel)]="defaultisshow" style="float: left;"  (change)="selectradio($event)">
-                        <div *ngIf="localup">
-                            <mat-radio-button value="1" style="margin-right: 10px;">本地上传</mat-radio-button>
-                            <input style="width: 175px;" type="file" name="" id="uploadFile" *ngIf="isup" (change)="filechange($event)">
-                            <span *ngIf="uploadover" style="font-size: 13px;">(已上传)</span>
-                        </div>
-                        <div *ngIf="inputword">
-                          <mat-radio-button value="2" style="margin-right: 10px;">模板在线编制</mat-radio-button>
-                        </div>
-                        <div *ngIf="inputNew">
-                          <mat-radio-button value="4" style="margin-right: 10px;">自定义在线编制</mat-radio-button>
-                        </div>
+  <div class="topbox" style="text-align: center;">
+    <span mat-dialog-title>新建预案</span>
+  </div>
+  <div class="mainbox">
+    <mat-horizontal-stepper [linear]="isLinear" #stepper>
+      <mat-step [stepControl]="firstFormGroup">
+        <form [formGroup]="firstFormGroup">
+          <ng-template matStepLabel>填写名称与类型</ng-template>
+          <mat-form-field>
+            <input matInput id="name" name="name" type='text' required autocomplete="off" placeholder="请输入预案名称"
+              formControlName="firstCtrlone">
+          </mat-form-field>
 
-                        <!-- <div *ngIf="inputword">
+          <div>
+            <!-- <label style="margin-right: 10px;">编制级别:</label> -->
+            <mat-form-field>
+              <mat-select placeholder='请选择预案类型' required formControlName="firstCtrltwo" [(ngModel)]='cadPlan'>
+                <mat-option value="16">文本预案</mat-option>
+                <mat-option value="1">二维预案</mat-option>
+                <mat-option value="2">三维预案</mat-option>
+                <mat-option value="4">其他预案</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+          <div>
+            <mat-form-field>
+              <mat-select name="reservePlanType" formControlName="firstCtrlthree" placeholder='请选择预案级别' required>
+                <mat-option value='3'>Ⅲ级预案</mat-option>
+                <mat-option value='4' *ngIf="cadPlan=='16'||(levels!='1'&&levels!='2')">Ⅳ级预案</mat-option>
+                <mat-option value='5' *ngIf="cadPlan=='16'||(levels!='1'&&levels!='2')">Ⅴ级预案</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+          <div>
+            <button type="button" mat-button matStepperNext (click)="next(firstFormGroup)">下一步</button>
+            <button type="button" mat-button (click)="closediv()">取消</button>
+          </div>
+        </form>
+      </mat-step>
+      <mat-step [stepControl]="secondFormGroup">
+        <form (ngSubmit)="onSubmit(form)" #form="ngForm">
+          <ng-template matStepLabel>上传预案完成创建</ng-template>
+          <div class="upbox">
+            <div style="float: left;margin-top: 10px;">
+              <span class="pigepadding">预案形式：</span>
+            </div>
+
+            <mat-radio-group required name="planup" [(ngModel)]="defaultisshow" style="float: left;"
+              (change)="selectradio($event)">
+              <div *ngIf="localup">
+                <mat-radio-button value="1" style="margin-right: 10px;">本地上传</mat-radio-button>
+                <input style="width: 175px;" type="file" name="" id="uploadFile" *ngIf="isup"
+                  (change)="filechange($event)">
+                <span *ngIf="uploadover" style="font-size: 13px;">(已上传)</span>
+              </div>
+              <div *ngIf="inputword">
+                <mat-radio-button value="2" style="margin-right: 10px;">模板在线编制</mat-radio-button>
+              </div>
+              <div *ngIf="inputNew">
+                <mat-radio-button value="4" style="margin-right: 10px;">自定义在线编制</mat-radio-button>
+              </div>
+
+              <!-- <div *ngIf="inputword">
                           <mat-radio-button value="1" style="margin-right: 10px;">导入word文档</mat-radio-button>
                           <input type="file" name="" id="" *ngIf="isinput" (change)="fileInput($event)">
                         </div> -->
-                        <div *ngIf="pswShow">
-                          <!-- <mat-radio-group >
+              <div *ngIf="pswShow">
+                <!-- <mat-radio-group >
                             <mat-radio-button   value='psw' >是否为全景图</mat-radio-button>
                           </mat-radio-group> -->
-                          <mat-checkbox [(ngModel)]='psw' name='psw' style="margin-left: 2px;">是否为全景图</mat-checkbox>
-                        </div>
-                        <div *ngIf="onlineedit">
-                            <mat-radio-button value="2">在线编辑</mat-radio-button>
-                        </div>
-                        <div *ngIf="website">
-                            <mat-radio-button value="3">网页地址</mat-radio-button>
-                            <input type="text" *ngIf="isweb" name="webaddress" [(ngModel)]="webaddress" style="width: 175px;height: 20px;margin-left:10px;">
-                        </div>
-                        
-                    </mat-radio-group>
-                    
-                </div>
-                <!--  -->
-                <div class="progressBox" *ngIf="uploadisLoading">
-                  
-                  <span style="font-size: 13px;">上传中...</span>
-                  <mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress" style="width: 320px;left: 64px;"></mat-progress-bar>
-                  <button type="button" mat-raised-button (click)="cancel()">取消上传</button>
-                </div>
-                <div>
-                  <button  type="button" mat-button matStepperPrevious>上一步</button>
-                  <button  type="button" mat-button  (click)="closediv()">取消</button>
-                  <button  mat-button *ngIf="!uploadisLoading">完成</button>
-                </div>
-              </form>
+                <mat-checkbox [(ngModel)]='psw' name='psw' style="margin-left: 2px;">是否为全景图</mat-checkbox>
+              </div>
+              <div *ngIf="onlineedit">
+                <mat-radio-button value="2">在线编辑</mat-radio-button>
+              </div>
+              <div *ngIf="website">
+                <mat-radio-button value="3">网页地址</mat-radio-button>
+                <input type="text" *ngIf="isweb" name="webaddress" [(ngModel)]="webaddress"
+                  style="width: 175px;height: 20px;margin-left:10px;">
+              </div>
+
+            </mat-radio-group>
 
+          </div>
+          <!--  -->
+          <div class="progressBox" *ngIf="uploadisLoading">
 
-            </mat-step>
-            <!-- <mat-step>
+            <span style="font-size: 13px;">上传中...</span>
+            <mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress"
+              style="width: 320px;left: 64px;"></mat-progress-bar>
+            <button type="button" mat-raised-button (click)="cancel()">取消上传</button>
+          </div>
+          <div>
+            <button type="button" mat-button matStepperPrevious>上一步</button>
+            <button type="button" mat-button (click)="closediv()">取消</button>
+            <button mat-button *ngIf="!uploadisLoading">完成</button>
+          </div>
+        </form>
+
+
+      </mat-step>
+      <!-- <mat-step>
               <ng-template matStepLabel>Done</ng-template>
               You are now done.
               <div>
@@ -113,7 +116,7 @@
                 <button  type="button" mat-button (click)="stepper.reset()">Reset</button>
               </div>
             </mat-step> -->
-          </mat-horizontal-stepper>
-    </div>
-        
-</form>
+    </mat-horizontal-stepper>
+  </div>
+
+</form>

src/app/plan-management/entry-plan-look/auditresult.html

@@ -1,13 +1,5 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: sueRimn
- * @Date: 2020-12-24 10:59:48
- * @LastEditors: sueRimn
- * @LastEditTime: 2021-03-16 14:34:07
--->
 <div style="text-align: center;">
-    <span  mat-dialog-title>审批结果</span>
+    <span mat-dialog-title>审批结果</span>
 </div>
 
 <div class="auditDiv">
@@ -15,15 +7,49 @@
     <p>提交时间：{{data.element.committedTime| date:'yyyy-MM-dd HH:mm:ss'}}</p>
     <p>发起申请：{{commitOrganizationName }}</p>
     <mat-divider></mat-divider>
-    <p>初审时间：{{data.element.firstAudittedTime| date:'yyyy-MM-dd HH:mm:ss'}}</p>
+    <p>
+        <ng-container *ngIf="data.element.plan.company.isFollowed; else elseTemplate">初审</ng-container>
+        <ng-template #elseTemplate>终审</ng-template>时间：{{data.element.firstAudittedTime| date:'yyyy-MM-dd HH:mm:ss'}}
+    </p>
+    <p>
+        <ng-container *ngIf="data.element.plan.company.isFollowed; else elseTemplate">初审</ng-container>
+        <ng-template #elseTemplate>终审</ng-template>机构：{{data.element.firstAuditorOrganizationName}}
+    </p>
+    <p>
+        <ng-container *ngIf="data.element.plan.company.isFollowed; else elseTemplate">初审</ng-container>
+        <ng-template #elseTemplate>终审</ng-template>意见：{{data.element.firstAuditOpinion}}
+    </p>
+    <p>
+        <ng-container *ngIf="data.element.plan.company.isFollowed; else elseTemplate">初审</ng-container>
+        <ng-template #elseTemplate>终审</ng-template>结果：
+        <ng-container *ngIf="data.element.auditStatus==16">待终审</ng-container>
+        <ng-container *ngIf="data.element.auditStatus==32">
+            <ng-container *ngIf="data.element.plan.company.isFollowed; else elseTemplate">初审</ng-container>
+            <ng-template #elseTemplate>终审</ng-template>退回</ng-container>
+        <ng-container *ngIf="data.element.auditStatus==2 ||data.element.auditStatus==4">
+            <ng-container *ngIf="data.element.plan.company.isFollowed; else elseTemplate">初审</ng-container>
+            <ng-template #elseTemplate>终审</ng-template>通过</ng-container>
+    </p>
+
+    <ng-container *ngIf="data.element.plan.company.isFollowed">
+        <mat-divider></mat-divider>
+        <p>终审时间：{{data.element.audittedTime| date:'yyyy-MM-dd HH:mm:ss'}}</p>
+        <p>终审机构：{{data.element.auditorOrganizationName}}</p>
+        <p>终审意见：{{data.element.auditOpinion}}</p>
+        <p>终审结果：{{data.element.auditStatus==2?'终审通过':data.element.auditStatus==4?'终审退回':''}}</p>
+    </ng-container>
+
+    <!-- <p>初审时间：{{data.element.firstAudittedTime| date:'yyyy-MM-dd HH:mm:ss'}}</p>
     <p>初审机构：{{data.element.firstAuditorOrganizationName}}</p>
     <p>初审意见：{{data.element.firstAuditOpinion}}</p>
-    <p>初审结果：{{data.element.auditStatus==16?'待终审':data.element.auditStatus==32?'初审退回':data.element.auditStatus==2||data.element.auditStatus==4?'初审通过':''}}</p>
+    <p>初审结果：{{data.element.auditStatus==16?'待终审':data.element.auditStatus==32?'初审退回':data.element.auditStatus==2||data.element.auditStatus==4?'初审通过':''}}
+    </p>
     <mat-divider></mat-divider>
     <p>终审时间：{{data.element.audittedTime| date:'yyyy-MM-dd HH:mm:ss'}}</p>
     <p>终审机构：{{data.element.auditorOrganizationName}}</p>
     <p>终审意见：{{data.element.auditOpinion}}</p>
-    <p>终审结果：{{data.element.auditStatus==2?'终审通过':data.element.auditStatus==4?'终审退回':''}}</p>
+    <p>终审结果：{{data.element.auditStatus==2?'终审通过':data.element.auditStatus==4?'终审退回':''}}</p> -->
+
 </div>
 
 

src/app/plan-management/entry-plan-look/entry-plan-look.component.html

@@ -88,15 +88,9 @@
                     </td>
                 </ng-container>
                 <ng-container matColumnDef="auditstate">
-                    <th mat-header-cell *matHeaderCellDef>新增审核</th>
+                    <th mat-header-cell *matHeaderCellDef>审核状态</th>
                     <td mat-cell *matCellDef="let element">
-                        {{element.newVerifyState==null?'':element.newVerifyState}}
-                    </td>
-                </ng-container>
-                <ng-container matColumnDef="weihustate">
-                    <th mat-header-cell *matHeaderCellDef>维护审核</th>
-                    <td mat-cell *matCellDef="let element">
-                        {{element.maintenanceVerifyState==null?'':element.maintenanceVerifyState}}
+                        {{element.auditStatus | auditState}}
                     </td>
                 </ng-container>
                 <ng-container matColumnDef="isopen">
@@ -131,7 +125,7 @@
                 <ng-container *ngIf="isoperation == 'false'" matColumnDef="operation">
                     <th mat-header-cell *matHeaderCellDef>操作</th>
                     <td mat-cell *matCellDef="let element">
-                        <span (click)="sixFamiliarize(element)">六熟悉</span>
+                        <!-- <span (click)="sixFamiliarize(element)">六熟悉</span> -->
                         <span (click)="lookPlan(element)">查看</span>
                         <span (click)="readFile(element)"
                             [ngClass]="{'grey': element.planMode == '1' || element.planMode == '2' || element.planMode == '3'}">下载</span>

src/app/plan-management/entry-plan-look/entry-plan-look.component.ts

@@ -79,7 +79,6 @@ export class EntryPlanLookComponent implements OnInit {
     "planCategory",
     "plantype",
     "auditstate",
-    "weihustate",
     "isopen",
     "preparethelevel",
     "operation",
@@ -105,6 +104,7 @@ export class EntryPlanLookComponent implements OnInit {
       CompanyName: CompanyName || "",
     };
     this.http.get("/api/Plans", { params: header }).subscribe((data: any) => {
+      console.log("data.items", data.items);
       data.items.forEach((element) => {
         if (element.companyId === this.route.snapshot.queryParams.unitId) {
           this.compantData = element.company;
@@ -813,7 +813,6 @@ export class EntryPlanLookComponent implements OnInit {
           src: `/planManagement/createplanonlinefive?navIsOpen=false&companyId=${this.companyId}&planName=${element.name}&unitName=${this.unitdata.unitname}&planCategory=${element.planCategory}&planId=${element.id}&unitTypeId=${this.compantData.buildingTypes[0].id}&orName=${this.compantData.organizationName}&orId=${this.compantData.organizationId}&pattern=false&xiazai=true`,
         },
       });
-      //window.open(`/planManagement/createplanonlinefive?navIsOpen=false&companyId=${this.companyId}&planName=${element.name}&unitName=${this.unitdata.unitname}&planCategory=${element.planCategory}&planId=${element.id}&unitTypeId=${this.compantData.buildingTypes[0].id}&orName=${this.compantData.organizationName}&orId=${this.compantData.organizationId}&pattern=false&xiazai=true`)
     } else {
       const dialogRef = this.dialog.open(DownloadFile, {
         width: "435px",
@@ -1241,6 +1240,19 @@ export class AddPlanone {
           } else {
             uploadUrl = "/api/PlanComponents2D";
           }
+
+          console.log("params", this.data.companyId);
+          console.log("body", {
+            id: "",
+            name: this.selectedPLanName,
+            planType: Number(this.selectedPLanType),
+            planMode: Number(this.defaultisshow),
+            planLevel: PlanLevel,
+            planCategory: Number(this.selectedPLanLevel),
+            url: "",
+            attachmentUrls: [`${this.objectName}`],
+          });
+          // return;
           if (this.uploadover) {
             this.http
               .post(
@@ -1654,21 +1666,6 @@ export class AddPlanone {
         //如果是本地上传并且有文件
         //先上传成功
         this.startUploading("非二维");
-
-        //再创建预案
-        // this.http.post("/api/PlanComponents",{
-        //   id: "",
-        //   name: this.selectedPLanName,
-        //   planType:Number(this.selectedPLanType),
-        //   planMode: Number(this.defaultisshow),
-        //   planLevel: PlanLevel,
-        //   url: "",
-        //   attachmentUrls: [`${this.objectName}`]
-        // },{params:{
-        //   companyId : this.data.companyId
-        // }}).subscribe(data=>{
-        //   this.dialogRef.close(data);
-        // })
       }
 
       if (this.defaultisshow == "2") {
@@ -1904,7 +1901,9 @@ export class AuditResult {
   auditOrganizationName: any = this.data.element.auditorOrganizationName;
   auditResult: any = this.data.element.auditStatus;
   auditOpinion: any = this.data.element.auditOpinion;
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    console.log(this.data.element);
+  }
   onNoClick(): void {
     this.dialogRef.close();
   }
@@ -2100,7 +2099,7 @@ export class editUpload {
   ) {}
   planName: any; //预案名称
   ngOnInit(): void {
-    //console.log(this.data)
+    // console.log(this.data)
   }
   onNoClick(): void {
     this.dialogRef.close();

src/app/plan-management/entry-plan/entry-plan.component.ts

@@ -85,7 +85,7 @@ export class EntryPlanComponent implements OnInit {
 
   organizationName: any; //当前单位组织机构名称
   preparelevels: any;
-  integritySort: any; //完整度排序
+  integritySort: any = "desc"; //完整度排序
   haveyuan; //有无预案
   colorRgb(sColor) {
     var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
@@ -370,6 +370,8 @@ export class EntryPlanComponent implements OnInit {
     if (this.reservePlanType && this.reservePlanType.length != 0) {
       reservePlanType = eval(this.reservePlanType.join("|"));
     }
+
+    let singleSignOn = sessionStorage.getItem("singleSignOn");
     let paramsdata: any = {
       CompanyName: this.companyName || "",
       OrganizationId: this.jsId || "",
@@ -389,6 +391,14 @@ export class EntryPlanComponent implements OnInit {
       IsNewData: this.IsNewData,
       IsNewCompanyData: this.IsNewCompanyData,
       PlanModes: planmode,
+      CompanyNames: singleSignOn
+        ? [
+            "大连路地铁站",
+            "东方渔人码头投资开发有限公司",
+            "上海孚宝港务有限公司",
+            "上海国际会议中心",
+          ]
+        : [],
     };
     this.http
       .get("/api/Plans", { params: paramsdata })
@@ -396,7 +406,7 @@ export class EntryPlanComponent implements OnInit {
         this.length = data.totalCount;
         this.allPlanInfo = data;
         this.tabledataSource = data.items;
-        console.log('预案列表',this.tabledataSource)
+        console.log("预案列表", this.tabledataSource);
       });
   }
 
@@ -405,23 +415,23 @@ export class EntryPlanComponent implements OnInit {
   routerTo(element) {
     this.level == "0" ? (this.operation = false) : true;
     sessionStorage.setItem("companyName", element.company.name);
-    window.open(
-      `/planManagement/entryPlandetail?unitId=${
-        element.company.id
-      }&unitTypeId=${
-        element.company.buildingTypes.length == 0
-          ? null
-          : element.company.buildingTypes[0].id
-      }&operation=${this.operation}&pagetype=entryplan&unitName=${
-        element.company.name
-      }&orName=${element.company.organizationName}&orId=${
-        element.company.organizationId
-      }&unitType=${
-        element.company.buildingTypes.length == 0
-          ? null
-          : element.company.buildingTypes[0].name
-      }&unitAdd=${element.company.address}&usci=${element.company.usci}`
-    );
+    const buildingType = element.company.buildingTypes[0] || {};
+    const unitTypeId = buildingType.id || null;
+    const unitTypeName = buildingType.name || null;
+
+    const params = new URLSearchParams({
+      unitId: element.company.id.toString(), // 确保是字符串
+      unitTypeId: unitTypeId ? unitTypeId.toString() : "", // 确保是字符串
+      operation: this.operation.toString(), // 将 boolean 转换为字符串
+      pagetype: "entryplan",
+      unitName: element.company.name.toString(), // 确保是字符串
+      orName: element.company.organizationName.toString(), // 确保是字符串
+      orId: element.company.organizationId.toString(), // 确保是字符串
+      unitType: unitTypeName ? unitTypeName.toString() : "", // 确保是字符串
+      unitAdd: element.company.address.toString(), // 确保是字符串
+      usci: element.company.usci.toString(), // 确保是字符串
+    });
+    window.open(`/planManagement/entryPlandetail?${params.toString()}`);
   }
   //查询
   onSubmit(value) {

src/app/plan-management/meet-plan/meet-plan.component.html

@@ -1,190 +1,201 @@
 <div style="height: 100%;overflow-y: auto;">
-    <div class="header" >
-        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
-          <div class="queryBox">
-      
-            <div class="queryField">
-              <label style="margin-right: 10px;">预案名称:</label>
-              <mat-form-field class="example-full-width">
-                <input matInput placeholder="请输入预案名称" name="companyName"  autocomplete="off" [(ngModel)]="unitname">
-              </mat-form-field>
-            </div>
-            <div class="queryField" >
-              <label style="margin-right: 10px;">编制级别:</label>
-              <mat-form-field>
-                <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">
-                  <!-- <mat-option value="1">总队</mat-option>
+  <div class="header">
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+      <div class="queryBox">
+
+        <div class="queryField">
+          <label style="margin-right: 10px;">预案名称:</label>
+          <mat-form-field class="example-full-width">
+            <input matInput placeholder="请输入预案名称" name="companyName" autocomplete="off" [(ngModel)]="unitname">
+          </mat-form-field>
+        </div>
+        <div class="queryField">
+          <label style="margin-right: 10px;">编制级别:</label>
+          <mat-form-field>
+            <mat-select name="preparelevel" placeholder='请选择编制级别' [(ngModel)]="projectlevel">
+              <!-- <mat-option value="1">总队</mat-option>
                   <mat-option value="2">支队</mat-option>
                   <mat-option value="4">大队</mat-option>
                   <mat-option value="8">中队</mat-option> -->
-                  <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
-                </mat-select>
-              </mat-form-field>
-              <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
-              <span *ngIf="padMore" style="margin-left: 20px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-              <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            </div>
-      
-            
-          <div class="queryField" *ngIf="!pcfind">
-            <button mat-raised-button color="primary">查询</button>
-            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
-          </div>
-          <div class="queryField" *ngIf="!padMore">
-            <label style="margin-right: 10px;">预案级别:</label>
-            <mat-form-field>
-                <mat-select placeholder='请选择预案级别' name="level" [(ngModel)]="level">
-                  <mat-option value="6">国家级</mat-option>
-                  <mat-option value="7">市级</mat-option>
-                </mat-select>
-            </mat-form-field>
-            
-          </div>
-          <div class="queryField" *ngIf="!padMore">
-            <label style="margin-right: 10px;">添加人:</label>
-            <mat-form-field class="example-full-width">
-              <input matInput placeholder="请输入添加人" name="addname"  autocomplete="off" [(ngModel)]="addname">
-            </mat-form-field>
-            <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-          </div>
-          <div class="queryField" *ngIf="pcfind" >
-            <button mat-raised-button color="primary">查询</button>
-            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+              <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
+          <span *ngIf="padMore" style="margin-left: 20px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img
+              [src]='imgsrcopen' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'
+              style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
         </div>
-          <div class="queryField" *ngIf="!padMore&&!pcMore">
-            <label style="margin-right: 10px;">添加时间:</label>
-            <mat-form-field class="example-full-width">
-              <input type="date" matInput  name="addtime"  autocomplete="off" [(ngModel)]="addtime">
-            </mat-form-field>
-            <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
-            <mat-icon *ngIf="padjt" aria-hidden="false" style="position: relative;right: 120px;top: 5px;" id="padshow">arrow forward</mat-icon>
-            <span style="margin-left: 15px;" id="pcshow" *ngIf="!padMore&&!padjt">🠊</span>
-            <mat-form-field class="example-full-width" style="margin-left: 10px;">
-              <input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime">
-            </mat-form-field>
-            
-          </div>
 
-          
-          <div class="queryField" *ngIf="!padMore&&!pcMore">
-            <label style="margin-right: 10px;">预案类型:</label>
-            <mat-form-field>
-              <input matInput placeholder="请输入预案类型" name="reservePlanType"  autocomplete="off"  [(ngModel)]="typePlan">
-            </mat-form-field>
-          </div>
-            <div class="queryField" *ngIf="!padMore&&!pcMore">
-              <label style="margin-right: 10px;">审核状态:</label>
-              <mat-form-field>
-                <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
-                  <mat-option value="8">未提交审核</mat-option>
-                  <mat-option value="1">审核中</mat-option>
-                  <mat-option value="2">审核通过</mat-option>
-                  <mat-option value="4">审核退回</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-            <div class="queryField" *ngIf="!padMore&&!pcMore">
-              <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='true' [(ngModel)]="IsNewData">
-              <label style="margin-right: 10px;margin-left: 2px;">新增</label>
-              <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='false' [(ngModel)]="IsNewData">
-              <label style="margin-right: 10px;margin-left: 2px;">维护更新</label>
-            </div>
-            
-          </div>
-          <!-- <div class="butclass" style="width: 100%;text-align: center;">
+
+        <div class="queryField" *ngIf="!pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore">
+          <label style="margin-right: 10px;">预案级别:</label>
+          <mat-form-field>
+            <mat-select placeholder='请选择预案级别' name="level" [(ngModel)]="level">
+              <mat-option value="6">国家级</mat-option>
+              <mat-option value="7">市级</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+        </div>
+        <div class="queryField" *ngIf="!padMore">
+          <label style="margin-right: 10px;">添加人:</label>
+          <mat-form-field class="example-full-width">
+            <input matInput placeholder="请输入添加人" name="addname" autocomplete="off" [(ngModel)]="addname">
+          </mat-form-field>
+          <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img
+              [src]='imgsrcopen' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+          <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img
+              [src]='imgsrcdown' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+        </div>
+        <div class="queryField" *ngIf="pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <label style="margin-right: 10px;">添加时间:</label>
+          <mat-form-field class="example-full-width">
+            <input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime">
+          </mat-form-field>
+          <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
+          <mat-icon *ngIf="padjt" aria-hidden="false" style="position: relative;right: 120px;top: 5px;"
+            id="padshow">arrow forward</mat-icon>
+          <span style="margin-left: 15px;" id="pcshow" *ngIf="!padMore&&!padjt">🠊</span>
+          <mat-form-field class="example-full-width" style="margin-left: 10px;">
+            <input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime">
+          </mat-form-field>
+
+        </div>
+
+
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <label style="margin-right: 10px;">预案类型:</label>
+          <mat-form-field>
+            <input matInput placeholder="请输入预案类型" name="reservePlanType" autocomplete="off" [(ngModel)]="typePlan">
+          </mat-form-field>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <label style="margin-right: 10px;">审核状态:</label>
+          <mat-form-field>
+            <mat-select name="toExamine" placeholder='请选择审核状态' [(ngModel)]="unitstate">
+              <mat-option value="8">未提交审核</mat-option>
+              <mat-option value="1">审核中</mat-option>
+              <mat-option value="2">审核通过</mat-option>
+              <mat-option value="4">审核退回</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='true'
+            [(ngModel)]="IsNewData">
+          <label style="margin-right: 10px;margin-left: 2px;">新增</label>
+          <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='false'
+            [(ngModel)]="IsNewData">
+          <label style="margin-right: 10px;margin-left: 2px;">维护更新</label>
+        </div>
+
+      </div>
+      <!-- <div class="butclass" style="width: 100%;text-align: center;">
               <button mat-raised-button color="primary" type="submit">查询</button>
               <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
           </div> -->
-        </form>
+    </form>
+  </div>
+  <!-- <mat-divider></mat-divider> -->
+  <div class="newadd">
+    <div>
+      <button *ngIf="levels=='0'" mat-raised-button color="primary" (click)='addunit()'><img style="margin-bottom: 3px;"
+          src="../../../assets/images/newadd.png"> 新增</button>
+      <!-- <button mat-raised-button color="primary" (click)='word("table","ceshi.doc")'></button> -->
     </div>
-    <!-- <mat-divider></mat-divider> -->
-    <div class="newadd">
-      <div>
-        <button *ngIf="levels=='0'" mat-raised-button color="primary" (click)='addunit()'><img style="margin-bottom: 3px;" src="../../../assets/images/newadd.png"> 新增</button>
-        <!-- <button mat-raised-button color="primary" (click)='word("table","ceshi.doc")'></button> -->
-      </div>
-        
-        <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
-            
-          <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
-          <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
-          <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
-          <mat-progress-bar  mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
-      </div>
+
+    <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
+
+      <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
+      <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
+      <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
+      <mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
     </div>
-    <div class="body">
-        <div class="tablebox" id="table">
-          <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
-            <ng-container matColumnDef="state">
-              <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案状态</th>
-              <td mat-cell *matCellDef="let element">
-                <span class="add" *ngIf="element.isNewData">新增</span>
-                <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
-              </td>
-          </ng-container>
-            <ng-container matColumnDef="unitname">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案名称</th>
-                <td mat-cell *matCellDef="let element">{{element.name}}</td>
-            </ng-container>
-            <ng-container matColumnDef="level">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案级别</th>
-                <td mat-cell *matCellDef="let element">{{element.planCategory=='6'?'国家级':'市级'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="addname">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加人</th>
-                <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
-            </ng-container>
-    
-            <ng-container matColumnDef="addtime">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加时间</th>
-                <td mat-cell *matCellDef="let element">{{element.creationTime|date:'yyyy-MM-dd'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="plantype">
-            <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案类型</th>
-            <td mat-cell *matCellDef="let element">{{element.disasterType}}</td>
-            </ng-container>
-            <ng-container matColumnDef="passstate">
-            <th mat-header-cell *matHeaderCellDef style="width: 8%;">新增审核</th>
-            <td mat-cell *matCellDef="let element">
-              {{element.newVerifyState}}
-              <!-- {{element.auditStatus=='8'?'未提交审核':element.auditStatus=='1'?'审核中':element.auditStatus=='2'?'审核通过':element.auditStatus=='4'?
+  </div>
+  <div class="body">
+    <div class="tablebox" id="table">
+      <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
+        <ng-container matColumnDef="state">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案状态</th>
+          <td mat-cell *matCellDef="let element">
+            <span class="add" *ngIf="element.isNewData">新增</span>
+            <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="unitname">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案名称</th>
+          <td mat-cell *matCellDef="let element">{{element.name}}</td>
+        </ng-container>
+        <ng-container matColumnDef="level">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案级别</th>
+          <td mat-cell *matCellDef="let element">{{element.planCategory=='6'?'国家级':'市级'}}</td>
+        </ng-container>
+        <ng-container matColumnDef="addname">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加人</th>
+          <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="addtime">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加时间</th>
+          <td mat-cell *matCellDef="let element">{{element.creationTime|date:'yyyy-MM-dd'}}</td>
+        </ng-container>
+        <ng-container matColumnDef="plantype">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案类型</th>
+          <td mat-cell *matCellDef="let element">{{element.disasterType}}</td>
+        </ng-container>
+        <ng-container matColumnDef="passstate">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">新增审核</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.newVerifyState}}
+            <!-- {{element.auditStatus=='8'?'未提交审核':element.auditStatus=='1'?'审核中':element.auditStatus=='2'?'审核通过':element.auditStatus=='4'?
               '审核退回':element.auditStatus=='16'?'初审通过':'初审驳回'}} -->
-            </td>
-            </ng-container>
-            <ng-container matColumnDef="isopen">
-              <th mat-header-cell *matHeaderCellDef style="width: 8%;">是否公开</th>
-              <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
-              </ng-container>
-            <ng-container matColumnDef="projectlevel">
-            <th mat-header-cell *matHeaderCellDef style="width: 8%;">编制级别</th>
-            <td mat-cell *matCellDef="let element">{{element.planLevel=='1'?'总队':element.planLevel=='2'?'支队':element.planLevel=='4'?'大队':'中队'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="weihustate">
-              <th mat-header-cell *matHeaderCellDef style="width: 8%;">维护审核</th>
-              <td mat-cell *matCellDef="let element">{{element.maintenanceVerifyState}}</td>
-              </ng-container>
-            <ng-container matColumnDef="operation">
-                <th mat-header-cell *matHeaderCellDef style="width: 20%;">操作</th>
-                <td mat-cell *matCellDef="let element" style="white-space: nowrap;cursor: pointer;">
-                  <span  style="color: blue;" (click)='openPlan(element)'>查看预案</span>
-                  <span style="color: blue;margin-left: 4px;" (click)="submitAudit(element)" *ngIf="(element.isNewData && element.newVerifyState=='未提交审核')||(!element.isNewData&&(element.maintenanceVerifyState=='审核通过'||element.maintenanceVerifyState=='未提交审核'))">提交审核</span>
-                  <span style="color: blue;margin-left: 4px;" (click)="cancelAudit(element)" *ngIf="element.auditStatus == 1||element.auditStatus == 16">撤销审核</span>
-                  <span style="color: blue;margin-left: 4px;" (click)="auditResult(element)">审批结果</span>
-                  <span style="color: blue;margin-left: 4px;" (click)='readFile(element)'>下载</span>
-                  <span style="color: red;margin-left: 4px" (click)='deletePlan(element.id)' *ngIf="element.auditStatus == 8"> 删除</span>
-                </td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-            <mat-paginator pageEvent [length]="length"
-                [pageSize]="pageSize"
-                [pageSizeOptions]="pageSizeOptions"
-                (page)="changePage($event)">
-                
-            </mat-paginator>
-        
-        </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="isopen">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">是否公开</th>
+          <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
+        </ng-container>
+        <ng-container matColumnDef="projectlevel">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">编制级别</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.planLevel=='1'?'总队':element.planLevel=='2'?'支队':element.planLevel=='4'?'大队':'中队'}}</td>
+        </ng-container>
+        <ng-container matColumnDef="auditstate">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">审核状态</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.auditStatus | auditState}}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="operation">
+          <th mat-header-cell *matHeaderCellDef style="width: 20%;">操作</th>
+          <td mat-cell *matCellDef="let element" style="white-space: nowrap;cursor: pointer;">
+            <span style="color: blue;" (click)='openPlan(element)'>查看预案</span>
+            <span style="color: blue;margin-left: 4px;" (click)="submitAudit(element)"
+              *ngIf="(element.isNewData && element.newVerifyState=='未提交审核')||(!element.isNewData&&(element.maintenanceVerifyState=='审核通过'||element.maintenanceVerifyState=='未提交审核'))">提交审核</span>
+            <span style="color: blue;margin-left: 4px;" (click)="cancelAudit(element)"
+              *ngIf="element.auditStatus == 1||element.auditStatus == 16">撤销审核</span>
+            <span style="color: blue;margin-left: 4px;" (click)="auditResult(element)">审批结果</span>
+            <span style="color: blue;margin-left: 4px;" (click)='readFile(element)'>下载</span>
+            <span style="color: red;margin-left: 4px" (click)='deletePlan(element.id)'> 删除</span>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator pageEvent [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+        (page)="changePage($event)">
+
+      </mat-paginator>
+
     </div>
-</div>
+  </div>
+</div>

src/app/plan-management/meet-plan/meet-plan.component.ts

@@ -84,7 +84,7 @@ export class MeetPlanComponent implements OnInit {
   preparelevels: any
   plcheck: boolean //编制级别勾选框
   IsNewData = '' //维护更新活新增
-  displayedColumns: string[] = ['state', 'unitname', 'level', 'addname', 'addtime', 'plantype', 'isopen', 'projectlevel', 'passstate', 'weihustate', 'operation'];
+  displayedColumns: string[] = ['state', 'unitname', 'level', 'addname', 'addtime', 'plantype', 'isopen', 'projectlevel', 'passstate', 'auditstate', 'operation'];
   tabledataSource
   typePlan//新预案类型
   unitname//预案名称

src/app/plan-management/onetwo-entry-plan/onetwo-entry-plan.component.html

@@ -7,172 +7,177 @@
  * @LastEditTime: 2021-07-24 16:59:38
 -->
 <div style="height: 100%;overflow-y: auto;">
-    <div class="header" >
-        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
-          <div class="queryBox">
-            <div class="queryField">
-              <label style="margin-right: 10px;">预案名称:</label>
-              <mat-form-field class="example-full-width">
-                <input matInput placeholder="请输入预案名称" name="companyName"  autocomplete="off" [(ngModel)]="unitname">
-              </mat-form-field>
-            </div>
-            <div class="queryField" >
-              <label style="margin-right: 10px;">编制级别:</label>
-              <mat-form-field>
-                <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">
-                  <!-- <mat-option value="1">总队</mat-option>
+  <div class="header">
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+      <div class="queryBox">
+        <div class="queryField">
+          <label style="margin-right: 10px;">预案名称:</label>
+          <mat-form-field class="example-full-width">
+            <input matInput placeholder="请输入预案名称" name="companyName" autocomplete="off" [(ngModel)]="unitname">
+          </mat-form-field>
+        </div>
+        <div class="queryField">
+          <label style="margin-right: 10px;">编制级别:</label>
+          <mat-form-field>
+            <mat-select name="preparelevel" placeholder='请选择编制级别' [(ngModel)]="projectlevel">
+              <!-- <mat-option value="1">总队</mat-option>
                   <mat-option value="2">支队</mat-option>
                   <mat-option value="4">大队</mat-option>
                   <mat-option value="8">中队</mat-option> -->
-                  <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
-                </mat-select>
-              </mat-form-field>
-              <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
-              <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            </div>
-            <div class="queryField" *ngIf="!pcfind">
-              <button mat-raised-button color="primary">查询</button>
-              <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
-            </div>
-          <div class="queryField" *ngIf="!padMore">
-            <label style="margin-right: 10px;">添加人:</label>
-            <mat-form-field class="example-full-width">
-              <input matInput placeholder="请输入添加人" name="addname"  autocomplete="off" [(ngModel)]="addname">
-            </mat-form-field>
-            
-          </div>
-          <div class="queryField" *ngIf="!padMore">
-            <label style="margin-right: 10px;">预案类型:</label>
-            <mat-form-field>
-              <input matInput placeholder="请输入预案类型" name="reservePlanType"  autocomplete="off"  [(ngModel)]="typePlan">
-            </mat-form-field>
-            <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-          </div>
-          
-          <div class="queryField" *ngIf="pcfind" >
-            <button mat-raised-button color="primary">查询</button>
-            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
-          </div>
-          <div class="queryField" *ngIf="!padMore&&!pcMore">
-            <label style="margin-right: 10px;">添加时间:</label>
-            <mat-form-field class="example-full-width">
-              <input type="date" matInput  name="addtime"  autocomplete="off" [(ngModel)]="addtime">
-            </mat-form-field>
-            <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
-            <mat-icon *ngIf="padjt" aria-hidden="false" style="position: relative;right: 120px;top: 5px;" id="padshow">arrow forward</mat-icon>
-            <span style="margin-left: 15px;" id="pcshow" *ngIf="!padMore&&!padjt">🠊</span>
-            <mat-form-field class="example-full-width" style="margin-left: 10px;">
-              <input type="date" matInput name="endtime"  autocomplete="off"  [(ngModel)]="endtime">
-            </mat-form-field>
-          </div>
-          
-            <div class="queryField" *ngIf="!padMore&&!pcMore">
-              <label style="margin-right: 10px;">审核状态:</label>
-              <mat-form-field>
-                <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
-                  <mat-option value="8">未提交审核</mat-option>
-                  <mat-option value="1">审核中</mat-option>
-                  <mat-option value="2">审核通过</mat-option>
-                  <mat-option value="4">审核退回</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-            <div class="queryField" *ngIf="!padMore&&!pcMore">
-              <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='true' [(ngModel)]="IsNewData">
-              <label style="margin-right: 10px;margin-left: 2px;">新增</label>
-              <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='false' [(ngModel)]="IsNewData">
-              <label style="margin-right: 10px;margin-left: 2px;">维护更新</label>
-            </div>
-            
-          </div>
-          
-        </form>
-    </div>
-    <!-- <mat-divider></mat-divider> -->
-    <div class="newadd">
-      <div>
-        <button *ngIf="levels=='0'||levels=='1'" mat-raised-button color="primary" (click)="addunit()"><img style="margin-bottom: 3px;" src="../../../assets/images/newadd.png"> 新增</button>
-      </div>
-        <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
-            
-          <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
-          <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
-          <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
-          <mat-progress-bar  mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
+              <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
+          <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img
+              [src]='imgsrcopen' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'
+              style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+        </div>
+        <div class="queryField" *ngIf="!pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore">
+          <label style="margin-right: 10px;">添加人:</label>
+          <mat-form-field class="example-full-width">
+            <input matInput placeholder="请输入添加人" name="addname" autocomplete="off" [(ngModel)]="addname">
+          </mat-form-field>
+
+        </div>
+        <div class="queryField" *ngIf="!padMore">
+          <label style="margin-right: 10px;">预案类型:</label>
+          <mat-form-field>
+            <input matInput placeholder="请输入预案类型" name="reservePlanType" autocomplete="off" [(ngModel)]="typePlan">
+          </mat-form-field>
+          <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img
+              [src]='imgsrcopen' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+          <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img
+              [src]='imgsrcdown' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+        </div>
+
+        <div class="queryField" *ngIf="pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <label style="margin-right: 10px;">添加时间:</label>
+          <mat-form-field class="example-full-width">
+            <input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime">
+          </mat-form-field>
+          <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
+          <mat-icon *ngIf="padjt" aria-hidden="false" style="position: relative;right: 120px;top: 5px;"
+            id="padshow">arrow forward</mat-icon>
+          <span style="margin-left: 15px;" id="pcshow" *ngIf="!padMore&&!padjt">🠊</span>
+          <mat-form-field class="example-full-width" style="margin-left: 10px;">
+            <input type="date" matInput name="endtime" autocomplete="off" [(ngModel)]="endtime">
+          </mat-form-field>
+        </div>
+
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <label style="margin-right: 10px;">审核状态:</label>
+          <mat-form-field>
+            <mat-select name="toExamine" placeholder='请选择审核状态' [(ngModel)]="unitstate">
+              <mat-option value="8">未提交审核</mat-option>
+              <mat-option value="1">审核中</mat-option>
+              <mat-option value="2">审核通过</mat-option>
+              <mat-option value="4">审核退回</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='true'
+            [(ngModel)]="IsNewData">
+          <label style="margin-right: 10px;margin-left: 2px;">新增</label>
+          <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='false'
+            [(ngModel)]="IsNewData">
+          <label style="margin-right: 10px;margin-left: 2px;">维护更新</label>
+        </div>
+
       </div>
+
+    </form>
+  </div>
+  <!-- <mat-divider></mat-divider> -->
+  <div class="newadd">
+    <div>
+      <button *ngIf="levels=='0'||levels=='1'" mat-raised-button color="primary" (click)="addunit()"><img
+          style="margin-bottom: 3px;" src="../../../assets/images/newadd.png"> 新增</button>
     </div>
-    
-    <div class="body">
-        <div class="tablebox">
-          <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
-            <ng-container matColumnDef="state">
-              <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案状态</th>
-              <td mat-cell *matCellDef="let element">
-                <span class="add" *ngIf="element.isNewData">新增</span>
-                <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
-              </td>
-          </ng-container>
-            <ng-container matColumnDef="unitname">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案名称</th>
-                <td mat-cell *matCellDef="let element">{{element.name}}</td>
-            </ng-container>
-            <ng-container matColumnDef="level">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案级别</th>
-                <td mat-cell *matCellDef="let element">{{url=='2'?'Ⅱ级':'Ⅰ级'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="addname">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加人</th>
-                <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
-            </ng-container>
-    
-            <ng-container matColumnDef="addtime">
-                <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加时间</th>
-                <td mat-cell *matCellDef="let element">{{element.creationTime|date:'yyyy-MM-dd'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="plantype">
-            <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案类型</th>
-            <td mat-cell *matCellDef="let element">{{element.disasterType}}</td>
-            </ng-container>
-            <ng-container matColumnDef="passstate">
-            <th mat-header-cell *matHeaderCellDef style="width: 8%;">新增审核</th>
-            <td mat-cell *matCellDef="let element">{{element.newVerifyState}}</td>
-            </ng-container>
-            <ng-container matColumnDef="weihustate">
-              <th mat-header-cell *matHeaderCellDef style="width: 8%;">维护审核</th>
-              <td mat-cell *matCellDef="let element">{{element.maintenanceVerifyState}}</td>
-              </ng-container>
-            <ng-container matColumnDef="isopen">
-              <th mat-header-cell *matHeaderCellDef style="width: 8%;">是否公开</th>
-              <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
-              </ng-container>
-            <ng-container matColumnDef="projectlevel">
-            <th mat-header-cell *matHeaderCellDef style="width: 8%;">编制级别</th>
-            <td mat-cell *matCellDef="let element">{{element.planLevel=='1'?'总队':element.planLevel=='2'?'支队':element.planLevel=='4'?'大队':'中队'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="operation">
-                <th mat-header-cell *matHeaderCellDef style="width: 20%;">操作</th>
-                <td mat-cell *matCellDef="let element" style="white-space: nowrap;cursor: pointer;">
-                    <span  style="color: blue;" (click)='openPlan(element)'>查看预案</span>
-                    <span style="color: blue;margin-left: 4px;" (click)="submitAudit(element)" *ngIf="(element.isNewData && element.newVerifyState=='未提交审核')||(!element.isNewData&&(element.maintenanceVerifyState=='审核通过'||element.maintenanceVerifyState=='未提交审核'))">提交审核</span>
-                    <span style="color: blue;margin-left: 4px;" (click)="cancelAudit(element)" *ngIf="element.auditStatus == 1||element.auditStatus == 16">撤销审核</span>
-                    <span style="color: blue;margin-left: 4px;" (click)="auditResult(element)">审批结果</span>
-                    <!-- <span style="color: blue;margin-left: 4px;"  *ngIf="element.auditStatus == 2">审核通过</span> -->
-                    <span style="color: blue;margin-left: 4px;" (click)='readFile(element)'>下载</span>
-                    <span style="color: red;margin-left: 4px" (click)='deletePlan(element.id)' *ngIf="element.auditStatus == 8"> 删除</span>
-                </td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-            <mat-paginator pageEvent [length]="length"
-                [pageSize]="pageSize"
-                [pageSizeOptions]="pageSizeOptions"
-                (page)="changePage($event)">
-                
-            </mat-paginator>
-        
-        </div>
+    <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
+
+      <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
+      <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
+      <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
+      <mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
+    </div>
+  </div>
+
+  <div class="body">
+    <div class="tablebox">
+      <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
+        <ng-container matColumnDef="state">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案状态</th>
+          <td mat-cell *matCellDef="let element">
+            <span class="add" *ngIf="element.isNewData">新增</span>
+            <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="unitname">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案名称</th>
+          <td mat-cell *matCellDef="let element">{{element.name}}</td>
+        </ng-container>
+        <ng-container matColumnDef="level">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案级别</th>
+          <td mat-cell *matCellDef="let element">{{url=='2'?'Ⅱ级':'Ⅰ级'}}</td>
+        </ng-container>
+        <ng-container matColumnDef="addname">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加人</th>
+          <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="addtime">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">添加时间</th>
+          <td mat-cell *matCellDef="let element">{{element.creationTime|date:'yyyy-MM-dd'}}</td>
+        </ng-container>
+        <ng-container matColumnDef="plantype">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">预案类型</th>
+          <td mat-cell *matCellDef="let element">{{element.disasterType}}</td>
+        </ng-container>
+        <ng-container matColumnDef="passstate">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">审核状态</th>
+          <td mat-cell *matCellDef="let element"> {{element.auditStatus | auditState}}</td>
+        </ng-container>
+        <ng-container matColumnDef="isopen">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">是否公开</th>
+          <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
+        </ng-container>
+        <ng-container matColumnDef="projectlevel">
+          <th mat-header-cell *matHeaderCellDef style="width: 8%;">编制级别</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.planLevel=='1'?'总队':element.planLevel=='2'?'支队':element.planLevel=='4'?'大队':'中队'}}</td>
+        </ng-container>
+        <ng-container matColumnDef="operation">
+          <th mat-header-cell *matHeaderCellDef style="width: 20%;">操作</th>
+          <td mat-cell *matCellDef="let element" style="white-space: nowrap;cursor: pointer;">
+            <span style="color: blue;" (click)='openPlan(element)'>查看预案</span>
+            <span style="color: blue;margin-left: 4px;" (click)="submitAudit(element)"
+              *ngIf="(element.isNewData && element.newVerifyState=='未提交审核')||(!element.isNewData&&(element.maintenanceVerifyState=='审核通过'||element.maintenanceVerifyState=='未提交审核'))">提交审核</span>
+            <span style="color: blue;margin-left: 4px;" (click)="cancelAudit(element)"
+              *ngIf="element.auditStatus == 1||element.auditStatus == 16">撤销审核</span>
+            <span style="color: blue;margin-left: 4px;" (click)="auditResult(element)">审批结果</span>
+            <!-- <span style="color: blue;margin-left: 4px;"  *ngIf="element.auditStatus == 2">审核通过</span> -->
+            <span style="color: blue;margin-left: 4px;" (click)='readFile(element)'>下载</span>
+            <span style="color: red;margin-left: 4px" (click)='deletePlan(element.id)'> 删除</span>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator pageEvent [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+        (page)="changePage($event)">
+
+      </mat-paginator>
+
     </div>
-</div>
+  </div>
+</div>

src/app/plan-management/open-plan/open-plan.component.html

@@ -122,15 +122,14 @@
               margin: 3px 0 0 3px;" src="../../../assets/images/custom.png" alt="">
           </td>
         </ng-container>
-        <ng-container matColumnDef="auditStatus">
-          <th mat-header-cell *matHeaderCellDef>新增审核</th>
-          <td mat-cell *matCellDef="let element">{{element.newVerifyState}}</td>
-        </ng-container>
-        <ng-container matColumnDef="weihuStatus">
-          <th mat-header-cell *matHeaderCellDef>维护审核</th>
-          <td mat-cell *matCellDef="let element">{{element.maintenanceVerifyState}}</td>
-        </ng-container>
 
+
+        <ng-container matColumnDef="auditstate">
+          <th mat-header-cell *matHeaderCellDef>审核状态</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.auditStatus | auditState}}
+          </td>
+        </ng-container>
         <ng-container matColumnDef="openRange">
           <th mat-header-cell *matHeaderCellDef>是否公开</th>
           <td mat-cell *matCellDef="let element">{{element.openRange}}</td>

src/app/plan-management/open-plan/open-plan.component.ts

@@ -1,38 +1,63 @@
-import { Component, OnInit, ViewChild, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http'
-import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
-import { MatPaginator } from '@angular/material/paginator';
-import { FlatTreeControl } from '@angular/cdk/tree';
-import { FormControl } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router'
-import { PageEvent } from '@angular/material/paginator';
-import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { TreeService } from '../../http-interceptors/tree.service'
-import { Viewer } from 'photo-sphere-viewer';
-import { ImgDetails, PsViewer } from '../entry-plan-look/entry-plan-look.component';
-declare var CryptoJS
+import { Component, OnInit, ViewChild, Inject } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import {
+  MatTreeFlatDataSource,
+  MatTreeFlattener,
+} from "@angular/material/tree";
+import { MatPaginator } from "@angular/material/paginator";
+import { FlatTreeControl } from "@angular/cdk/tree";
+import { FormControl } from "@angular/forms";
+import { Router, ActivatedRoute } from "@angular/router";
+import { PageEvent } from "@angular/material/paginator";
+import {
+  MatDialogRef,
+  MatDialog,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import { TreeService } from "../../http-interceptors/tree.service";
+import { Viewer } from "photo-sphere-viewer";
+import {
+  ImgDetails,
+  PsViewer,
+} from "../entry-plan-look/entry-plan-look.component";
+declare var CryptoJS;
 @Component({
-  selector: 'app-open-plan',
-  templateUrl: './open-plan.component.html',
-  styleUrls: ['./open-plan.component.scss']
+  selector: "app-open-plan",
+  templateUrl: "./open-plan.component.html",
+  styleUrls: ["./open-plan.component.scss"],
 })
 export class OpenPlanComponent implements OnInit {
+  constructor(
+    private http: HttpClient,
+    private router: Router,
+    private route: ActivatedRoute,
+    private tree: TreeService,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar
+  ) {}
 
-  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, private tree: TreeService, public dialog: MatDialog, public snackBar: MatSnackBar) { }
-
-  private _transformer = (node, level: number) => {   //初始化tree
+  private _transformer = (node, level: number) => {
+    //初始化tree
     return {
       expandable: !!node.children && node.children.length > 0,
       name: node.name,
       level: level,
       id: node.id,
       parentId: node.parentId,
-      children: node.children
+      children: node.children,
     };
-  }
-  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
-  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
+  };
+  treeControl = new FlatTreeControl<any>(
+    (node) => node.level,
+    (node) => node.expandable
+  );
+  treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    (node) => node.level,
+    (node) => node.expandable,
+    (node) => node.children
+  );
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
   myControl = new FormControl();
   hasChild = (_: number, node: any) => node.expandable;
@@ -42,306 +67,342 @@ export class OpenPlanComponent implements OnInit {
   paginator: MatPaginator;
   length: any; //共多少条数据
   pageSize: any; //每页条数
-  pageSizeOptions: number[] = [10] //设置每页条数
+  pageSizeOptions: number[] = [10]; //设置每页条数
   PageNumber: any; //第几页
-  IsNewData = '' //维护更新活新增
+  IsNewData = ""; //维护更新活新增
 
-  displayedColumns: string[] = ['state', 'unitname', 'planname', 'addpeople', 'addtime', 'plantype', 'auditStatus', 'weihuStatus', 'openRange', 'projectlevel', 'operation'];
+  displayedColumns: string[] = [
+    "state",
+    "unitname",
+    "planname",
+    "addpeople",
+    "addtime",
+    "plantype",
+    "auditstate",
+    "openRange",
+    "projectlevel",
+    "operation",
+  ];
 
-  allorganizations: any //所有组织机构
-  allunittype: any //所有单位类型
-  tabledataSource: any //表格数据
-  preparelevels: any //编制级别
+  allorganizations: any; //所有组织机构
+  allunittype: any; //所有单位类型
+  tabledataSource: any; //表格数据
+  preparelevels: any; //编制级别
   ngOnInit(): void {
     if (window.matchMedia("(max-width: 1400px)").matches) {
-      this.pcMore = false
-      this.padMore = true
-      this.pcfind = false
-      this.padjt = true
+      this.pcMore = false;
+      this.padMore = true;
+      this.pcfind = false;
+      this.padjt = true;
     } else {
-      this.pcfind = true
-      this.pcMore = true
-      this.padMore = false
-      this.padjt = false
+      this.pcfind = true;
+      this.pcMore = true;
+      this.padMore = false;
+      this.padjt = false;
     }
     this.getunitdata();
     this.getOrganizations();
     this.getUnittype();
     this.getAllPlanInfo(); //得到所有单位
     let level = sessionStorage.getItem("level");
-    if (level == "0") {//如果是总队
+    if (level == "0") {
+      //如果是总队
       this.preparelevels = [
         { name: "总队", value: "1" },
         { name: "支队", value: "2" },
         { name: "大队", value: "4" },
-        { name: "中队", value: "8" }
-      ]
+        { name: "中队", value: "8" },
+      ];
     }
-    if (level == "1") {//如果是支队
+    if (level == "1") {
+      //如果是支队
       this.preparelevels = [
         { name: "支队", value: "2" },
         { name: "大队", value: "4" },
-        { name: "中队", value: "8" }
-      ]
+        { name: "中队", value: "8" },
+      ];
     }
-    if (level == "2") {//如果是大队
+    if (level == "2") {
+      //如果是大队
       this.preparelevels = [
         { name: "大队", value: "4" },
-        { name: "中队", value: "8" }
-      ]
+        { name: "中队", value: "8" },
+      ];
     }
-    if (level == "3") {//如果是中队
-      this.preparelevels = [
-        { name: "中队", value: "8" }
-      ]
+    if (level == "3") {
+      //如果是中队
+      this.preparelevels = [{ name: "中队", value: "8" }];
     }
   }
 
-  pcMore//pc更多
-  pcput = false//pc收起
-  pcfind//pc查询
-  padjt = false
-  padMore = true//pad收缩控制
-  padput = false//pad收起按钮
-  imgsrcopen = "../../../assets/images/routdown2.png"
-  imgsrcdown = "../../../assets/images/routup2.png"
+  pcMore; //pc更多
+  pcput = false; //pc收起
+  pcfind; //pc查询
+  padjt = false;
+  padMore = true; //pad收缩控制
+  padput = false; //pad收起按钮
+  imgsrcopen = "../../../assets/images/routdown2.png";
+  imgsrcdown = "../../../assets/images/routup2.png";
   pcInfo() {
-    this.pcMore = !this.pcMore
-    this.pcput = !this.pcput
+    this.pcMore = !this.pcMore;
+    this.pcput = !this.pcput;
   }
   padInfo() {
-    this.padMore = !this.padMore
-    this.padput = !this.padput
+    this.padMore = !this.padMore;
+    this.padput = !this.padput;
   }
 
-  allPlanInfo: any //存储所有预案信息
+  allPlanInfo: any; //存储所有预案信息
   //获得所有预案信息
-  IsNewCompanyData = ''
-  templatePlan: boolean = false//模板录入预案checkbox
-  customPlan: boolean = false//自定义预案
+  IsNewCompanyData = "";
+  templatePlan: boolean = false; //模板录入预案checkbox
+  customPlan: boolean = false; //自定义预案
   getAllPlanInfo() {
-    let planmode = []
-    this.templatePlan ? planmode.push(2) : null
-    this.customPlan ? planmode.push(4) : null
+    let planmode = [];
+    this.templatePlan ? planmode.push(2) : null;
+    this.customPlan ? planmode.push(4) : null;
     let paramsdata: any = {
-      CompanyName: this.companyName || '',
-      OrganizationId: '',
-      HasChildrenOrganization: '',
-      BuildingTypeId: this.unittype || '',
-      PlanType: this.reservePlanType || '',
-      AuditStatus: '', //审核状态
-      PlanLevel: this.preparelevel || '',
-      HasChildrenPlanLevel: this.plcheck || '',
-      PageNumber: this.PageNumber || '1',
+      CompanyName: this.companyName || "",
+      OrganizationId: "",
+      HasChildrenOrganization: "",
+      BuildingTypeId: this.unittype || "",
+      PlanType: this.reservePlanType || "",
+      AuditStatus: "", //审核状态
+      PlanLevel: this.preparelevel || "",
+      HasChildrenPlanLevel: this.plcheck || "",
+      PageNumber: this.PageNumber || "1",
       PageSize: this.pageSizeOptions[0],
-      Sort: '',
+      Sort: "",
       IsNewData: this.IsNewData,
       IsNewCompanyData: this.IsNewCompanyData,
-      PlanModes: planmode
-    }
-    this.http.get("/api/PublicPlans", { params: paramsdata }).subscribe((data: any) => {
-      // console.log(111,data)
-      this.length = data.totalCount
-      this.allPlanInfo = data
-      this.tabledataSource = data.items
-    })
+      PlanModes: planmode,
+    };
+    this.http
+      .get("/api/PublicPlans", { params: paramsdata })
+      .subscribe((data: any) => {
+        // console.log(111,data)
+        this.length = data.totalCount;
+        this.allPlanInfo = data;
+        this.tabledataSource = data.items;
+      });
   }
   //得到当前单位信息
   getunitdata() {
-    this.http.get("/api/Account/Profiles").subscribe(
-      (data: any) => {
-        this.organizationName = data.organizationName
-      }
-    )
+    this.http.get("/api/Account/Profiles").subscribe((data: any) => {
+      this.organizationName = data.organizationName;
+    });
   }
-  organizationName: any //当前单位组织机构名称
-  treedata: any //组织机构树型数据
-  newArr: any = []
-  newallorganizations: any //用于存储在原始数据基础上的每个机构增加children字段
+  organizationName: any; //当前单位组织机构名称
+  treedata: any; //组织机构树型数据
+  newArr: any = [];
+  newallorganizations: any; //用于存储在原始数据基础上的每个机构增加children字段
   //得到当前单位所在组织机构的tree型数据
   getpresentOrganization() {
-    this.newallorganizations = this.allorganizations
-    this.newallorganizations.forEach(item => {
-      item.children = []
-      this.newallorganizations.forEach(element => {
+    this.newallorganizations = this.allorganizations;
+    this.newallorganizations.forEach((item) => {
+      item.children = [];
+      this.newallorganizations.forEach((element) => {
         if (element.parentId == item.id) {
-          item.children.push(element)
+          item.children.push(element);
         }
       });
     });
     // console.log(666,this.organizationName)
     if (this.organizationName) {
-      this.newallorganizations.forEach(item => {
+      this.newallorganizations.forEach((item) => {
         if (item.name == this.organizationName) {
-          this.dataSource.data = [item]
+          this.dataSource.data = [item];
         }
       });
     } else {
       this.dataSource.data = this.tree.toTree(this.treedata);
     }
-
   }
   //获得所有组织机构
   getOrganizations() {
-    this.http.get('/api/Organizations').subscribe(
-      (data: any) => {
-        this.allorganizations = data
-        this.treedata = this.tree.toTree(data);
-        this.getpresentOrganization();
-      }
-    )
+    this.http.get("/api/Organizations").subscribe((data: any) => {
+      this.allorganizations = data;
+      this.treedata = this.tree.toTree(data);
+      this.getpresentOrganization();
+    });
   }
 
   //获得所有单位类型
   getUnittype() {
-    this.http.get('/api/BuildingTypes/Simple').subscribe(
-      data => {
-        this.allunittype = data
-      }
-    )
+    this.http.get("/api/BuildingTypes/Simple").subscribe((data) => {
+      this.allunittype = data;
+    });
   }
   //跳转查看预案页面 公开预案
   routerTo(e) {
-    console.log(e)
+    console.log(e);
     if (e.planType == 16 || e.planType == 4 || e.planType == 8) {
       if (e.planType == 16 && e.attachmentUrls == null) {
-        window.open(`/planManagement/createplanonlinefive?navIsOpen=false&companyId=${e.companyId}&planName=${e.name}&unitName=${e.company.name}&planCategory=${e.planCategory}&planId=${e.id}&unitTypeId=${e.company.buildingTypes[0].id}&orName=${e.company.organizationName}&orId=${e.company.organizationId}&pattern=false`)
+        window.open(
+          `/planManagement/createplanonlinefive?navIsOpen=false&companyId=${e.companyId}&planName=${e.name}&unitName=${e.company.name}&planCategory=${e.planCategory}&planId=${e.id}&unitTypeId=${e.company.buildingTypes[0].id}&orName=${e.company.organizationName}&orId=${e.company.organizationId}&pattern=false`
+        );
       } else {
-        var index = e.attachmentUrls[0].indexOf("\/")
-        if (e.attachmentUrls[0].substr(0, index) == 'psw') {
+        var index = e.attachmentUrls[0].indexOf("/");
+        if (e.attachmentUrls[0].substr(0, index) == "psw") {
           const dialogRef = this.dialog.open(PsViewer, {
-            width: '1500px',
-            height: '800px',
-            data: e.attachmentUrls[0]
+            width: "1500px",
+            height: "800px",
+            data: e.attachmentUrls[0],
           });
-        } else if (e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'JPG' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'png' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'jpeg' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'jpg') {
-          let data = e
-          const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去
+        } else if (
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "JPG" ||
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "png" ||
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "jpeg" ||
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "jpg"
+        ) {
+          let data = e;
+          const dialogRef = this.dialog.open(ImgDetails, {
+            //调用open方法打开对话框并且携带参数过去
             data: data.attachmentUrls,
           });
           dialogRef.afterClosed().subscribe();
         } else {
-          let fetchUrl = e.attachmentUrls[0]
+          let fetchUrl = e.attachmentUrls[0];
           if (fetchUrl) {
-            let suffix = fetchUrl.split('.')[fetchUrl.split('.').length - 1].toLowerCase()
-            if (suffix == 'docx' || suffix == 'doc') {
-              let arr = fetchUrl.split('.')
-              arr[arr.length - 1] = 'pdf'
-              window.open(`/api/Objects/PlanPlatform/` + arr.join('.'))
-            } else if (suffix == 'pdf') {
-              window.open(`/api/Objects/PlanPlatform/` + fetchUrl)
+            let suffix = fetchUrl
+              .split(".")
+              [fetchUrl.split(".").length - 1].toLowerCase();
+            if (suffix == "docx" || suffix == "doc") {
+              let arr = fetchUrl.split(".");
+              arr[arr.length - 1] = "pdf";
+              window.open(`/api/Objects/PlanPlatform/` + arr.join("."));
+            } else if (suffix == "pdf") {
+              window.open(`/api/Objects/PlanPlatform/` + fetchUrl);
             } else {
               let config = new MatSnackBarConfig();
-              config.verticalPosition = 'top';
-              config.duration = 3000
-              this.snackBar.open('该文件类型暂不支持在线查看', '确定', config);
+              config.verticalPosition = "top";
+              config.duration = 3000;
+              this.snackBar.open("该文件类型暂不支持在线查看", "确定", config);
             }
           }
         }
       }
     }
 
-    if (e.planMode == 2 && e.planType == 1) {  //如果是在线编辑
-      let id = e.id
-      sessionStorage.setItem("planId", id)
-      sessionStorage.setItem("companyId", e.companyId)
+    if (e.planMode == 2 && e.planType == 1) {
+      //如果是在线编辑
+      let id = e.id;
+      sessionStorage.setItem("planId", id);
+      sessionStorage.setItem("companyId", e.companyId);
       //sessionStorage.setItem("buildingTypeId",this.unittypeId)
-      sessionStorage.setItem("editable", "0")
-      sessionStorage.setItem("planName", e.name)
-      let companyId = sessionStorage.getItem("companyId")
+      sessionStorage.setItem("editable", "0");
+      sessionStorage.setItem("planName", e.name);
+      let companyId = sessionStorage.getItem("companyId");
       window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`);
     }
-    if (e.planMode == 3) {  //如果是跳转网页
-      sessionStorage.setItem("url", e.url)
-      window.open(`/planManagement/webLook`)
+    if (e.planMode == 3) {
+      //如果是跳转网页
+      sessionStorage.setItem("url", e.url);
+      window.open(`/planManagement/webLook`);
     }
   }
 
-
   templatePlanChange($event, type) {
     if (type == 1) {
-      this.templatePlan = $event
+      this.templatePlan = $event;
     } else if (type == 2) {
-      this.customPlan = $event
+      this.customPlan = $event;
     }
     if (this.templatePlan || this.customPlan) {
-      this.reservePlanType = ['16']
+      this.reservePlanType = ["16"];
     } else {
-      this.reservePlanType = []
+      this.reservePlanType = [];
     }
   }
   //分页事件
   chagePage(e) {
-    this.PageNumber = e.pageIndex + 1
+    this.PageNumber = e.pageIndex + 1;
     this.getAllPlanInfo();
   }
   //辖区中队div是否显示
-  isorganizationbox: boolean = false
+  isorganizationbox: boolean = false;
   //点击辖区中队树，将选择的辖区中队添加到变量
   add(node) {
-    this.isorganizationbox = false
-    this.js = node.name
-    this.jsId = node.id
+    this.isorganizationbox = false;
+    this.js = node.name;
+    this.jsId = node.id;
   }
   //关闭辖区中队隐藏框
   closeorganizationbox() {
-    this.isorganizationbox = false
+    this.isorganizationbox = false;
   }
   //打开辖区中队隐藏框
   openorganizationbox() {
-    this.isorganizationbox = true
+    this.isorganizationbox = true;
   }
   //关闭出现的组织机构div
   closediv() {
-    this.isorganizationbox = false
+    this.isorganizationbox = false;
   }
   //查询
   onSubmit(e) {
-    this.getAllPlanInfo()
+    this.getAllPlanInfo();
   }
-  companyName: any //单位名称
-  js: any //所选组织机构
-  jsId: any //所选组织机构的id
+  companyName: any; //单位名称
+  js: any; //所选组织机构
+  jsId: any; //所选组织机构的id
   // jscheck:boolean //所选组织机构勾选框
-  unittype: any //单位类型
-  reservePlanType: any //预案类型
-  preparelevel: any //编制级别
-  plcheck: boolean //编制级别勾选框
+  unittype: any; //单位类型
+  reservePlanType: any; //预案类型
+  preparelevel: any; //编制级别
+  plcheck: boolean; //编制级别勾选框
   //重置
   reset() {
-    this.companyName = ''
+    this.companyName = "";
     // this.js = ''
     // this.jsId = ''
     // this.jscheck = false
-    this.unittype = ''
-    this.reservePlanType = ''
-    this.preparelevel = ''
-    this.plcheck = false
+    this.unittype = "";
+    this.reservePlanType = "";
+    this.preparelevel = "";
+    this.plcheck = false;
     //重新获取初始化列表
-    this.pageEvent.pageIndex = 0
-    this.PageNumber = 1
-    this.templatePlan = false
-    this.customPlan = false
+    this.pageEvent.pageIndex = 0;
+    this.PageNumber = 1;
+    this.templatePlan = false;
+    this.customPlan = false;
     this.getAllPlanInfo();
-    this.IsNewCompanyData = ''
-    this.IsNewData = ''
-
+    this.IsNewCompanyData = "";
+    this.IsNewData = "";
   }
 }
 
 @Component({
-  selector: 'PsViewer',
-  templateUrl: './PsvShow.html',
-  styleUrls: ['./open-plan.component.scss']
+  selector: "PsViewer",
+  templateUrl: "./PsvShow.html",
+  styleUrls: ["./open-plan.component.scss"],
 })
 export class GkhtmlPsViewer {
-  constructor(private router: Router, private http: HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<GkhtmlPsViewer>, @Inject(MAT_DIALOG_DATA) public data: any) { }
+  constructor(
+    private router: Router,
+    private http: HttpClient,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<GkhtmlPsViewer>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
   ngOnInit(): void {
     // console.log(this.data)
     const viewer = new Viewer({
-      container: document.querySelector('#viewer'),
-      panorama: '/api/Objects/PlanPlatform/' + this.data,
-
+      container: document.querySelector("#viewer"),
+      panorama: "/api/Objects/PlanPlatform/" + this.data,
     });
   }
 }

src/app/plan-management/pass-plan/open-or/open-or.component.html

@@ -0,0 +1,10 @@
+<h3 mat-dialog-title>选择要公开的消防救援站</h3>
+<div class="box">
+    <nz-tree #nzTreeComponent [nzData]="nodes" nzCheckable nzCheckStrictly [nzCheckedKeys]="defaultCheckedKeys"
+        [nzExpandedKeys]="defaultExpandedKeys">
+    </nz-tree>
+</div>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close [disabled]="isLoading">取消</button>
+    <button mat-button cdkFocusInitial (click)="save()" [disabled]="isLoading">确定</button>
+</mat-dialog-actions>

src/app/plan-management/pass-plan/open-or/open-or.component.scss

@@ -0,0 +1,4 @@
+.box{
+    max-height: 400px;
+    overflow-y: auto;
+}

src/app/plan-management/pass-plan/open-or/open-or.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OpenOrComponent } from './open-or.component';
+
+describe('OpenOrComponent', () => {
+  let component: OpenOrComponent;
+  let fixture: ComponentFixture<OpenOrComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OpenOrComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OpenOrComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/plan-management/pass-plan/open-or/open-or.component.ts

@@ -0,0 +1,126 @@
+import { HttpClient } from "@angular/common/http";
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  ViewChild,
+  Inject,
+} from "@angular/core";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import {
+  NzFormatEmitEvent,
+  NzTreeComponent,
+  NzTreeNodeOptions,
+} from "ng-zorro-antd/tree";
+
+@Component({
+  selector: "app-open-or",
+  templateUrl: "./open-or.component.html",
+  styleUrls: ["./open-or.component.scss"],
+})
+export class OpenOrComponent implements OnInit {
+  constructor(
+    private http: HttpClient,
+    public snackBar: MatSnackBar,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public dialogRef: MatDialogRef<OpenOrComponent>
+  ) {}
+  @ViewChild("nzTreeComponent", { static: false })
+  nzTreeComponent!: NzTreeComponent;
+  defaultCheckedKeys = [];
+  defaultExpandedKeys = [];
+  isLoading = false;
+  nodes: NzTreeNodeOptions[] = [];
+  ngOnInit(): void {
+    this.getOrganizations();
+  }
+
+  //获得所有组织机构
+  allorganizations = [];
+  getOrganizations() {
+    this.http.get("/api/Organizations").subscribe((data: any) => {
+      this.allorganizations = data;
+      this.getpresentOrganization();
+    });
+  }
+  //得到当前单位所在组织机构的tree型数据
+  organizationName;
+  getpresentOrganization() {
+    let orData = JSON.parse(JSON.stringify(this.allorganizations));
+    orData.forEach((item) => {
+      item.children = [];
+      orData.forEach((element) => {
+        if (element.parentId == item.id) {
+          item.children.push(element);
+        }
+      });
+    });
+    orData.forEach((item) => {
+      item.title = item.name;
+      item.key = item.id;
+      item.selectable = false;
+      if (item.children.length === 0) {
+        item.isLeaf = true;
+      }
+    });
+    this.http.get("/api/Account/Profiles").subscribe((data: any) => {
+      this.organizationName = data.organizationName;
+      if (this.organizationName) {
+        orData.forEach((item) => {
+          if (item.name == this.organizationName) {
+            function lookForAllId(data = [], arr = []) {
+              for (let item of data) {
+                arr.push(item.id);
+                if (item.children && item.children.length)
+                  lookForAllId(item.children, arr);
+              }
+              return arr;
+            }
+
+            function lookForNode(data, id, node = []) {
+              for (let item of data) {
+                if (item.id === id) {
+                  node.push(item);
+                } else {
+                  if (item.children && item.children.length) {
+                    lookForNode(item.children, id, node);
+                  }
+                }
+              }
+              return node;
+            }
+            if (this.data.plan.publicOrganizationIds.length === 0) {
+              this.defaultCheckedKeys = [...lookForAllId([item])];
+            } else {
+              this.defaultCheckedKeys = this.data.plan.publicOrganizationIds;
+            }
+
+            this.nodes = [...[item]];
+          }
+        });
+      }
+    });
+  }
+  save() {
+    let ids =
+      this.nzTreeComponent.getCheckedNodeList().map((item) => {
+        return item.key;
+      }) || [];
+    if (ids.length === 0) {
+      this.snackBar.open("至少选择一个队站公开", "确定", {
+        verticalPosition: "top",
+        duration: 3000,
+      });
+    }
+    this.http
+      .put(`/api/PlanAudits/${this.data.plan.id}/Public`, ids)
+      .subscribe((data) => {
+        this.snackBar.open("预案已公开", "确定", {
+          verticalPosition: "top",
+          duration: 3000,
+        });
+        this.dialogRef.close("公开成功");
+      });
+  }
+}

src/app/plan-management/pass-plan/pass-plan.component.html

@@ -187,15 +187,13 @@
               margin: 3px 0 0 3px;" src="../../../assets/images/custom.png" alt="">
           </td>
         </ng-container>
-        <ng-container matColumnDef="auditStatus">
-          <th mat-header-cell *matHeaderCellDef>新增审核</th>
-          <td mat-cell *matCellDef="let element">{{element.newVerifyState}}</td>
-        </ng-container>
-        <ng-container matColumnDef="weihuState">
-          <th mat-header-cell *matHeaderCellDef>维护审核</th>
-          <td mat-cell *matCellDef="let element">{{element.maintenanceVerifyState}}</td>
-        </ng-container>
 
+        <ng-container matColumnDef="auditstate">
+          <th mat-header-cell *matHeaderCellDef>审核状态</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.auditStatus | auditState}}
+          </td>
+        </ng-container>
         <ng-container matColumnDef="openRange">
           <th mat-header-cell *matHeaderCellDef>是否公开</th>
           <td mat-cell *matCellDef="let element">{{element.openRange}}</td>

src/app/plan-management/pass-plan/pass-plan.component.ts

@@ -1,38 +1,64 @@
-import { Component, OnInit, ViewChild, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http'
-import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
-import { MatPaginator } from '@angular/material/paginator';
-import { FlatTreeControl } from '@angular/cdk/tree';
-import { FormControl } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router'
-import { PageEvent } from '@angular/material/paginator';
-import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { TreeService } from '../../http-interceptors/tree.service'
-import { Viewer } from 'photo-sphere-viewer';
-import { ImgDetails, PsViewer } from '../entry-plan-look/entry-plan-look.component';
-declare var CryptoJS
+import { Component, OnInit, ViewChild, Inject } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import {
+  MatTreeFlatDataSource,
+  MatTreeFlattener,
+} from "@angular/material/tree";
+import { MatPaginator } from "@angular/material/paginator";
+import { FlatTreeControl } from "@angular/cdk/tree";
+import { FormControl } from "@angular/forms";
+import { Router, ActivatedRoute } from "@angular/router";
+import { PageEvent } from "@angular/material/paginator";
+import {
+  MatDialogRef,
+  MatDialog,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import { TreeService } from "../../http-interceptors/tree.service";
+import { Viewer } from "photo-sphere-viewer";
+import {
+  ImgDetails,
+  PsViewer,
+} from "../entry-plan-look/entry-plan-look.component";
+import { OpenOrComponent } from "./open-or/open-or.component";
+declare var CryptoJS;
 @Component({
-  selector: 'app-pass-plan',
-  templateUrl: './pass-plan.component.html',
-  styleUrls: ['./pass-plan.component.scss']
+  selector: "app-pass-plan",
+  templateUrl: "./pass-plan.component.html",
+  styleUrls: ["./pass-plan.component.scss"],
 })
 export class PassPlanComponent implements OnInit {
+  constructor(
+    private http: HttpClient,
+    private router: Router,
+    private route: ActivatedRoute,
+    private tree: TreeService,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar
+  ) {}
 
-  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, private tree: TreeService, public dialog: MatDialog, public snackBar: MatSnackBar) { }
-
-  private _transformer = (node, level: number) => {   //初始化tree
+  private _transformer = (node, level: number) => {
+    //初始化tree
     return {
       expandable: !!node.children && node.children.length > 0,
       name: node.name,
       level: level,
       id: node.id,
       parentId: node.parentId,
-      children: node.children
+      children: node.children,
     };
-  }
-  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
-  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
+  };
+  treeControl = new FlatTreeControl<any>(
+    (node) => node.level,
+    (node) => node.expandable
+  );
+  treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    (node) => node.level,
+    (node) => node.expandable,
+    (node) => node.children
+  );
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
   myControl = new FormControl();
   hasChild = (_: number, node: any) => node.expandable;
@@ -42,118 +68,138 @@ export class PassPlanComponent implements OnInit {
   paginator: MatPaginator;
   length: any; //共多少条数据
   pageSize: any; //每页条数
-  pageSizeOptions: number[] = [10] //设置每页条数
+  pageSizeOptions: number[] = [10]; //设置每页条数
   PageNumber: any; //第几页
 
-  displayedColumns: string[] = ['state', 'planname', 'addpeople', 'level', 'addtime', 'plantype', 'auditStatus', 'weihuState', 'openRange', 'projectlevel', 'operation'];
-  allorganizations: any //所有组织机构
-  allunittype: any //所有单位类型
-  tabledataSource: any //表格数据
-  IsNewData = '' //维护更新活新增
-  url
+  displayedColumns: string[] = [
+    "state",
+    "planname",
+    "addpeople",
+    "level",
+    "addtime",
+    "plantype",
+    "auditstate",
+    "openRange",
+    "projectlevel",
+    "operation",
+  ];
+  allorganizations: any; //所有组织机构
+  allunittype: any; //所有单位类型
+  tabledataSource: any; //表格数据
+  IsNewData = ""; //维护更新活新增
+  url;
 
-  preparelevels: any
+  preparelevels: any;
   ngOnInit(): void {
     if (window.matchMedia("(max-width: 1400px)").matches) {
-      this.pcMore = false
-      this.padMore = true
-      this.pcfind = false
-      this.padjt = true
+      this.pcMore = false;
+      this.padMore = true;
+      this.pcfind = false;
+      this.padjt = true;
     } else {
-      this.pcfind = true
-      this.pcMore = true
-      this.padMore = false
-      this.padjt = false
+      this.pcfind = true;
+      this.pcMore = true;
+      this.padMore = false;
+      this.padjt = false;
     }
     this.getunitdata();
     this.getOrganizations();
     this.getUnittype();
     this.getAllPlanInfo();
     let level = sessionStorage.getItem("level");
-    if (level == "0") {//如果是总队
+    if (level == "0") {
+      //如果是总队
       this.preparelevels = [
         { name: "总队", value: "1" },
         { name: "支队", value: "2" },
         { name: "大队", value: "4" },
-        { name: "中队", value: "8" }
-      ]
+        { name: "中队", value: "8" },
+      ];
     }
-    if (level == "1") {//如果是支队
+    if (level == "1") {
+      //如果是支队
       this.preparelevels = [
         { name: "支队", value: "2" },
         { name: "大队", value: "4" },
-        { name: "中队", value: "8" }
-      ]
+        { name: "中队", value: "8" },
+      ];
     }
-    if (level == "2") {//如果是大队
+    if (level == "2") {
+      //如果是大队
       this.preparelevels = [
         { name: "大队", value: "4" },
-        { name: "中队", value: "8" }
-      ]
+        { name: "中队", value: "8" },
+      ];
     }
-    if (level == "3") {//如果是中队
-      this.preparelevels = [
-        { name: "中队", value: "8" }
-      ]
+    if (level == "3") {
+      //如果是中队
+      this.preparelevels = [{ name: "中队", value: "8" }];
     }
-    this.url = window.location.href.substring(window.location.href.length - 1, window.location.href.length)
+    this.url = window.location.href.substring(
+      window.location.href.length - 1,
+      window.location.href.length
+    );
     //console.log(this.url)
   }
-  pcMore//pc更多
-  pcput = false//pc收起
-  pcfind//pc查询
-  padjt = false
-  padMore = true//pad收缩控制
-  padput = false//pad收起按钮
-  imgsrcopen = "../../../assets/images/routdown2.png"
-  imgsrcdown = "../../../assets/images/routup2.png"
+  pcMore; //pc更多
+  pcput = false; //pc收起
+  pcfind; //pc查询
+  padjt = false;
+  padMore = true; //pad收缩控制
+  padput = false; //pad收起按钮
+  imgsrcopen = "../../../assets/images/routdown2.png";
+  imgsrcdown = "../../../assets/images/routup2.png";
   pcInfo() {
-    this.pcMore = !this.pcMore
-    this.pcput = !this.pcput
+    this.pcMore = !this.pcMore;
+    this.pcput = !this.pcput;
   }
   padInfo() {
-    this.padMore = !this.padMore
-    this.padput = !this.padput
+    this.padMore = !this.padMore;
+    this.padput = !this.padput;
   }
 
-  allPlanInfo: any //存储所有预案信息
-  IsNewCompanyData = '' //单位是新增还是维护更新
-  templatePlan: boolean = false//模板录入预案checkbox
-  customPlan: boolean = false//自定义预案
+  allPlanInfo: any; //存储所有预案信息
+  IsNewCompanyData = ""; //单位是新增还是维护更新
+  templatePlan: boolean = false; //模板录入预案checkbox
+  customPlan: boolean = false; //自定义预案
   //获得所有预案信息
   getAllPlanInfo() {
-    let planmode = []
-    this.templatePlan ? planmode.push(2) : null
-    this.customPlan ? planmode.push(4) : null
-    let reservePlanType
-    this.reservePlanType ? reservePlanType = JSON.parse(JSON.stringify(this.reservePlanType)) : reservePlanType = ''
+    let planmode = [];
+    this.templatePlan ? planmode.push(2) : null;
+    this.customPlan ? planmode.push(4) : null;
+    let reservePlanType;
+    this.reservePlanType
+      ? (reservePlanType = JSON.parse(JSON.stringify(this.reservePlanType)))
+      : (reservePlanType = "");
     if (this.reservePlanType && this.reservePlanType.length != 0) {
-      reservePlanType = eval(this.reservePlanType.join("|"))
+      reservePlanType = eval(this.reservePlanType.join("|"));
     }
     let paramsdata: any = {
-      CompanyName: this.companyName || '',
-      OrganizationId: this.jsId || '',
-      HasChildrenOrganization: this.jscheck || '',
-      BuildingTypeId: this.unittype || '',
-      PlanType: this.reservePlanType || '',
-      AuditStatus: '', //审核状态
-      PlanLevel: this.preparelevel || '',
-      HasChildrenPlanLevel: this.plcheck || '',
-      CreationTimeRangeStart: this.addtime || '',
-      CreationTimeRangeEnd: this.endtime || '',
-      PageNumber: this.PageNumber || '1',
+      CompanyName: this.companyName || "",
+      OrganizationId: this.jsId || "",
+      HasChildrenOrganization: this.jscheck || "",
+      BuildingTypeId: this.unittype || "",
+      PlanType: this.reservePlanType || "",
+      AuditStatus: "", //审核状态
+      PlanLevel: this.preparelevel || "",
+      HasChildrenPlanLevel: this.plcheck || "",
+      CreationTimeRangeStart: this.addtime || "",
+      CreationTimeRangeEnd: this.endtime || "",
+      PageNumber: this.PageNumber || "1",
       PageSize: this.pageSizeOptions[0],
-      Sort: '',
+      Sort: "",
       PlanCategories: this.planCategory,
       IsNewData: this.IsNewData,
       IsNewCompanyData: this.IsNewCompanyData,
-      PlanModes: planmode
-    }
-    this.http.get("/api/ApprovedPlans", { params: paramsdata }).subscribe((data: any) => {
-      this.length = data.totalCount
-      this.allPlanInfo = data
-      this.tabledataSource = data.items
-    })
+      PlanModes: planmode,
+    };
+    this.http
+      .get("/api/ApprovedPlans", { params: paramsdata })
+      .subscribe((data: any) => {
+        this.length = data.totalCount;
+        this.allPlanInfo = data;
+        this.tabledataSource = data.items;
+      });
   }
 
   colorRgb(sColor) {
@@ -185,7 +231,7 @@ export class PassPlanComponent implements OnInit {
       var strHex = "#";
       for (var i = 0; i < aColor.length; i++) {
         var hex: any = Number(aColor[i]).toString(16);
-        hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
+        hex = hex < 10 ? 0 + "" + hex : hex; // 保证每个rgb的值为2位
         if (hex === "0") {
           hex += hex;
         }
@@ -202,7 +248,7 @@ export class PassPlanComponent implements OnInit {
       } else if (aNum.length === 3) {
         var numHex = "#";
         for (var i = 0; i < aNum.length; i += 1) {
-          numHex += (aNum[i] + aNum[i]);
+          numHex += aNum[i] + aNum[i];
         }
         return numHex;
       }
@@ -212,8 +258,8 @@ export class PassPlanComponent implements OnInit {
   }
 
   gradientColor(startColor, endColor, step) {
-    let _this = this
-    let startRGB = _this.colorRgb(startColor);//转换为rgb数组模式
+    let _this = this;
+    let startRGB = _this.colorRgb(startColor); //转换为rgb数组模式
     let startR = startRGB[0];
     let startG = startRGB[1];
     let startB = startRGB[2];
@@ -223,118 +269,115 @@ export class PassPlanComponent implements OnInit {
     let endG = endRGB[1];
     let endB = endRGB[2];
 
-    let sR = (endR - startR) / step;//总差值
+    let sR = (endR - startR) / step; //总差值
     let sG = (endG - startG) / step;
     let sB = (endB - startB) / step;
 
     var colorArr = [];
     for (var i = 0; i < step; i++) {
-      //计算每一步的hex值 
-      var hex = _this.colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
+      //计算每一步的hex值
+      var hex = _this.colorHex(
+        "rgb(" +
+          parseInt(sR * i + startR) +
+          "," +
+          parseInt(sG * i + startG) +
+          "," +
+          parseInt(sB * i + startB) +
+          ")"
+      );
       colorArr.push(hex);
     }
     return colorArr;
   }
   integrity(width) {
-    let _this = this
+    let _this = this;
 
-    let style: any = {}
-    style.width = width + '%';
+    let style: any = {};
+    style.width = width + "%";
     if (width < 30) {
-      let colorArr = this.gradientColor('#D50000', '#E53935', 30);
+      let colorArr = this.gradientColor("#D50000", "#E53935", 30);
       for (let i = 0; i < 30; i++) {
         if (i == width) {
-          style.background = colorArr[i]
+          style.background = colorArr[i];
         }
       }
     }
     if (width >= 30 && width < 60) {
-      let colorArr = this.gradientColor('#FF9800', '#E65100', 30);
+      let colorArr = this.gradientColor("#FF9800", "#E65100", 30);
       for (let i = 30; i < 60; i++) {
         if (i == width) {
-          style.background = colorArr[i - 30]
+          style.background = colorArr[i - 30];
         }
       }
     }
     if (width >= 60) {
-      let colorArr = this.gradientColor('#81C784', '#2E7D32', 41);
+      let colorArr = this.gradientColor("#81C784", "#2E7D32", 41);
       for (let i = 60; i <= 100; i++) {
         if (i == width) {
-          style.background = colorArr[i - 60]
+          style.background = colorArr[i - 60];
         }
       }
     }
-    return style
+    return style;
   }
   integrityDetails(width, zong) {
-    let style: any = {}
-    style.width = (width / zong) * 100 + '%';
-    return style
+    let style: any = {};
+    style.width = (width / zong) * 100 + "%";
+    return style;
   }
 
-
-
   //得到当前单位信息
   getunitdata() {
-    this.http.get("/api/Account/Profiles").subscribe(
-      (data: any) => {
-        this.organizationName = data.organizationName
-      }
-    )
+    this.http.get("/api/Account/Profiles").subscribe((data: any) => {
+      this.organizationName = data.organizationName;
+    });
   }
-  addtime//开始时间
-  endtime//结束时间
-  integrityScoreMin//完整度最小值
-  integrityScoreMax//完整度最大值
-  organizationName: any //当前单位组织机构名称
-  treedata: any //组织机构树型数据
-  newArr: any = []
-  newallorganizations: any //用于存储在原始数据基础上的每个机构增加children字段
+  addtime; //开始时间
+  endtime; //结束时间
+  integrityScoreMin; //完整度最小值
+  integrityScoreMax; //完整度最大值
+  organizationName: any; //当前单位组织机构名称
+  treedata: any; //组织机构树型数据
+  newArr: any = [];
+  newallorganizations: any; //用于存储在原始数据基础上的每个机构增加children字段
   //得到当前单位所在组织机构的tree型数据
   getpresentOrganization() {
-    this.newallorganizations = this.allorganizations
-    this.newallorganizations.forEach(item => {
-      item.children = []
-      this.newallorganizations.forEach(element => {
+    this.newallorganizations = this.allorganizations;
+    this.newallorganizations.forEach((item) => {
+      item.children = [];
+      this.newallorganizations.forEach((element) => {
         if (element.parentId == item.id) {
-          item.children.push(element)
+          item.children.push(element);
         }
       });
     });
-    this.http.get("/api/Account/Profiles").subscribe(
-      (data: any) => {
-        this.organizationName = data.organizationName
-        if (this.organizationName) {
-          this.newallorganizations.forEach(item => {
-            if (item.name == this.organizationName) {
-              this.dataSource.data = [item]
-            }
-          });
-        } else {
-          this.dataSource.data = this.tree.toTree(this.treedata);
-        }
+    this.http.get("/api/Account/Profiles").subscribe((data: any) => {
+      this.organizationName = data.organizationName;
+      if (this.organizationName) {
+        this.newallorganizations.forEach((item) => {
+          if (item.name == this.organizationName) {
+            this.dataSource.data = [item];
+          }
+        });
+      } else {
+        this.dataSource.data = this.tree.toTree(this.treedata);
       }
-    )
-
+    });
   }
   //获得所有组织机构
   getOrganizations() {
-    this.http.get('/api/Organizations').subscribe(
-      (data: any) => {
-        this.allorganizations = data
-        this.treedata = this.tree.toTree(data);
-        this.getpresentOrganization();
-      }
-    )
+    this.http.get("/api/Organizations").subscribe((data: any) => {
+      this.allorganizations = data;
+      this.treedata = this.tree.toTree(data);
+      this.getpresentOrganization();
+    });
   }
 
   //获得所有单位类型
   getUnittype() {
-    this.http.get('/api/BuildingTypes/Simple').subscribe(
-      data => {
-        this.allunittype = data
-      }
-    )
+    this.http.get("/api/BuildingTypes/Simple").subscribe((data) => {
+      this.allunittype = data;
+    });
   }
   //查看单位信息
   lookUnitInfo(element) {
@@ -343,194 +386,239 @@ export class PassPlanComponent implements OnInit {
     //   width: '1500px',
     //   height:'800px'
     // });
-    sessionStorage.setItem("editable", "0")
-    sessionStorage.setItem("companyName", element.company.name)
-    sessionStorage.setItem("companyId", element.company.id)
-    sessionStorage.setItem(element.company.id, JSON.stringify(element.company.companyIntegrityScore))
-    window.open(`/keyUnit/viewunitinfo?id=${element.company.id}&usci=${element.company.usci}`, '_blank');
+    sessionStorage.setItem("editable", "0");
+    sessionStorage.setItem("companyName", element.company.name);
+    sessionStorage.setItem("companyId", element.company.id);
+    sessionStorage.setItem(
+      element.company.id,
+      JSON.stringify(element.company.companyIntegrityScore)
+    );
+    window.open(
+      `/keyUnit/viewunitinfo?id=${element.company.id}&usci=${element.company.usci}`,
+      "_blank"
+    );
   }
 
   //跳转查看预案页面 审核通过预案
   routerTo(e) {
-    console.log(e)
+    console.log(e);
     if (e.planType == 16 || e.planType == 4 || e.planType == 8) {
       if (e.planType == 16 && e.attachmentUrls == null) {
-        window.open(`/planManagement/createplanonlinefive?navIsOpen=false&companyId=${e.companyId}&planName=${e.name}&unitName=${e.company.name}&planCategory=${e.planCategory}&planId=${e.id}&unitTypeId=${e.company.buildingTypes[0].id}&orName=${e.company.organizationName}&orId=${e.company.organizationId}&pattern=false`)
+        window.open(
+          `/planManagement/createplanonlinefive?navIsOpen=false&companyId=${e.companyId}&planName=${e.name}&unitName=${e.company.name}&planCategory=${e.planCategory}&planId=${e.id}&unitTypeId=${e.company.buildingTypes[0].id}&orName=${e.company.organizationName}&orId=${e.company.organizationId}&pattern=false`
+        );
       } else {
-        var index = e.attachmentUrls[0].indexOf("\/")
-        if (e.attachmentUrls[0].substr(0, index) == 'psw') {
+        var index = e.attachmentUrls[0].indexOf("/");
+        if (e.attachmentUrls[0].substr(0, index) == "psw") {
           const dialogRef = this.dialog.open(PsViewer, {
-            width: '1500px',
-            height: '800px',
-            data: e.attachmentUrls[0]
+            width: "1500px",
+            height: "800px",
+            data: e.attachmentUrls[0],
           });
-        } else if (e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'JPG' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'png' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'jpeg' || e.attachmentUrls[0].substr(e.attachmentUrls[0].length - 3, e.attachmentUrls[0].length) == 'jpg') {
-          let data = e
-          const dialogRef = this.dialog.open(ImgDetails, {//调用open方法打开对话框并且携带参数过去
+        } else if (
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "JPG" ||
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "png" ||
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "jpeg" ||
+          e.attachmentUrls[0].substr(
+            e.attachmentUrls[0].length - 3,
+            e.attachmentUrls[0].length
+          ) == "jpg"
+        ) {
+          let data = e;
+          const dialogRef = this.dialog.open(ImgDetails, {
+            //调用open方法打开对话框并且携带参数过去
             data: data.attachmentUrls,
           });
           dialogRef.afterClosed().subscribe();
         } else {
-          let fetchUrl = e.attachmentUrls[0]
+          let fetchUrl = e.attachmentUrls[0];
           if (fetchUrl) {
-            let suffix = fetchUrl.split('.')[fetchUrl.split('.').length - 1].toLowerCase()
-            if (suffix == 'docx' || suffix == 'doc') {
-              let arr = fetchUrl.split('.')
-              arr[arr.length - 1] = 'pdf'
-              window.open(`/api/Objects/PlanPlatform/` + arr.join('.'))
-            } else if (suffix == 'pdf') {
-              window.open(`/api/Objects/PlanPlatform/` + fetchUrl)
+            let suffix = fetchUrl
+              .split(".")
+              [fetchUrl.split(".").length - 1].toLowerCase();
+            if (suffix == "docx" || suffix == "doc") {
+              let arr = fetchUrl.split(".");
+              arr[arr.length - 1] = "pdf";
+              window.open(`/api/Objects/PlanPlatform/` + arr.join("."));
+            } else if (suffix == "pdf") {
+              window.open(`/api/Objects/PlanPlatform/` + fetchUrl);
             } else {
               let config = new MatSnackBarConfig();
-              config.verticalPosition = 'top';
-              config.duration = 3000
-              this.snackBar.open('该文件类型暂不支持在线查看', '确定', config);
+              config.verticalPosition = "top";
+              config.duration = 3000;
+              this.snackBar.open("该文件类型暂不支持在线查看", "确定", config);
             }
           }
         }
       }
     }
 
-    if (e.planMode == 2 && e.planType == 1) {  //如果是在线编辑
-      let id = e.id
-      sessionStorage.setItem("planId", id)
-      sessionStorage.setItem("companyId", e.companyId)
+    if (e.planMode == 2 && e.planType == 1) {
+      //如果是在线编辑
+      let id = e.id;
+      sessionStorage.setItem("planId", id);
+      sessionStorage.setItem("companyId", e.companyId);
       //sessionStorage.setItem("buildingTypeId",this.unittypeId)
-      sessionStorage.setItem("editable", "0")
-      sessionStorage.setItem("planName", e.name)
-      let companyId = sessionStorage.getItem("companyId")
+      sessionStorage.setItem("editable", "0");
+      sessionStorage.setItem("planName", e.name);
+      let companyId = sessionStorage.getItem("companyId");
       window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`);
     }
-    if (e.planMode == 3) {  //如果是跳转网页
-      sessionStorage.setItem("url", e.url)
-      window.open(`/planManagement/webLook`)
+    if (e.planMode == 3) {
+      //如果是跳转网页
+      sessionStorage.setItem("url", e.url);
+      window.open(`/planManagement/webLook`);
     }
   }
   templatePlanChange($event, type) {
     if (type == 1) {
-      this.templatePlan = $event
+      this.templatePlan = $event;
     } else if (type == 2) {
-      this.customPlan = $event
+      this.customPlan = $event;
     }
     if (this.templatePlan || this.customPlan) {
-      this.reservePlanType = ['16']
+      this.reservePlanType = ["16"];
     } else {
-      this.reservePlanType = []
+      this.reservePlanType = [];
     }
   }
   //预案公开
   openReserve(e) {
-    this.http.put(`/api/PlanAudits/${e.id}/Public`, []).subscribe(data => {
-      const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('预案已公开', '确定', config);
-    })
+    const dialogRef = this.dialog.open(OpenOrComponent, {
+      width: "500px",
+      data: { plan: e },
+    });
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result && result === "公开成功") {
+        this.getAllPlanInfo();
+      }
+    });
   }
 
   //预案取消公开
   closeReserve(e) {
-    this.http.put(`/api/PlanAudits/${e.id}/Unpublic`, []).subscribe(data => {
+    this.http.put(`/api/PlanAudits/${e.id}/Unpublic`, []).subscribe((data) => {
       const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('预案已取消公开', '确定', config);
-    })
+      config.verticalPosition = "top";
+      config.duration = 3000;
+      this.snackBar.open("预案已取消公开", "确定", config);
+      this.getAllPlanInfo();
+    });
   }
 
   //分页事件
   chagePage(e) {
-    this.PageNumber = e.pageIndex + 1
+    this.PageNumber = e.pageIndex + 1;
     this.getAllPlanInfo();
   }
 
   //辖区中队div是否显示
-  isorganizationbox: boolean = false
+  isorganizationbox: boolean = false;
   //点击辖区中队树，将选择的辖区中队添加到变量
   add(node) {
-    this.isorganizationbox = false
-    this.js = node.name
-    this.jsId = node.id
+    this.isorganizationbox = false;
+    this.js = node.name;
+    this.jsId = node.id;
   }
   //关闭辖区中队隐藏框
   closeorganizationbox() {
-    this.isorganizationbox = false
+    this.isorganizationbox = false;
   }
   //打开辖区中队隐藏框
   openorganizationbox() {
-    this.isorganizationbox = true
+    this.isorganizationbox = true;
   }
   //关闭出现的组织机构div
   closediv() {
-    this.isorganizationbox = false
+    this.isorganizationbox = false;
   }
   //查询
   onSubmit(e) {
-    this.PageNumber = 1
-    this.pageEvent.pageIndex = 0
-    this.getAllPlanInfo()
+    this.PageNumber = 1;
+    this.pageEvent.pageIndex = 0;
+    this.getAllPlanInfo();
   }
-  companyName: any //单位名称
-  js: any //所选组织机构
-  jsId: any //所选组织机构的id
-  jscheck: boolean //所选组织机构勾选框
-  unittype: any //单位类型
-  reservePlanType: any //预案类型
-  preparelevel: any //编制级别
-  plcheck: boolean //编制级别勾选框
-  planCategory = []//预案级别
+  companyName: any; //单位名称
+  js: any; //所选组织机构
+  jsId: any; //所选组织机构的id
+  jscheck: boolean; //所选组织机构勾选框
+  unittype: any; //单位类型
+  reservePlanType: any; //预案类型
+  preparelevel: any; //编制级别
+  plcheck: boolean; //编制级别勾选框
+  planCategory = []; //预案级别
   //重置
   reset() {
-    this.IsNewData = ''
-    this.IsNewCompanyData = ''
-    this.companyName = ''
-    this.js = ''
-    this.jsId = ''
-    this.jscheck = false
-    this.unittype = ''
-    this.reservePlanType = ''
-    this.preparelevel = ''
-    this.addtime = ''
-    this.endtime = ''
-    this.plcheck = false
+    this.IsNewData = "";
+    this.IsNewCompanyData = "";
+    this.companyName = "";
+    this.js = "";
+    this.jsId = "";
+    this.jscheck = false;
+    this.unittype = "";
+    this.reservePlanType = "";
+    this.preparelevel = "";
+    this.addtime = "";
+    this.endtime = "";
+    this.plcheck = false;
     //重新获取初始化列表
-    this.pageEvent.pageIndex = 0
-    this.PageNumber = 1
-    this.planCategory = []
+    this.pageEvent.pageIndex = 0;
+    this.PageNumber = 1;
+    this.planCategory = [];
 
-
-    this.templatePlan = false
-    this.customPlan = false
+    this.templatePlan = false;
+    this.customPlan = false;
     this.getAllPlanInfo();
   }
 }
 
 @Component({
-  selector: 'PsViewer',
-  templateUrl: './PsvShow.html',
-  styleUrls: ['./pass-plan.component.scss']
+  selector: "PsViewer",
+  templateUrl: "./PsvShow.html",
+  styleUrls: ["./pass-plan.component.scss"],
 })
 export class GkPsViewer {
-  constructor(private router: Router, private http: HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<GkPsViewer>, @Inject(MAT_DIALOG_DATA) public data: any) { }
+  constructor(
+    private router: Router,
+    private http: HttpClient,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<GkPsViewer>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
   ngOnInit(): void {
     // console.log(this.data)
     const viewer = new Viewer({
-      container: document.querySelector('#viewer'),
-      panorama: '/api/Objects/PlanPlatform/' + this.data,
-
+      container: document.querySelector("#viewer"),
+      panorama: "/api/Objects/PlanPlatform/" + this.data,
     });
   }
 }
 
-
 @Component({
-  selector: 'unitInfo',
-  templateUrl: './unitInfo.html',
-  styleUrls: ['./pass-plan.component.scss']
+  selector: "unitInfo",
+  templateUrl: "./unitInfo.html",
+  styleUrls: ["./pass-plan.component.scss"],
 })
 export class UnitInfo {
-  constructor(private router: Router, private http: HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<UnitInfo>, @Inject(MAT_DIALOG_DATA) public data: any) { }
+  constructor(
+    private router: Router,
+    private http: HttpClient,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<UnitInfo>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
   ngOnInit(): void {
     // console.log(this.data)
   }
-}
+}

src/app/plan-management/plan-management-routing.module.ts

@@ -38,9 +38,9 @@ const routes: Routes = [
   { path: 'maintainup',component:MaintainUpComponent},//维护更新
   { path: 'reinforceplan',component:ReinforcePlanComponent},//增援预案
   { path: 'createplanonlinefive',component:CreatePlanOnlineFiveComponent},//在线编制五级预案
-  { path: 'sixFamiliarity',component:SixFamiliarityComponent},//六熟悉
-  { path: 'drillRecord',component:DrillRecordComponent},//演练记录
-  { path: 'PlanDeduction',component:PlanDeductionComponent},//预案推演
+  // { path: 'sixFamiliarity',component:SixFamiliarityComponent},//六熟悉
+  // { path: 'drillRecord',component:DrillRecordComponent},//演练记录
+  // { path: 'PlanDeduction',component:PlanDeductionComponent},//预案推演
 ];
 
 @NgModule({

src/app/plan-management/plan-management.module.ts

@@ -55,7 +55,13 @@ import {
   ChangeName,
   ImgDetails,
 } from "./entry-plan-look/entry-plan-look.component";
-import { PlanType, AuditSatus, PlanLevel, state } from "../pipes/boolean.pipe";
+import {
+  PlanType,
+  AuditSatus,
+  PlanLevel,
+  state,
+  auditState,
+} from "../pipes/boolean.pipe";
 import { WebLookComponent } from "./web-look/web-look.component";
 import { OnetwoEntryPlanComponent } from "./onetwo-entry-plan/onetwo-entry-plan.component";
 import { newunitComponent } from "./onetwo-entry-plan/onetwo-entry-plan.component";
@@ -99,6 +105,8 @@ import { PlanDeductionComponent } from "./plan-deduction/plan-deduction.componen
 import { AddPlanComponent } from "./plan-deduction/add-plan/add-plan.component";
 import { NzSelectModule } from "ng-zorro-antd/select";
 import { NzSpinModule } from "ng-zorro-antd/spin";
+import { OpenOrComponent } from "./pass-plan/open-or/open-or.component";
+import { NzTreeModule } from "ng-zorro-antd/tree";
 @NgModule({
   declarations: [
     EntryPlanComponent,
@@ -147,6 +155,8 @@ import { NzSpinModule } from "ng-zorro-antd/spin";
     SixFamiliarizeComponent,
     PlanDeductionComponent,
     AddPlanComponent,
+    OpenOrComponent,
+    auditState,
   ],
   imports: [
     CommonModule,
@@ -204,7 +214,15 @@ import { NzSpinModule } from "ng-zorro-antd/spin";
     NzTreeSelectModule,
     NzSelectModule,
     NzSpinModule,
+    NzTreeModule,
+  ],
+  exports: [
+    PlanType,
+    AuditSatus,
+    PlanLevel,
+    state,
+    CreatePlanOnlineFiveComponent,
+    auditState,
   ],
-  exports: [PlanType, AuditSatus, PlanLevel, state],
 })
 export class PlanManagementModule {}

src/app/plan-management/reinforce-plan/reinforce-plan.component.html

@@ -2,47 +2,47 @@
   <div class="header">
     <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
       <div class="queryBox">
-  
+
         <div class="queryField">
           <label style="margin-right: 10px;">单位名称:</label>
           <mat-form-field class="example-full-width">
             <input matInput placeholder="请输入单位名称" name="companyName" [(ngModel)]="companyName" autocomplete="off">
           </mat-form-field>
         </div>
-  
+
         <div class="queryField ordiv">
           <label style="margin-right: 10px;">消防救援站:</label>
           <mat-form-field class="example-full-width">
-            <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()">
+            <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"
+              (focus)="openorganizationbox()">
           </mat-form-field>
           <mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
-          <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'> </span>
-          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'> </span>
+          <span *ngIf="padMore" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img
+              [src]='imgsrcopen'> </span>
+          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'>
+          </span>
           <div class="organizationbox" *ngIf="isorganizationbox">
-              <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
-              <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-                  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  (click)='add(node)' class="organizationlist">
-                      <button type="button" mat-icon-button disabled ></button>
-                      <li>{{node.name}}</li>
-                  </mat-tree-node>
-                  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)='add(node)'  class="organizationlist">
-                      <button 
-                          type="button" 
-                          mat-icon-button 
-                          matTreeNodeToggle
-                          [attr.aria-label]="'toggle ' + node.name">
-                      <mat-icon class="mat-icon-rtl-mirror">
-                          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-                      </mat-icon>
-                      </button>
-                      <li>{{node.name}}</li>
-                  </mat-tree-node>
-              </mat-tree>  
+            <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
+            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+              <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='add(node)' class="organizationlist">
+                <button type="button" mat-icon-button disabled></button>
+                <li>{{node.name}}</li>
+              </mat-tree-node>
+              <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='add(node)'
+                class="organizationlist">
+                <button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
+                  <mat-icon class="mat-icon-rtl-mirror">
+                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                  </mat-icon>
+                </button>
+                <li>{{node.name}}</li>
+              </mat-tree-node>
+            </mat-tree>
           </div>
         </div>
         <div class="queryField" *ngIf="!pcfind">
           <button mat-raised-button color="primary">查询</button>
-          <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
         </div>
         <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">编制级别:</label>
@@ -58,14 +58,14 @@
           <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
         </div>
         <div class="queryField" *ngIf="!padMore">
-            <label style="margin-right: 10px;">单位类型:</label>
-            <mat-form-field>
-                <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype">
-                    <mat-option *ngFor="let unit of allunittype" [value]="unit.id" >
-                        {{unit.name}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
+          <label style="margin-right: 10px;">单位类型:</label>
+          <mat-form-field>
+            <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype">
+              <mat-option *ngFor="let unit of allunittype" [value]="unit.id">
+                {{unit.name}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
         </div>
         <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">预案类型:</label>
@@ -80,100 +80,96 @@
         </div>
         <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">单位状态:</label>
-      <mat-form-field>
-          <mat-select placeholder='请选择单位状态' [(ngModel)]="IsNewCompanyData" name="IsNewCompanyData">
+          <mat-form-field>
+            <mat-select placeholder='请选择单位状态' [(ngModel)]="IsNewCompanyData" name="IsNewCompanyData">
               <mat-option value='true'>新增</mat-option>
               <mat-option value="false">维护更新</mat-option>
-          </mat-select>
-      </mat-form-field>
+            </mat-select>
+          </mat-form-field>
         </div>
         <div class="queryField" *ngIf="!padMore">
           <label style="margin-right: 10px;">预案状态:</label>
-      <mat-form-field>
-          <mat-select placeholder='请选择预案状态' [(ngModel)]="IsNewData" name="IsNewData">
+          <mat-form-field>
+            <mat-select placeholder='请选择预案状态' [(ngModel)]="IsNewData" name="IsNewData">
               <mat-option value='true'>新增</mat-option>
               <mat-option value="false">维护更新</mat-option>
-          </mat-select>
-      </mat-form-field>
+            </mat-select>
+          </mat-form-field>
         </div>
         <div class="queryField" style="width: 100%;text-align: center;" *ngIf="pcfind">
           <button mat-raised-button color="primary" type="submit">查询</button>
           <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+        </div>
+
       </div>
-  
-      </div>
-      
+
     </form>
-</div>
-<!-- <mat-divider></mat-divider> -->
-<div class="body">
+  </div>
+  <!-- <mat-divider></mat-divider> -->
+  <div class="body">
     <div class="tablebox">
 
-        <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
-          <ng-container matColumnDef="state">
-            <th mat-header-cell *matHeaderCellDef style="width: 10%;">预案状态</th>
-            <td mat-cell *matCellDef="let element">
-              <span class="add" *ngIf="element.isNewData">新增</span>
-              <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
-            </td>
+      <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
+        <ng-container matColumnDef="state">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">预案状态</th>
+          <td mat-cell *matCellDef="let element">
+            <span class="add" *ngIf="element.isNewData">新增</span>
+            <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="unitname">
+          <th mat-header-cell *matHeaderCellDef>单位名称</th>
+          <td mat-cell *matCellDef="let element">{{element.companyName}}</td>
+        </ng-container>
+        <ng-container matColumnDef="planname">
+          <th mat-header-cell *matHeaderCellDef>预案名称</th>
+          <td mat-cell *matCellDef="let element">{{element.name}}</td>
+        </ng-container>
+        <ng-container matColumnDef="addpeople">
+          <th mat-header-cell *matHeaderCellDef>添加人</th>
+          <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
+        </ng-container>
+        <ng-container matColumnDef="level">
+          <th mat-header-cell *matHeaderCellDef>预案级别</th>
+          <td mat-cell *matCellDef="let element">{{element.planCategory==1?'Ⅰ级预案':element.planCategory==2?'Ⅱ级预案':
+            element.planCategory==3?'Ⅲ级预案':element.planCategory==4?'Ⅳ级预案':element.planCategory==5?'Ⅴ级预案':element.planCategory==8?'类型预案':'应急预案'}}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="addtime">
+          <th mat-header-cell *matHeaderCellDef>添加时间</th>
+          <td mat-cell *matCellDef="let element">{{element.creationTime | date:'yyyy-MM-dd'}}</td>
         </ng-container>
-          <ng-container matColumnDef="unitname">
-            <th mat-header-cell *matHeaderCellDef>单位名称</th>
-            <td mat-cell *matCellDef="let element">{{element.companyName}}</td>
-          </ng-container>
-          <ng-container matColumnDef="planname">
-            <th mat-header-cell *matHeaderCellDef>预案名称</th>
-            <td mat-cell *matCellDef="let element">{{element.name}}</td>
-          </ng-container>
-          <ng-container matColumnDef="addpeople">
-            <th mat-header-cell *matHeaderCellDef>添加人</th>
-            <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
-          </ng-container>
-          <ng-container matColumnDef="level">
-            <th mat-header-cell *matHeaderCellDef>预案级别</th>
-            <td mat-cell *matCellDef="let element">{{element.planCategory==1?'Ⅰ级预案':element.planCategory==2?'Ⅱ级预案':
-                element.planCategory==3?'Ⅲ级预案':element.planCategory==4?'Ⅳ级预案':element.planCategory==5?'Ⅴ级预案':element.planCategory==8?'类型预案':'应急预案'}}</td>
-          </ng-container>
-          <ng-container matColumnDef="addtime">
-            <th mat-header-cell *matHeaderCellDef>添加时间</th>
-            <td mat-cell *matCellDef="let element">{{element.creationTime | date:'yyyy-MM-dd'}}</td>
-          </ng-container>
-          <ng-container matColumnDef="plantype">
-            <th mat-header-cell *matHeaderCellDef>预案类型</th>
-            <td mat-cell *matCellDef="let element">二维预案</td>
-          </ng-container>
-          <ng-container matColumnDef="auditStatus">
-            <th mat-header-cell *matHeaderCellDef>新增审核</th>
-            <td mat-cell *matCellDef="let element">{{element.newVerifyState}}</td>
-          </ng-container>
-          <ng-container matColumnDef="weihuStatus">
-            <th mat-header-cell *matHeaderCellDef>维护审核</th>
-            <td mat-cell *matCellDef="let element">{{element.maintenanceVerifyState}}</td>
-          </ng-container>
-          <ng-container matColumnDef="openRange">
-              <th mat-header-cell *matHeaderCellDef>是否公开</th>
-              <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
-          </ng-container>
-          <ng-container matColumnDef="projectlevel">
-            <th mat-header-cell *matHeaderCellDef>编制级别</th>
-            <td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td>
-          </ng-container>
-          <ng-container matColumnDef="operation">
-              <th mat-header-cell *matHeaderCellDef>操作</th>
-              <td mat-cell *matCellDef="let element">
-                  <span style="color: blue;cursor: pointer;" (click)="openPlan(element)">查看预案</span>
-              </td>
-          </ng-container>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-        <mat-paginator 
-            [length]="length"
-            [pageSize]="pageSize"
-            [pageSizeOptions]="pageSizeOptions"
-            (page)="chagePage($event)">
-        </mat-paginator>
-    
+        <ng-container matColumnDef="plantype">
+          <th mat-header-cell *matHeaderCellDef>预案类型</th>
+          <td mat-cell *matCellDef="let element">二维预案</td>
+        </ng-container>
+        <ng-container matColumnDef="auditstate">
+          <th mat-header-cell *matHeaderCellDef>审核状态</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.auditStatus | auditState}}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="openRange">
+          <th mat-header-cell *matHeaderCellDef>是否公开</th>
+          <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
+        </ng-container>
+        <ng-container matColumnDef="projectlevel">
+          <th mat-header-cell *matHeaderCellDef>编制级别</th>
+          <td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td>
+        </ng-container>
+        <ng-container matColumnDef="operation">
+          <th mat-header-cell *matHeaderCellDef>操作</th>
+          <td mat-cell *matCellDef="let element">
+            <span style="color: blue;cursor: pointer;" (click)="openPlan(element)">查看预案</span>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+        (page)="chagePage($event)">
+      </mat-paginator>
+
     </div>
-</div>
-</div>
+  </div>
+</div>

src/app/plan-management/reinforce-plan/reinforce-plan.component.ts

@@ -1,251 +1,296 @@
-import { Component, OnInit, ViewChild, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http'
-import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
-import { MatPaginator } from '@angular/material/paginator';
-import { FlatTreeControl } from '@angular/cdk/tree';
-import { FormControl } from '@angular/forms';
-import { Router,ActivatedRoute } from '@angular/router'
-import { PageEvent } from '@angular/material/paginator';
-import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { TreeService } from '../../http-interceptors/tree.service'
-import { Viewer } from 'photo-sphere-viewer';
-declare var CryptoJS
+import { Component, OnInit, ViewChild, Inject } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import {
+  MatTreeFlatDataSource,
+  MatTreeFlattener,
+} from "@angular/material/tree";
+import { MatPaginator } from "@angular/material/paginator";
+import { FlatTreeControl } from "@angular/cdk/tree";
+import { FormControl } from "@angular/forms";
+import { Router, ActivatedRoute } from "@angular/router";
+import { PageEvent } from "@angular/material/paginator";
+import {
+  MatDialogRef,
+  MatDialog,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import { TreeService } from "../../http-interceptors/tree.service";
+import { Viewer } from "photo-sphere-viewer";
+declare var CryptoJS;
 @Component({
-  selector: 'app-reinforce-plan',
-  templateUrl: './reinforce-plan.component.html',
-  styleUrls: ['./reinforce-plan.component.scss']
+  selector: "app-reinforce-plan",
+  templateUrl: "./reinforce-plan.component.html",
+  styleUrls: ["./reinforce-plan.component.scss"],
 })
 export class ReinforcePlanComponent implements OnInit {
+  constructor(
+    private http: HttpClient,
+    private router: Router,
+    private route: ActivatedRoute,
+    private tree: TreeService,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar
+  ) {}
 
-  constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,private tree: TreeService,public dialog: MatDialog,public snackBar: MatSnackBar) { }
- 
-  private _transformer = (node, level: number) => {   //初始化tree
+  private _transformer = (node, level: number) => {
+    //初始化tree
     return {
       expandable: !!node.children && node.children.length > 0,
       name: node.name,
       level: level,
       id: node.id,
       parentId: node.parentId,
-      children: node.children
+      children: node.children,
     };
-  }
-  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
-  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
+  };
+  treeControl = new FlatTreeControl<any>(
+    (node) => node.level,
+    (node) => node.expandable
+  );
+  treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    (node) => node.level,
+    (node) => node.expandable,
+    (node) => node.children
+  );
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
   myControl = new FormControl();
   hasChild = (_: number, node: any) => node.expandable;
-   //分页
-  @ViewChild(MatPaginator, {static: true}) 
+  //分页
+  @ViewChild(MatPaginator, { static: true })
   pageEvent: PageEvent;
   paginator: MatPaginator;
-  length:any; //共多少条数据
-  pageSize:any; //每页条数
-  pageSizeOptions: number[] = [10] //设置每页条数
-  PageNumber:any; //第几页
+  length: any; //共多少条数据
+  pageSize: any; //每页条数
+  pageSizeOptions: number[] = [10]; //设置每页条数
+  PageNumber: any; //第几页
 
-  displayedColumns: string[] = ['state','unitname','planname', 'addpeople','level','addtime','plantype','auditStatus','weihuStatus','openRange','projectlevel','operation'];
-  allorganizations:any //所有组织机构
-  allunittype:any //所有单位类型
-  tabledataSource:any //表格数据
-  IsNewData='' //维护更新活新增
+  displayedColumns: string[] = [
+    "state",
+    "unitname",
+    "planname",
+    "addpeople",
+    "level",
+    "addtime",
+    "plantype",
+    "auditstate",
+    "openRange",
+    "projectlevel",
+    "operation",
+  ];
+  allorganizations: any; //所有组织机构
+  allunittype: any; //所有单位类型
+  tabledataSource: any; //表格数据
+  IsNewData = ""; //维护更新活新增
 
-  preparelevels:any
-  ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1400px)").matches){
-      this.pcMore=false
-      this.padMore=true
-      this.pcfind=false
-      this.padjt=true
-    }else{
-      this.pcfind=true
-      this.pcMore=true
-      this.padMore=false
-      this.padjt=false
+  preparelevels: any;
+  async ngOnInit(): Promise<void> {
+    if (window.matchMedia("(max-width: 1400px)").matches) {
+      this.pcMore = false;
+      this.padMore = true;
+      this.pcfind = false;
+      this.padjt = true;
+    } else {
+      this.pcfind = true;
+      this.pcMore = true;
+      this.padMore = false;
+      this.padjt = false;
     }
     this.getunitdata();
-    this.getOrganizations();
+    await this.getOrganizations();
+    this.jsId = this.dataSource.data[0].id;
     this.getUnittype();
     this.getAllPlanInfo();
     let level = sessionStorage.getItem("level");
-    if(level == "0"){//如果是总队
+    if (level == "0") {
+      //如果是总队
       this.preparelevels = [
-        {name:"总队",value:"1"},
-        {name:"支队",value:"2"},
-        {name:"大队",value:"4"},
-        {name:"中队",value:"8"}
-      ]
+        { name: "总队", value: "1" },
+        { name: "支队", value: "2" },
+        { name: "大队", value: "4" },
+        { name: "中队", value: "8" },
+      ];
     }
-    if(level == "1"){//如果是支队
+    if (level == "1") {
+      //如果是支队
       this.preparelevels = [
-        {name:"支队",value:"2"},
-        {name:"大队",value:"4"},
-        {name:"中队",value:"8"}
-      ]
+        { name: "支队", value: "2" },
+        { name: "大队", value: "4" },
+        { name: "中队", value: "8" },
+      ];
     }
-    if(level == "2"){//如果是大队
+    if (level == "2") {
+      //如果是大队
       this.preparelevels = [
-        {name:"大队",value:"4"},
-        {name:"中队",value:"8"}
-      ]
+        { name: "大队", value: "4" },
+        { name: "中队", value: "8" },
+      ];
     }
-    if(level == "3"){//如果是中队
-      this.preparelevels = [
-        {name:"中队",value:"8"}
-      ]
+    if (level == "3") {
+      //如果是中队
+      this.preparelevels = [{ name: "中队", value: "8" }];
     }
   }
-  pcMore//pc更多
-  pcput=false//pc收起
-  pcfind//pc查询
-  padjt=false
-  padMore=true//pad收缩控制
-  padput=false//pad收起按钮
-  imgsrcopen="../../../assets/images/routdown2.png"
-  imgsrcdown="../../../assets/images/routup2.png"
-  pcInfo(){
-    this.pcMore=!this.pcMore
-    this.pcput=!this.pcput
+  pcMore; //pc更多
+  pcput = false; //pc收起
+  pcfind; //pc查询
+  padjt = false;
+  padMore = true; //pad收缩控制
+  padput = false; //pad收起按钮
+  imgsrcopen = "../../../assets/images/routdown2.png";
+  imgsrcdown = "../../../assets/images/routup2.png";
+  pcInfo() {
+    this.pcMore = !this.pcMore;
+    this.pcput = !this.pcput;
   }
-  padInfo(){
-    this.padMore=!this.padMore
-    this.padput=!this.padput
+  padInfo() {
+    this.padMore = !this.padMore;
+    this.padput = !this.padput;
   }
 
-  allPlanInfo:any //存储所有预案信息
+  allPlanInfo: any; //存储所有预案信息
   //获得所有预案信息
-  IsNewCompanyData=''//单位维护更新或者新增
-  getAllPlanInfo(){
-    let paramsdata:any = {
-      CompanyName: this.companyName || '',
-      OrganizationId: this.jsId || '',
-      HasChildrenOrganization:this.jscheck || '',
-      BuildingTypeId:  this.unittype || '',
-      PlanType: this.reservePlanType || '',
-      AuditStatus:'', //审核状态
-      PlanLevel:  this.preparelevel || '',
-      HasChildrenPlanLevel: this.plcheck || '',
-      CreationTimeRangeStart:this.addtime||'',
-      CreationTimeRangeEnd:this.endtime||'',
-      PageNumber: this.PageNumber || '1',
-      PageSize:  this.pageSizeOptions[0],
-      Sort: '',
-      IsNewData:this.IsNewData,
-      IsNewCompanyData:this.IsNewCompanyData
-    }
-    this.http.get("/api/ApprovedPlans/GetReinforcementPlanComponents",{params:paramsdata}).subscribe((data:any)=>{
-      // console.log('增援预案列表',data)
-      this.length = data.totalCount
-      this.allPlanInfo = data
-      this.tabledataSource = data.items  
-    })
+  IsNewCompanyData = ""; //单位维护更新或者新增
+  getAllPlanInfo() {
+    let paramsdata: any = {
+      CompanyName: this.companyName || "",
+      OrganizationId: this.jsId || "",
+      HasChildrenOrganization: this.jscheck || "",
+      BuildingTypeId: this.unittype || "",
+      PlanType: this.reservePlanType || "",
+      AuditStatus: "", //审核状态
+      PlanLevel: this.preparelevel || "",
+      HasChildrenPlanLevel: this.plcheck || "",
+      CreationTimeRangeStart: this.addtime || "",
+      CreationTimeRangeEnd: this.endtime || "",
+      PageNumber: this.PageNumber || "1",
+      PageSize: this.pageSizeOptions[0],
+      Sort: "",
+      IsNewData: this.IsNewData,
+      IsNewCompanyData: this.IsNewCompanyData,
+    };
+    this.http
+      .get("/api/ApprovedPlans/GetReinforcementPlanComponents", {
+        params: paramsdata,
+      })
+      .subscribe((data: any) => {
+        // console.log('增援预案列表',data)
+        this.length = data.totalCount;
+        this.allPlanInfo = data;
+        this.tabledataSource = data.items;
+      });
   }
 
   //得到当前单位信息
-  getunitdata(){
-    this.http.get("/api/Account/Profiles").subscribe(
-      (data:any)=>{
-        this.organizationName = data.organizationName
-      }
-    )
+  getunitdata() {
+    this.http.get("/api/Account/Profiles").subscribe((data: any) => {
+      this.organizationName = data.organizationName;
+    });
   }
-  addtime//开始时间
-  endtime//结束时间
-  integrityScoreMin//完整度最小值
-  integrityScoreMax//完整度最大值
-  organizationName:any //当前单位组织机构名称
-  treedata:any //组织机构树型数据
-  newArr:any = []
-  newallorganizations:any //用于存储在原始数据基础上的每个机构增加children字段
+  addtime; //开始时间
+  endtime; //结束时间
+  integrityScoreMin; //完整度最小值
+  integrityScoreMax; //完整度最大值
+  organizationName: any; //当前单位组织机构名称
+  treedata: any; //组织机构树型数据
+  newArr: any = [];
+  newallorganizations: any; //用于存储在原始数据基础上的每个机构增加children字段
   //获得所有组织机构
-  getOrganizations(){
-    this.http.get('/api/Organizations').subscribe(
-      (data:any)=>{
-        this.allorganizations = data
-        this.dataSource.data = this.tree.toTree(data);
-      }
-    )
+  getOrganizations() {
+    return new Promise<void>((resolve, reject) => {
+      this.http
+        .get("/api/Organizations", {
+          params: {
+            strict: "true",
+          },
+        })
+        .subscribe((data: any) => {
+          this.allorganizations = data;
+          this.dataSource.data = this.tree.toTree(data);
+          resolve();
+        });
+    });
   }
 
   //获得所有单位类型
-  getUnittype(){
-    this.http.get('/api/BuildingTypes/Simple').subscribe(
-      data=>{
-        this.allunittype = data
-      }
-    )
+  getUnittype() {
+    this.http.get("/api/BuildingTypes/Simple").subscribe((data) => {
+      this.allunittype = data;
+    });
   }
   //分页事件
-  chagePage(e){
-    this.PageNumber = e.pageIndex+1
+  chagePage(e) {
+    this.PageNumber = e.pageIndex + 1;
     this.getAllPlanInfo();
   }
 
   //辖区中队div是否显示
-  isorganizationbox:boolean = false
+  isorganizationbox: boolean = false;
   //点击辖区中队树，将选择的辖区中队添加到变量
   add(node) {
-    this.isorganizationbox = false
-    this.js = node.name
-    this.jsId = node.id
+    this.isorganizationbox = false;
+    this.js = node.name;
+    this.jsId = node.id;
   }
   //关闭辖区中队隐藏框
   closeorganizationbox() {
-    this.isorganizationbox = false
+    this.isorganizationbox = false;
   }
   //打开辖区中队隐藏框
   openorganizationbox() {
-    this.isorganizationbox = true
+    this.isorganizationbox = true;
   }
   //关闭出现的组织机构div
-  closediv(){
-    this.isorganizationbox = false
+  closediv() {
+    this.isorganizationbox = false;
   }
   //查询
-  onSubmit (e) {
-    this.PageNumber = 1
-    this.pageEvent.pageIndex = 0
-    this.getAllPlanInfo()
+  onSubmit(e) {
+    this.PageNumber = 1;
+    this.pageEvent.pageIndex = 0;
+    this.getAllPlanInfo();
   }
-  companyName:any //单位名称
-  js:any //所选组织机构
-  jsId:any //所选组织机构的id
-  jscheck:boolean //所选组织机构勾选框
-  unittype:any //单位类型
-  reservePlanType:any //预案类型
-  preparelevel:any //编制级别
-  plcheck:boolean //编制级别勾选框
+  companyName: any; //单位名称
+  js: any; //所选组织机构
+  jsId: any; //所选组织机构的id
+  jscheck: boolean; //所选组织机构勾选框
+  unittype: any; //单位类型
+  reservePlanType: any; //预案类型
+  preparelevel: any; //编制级别
+  plcheck: boolean; //编制级别勾选框
   //重置
-  reset(){
-    this.IsNewData=''
-    this.IsNewCompanyData=''
-    this.companyName = ''
-    this.js = ''
-    this.jsId = ''
-    this.jscheck = false
-    this.unittype = ''
-    this.reservePlanType = ''
-    this.preparelevel = ''
-    this.addtime=''
-    this.endtime=''
-    this.plcheck = false
+  reset() {
+    this.IsNewData = "";
+    this.IsNewCompanyData = "";
+    this.companyName = "";
+    this.js = "";
+    this.jsId = "";
+    this.jscheck = false;
+    this.unittype = "";
+    this.reservePlanType = "";
+    this.preparelevel = "";
+    this.addtime = "";
+    this.endtime = "";
+    this.plcheck = false;
     //重新获取初始化列表
-    this.pageEvent.pageIndex = 0
-    this.PageNumber = 1
+    this.pageEvent.pageIndex = 0;
+    this.PageNumber = 1;
     this.getAllPlanInfo();
-    
   }
 
   //查看预案
-  openPlan(e){
+  openPlan(e) {
     // console.log(e)
-    let id = e.id 
-    sessionStorage.setItem("planId",id)
-    sessionStorage.setItem("companyId",e.companyId)
+    let id = e.id;
+    sessionStorage.setItem("planId", id);
+    sessionStorage.setItem("companyId", e.companyId);
     //sessionStorage.setItem("buildingTypeId",this.unittypeId)
-    sessionStorage.setItem("editable","0")
-    sessionStorage.setItem("planName",e.name)
-    let companyId = sessionStorage.getItem("companyId")
-    window.open(`/keyUnit/viewunitinfoplan?id=${companyId}&orName=${e.company.organizationName}&orId=${e.company.organizationId}`);
+    sessionStorage.setItem("editable", "0");
+    sessionStorage.setItem("planName", e.name);
+    let companyId = sessionStorage.getItem("companyId");
+    window.open(
+      `/keyUnit/viewunitinfoplan?id=${companyId}&orName=${e.company.organizationName}&orId=${e.company.organizationId}`
+    );
   }
 }

src/app/plan-management/type-plan/type-plan.component.html

@@ -1,164 +1,177 @@
 <div style="height: 100%;overflow-y: auto;">
-    <div class="header" >
-        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
-          <div class="queryBox">
-      
-            <div class="queryField">
-              <label style="margin-right: 10px;">预案名称:</label>
-              <mat-form-field class="example-full-width">
-                <input matInput placeholder="请输入预案名称" name="companyName"  autocomplete="off" [(ngModel)]="unitname">
-              </mat-form-field>
-            </div>
-            <div class="queryField" >
-              <label style="margin-right: 10px;">编制级别:</label>
-              <mat-form-field>
-                <mat-select name="preparelevel"  placeholder='请选择编制级别' [(ngModel)]="projectlevel">
-                  <!-- <mat-option value="1">总队</mat-option>
+  <div class="header">
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+      <div class="queryBox">
+
+        <div class="queryField">
+          <label style="margin-right: 10px;">预案名称:</label>
+          <mat-form-field class="example-full-width">
+            <input matInput placeholder="请输入预案名称" name="companyName" autocomplete="off" [(ngModel)]="unitname">
+          </mat-form-field>
+        </div>
+        <div class="queryField">
+          <label style="margin-right: 10px;">编制级别:</label>
+          <mat-form-field>
+            <mat-select name="preparelevel" placeholder='请选择编制级别' [(ngModel)]="projectlevel">
+              <!-- <mat-option value="1">总队</mat-option>
                   <mat-option value="2">支队</mat-option>
                   <mat-option value="4">大队</mat-option>
                   <mat-option value="8">中队</mat-option> -->
-                  <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
-                </mat-select>
-              </mat-form-field>
-              <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
-              <span *ngIf="padMore" style="margin-left: 20px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            </div>
-          
-          <div class="queryField" *ngIf="!pcfind">
-            <button mat-raised-button color="primary">查询</button>
-            <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
-          </div>
-          <div class="queryField" *ngIf="!padMore">
-            <label style="margin-right: 10px;">添加人:</label>
-            <mat-form-field class="example-full-width">
-              <input matInput placeholder="请输入添加人" name="addname"  autocomplete="off" [(ngModel)]="addname">
-            </mat-form-field>
-            
-          </div>
-          
-            <div class="queryField" *ngIf="!padMore">
-              <label style="margin-right: 10px;">审核状态:</label>
-              <mat-form-field>
-                <mat-select name="toExamine"  placeholder='请选择审核状态' [(ngModel)]="unitstate">
-                  <mat-option value="8">未提交审核</mat-option>
-                  <mat-option value="1">审核中</mat-option>
-                  <mat-option value="2">审核通过</mat-option>
-                  <mat-option value="4">审核退回</mat-option>
-                </mat-select>
-              </mat-form-field>
-              <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img [src]='imgsrcopen'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-              <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img [src]='imgsrcdown'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
-            </div>
-            <div class="queryField" *ngIf="pcfind" >
-              <button mat-raised-button color="primary">查询</button>
-              <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
-          </div>
-          <div class="queryField" *ngIf="!padMore&&!pcMore">
-            <label style="margin-right: 10px;">添加时间:</label>
-            <mat-form-field class="example-full-width">
-              <input type="date" matInput  name="addtime"  autocomplete="off" [(ngModel)]="addtime">
-            </mat-form-field>
-            <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
-            <mat-icon *ngIf="padjt" aria-hidden="false" style="position: relative;right: 120px;top: 5px;" id="padshow">arrow forward</mat-icon>
-            <span style="margin-left: 15px;" id="pcshow" *ngIf="!padMore&&!padjt">🠊</span>
-            <mat-form-field class="example-full-width" style="margin-left: 10px;">
-              <input type="date" matInput  autocomplete="off" name="endtime" [(ngModel)]="endtime">
-            </mat-form-field>
-          </div>
-          <div class="queryField" *ngIf="!padMore&&!pcMore">
-            <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='true' [(ngModel)]="IsNewData">
-            <label style="margin-right: 10px;margin-left: 2px;">新增</label>
-            <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='false' [(ngModel)]="IsNewData">
-            <label style="margin-right: 10px;margin-left: 2px;">维护更新</label>
-          </div>
-            
-          </div>
-        </form>
-    </div>
-    <!-- <mat-divider></mat-divider> -->
-    <div class="newadd">
-      <div>
-        <button mat-raised-button color="primary" (click)='addunit()' *ngIf="levels=='0'"><img style="margin-bottom: 3px;" src="../../../assets/images/newadd.png"> 新增</button>
-      </div>
-        
-        <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
-            
-          <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
-          <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
-          <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
-          <mat-progress-bar  mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
+              <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
+          <span *ngIf="padMore" style="margin-left: 20px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img
+              [src]='imgsrcopen' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'
+              style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+        </div>
+
+        <div class="queryField" *ngIf="!pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore">
+          <label style="margin-right: 10px;">添加人:</label>
+          <mat-form-field class="example-full-width">
+            <input matInput placeholder="请输入添加人" name="addname" autocomplete="off" [(ngModel)]="addname">
+          </mat-form-field>
+
+        </div>
+
+        <div class="queryField" *ngIf="!padMore">
+          <label style="margin-right: 10px;">审核状态:</label>
+          <mat-form-field>
+            <mat-select name="toExamine" placeholder='请选择审核状态' [(ngModel)]="unitstate">
+              <mat-option value="8">未提交审核</mat-option>
+              <mat-option value="1">审核中</mat-option>
+              <mat-option value="2">审核通过</mat-option>
+              <mat-option value="4">审核退回</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <span *ngIf="pcMore" style="margin-left: 15px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>更多筛选条件<img
+              [src]='imgsrcopen' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+          <span *ngIf="pcput" style="margin-left: 10px; color: #0080FF; cursor: pointer;" (click)='pcInfo()'>收起<img
+              [src]='imgsrcdown' style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
+        </div>
+        <div class="queryField" *ngIf="pcfind">
+          <button mat-raised-button color="primary">查询</button>
+          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <label style="margin-right: 10px;">添加时间:</label>
+          <mat-form-field class="example-full-width">
+            <input type="date" matInput name="addtime" autocomplete="off" [(ngModel)]="addtime">
+          </mat-form-field>
+          <!-- <mat-icon aria-hidden="false" style="position: relative;right: 120px;top: 5px;">arrow forward</mat-icon> -->
+          <mat-icon *ngIf="padjt" aria-hidden="false" style="position: relative;right: 120px;top: 5px;"
+            id="padshow">arrow forward</mat-icon>
+          <span style="margin-left: 15px;" id="pcshow" *ngIf="!padMore&&!padjt">🠊</span>
+          <mat-form-field class="example-full-width" style="margin-left: 10px;">
+            <input type="date" matInput autocomplete="off" name="endtime" [(ngModel)]="endtime">
+          </mat-form-field>
+        </div>
+        <div class="queryField" *ngIf="!padMore&&!pcMore">
+          <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='true'
+            [(ngModel)]="IsNewData">
+          <label style="margin-right: 10px;margin-left: 2px;">新增</label>
+          <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='false'
+            [(ngModel)]="IsNewData">
+          <label style="margin-right: 10px;margin-left: 2px;">维护更新</label>
+        </div>
+
       </div>
+    </form>
+  </div>
+  <!-- <mat-divider></mat-divider> -->
+  <div class="newadd">
+    <div>
+      <button mat-raised-button color="primary" (click)='addunit()' *ngIf="levels=='0'"><img style="margin-bottom: 3px;"
+          src="../../../assets/images/newadd.png"> 新增</button>
     </div>
-    
-    <div class="body">
-        <div class="tablebox">
-          <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
-            <ng-container matColumnDef="state">
-              <th mat-header-cell *matHeaderCellDef style="width: 10%;">预案状态</th>
-              <td mat-cell *matCellDef="let element">
-                <span class="add" *ngIf="element.isNewData">新增</span>
-                <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
-              </td>
-          </ng-container>
-            <ng-container matColumnDef="unitname">
-                <th mat-header-cell *matHeaderCellDef style="width: 20%;">预案名称</th>
-                <td mat-cell *matCellDef="let element">{{element.name}}</td>
-            </ng-container>
-           
-            <ng-container matColumnDef="addname">
-                <th mat-header-cell *matHeaderCellDef style="width: 10%;">添加人</th>
-                <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
-            </ng-container>
-    
-            <ng-container matColumnDef="addtime">
-                <th mat-header-cell *matHeaderCellDef style="width: 10%;">添加时间</th>
-                <td mat-cell *matCellDef="let element">{{element.creationTime|date:'yyyy-MM-dd'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="plantype">
-            <th mat-header-cell *matHeaderCellDef style="width: 10%;">预案类型</th>
-            <td mat-cell *matCellDef="let element">类型预案</td>
-            </ng-container>
-            <ng-container matColumnDef="passstate">
-            <th mat-header-cell *matHeaderCellDef style="width: 10%;">新增审核</th>
-            <td mat-cell *matCellDef="let element">
-              {{element.newVerifyState}}
-            </td>
-            </ng-container>
-            <ng-container matColumnDef="isopen">
-              <th mat-header-cell *matHeaderCellDef style="width: 10%;">是否公开</th>
-              <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
-              </ng-container>
-            <ng-container matColumnDef="projectlevel">
-            <th mat-header-cell *matHeaderCellDef style="width: 10%;">编制级别</th>
-            <td mat-cell *matCellDef="let element">{{element.planLevel=='1'?'总队':element.planLevel=='2'?'支队':element.planLevel=='4'?'大队':'中队'}}</td>
-            </ng-container>
-            <ng-container matColumnDef="weihustate">
-              <th mat-header-cell *matHeaderCellDef style="width: 10%;">维护审核</th>
-              <td mat-cell *matCellDef="let element">{{element.maintenanceVerifyState}}</td>
-              </ng-container>
-            <ng-container matColumnDef="operation">
-                <th mat-header-cell *matHeaderCellDef style="width: 20%;">操作</th>
-                <td mat-cell *matCellDef="let element" style="white-space: nowrap;cursor: pointer;">
-                  <span  style="color: blue;" (click)='openPlan(element)'>查看预案</span>
-                  <span style="color: blue;margin-left: 4px;" (click)="submitAudit(element)" *ngIf="(element.isNewData && element.newVerifyState=='未提交审核')||(!element.isNewData&&(element.maintenanceVerifyState=='审核通过'||element.maintenanceVerifyState=='未提交审核'))">提交审核</span>
-                    <span style="color: blue;margin-left: 4px;" (click)="cancelAudit(element)" *ngIf="element.auditStatus == 1||element.auditStatus == 16">撤销审核</span>
-                    <span style="color: blue;margin-left: 4px;" (click)="auditResult(element)">审批结果</span>
-                  <span style="color: blue;margin-left: 4px;" (click)='readFile(element)'>下载</span>
-                  <span style="color: red;margin-left: 4px" (click)='deletePlan(element.id)' *ngIf="element.auditStatus == 8"> 删除</span>
-                </td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-            <mat-paginator pageEvent [length]="length"
-                [pageSize]="pageSize"
-                [pageSizeOptions]="pageSizeOptions"
-                (page)="changePage($event)">
-                
-            </mat-paginator>
-        
-        </div>
+
+    <div class="progressBox" style="margin-left: 100px;" *ngIf="downloadisLoading">
+
+      <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
+      <span title="{{downloadFileName}}" style="font-size: 12px;" class="filename">{{downloadFileName}}</span>
+      <span style="font-size: 12px;position: absolute;margin-left: 8px;">下载中...</span>
+      <mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress"></mat-progress-bar>
+    </div>
+  </div>
+
+  <div class="body">
+    <div class="tablebox">
+      <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
+        <ng-container matColumnDef="state">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">预案状态</th>
+          <td mat-cell *matCellDef="let element">
+            <span class="add" *ngIf="element.isNewData">新增</span>
+            <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="unitname">
+          <th mat-header-cell *matHeaderCellDef style="width: 20%;">预案名称</th>
+          <td mat-cell *matCellDef="let element">{{element.name}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="addname">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">添加人</th>
+          <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="addtime">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">添加时间</th>
+          <td mat-cell *matCellDef="let element">{{element.creationTime|date:'yyyy-MM-dd'}}</td>
+        </ng-container>
+        <ng-container matColumnDef="plantype">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">预案类型</th>
+          <td mat-cell *matCellDef="let element">类型预案</td>
+        </ng-container>
+        <ng-container matColumnDef="passstate">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">新增审核</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.newVerifyState}}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="isopen">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">是否公开</th>
+          <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
+        </ng-container>
+        <ng-container matColumnDef="projectlevel">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">编制级别</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.planLevel=='1'?'总队':element.planLevel=='2'?'支队':element.planLevel=='4'?'大队':'中队'}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="auditstate">
+          <th mat-header-cell *matHeaderCellDef style="width: 10%;">审核状态</th>
+          <td mat-cell *matCellDef="let element">
+            {{element.auditStatus | auditState}}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="operation">
+          <th mat-header-cell *matHeaderCellDef style="width: 20%;">操作</th>
+          <td mat-cell *matCellDef="let element" style="white-space: nowrap;cursor: pointer;">
+            <span style="color: blue;" (click)='openPlan(element)'>查看预案</span>
+            <span style="color: blue;margin-left: 4px;" (click)="submitAudit(element)"
+              *ngIf="(element.isNewData && element.newVerifyState=='未提交审核')||(!element.isNewData&&(element.maintenanceVerifyState=='审核通过'||element.maintenanceVerifyState=='未提交审核'))">提交审核</span>
+            <span style="color: blue;margin-left: 4px;" (click)="cancelAudit(element)"
+              *ngIf="element.auditStatus == 1||element.auditStatus == 16">撤销审核</span>
+            <span style="color: blue;margin-left: 4px;" (click)="auditResult(element)">审批结果</span>
+            <span style="color: blue;margin-left: 4px;" (click)='readFile(element)'>下载</span>
+            <span style="color: red;margin-left: 4px" (click)='deletePlan(element.id)'>
+              删除</span>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator pageEvent [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+        (page)="changePage($event)">
+
+      </mat-paginator>
+
     </div>
+  </div>
 </div>
-<p>type-plan works!</p>
+<p>type-plan works!</p>

src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts

@@ -1,111 +1,183 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {EchartsDataService,} from '../../echarts-data.service';
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
-declare var CryptoJS
+declare var CryptoJS;
 @Component({
-  selector: 'app-add-unit-one',
-  templateUrl: './add-unit-one.component.html',
-  styleUrls: ['./add-unit-one.component.scss']
+  selector: "app-add-unit-one",
+  templateUrl: "./add-unit-one.component.html",
+  styleUrls: ["./add-unit-one.component.scss"],
 })
 export class AddUnitOneComponent implements OnInit {
+  constructor(private router: Router, public echartsData: EchartsDataService) {}
 
-  constructor(private router: Router,public echartsData:EchartsDataService) { }
-
-  setTimeoutObj//延时器需要清除
-  tabledata
-  padHw
-  orid//获取本组织id
+  setTimeoutObj; //延时器需要清除
+  tabledata;
+  padHw;
+  orid; //获取本组织id
 
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1400px)").matches){
-      this.padHw=true
+    if (window.matchMedia("(max-width: 1400px)").matches) {
+      this.padHw = true;
       //this.padjt=
-    }else{
-      this.padHw=false
+    } else {
+      this.padHw = false;
     }
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
+    }
     /* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`))
     this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */
     let jwt = sessionStorage.getItem("token");
-    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]);
+    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split(".")[1]);
     let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt);
-    let identityJsonparse=JSON.parse(identityJson)
-    this.orid=identityJsonparse.oid
-    this.setTimeoutObj = window.setTimeout(()=>{
-     this.getechartsdata()
-    })
+    let identityJsonparse = JSON.parse(identityJson);
+    this.orid = identityJsonparse.oid;
+    this.setTimeoutObj = window.setTimeout(() => {
+      this.getechartsdata();
+    });
     this.echartsData.eventEmit.subscribe((value: any) => {
-      if (value == 'echarts') {
+      if (value == "echarts") {
         setTimeout(() => {
-          this.indexBzt.resize()
+          this.indexBzt.resize();
         }, 500);
-      
       }
     });
   }
   //更新echarts视图
-  updateEcharts(){
-    this.indexBzt.resize()
+  updateEcharts() {
+    this.indexBzt.resize();
   }
   //获取服务层数据
-  async getechartsdata(){
-    await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`)
-    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
+  async getechartsdata() {
+    await this.echartsData.getData(null, `/api/StatisticsAnalysis/Companies`);
+    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
     //console.log(this.tabledata)
-    this.initCharts("pieone")
-    this.initCharts("pietwo")
+    this.initCharts("pieone");
+    this.initCharts("pietwo");
   }
   //组件销毁时
-  ngOnDestroy(){
+  ngOnDestroy() {
     window.clearTimeout(this.setTimeoutObj);
-    this.indexBzt.clear()
-    this.indexBzt.dispose()
+    if (!this.indexBzt) {
+      return;
+    }
+    this.indexBzt.clear();
+    this.indexBzt.dispose();
   }
-  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
-  buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]
-  indexBzt//首页饼状图实例
+  zhiNameData = [
+    "浦东支队",
+    "黄浦支队",
+    "徐汇支队",
+    "长宁支队",
+    "静安支队",
+    "普陀支队",
+    "虹口支队",
+    "杨浦支队",
+    "闵行支队",
+    "宝山支队",
+    "嘉定支队",
+    "松江支队",
+    "金山支队",
+    "崇明支队",
+  ];
+  buildingData = [
+    "高层",
+    "地下",
+    "轨道交通",
+    "化工生产",
+    "储罐类",
+    "厂房",
+    "古建筑",
+    "商市场",
+    "医院",
+    "学校",
+    "宾馆",
+    "娱乐场所",
+    "餐饮业",
+    "影剧院",
+    "展览建筑",
+    "隧道",
+  ];
+  indexBzt; //首页饼状图实例
   /* 首页饼状图 */
-  lengthBuildData=[]
-  lengthOrData=[]
-  buildData=[]
-  orData=[]
-  initCharts(tid){
-    for(var i=0;i<this.tabledata[0].buildingTypeStatistics.buildingTypes.length;i++){
-      this.buildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i])
-      this.lengthBuildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i].buildingTypeName)
+  lengthBuildData = [];
+  lengthOrData = [];
+  buildData = [];
+  orData = [];
+  initCharts(tid) {
+    for (
+      var i = 0;
+      i < this.tabledata[0].buildingTypeStatistics.buildingTypes.length;
+      i++
+    ) {
+      this.buildData.push(
+        this.tabledata[0].buildingTypeStatistics.buildingTypes[i]
+      );
+      this.lengthBuildData.push(
+        this.tabledata[0].buildingTypeStatistics.buildingTypes[i]
+          .buildingTypeName
+      );
     }
-    for(var i=0;i<this.tabledata[0].organizationStatistics.organizations.length;i++){
-      this.orData.push(this.tabledata[0].organizationStatistics.organizations[i])
-      if(this.tabledata[0].organizationStatistics.organizations[i].organizationName.length>5&&this.padHw){
-        this.tabledata[0].organizationStatistics.organizations[i].organizationName=this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(0, 5)
-        +'\n'+this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(5)
+    for (
+      var i = 0;
+      i < this.tabledata[0].organizationStatistics.organizations.length;
+      i++
+    ) {
+      this.orData.push(
+        this.tabledata[0].organizationStatistics.organizations[i]
+      );
+      if (
+        this.tabledata[0].organizationStatistics.organizations[i]
+          .organizationName.length > 5 &&
+        this.padHw
+      ) {
+        this.tabledata[0].organizationStatistics.organizations[
+          i
+        ].organizationName =
+          this.tabledata[0].organizationStatistics.organizations[
+            i
+          ].organizationName.slice(0, 5) +
+          "\n" +
+          this.tabledata[0].organizationStatistics.organizations[
+            i
+          ].organizationName.slice(5);
       }
-      this.lengthOrData.push(this.tabledata[0].organizationStatistics.organizations[i].organizationName)
+      this.lengthOrData.push(
+        this.tabledata[0].organizationStatistics.organizations[i]
+          .organizationName
+      );
     }
-    this.buildData=this.buildData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}})
-    this.orData=this.orData.map(v=>{return {name: v.organizationName,value:v.count,id:v.organizationId}})
-    this.indexBzt = echarts.init(document.getElementById(tid),'walden');
-    let options={
+    this.buildData = this.buildData.map((v) => {
+      return { name: v.buildingTypeName, value: v.count, id: v.buildingTypeId };
+    });
+    this.orData = this.orData.map((v) => {
+      return { name: v.organizationName, value: v.count, id: v.organizationId };
+    });
+    this.indexBzt = echarts.init(document.getElementById(tid), "walden");
+    let options = {
       title: {
-        text:tid=="pieone"? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）`:`建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`,
-        left: 'center',
+        text:
+          tid == "pieone"
+            ? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）`
+            : `建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`,
+        left: "center",
         //top: "5%",
         //bottom:800,
         textStyle: {
-          fontSize:28
-        }
+          fontSize: 28,
+        },
       },
       tooltip: {
-        trigger: 'item',
-        formatter:  (params)=>{
-          return tid=="pieone"?this.biaogeTishi(params.data,'one'):this.biaogeTishi(params.data,'two')
+        trigger: "item",
+        formatter: (params) => {
+          return tid == "pieone"
+            ? this.biaogeTishi(params.data, "one")
+            : this.biaogeTishi(params.data, "two");
           //return this.echartsData.tableTooltip(tid=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name)
         },
-        position:this.echartsData.tableTooltipNoShow2
+        position: this.echartsData.tableTooltipNoShow2,
       },
       legend: {
         //type: tid=="pieone"?'scroll':'',
@@ -115,127 +187,178 @@ export class AddUnitOneComponent implements OnInit {
         //top:100,
         //bottom:tid=="pieone"?600:500,
         bottom: 90,
-        left: 'center',
-        textStyle:{
-          fontSize:14,
-          color:"#000000"
-           },
-        data: tid=="pieone"?this.lengthOrData:this.lengthBuildData
+        left: "center",
+        textStyle: {
+          fontSize: 14,
+          color: "#000000",
+        },
+        data: tid == "pieone" ? this.lengthOrData : this.lengthBuildData,
       },
       series: [
         {
-          name: '访问来源',
-          type: 'pie',
-          radius:this.padHw?'42%':'50%',
-          center: ['48%', '53%'],
-          bottom:130,
-          left:30,
-          label:{
-            show:true,
-            fontSize:16,
-            formatter:'{b}\n{c}家{d|({d}%)}',
+          name: "访问来源",
+          type: "pie",
+          radius: this.padHw ? "42%" : "50%",
+          center: ["48%", "53%"],
+          bottom: 130,
+          left: 30,
+          label: {
+            show: true,
+            fontSize: 16,
+            formatter: "{b}\n{c}家{d|({d}%)}",
             rich: {
               d: {
-                align: 'center',
-                fontSize:16
-              }
+                align: "center",
+                fontSize: 16,
+              },
             },
           },
-          data:tid=="pieone"?this.orData:this.buildData,
+          data: tid == "pieone" ? this.orData : this.buildData,
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
     };
-    this.indexBzt.on('click', (params) => {
-      tid=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building"
-      if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tishiData.length>0){
+    this.indexBzt.on("click", (params) => {
+      tid == "pieone"
+        ? (this.echartsData.zuzhiorBuilding = "zhi")
+        : (this.echartsData.zuzhiorBuilding = "building");
+      if (
+        (this.echartsData.level == "0" ||
+          this.echartsData.level == "1" ||
+          this.echartsData.level == "2") &&
+        this.tishiData.length > 0
+      ) {
         //总队,支队，大队跳转
-        this.tishiData.forEach((value,index,array) => {
-          if(array[index].organizationId==this.orid){
-            array.splice(index,1)
+        this.tishiData.forEach((value, index, array) => {
+          if (array[index].organizationId == this.orid) {
+            array.splice(index, 1);
           }
-          if(array.length>0){
-            this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name,'id':params.data.id,'type':tid=="pieone"?'zhi':'build'}});
-          }
-          else{
-            this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}});
+          if (array.length > 0) {
+            this.router.navigate(
+              ["/statisticanalysis/addUnit_one/addUnit_two_type"],
+              {
+                queryParams: {
+                  level: params.name,
+                  id: params.data.id,
+                  type: tid == "pieone" ? "zhi" : "build",
+                },
+              }
+            );
+          } else {
+            this.router.navigate(["/statisticanalysis/CompangInfo"], {
+              queryParams: {
+                name: params.name,
+                type: 1,
+                buildid: tid != "pieone" ? params.data.id : "",
+                jsid: tid == "pieone" ? params.data.id : "",
+              },
+            });
           }
         });
-        
-      }else{
+      } else {
         //中队跳转
-        this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}});
+        this.router.navigate(["/statisticanalysis/CompangInfo"], {
+          queryParams: {
+            name: params.name,
+            type: 1,
+            buildid: tid != "pieone" ? params.data.id : "",
+            jsid: tid == "pieone" ? params.data.id : "",
+          },
+        });
       }
-      
-      
     });
     this.indexBzt.setOption(options);
   }
-  res
-  tishiData
-  biaogeTishi(datas,type){
+  res;
+  tishiData;
+  biaogeTishi(datas, type) {
     //console.log(datas)
-    this.res=''
-    this.tishiData=''
-    if(type=='two'){
-      for(var a in this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes){
-        if(this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].buildingTypeName==datas.name){
-          this.tishiData=this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].organizations
+    this.res = "";
+    this.tishiData = "";
+    if (type == "two") {
+      for (var a in this.echartsData.obdata[0].buildingTypeStatistics
+        .buildingTypes) {
+        if (
+          this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a]
+            .buildingTypeName == datas.name
+        ) {
+          this.tishiData =
+            this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[
+              a
+            ].organizations;
         }
       }
-    }else{
-      for(var a in this.echartsData.obdata[0].organizationStatistics.organizations){
-        if(this.echartsData.obdata[0].organizationStatistics.organizations[a].organizationId==datas.id){
-          this.tishiData=this.echartsData.obdata[0].organizationStatistics.organizations[a].buildingTypes
+    } else {
+      for (var a in this.echartsData.obdata[0].organizationStatistics
+        .organizations) {
+        if (
+          this.echartsData.obdata[0].organizationStatistics.organizations[a]
+            .organizationId == datas.id
+        ) {
+          this.tishiData =
+            this.echartsData.obdata[0].organizationStatistics.organizations[
+              a
+            ].buildingTypes;
         }
       }
     }
-    
+
     //console.log(this.tishiData)
-    var countall=0//总计
-    var countbi=0//站比
-    var allCountbi=0//总站比
-      for(var i=0;i<this.tishiData.length;i++){
-        countall+=this.tishiData[i].count
+    var countall = 0; //总计
+    var countbi = 0; //站比
+    var allCountbi = 0; //总站比
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countall += this.tishiData[i].count;
+    }
+    this.res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
+      datas.name +
+      "</span></div>";
+    this.res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:14px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
+    this.res += '<thead style="font-size:18px;"><tr>';
+    this.res += '<td style="text-align:center;width:30%;">名称</td>';
+    this.res += '<td style="text-align:center;width:30%;">数量</td>';
+    this.res += '<td style="text-align:center;width:30%;">总占比</td>';
+    this.res += "</tr></thead>";
+    this.res += "<tbody>";
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countbi =
+        Math.round((this.tishiData[i].count / countall) * 10000) / 100.0;
+      allCountbi = allCountbi + countbi;
+      this.res += "<tr>";
+      if (type == "two") {
+        this.res +=
+          '<td style="text-align:center;">' +
+          this.tishiData[i].organizationName +
+          "</td>";
+      } else {
+        this.res +=
+          '<td style="text-align:center;">' +
+          this.tishiData[i].buildingTypeName +
+          "</td>";
       }
-      this.res= '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>'
-      this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:14px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
-      this.res+='<thead style="font-size:18px;"><tr>';
-      this.res+='<td style="text-align:center;width:30%;">名称</td>';
-      this.res+='<td style="text-align:center;width:30%;">数量</td>'
-      this.res+='<td style="text-align:center;width:30%;">总占比</td>'
-      this.res+='</tr></thead>'
-      this.res+='<tbody>';
-      for(var i=0;i<this.tishiData.length;i++){
-        countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00
-        allCountbi=allCountbi+countbi
-       this.res+='<tr>'
-       if(type=='two'){
-        this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
-       }
-       else{
-        this.res+='<td style="text-align:center;">'+this.tishiData[i].buildingTypeName+'</td>'
-       }
-       
-       this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
-       if(countall==0){
-        this.res+='<td style="text-align:center;">0%</td></tr>'
-       }else{
-        this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>'
-       }
-       
+
+      this.res +=
+        '<td style="text-align:center;">' + this.tishiData[i].count + "</td>";
+      if (countall == 0) {
+        this.res += '<td style="text-align:center;">0%</td></tr>';
+      } else {
+        this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>";
       }
-      this.res+='</tbody>'
-      this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">100%</td></tfoot>'
-      this.res+='</table></div></div>'
-      return this.res
+    }
+    this.res += "</tbody>";
+    this.res +=
+      '<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' +
+      countall +
+      '</td><td style="text-align:center;">100%</td></tfoot>';
+    this.res += "</table></div></div>";
+    return this.res;
   }
-
-  
 }

src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts

@@ -42,6 +42,9 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
   }
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
+    if (!this.detailPlanEchart) {
+      return;
+    }
     this.detailPlanEchart.clear()
     this.detailPlanEchart.dispose()
   }

src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts

@@ -1,146 +1,193 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { ActivatedRoute } from '@angular/router';
-import { EchartsDataService } from '../../echarts-data.service';
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import { ActivatedRoute } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 @Component({
-  selector: 'app-add-unit-three-line-details',
-  templateUrl: './add-unit-three-line-details.component.html',
-  styleUrls: ['./add-unit-three-line-details.component.scss']
+  selector: "app-add-unit-three-line-details",
+  templateUrl: "./add-unit-three-line-details.component.html",
+  styleUrls: ["./add-unit-three-line-details.component.scss"],
 })
 export class AddUnitThreeLineDetailsComponent implements OnInit {
-
-  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
-  year:String
-  buildingTypeName:String
-  level:String
-  setTimeoutObj//延时器需要清除
-  qopao
-  lastId
-  zhiorbuild
+  constructor(
+    private router: Router,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    private serviceData: EchartsDataService,
+    public route: ActivatedRoute
+  ) {}
+  year: String;
+  buildingTypeName: String;
+  level: String;
+  setTimeoutObj; //延时器需要清除
+  qopao;
+  lastId;
+  zhiorbuild;
   ngOnInit(): void {
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
-    this.serviceData.selectType=0
-    this.dateInit ()
-    this.route.queryParams.subscribe(params => {
-      this.year = params['year'];
-      this.buildingTypeName = params['buildingType'];
-      this.lastId=params['id']
-      this.zhiorbuild=params['type']
+    }
+    this.serviceData.selectType = 0;
+    this.dateInit();
+    this.route.queryParams.subscribe((params) => {
+      this.year = params["year"];
+      this.buildingTypeName = params["buildingType"];
+      this.lastId = params["id"];
+      this.zhiorbuild = params["type"];
+    });
+    this.setTimeoutObj = window.setTimeout(() => {
+      this.getdata();
     });
-    this.setTimeoutObj = window.setTimeout(()=>{
-      this.getdata()
-    })
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     window.clearTimeout(this.setTimeoutObj);
-    this.detailPlanEchart.clear()
-    this.detailPlanEchart.dispose()
-  }
-  tabledata
-  zongcount=0
-  async getdata(){
-    let parzhi={
-      objectType:0,
-      BuildingTypeId:this.lastId,
-      TrendType:this.serviceData.selectType,
-      TrendYear:this.year||''
+    if (!this.detailPlanEchart) {
+      return;
     }
-    let parbuild={
-      objectType:0,
-      OrganizationId:this.lastId,
-      TrendType:this.serviceData.selectType,
-      TrendYear:this.year||''
-    }
-    await this.serviceData.getData(this.zhiorbuild=='zhi'?parbuild:parzhi,`/api/StatisticsAnalysis/Trends`)
+    this.detailPlanEchart.clear();
+    this.detailPlanEchart.dispose();
+  }
+  tabledata;
+  zongcount = 0;
+  async getdata() {
+    let parzhi = {
+      objectType: 0,
+      BuildingTypeId: this.lastId,
+      TrendType: this.serviceData.selectType,
+      TrendYear: this.year || "",
+    };
+    let parbuild = {
+      objectType: 0,
+      OrganizationId: this.lastId,
+      TrendType: this.serviceData.selectType,
+      TrendYear: this.year || "",
+    };
+    await this.serviceData.getData(
+      this.zhiorbuild == "zhi" ? parbuild : parzhi,
+      `/api/StatisticsAnalysis/Trends`
+    );
     this.setTimeoutObj = window.setTimeout(() => {
-      this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
+      this.tabledata = JSON.parse(JSON.stringify(this.serviceData.allDate));
       //console.log(this.tabledata)
-        for(var i=0;i<this.tabledata[0].length;i++){
-          if(this.tabledata[0][i].month>=this.serviceData.selectStartMonth||this.tabledata[0][i].month<=this.serviceData.selectEndMonth){
-            this.date.push(this.tabledata[0][i].month)
-            this.dateNum.push(this.tabledata[0][i].count)
-            this.zongcount=this.zongcount+this.tabledata[0][i].count
-          }
+      for (var i = 0; i < this.tabledata[0].length; i++) {
+        if (
+          this.tabledata[0][i].month >= this.serviceData.selectStartMonth ||
+          this.tabledata[0][i].month <= this.serviceData.selectEndMonth
+        ) {
+          this.date.push(this.tabledata[0][i].month);
+          this.dateNum.push(this.tabledata[0][i].count);
+          this.zongcount = this.zongcount + this.tabledata[0][i].count;
         }
-        this.date.forEach((value,index,array)=>{
-          this.date[index]=this.date[index]+'月'
-        })
-      
+      }
+      this.date.forEach((value, index, array) => {
+        this.date[index] = this.date[index] + "月";
+      });
+
       //this.oneInit (this.date,this.dateNum)
-      this.qopao=this.serviceData.qipao(this.qopao,this.dateNum,this.zhiNameData)
-      this.detailEcharts()
+      this.qopao = this.serviceData.qipao(
+        this.qopao,
+        this.dateNum,
+        this.zhiNameData
+      );
+      this.detailEcharts();
     });
   }
 
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
 
   //查询数据
-  years:any = []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+  years: any = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
-      this.years.unshift(i)
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
+      this.years.unshift(i);
     }
   }
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectStartMonth:any = 1 //开始月份
-  Submit (e) {
-    
-  }
-  selectStartYear:any = (new Date()).getFullYear() //开始年份
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectStartMonth: any = 1; //开始月份
+  Submit(e) {}
+  selectStartYear: any = new Date().getFullYear(); //开始年份
 
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
-  zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
-  zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
+  zhongNameData = [
+    "浦东中队",
+    "黄浦中队",
+    "徐汇中队",
+    "长宁中队",
+    "静安中队",
+    "普陀中队",
+    "虹口中队",
+    "杨浦中队",
+    "闵行中队",
+    "宝山中队",
+    "嘉定中队",
+  ];
+  zhongNumData = [200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100];
 
-  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
-  zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]
+  zhiNameData = [
+    "浦东支队",
+    "黄浦支队",
+    "徐汇支队",
+    "长宁支队",
+    "静安支队",
+    "普陀支队",
+    "虹口支队",
+    "杨浦支队",
+    "闵行支队",
+    "宝山支队",
+    "嘉定支队",
+  ];
+  zhiNumData = [300, 290, 280, 270, 260, 250, 240, 230, 220, 210, 200];
 
+  detailPlanEchart;
+  option;
+  date = [];
+  dateNum = [];
 
-  detailPlanEchart
-  option
-  date = []
-  dateNum = []
-
-  detailEcharts(){
-    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');  
+  detailEcharts() {
+    this.detailPlanEchart = echarts.init(
+      document.getElementById("barEchart"),
+      "skinUpp"
+    );
     this.option = {
       grid: {
         top: 90,
       },
       // 标题
       title: {
-        text: this.buildingTypeName ,
+        text: this.buildingTypeName,
         top: -4,
-        left: 'center',
-        textStyle:{
+        left: "center",
+        textStyle: {
           //文字颜色
-          color:'#000',
-          fontSize: 30
-        }
+          color: "#000",
+          fontSize: 30,
+        },
       },
       //提示框
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         /* formatter:  (params)=>{
           if(params[0].seriesName == "year"){
             return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
@@ -148,102 +195,138 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
             return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
           }
         }, */
-        position:this.serviceData.tableTooltipNoShow2
+        position: this.serviceData.tableTooltipNoShow2,
       },
       // x轴
       xAxis: {
-        type: 'category',
+        type: "category",
         data: this.date,
         axisLabel: {
-          textStyle:{
-            fontSize :18,
-            color:'#000000'
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
           },
           color: "#000", //刻度线标签颜色
         },
         //设置坐标轴字体颜色和宽度
-        axisLine: {    
+        axisLine: {
           lineStyle: {
             color: "#000",
           },
         },
-        splitLine: {//分割线配置
-          show:true,
+        splitLine: {
+          //分割线配置
+          show: true,
           lineStyle: {
-            color: '#999',
-          }
-        }
+            color: "#999",
+          },
+        },
       },
       // y轴
       yAxis: {
-        type: 'value',
-        name: '个',
+        type: "value",
+        name: "个",
         axisLabel: {
-          textStyle:{
-            fontSize :18,
-            color:'#000000'
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
           },
-          color: "#000" //刻度线标签颜色
+          color: "#000", //刻度线标签颜色
         },
-         //设置坐标轴字体颜色和宽度
-         axisLine: {
+        //设置坐标轴字体颜色和宽度
+        axisLine: {
           lineStyle: {
             color: "#000",
-          }
-        }
+          },
+        },
       },
       // 数据
-      series: [{
-          name: 'xxx',
-          type: 'line',
+      series: [
+        {
+          name: "xxx",
+          type: "line",
           data: this.dateNum,
-          barWidth :'38',
+          barWidth: "38",
           markPoint: {
-            symbolSize:[65, 65],
-            data: this.qopao
+            symbolSize: [65, 65],
+            data: this.qopao,
+          },
         },
-        }
       ],
     };
     this.detailPlanEchart.setOption(this.option);
-    this.detailPlanEchart.getZr().on('click',params=>{
-      const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
-        let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+    this.detailPlanEchart.getZr().on("click", (params) => {
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.detailPlanEchart.containPixel("grid", pointInPixel)) {
+        let xIndex = this.detailPlanEchart.convertFromPixel(
+          { seriesIndex: 0 },
+          [params.offsetX, params.offsetY]
+        )[0];
         /*事件处理代码书写位置*/
-        this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.buildingTypeName,'id':this.lastId,'type':this.zhiorbuild,'year':this.year,month:this.option.xAxis.data[xIndex]}})
+        this.router.navigate(
+          ["/statisticanalysis/addUnit_one/addUnit_two_type"],
+          {
+            queryParams: {
+              level: this.buildingTypeName,
+              id: this.lastId,
+              type: this.zhiorbuild,
+              year: this.year,
+              month: this.option.xAxis.data[xIndex],
+            },
+          }
+        );
         //this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}});
       }
     });
   }
   //返回按钮
-  backBtn(){
-    sessionStorage.setItem('refresh', 'true');
+  backBtn() {
+    sessionStorage.setItem("refresh", "true");
     history.go(-1);
-  } 
-  
-  tableTooltip(params:any){
+  }
+
+  tableTooltip(params: any) {
     var data = [
-      {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
-    ]
-    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>'
-        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
-        res+='<thead><tr>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
-        res+='</tr></thead>'
-        res+='<tbody>';
-        for(var i=0;i<data.length;i++){
-          res+='<tr>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
-        }
-        
-        res+='</tbody>'
-        // res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
-        res+='</table></div></div>'
-        return res
+      {
+        name: params.name,
+        number: params.value,
+        zhanbi: ((params.value / 1340) * 100).toFixed(2) + "%",
+      },
+    ];
+    var res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">' +
+      params.name +
+      "</span></div>";
+    res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+    res += "<thead><tr>";
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>';
+    res += "</tr></thead>";
+    res += "<tbody>";
+    for (var i = 0; i < data.length; i++) {
+      res += "<tr>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        data[i].name +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        data[i].number +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        data[i].zhanbi +
+        "</td></tr>";
+    }
+
+    res += "</tbody>";
+    // res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+    res += "</table></div></div>";
+    return res;
   }
 }

src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts

@@ -1,381 +1,484 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { EchartsDataService } from '../../echarts-data.service';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 @Component({
-  selector: 'app-add-unit-two-time',
-  templateUrl: './add-unit-two-time.component.html',
-  styleUrls: ['./add-unit-two-time.component.scss']
+  selector: "app-add-unit-two-time",
+  templateUrl: "./add-unit-two-time.component.html",
+  styleUrls: ["./add-unit-two-time.component.scss"],
 })
 export class AddUnitTwoTimeComponent implements OnInit {
-  
-  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,private route:ActivatedRoute) { }
-  setTimeoutObj//延时器需要清除
-  headname
-  type=1
-  lastId
-  tabledata
-  zongcount=0
-  zhiorbuild
+  constructor(
+    private router: Router,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    private serviceData: EchartsDataService,
+    private route: ActivatedRoute
+  ) {}
+  setTimeoutObj; //延时器需要清除
+  headname;
+  type = 1;
+  lastId;
+  tabledata;
+  zongcount = 0;
+  zhiorbuild;
   ngOnInit(): void {
-    this.serviceData.selectType=0
-    this.dateInit ()
-    this.route.queryParams.subscribe(param=>{
-      this.headname=param.level
-      this.zhiorbuild=param.type
-      this.lastId=param.id
+    this.serviceData.selectType = 0;
+    this.dateInit();
+    this.route.queryParams.subscribe((param) => {
+      this.headname = param.level;
+      this.zhiorbuild = param.type;
+      this.lastId = param.id;
     });
-    this.getdata()
+    this.getdata();
   }
-  ngOnDestroy(){
+  ngOnDestroy() {
     window.clearTimeout(this.setTimeoutObj);
-    this.forArr.forEach(item => {
-      item.echart.clear()
-      item.echart.dispose()
-    })
-
+    if (this.forArr && this.forArr.length !== 0) {
+      this.forArr.forEach((item) => {
+        item.echart.clear();
+        item.echart.dispose();
+      });
+    }
   }
   //获取数据
-  yeardatee=new Date().getFullYear()
-  async getdata(){
-    this.date=[]
-    this.dateNum=[]
-    this.zongcount=0
-    let parzhi={
-      objectType:0,
-      BuildingTypeId:this.lastId,
-      TrendType:this.serviceData.selectType,
-      TrendYear:this.yeardatee||''
-    }
-    let parbuild={
-      objectType:0,
-      OrganizationId:this.lastId,
-      TrendType:this.serviceData.selectType,
-      TrendYear:this.yeardatee||''
-    }
-    await this.serviceData.getData(this.zhiorbuild=="zhi"?parbuild:parzhi,`/api/StatisticsAnalysis/Trends`)
+  yeardatee = new Date().getFullYear();
+  async getdata() {
+    this.date = [];
+    this.dateNum = [];
+    this.zongcount = 0;
+    let parzhi = {
+      objectType: 0,
+      BuildingTypeId: this.lastId,
+      TrendType: this.serviceData.selectType,
+      TrendYear: this.yeardatee || "",
+    };
+    let parbuild = {
+      objectType: 0,
+      OrganizationId: this.lastId,
+      TrendType: this.serviceData.selectType,
+      TrendYear: this.yeardatee || "",
+    };
+    await this.serviceData.getData(
+      this.zhiorbuild == "zhi" ? parbuild : parzhi,
+      `/api/StatisticsAnalysis/Trends`
+    );
     this.setTimeoutObj = window.setTimeout(() => {
-      this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
+      this.tabledata = JSON.parse(JSON.stringify(this.serviceData.allDate));
       //console.log(this.tabledata[0])
-        for(var i=0;i<this.tabledata[0].length;i++){
-          if(this.tabledata[0][i].month>=this.serviceData.selectStartMonth||this.tabledata[0][i].month<=this.serviceData.selectEndMonth){
-            this.date.push(this.tabledata[0][i].month)
-            this.dateNum.push(this.tabledata[0][i].count)
-            this.zongcount=this.zongcount+this.tabledata[0][i].count
-          }
+      for (var i = 0; i < this.tabledata[0].length; i++) {
+        if (
+          this.tabledata[0][i].month >= this.serviceData.selectStartMonth ||
+          this.tabledata[0][i].month <= this.serviceData.selectEndMonth
+        ) {
+          this.date.push(this.tabledata[0][i].month);
+          this.dateNum.push(this.tabledata[0][i].count);
+          this.zongcount = this.zongcount + this.tabledata[0][i].count;
         }
-        this.date.forEach((value,index,array)=>{
-          this.date[index]=this.date[index]+'月'
-        })
-      
+      }
+      this.date.forEach((value, index, array) => {
+        this.date[index] = this.date[index] + "月";
+      });
+
       //this.oneInit (this.date,this.dateNum)
-      this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
-      this.twoInit (this.date,this.dateNum,'month')
+      this.tiaoshiPao = this.serviceData.qipao(
+        this.tiaoshiPao,
+        this.dateNum,
+        this.date
+      );
+      this.twoInit(this.date, this.dateNum, "month");
     });
   }
-  forward(){
-    this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}})
+  forward() {
+    this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_type"], {
+      queryParams: {
+        level: this.headname,
+        id: this.lastId,
+        type: this.zhiorbuild == "zhi" ? "zhi" : "build",
+      },
+    });
   }
-  reverse(){
-    this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}})
+  reverse() {
+    this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_time"], {
+      queryParams: {
+        level: this.headname,
+        id: this.lastId,
+        type: this.zhiorbuild == "zhi" ? "zhi" : "build",
+      },
+    });
   }
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
 
   //查询数据
-  years= []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+  years = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
       //this.years.unshift(i)
     }
   }
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectTwoYear:any = (new Date()).getFullYear() //结束年份
-  selectStartMonth:any = 1 //开始月份
-  selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectTwoYear: any = new Date().getFullYear(); //结束年份
+  selectStartMonth: any = 1; //开始月份
+  selectEndMonth: any = new Date().getMonth() + 1; //结束月份
   //按月查询
-  monthSubmit (e) {
-    this.serviceData.selectStartMonth=this.selectStartMonth
-    this.serviceData.selectEndMonth=this.selectEndMonth
+  monthSubmit(e) {
+    this.serviceData.selectStartMonth = this.selectStartMonth;
+    this.serviceData.selectEndMonth = this.selectEndMonth;
     //console.log(this.selectStartMonth,this.selectEndMonth)
-    this.date=[]
-    this.dateNum=[]
-    this.zongcount=0
-    if (e.selectEndMonth>=e.selectStartMonth) {
-      let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
-      let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
-      for(var i=0;i<this.tabledata[0].length;i++){
-        if(this.tabledata[0][i].month>=this.serviceData.selectStartMonth&&this.tabledata[0][i].month<=this.serviceData.selectEndMonth){
-          this.date.push(this.tabledata[0][i].month)
-          this.dateNum.push(this.tabledata[0][i].count)
-          this.zongcount=this.zongcount+this.tabledata[0][i].count
+    this.date = [];
+    this.dateNum = [];
+    this.zongcount = 0;
+    if (e.selectEndMonth >= e.selectStartMonth) {
+      let startTime =
+        e.selectOneYear +
+        "-" +
+        e.selectStartMonth +
+        "-" +
+        1 +
+        " " +
+        0 +
+        ":" +
+        0 +
+        ":" +
+        0;
+      let endTime =
+        e.selectTwoYear +
+        "-" +
+        e.selectEndMonth +
+        "-" +
+        31 +
+        " " +
+        23 +
+        ":" +
+        59 +
+        ":" +
+        59;
+      for (var i = 0; i < this.tabledata[0].length; i++) {
+        if (
+          this.tabledata[0][i].month >= this.serviceData.selectStartMonth &&
+          this.tabledata[0][i].month <= this.serviceData.selectEndMonth
+        ) {
+          this.date.push(this.tabledata[0][i].month);
+          this.dateNum.push(this.tabledata[0][i].count);
+          this.zongcount = this.zongcount + this.tabledata[0][i].count;
         }
       }
       //this.oneInit (this.date,this.dateNum)
-      this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
-      this.twoInit (this.date,this.dateNum,'month')
+      this.tiaoshiPao = this.serviceData.qipao(
+        this.tiaoshiPao,
+        this.dateNum,
+        this.date
+      );
+      this.twoInit(this.date, this.dateNum, "month");
     } else {
       const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('请选择正确时间区段','确定',config);
+      config.verticalPosition = "top";
+      config.duration = 3000;
+      this.snackBar.open("请选择正确时间区段", "确定", config);
     }
   }
-  selectStartYear:any = (new Date()).getFullYear()-1 //开始年份
-  selectEndYear:any = (new Date()).getFullYear() //结束年份
+  selectStartYear: any = new Date().getFullYear() - 1; //开始年份
+  selectEndYear: any = new Date().getFullYear(); //结束年份
   //按年查询
-  yearSubmit (e) {
-    this.zongcount=0
-    this.date2=[]
-    this.dateNum2=[]
+  yearSubmit(e) {
+    this.zongcount = 0;
+    this.date2 = [];
+    this.dateNum2 = [];
     if (e.selectEndYear >= e.selectStartYear) {
-      let startTime = e.selectStartYear + '-' + 1  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
-      let endTime = e.selectEndYear + '-' + 12  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
-      for(var i=0;i<this.tabledata[0].length;i++){
-        if(this.tabledata[0][i].year>=e.selectStartYear&&this.tabledata[0][i].year<=e.selectEndYear){
-          this.date2.push(this.tabledata[0][i].year)
-          this.dateNum2.push(this.tabledata[0][i].count)
-          this.zongcount=this.zongcount+this.tabledata[0][i].count
+      let startTime =
+        e.selectStartYear + "-" + 1 + "-" + 1 + " " + 0 + ":" + 0 + ":" + 0;
+      let endTime =
+        e.selectEndYear + "-" + 12 + "-" + 31 + " " + 23 + ":" + 59 + ":" + 59;
+      for (var i = 0; i < this.tabledata[0].length; i++) {
+        if (
+          this.tabledata[0][i].year >= e.selectStartYear &&
+          this.tabledata[0][i].year <= e.selectEndYear
+        ) {
+          this.date2.push(this.tabledata[0][i].year);
+          this.dateNum2.push(this.tabledata[0][i].count);
+          this.zongcount = this.zongcount + this.tabledata[0][i].count;
         }
       }
-      
+
       //this.oneInit (this.date,this.dateNum)
-      this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2)
-      this.twoInit (this.date2,this.dateNum2,'year')
+      this.tiaoshiPao = this.serviceData.qipao(
+        this.tiaoshiPao,
+        this.dateNum2,
+        this.date2
+      );
+      this.twoInit(this.date2, this.dateNum2, "year");
     } else {
       const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('结束年份必须大于开始年份','确定',config);
+      config.verticalPosition = "top";
+      config.duration = 3000;
+      this.snackBar.open("结束年份必须大于开始年份", "确定", config);
     }
   }
   //年或月点击
-  async dateChange(){
-    this.tiaoshiPao=null
-    this.forArr.forEach(item => {
-      item.echart.dispose()
-    })
-    
-    if(this.selectType == "year"){
-      this.zongcount=0
-      this.date2=[]
-      this.dateNum2=[]
-      this.years=[]
-      this.serviceData.selectType=2
-      let parzhi={
-        objectType:0,
-        BuildingTypeId:this.lastId,
-        TrendType:this.serviceData.selectType,
-      }
-      let parbuild={
-        objectType:0,
-        OrganizationId:this.lastId,
-        TrendType:this.serviceData.selectType,
-      }
+  async dateChange() {
+    this.tiaoshiPao = null;
+    this.forArr.forEach((item) => {
+      item.echart.dispose();
+    });
+
+    if (this.selectType == "year") {
+      this.zongcount = 0;
+      this.date2 = [];
+      this.dateNum2 = [];
+      this.years = [];
+      this.serviceData.selectType = 2;
+      let parzhi = {
+        objectType: 0,
+        BuildingTypeId: this.lastId,
+        TrendType: this.serviceData.selectType,
+      };
+      let parbuild = {
+        objectType: 0,
+        OrganizationId: this.lastId,
+        TrendType: this.serviceData.selectType,
+      };
       /* let paramdata={
         BuildingTypeId:this.lastId,
         TrendType:this.serviceData.selectType
       } */
-      await this.serviceData.getData(this.zhiorbuild=="zhi"?parbuild:parzhi,`/api/StatisticsAnalysis/Trends`)
+      await this.serviceData.getData(
+        this.zhiorbuild == "zhi" ? parbuild : parzhi,
+        `/api/StatisticsAnalysis/Trends`
+      );
       this.setTimeoutObj = window.setTimeout(() => {
-        this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
-        console.log(this.tabledata)
-        for(var i=0;i<this.tabledata[0].length;i++){
-          this.date2.push(this.tabledata[0][i].year)
-          this.dateNum2.push(this.tabledata[0][i].count)
-          this.zongcount=this.zongcount+this.tabledata[0][i].count
+        this.tabledata = JSON.parse(JSON.stringify(this.serviceData.allDate));
+        console.log(this.tabledata);
+        for (var i = 0; i < this.tabledata[0].length; i++) {
+          this.date2.push(this.tabledata[0][i].year);
+          this.dateNum2.push(this.tabledata[0][i].count);
+          this.zongcount = this.zongcount + this.tabledata[0][i].count;
           //this.years.push(this.tabledata[0][i].year)
-          this.years=['2020','2021','2022']
+          this.years = ["2020", "2021", "2022"];
         }
         //this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
-        this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2)
-        this.twoInit (this.date2,this.dateNum2,'year')
+        this.tiaoshiPao = this.serviceData.qipao(
+          this.tiaoshiPao,
+          this.dateNum2,
+          this.date2
+        );
+        this.twoInit(this.date2, this.dateNum2, "year");
       });
       /* this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2)
       this.twoInit(this.date2,this.dateNum2,'year') */
     }
-    if(this.selectType == "month"){
-      this.serviceData.selectType=0
-      this.getdata()
-      this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
+    if (this.selectType == "month") {
+      this.serviceData.selectType = 0;
+      this.getdata();
+      this.tiaoshiPao = this.serviceData.qipao(
+        this.tiaoshiPao,
+        this.dateNum,
+        this.date
+      );
       //this.oneInit(this.date,this.dateNum)
-      this.twoInit(this.date,this.dateNum,'month')
+      this.twoInit(this.date, this.dateNum, "month");
     }
-
   }
 
+  chartQusj; //顶部大图实例
+  forArr =
+    this.serviceData.zuzhiorBuilding == "zhi"
+      ? [
+          { id: "gaoceng", name: "浦东支队", echart: null },
+          { id: "dixia", name: "黄浦支队", echart: null },
+          { id: "guidao", name: "徐汇支队", echart: null },
+          { id: "huagong", name: "长宁支队", echart: null },
+          { id: "chuguan", name: "静安支队", echart: null },
+          { id: "changfang", name: "普陀支队", echart: null },
+          { id: "gujianzhu", name: "虹口支队", echart: null },
+          { id: "shichang", name: "杨浦支队", echart: null },
+          { id: "yiyuan", name: "闵行支队", echart: null },
+          { id: "xuexiao", name: "宝山支队", echart: null },
+          { id: "binguan", name: "嘉定支队", echart: null },
+          { id: "yule", name: "松江支队", echart: null },
+          { id: "canyin", name: "金山支队", echart: null },
+          { id: "yingyuan", name: "崇明支队", echart: null },
+        ]
+      : [
+          { id: "gaoceng", name: "高层", echart: null },
+          { id: "dixia", name: "地下", echart: null },
+          { id: "guidao", name: "轨道交通", echart: null },
+          { id: "huagong", name: "化工生产", echart: null },
+          { id: "chuguan", name: "储罐类", echart: null },
+          { id: "changfang", name: "厂房", echart: null },
+          { id: "gujianzhu", name: "古建筑", echart: null },
+          { id: "shichang", name: "商市场", echart: null },
+          { id: "yiyuan", name: "医院", echart: null },
+          { id: "xuexiao", name: "学校", echart: null },
+          { id: "binguan", name: "宾馆", echart: null },
+          { id: "yule", name: "娱乐场所", echart: null },
+          { id: "canyin", name: "餐饮业", echart: null },
+          { id: "yingyuan", name: "影剧院", echart: null },
+          { id: "zhanlan", name: "展览建筑", echart: null },
+          { id: "suidao", name: "隧道", echart: null },
+        ];
 
-  chartQusj//顶部大图实例
-  forArr =this.serviceData.zuzhiorBuilding=="zhi"? [{id:'gaoceng',name:'浦东支队',echart:null},
-            {id:'dixia',name:'黄浦支队',echart:null},
-            {id:'guidao',name:'徐汇支队',echart:null},
-            {id:'huagong',name:'长宁支队',echart:null},
-            {id:'chuguan',name:'静安支队',echart:null},
-            {id:'changfang',name:'普陀支队',echart:null},
-            {id:'gujianzhu',name:'虹口支队',echart:null},
-            {id:'shichang',name:'杨浦支队',echart:null},
-            {id:'yiyuan',name:'闵行支队',echart:null},
-            {id:'xuexiao',name:'宝山支队',echart:null},
-            {id:'binguan',name:'嘉定支队',echart:null},
-            {id:'yule',name:'松江支队',echart:null},
-            {id:'canyin',name:'金山支队',echart:null},
-            {id:'yingyuan',name:'崇明支队',echart:null}]:
-            [{id:'gaoceng',name:'高层',echart:null},
-            {id:'dixia',name:'地下',echart:null},
-            {id:'guidao',name:'轨道交通',echart:null},
-            {id:'huagong',name:'化工生产',echart:null},
-            {id:'chuguan',name:'储罐类',echart:null},
-            {id:'changfang',name:'厂房',echart:null},
-            {id:'gujianzhu',name:'古建筑',echart:null},
-            {id:'shichang',name:'商市场',echart:null},
-            {id:'yiyuan',name:'医院',echart:null},
-            {id:'xuexiao',name:'学校',echart:null},
-            {id:'binguan',name:'宾馆',echart:null},
-            {id:'yule',name:'娱乐场所',echart:null},
-            {id:'canyin',name:'餐饮业',echart:null},
-            {id:'yingyuan',name:'影剧院',echart:null},
-            {id:'zhanlan',name:'展览建筑',echart:null},
-            {id:'suidao',name:'隧道',echart:null}]
-
-  
-  date = []
-  dateNum = []
-  tiaoshiPao:any
+  date = [];
+  dateNum = [];
+  tiaoshiPao: any;
   //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.dateNum.length;i++){
-      arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},'
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.dateNum.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.dateNum[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.dateNum[i] +
+        '],"name":' +
+        '"' +
+        this.date[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
     //console.log(this.tiaoshiPao)
     //return tishiPao
   }
-  thisYear=new Date().getFullYear()
-  date2 = ['2020', '2021','2022']
-  dateNum2 = []
+  thisYear = new Date().getFullYear();
+  date2 = ["2020", "2021", "2022"];
+  dateNum2 = [];
 
   //新增数量统计
-  oneInit (date,dateNum) {
-    this.chartQusj = echarts.init(document.getElementById('Line'), 'skinUpp');
+  oneInit(date, dateNum) {
+    this.chartQusj = echarts.init(document.getElementById("Line"), "skinUpp");
     var option = {
       grid: {
         top: 70,
-        left:40,
+        left: 40,
         right: 20,
         bottom: 20,
       },
       // 标题
       title: {
-        text: '新增数量统计：总数（1012）',
+        text: "新增数量统计：总数（1012）",
         top: -4,
-        left: 'center',
-        textStyle:{
+        left: "center",
+        textStyle: {
           //文字颜色
-          color:'#000',
+          color: "#000",
           fontSize: 30,
-        }
+        },
       },
       //提示框
       tooltip: {
-        trigger: 'axis',
-        formatter:  (params)=>{
-          return this.serviceData.tableTooltip(this.serviceData.zuzhiorBuilding=="zhi"?this.serviceData.tableDataZhi :this.serviceData.buildingType,params[0].name)
+        trigger: "axis",
+        formatter: (params) => {
+          return this.serviceData.tableTooltip(
+            this.serviceData.zuzhiorBuilding == "zhi"
+              ? this.serviceData.tableDataZhi
+              : this.serviceData.buildingType,
+            params[0].name
+          );
         },
-        position:this.serviceData.tableTooltipNoShowt
+        position: this.serviceData.tableTooltipNoShowt,
       },
       // x轴
       xAxis: {
-        type: 'category',
+        type: "category",
         data: date,
         axisLabel: {
-          textStyle:{
-            fontSize :15,
-            color:'#000000'
+          textStyle: {
+            fontSize: 15,
+            color: "#000000",
           },
           color: "#000", //刻度线标签颜色
         },
         //设置坐标轴字体颜色和宽度
-        axisLine: {    
+        axisLine: {
           lineStyle: {
             color: "#000",
           },
         },
-        splitLine: {//分割线配置
-          show:true,
+        splitLine: {
+          //分割线配置
+          show: true,
           lineStyle: {
-            color: '#999',
-          }
-        }
+            color: "#999",
+          },
+        },
       },
       // y轴
       yAxis: {
-        type: 'value',
-        name: '个',
+        type: "value",
+        name: "个",
         axisLabel: {
-          textStyle:{
-            fontSize :15,
-            color:'#000000'
+          textStyle: {
+            fontSize: 15,
+            color: "#000000",
           },
-          color: "#000" //刻度线标签颜色
+          color: "#000", //刻度线标签颜色
         },
-         //设置坐标轴字体颜色和宽度
-         axisLine: {
+        //设置坐标轴字体颜色和宽度
+        axisLine: {
           lineStyle: {
             color: "#000",
-          }
-        }
+          },
+        },
       },
       // 数据
-      series: [{
-          name: '新增数量',
-          type: 'line',
+      series: [
+        {
+          name: "新增数量",
+          type: "line",
           markPoint: {
-            
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
-        },
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
           data: dateNum,
-        }
+        },
       ],
-    }
+    };
     this.chartQusj.setOption(option);
   }
 
   //剩余折线图
-  twoInit (date,dateNum,typeName) {
-    this.forArr.forEach((item,key) => {
-      let that = this
-      item.echart = echarts.init(document.getElementById('gaoceng'), 'skinUpp');
+  twoInit(date, dateNum, typeName) {
+    this.forArr.forEach((item, key) => {
+      let that = this;
+      item.echart = echarts.init(document.getElementById("gaoceng"), "skinUpp");
       var option = {
         grid: {
           top: 90,
         },
         // 标题
         title: {
-          text: this.headname+`：总数（${this.zongcount}）`,
-          top:-4,
-          left: 'center',
-          textStyle:{
+          text: this.headname + `：总数（${this.zongcount}）`,
+          top: -4,
+          left: "center",
+          textStyle: {
             //文字颜色
-            color:'#000',
-            fontSize:30
-          }
+            color: "#000",
+            fontSize: 30,
+          },
         },
         //提示框
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           formatter: function (params) {
             //console.log(params)
-            return '时间:' + params[0].axisValueLabel + '<br>数量: ' + params[0].data;
-        },
+            return (
+              "时间:" + params[0].axisValueLabel + "<br>数量: " + params[0].data
+            );
+          },
           /* formatter:  (params)=>{
             if(params[0].seriesName == "year"){
               return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
@@ -383,92 +486,120 @@ export class AddUnitTwoTimeComponent implements OnInit {
               return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
             }
           }, */
-          position: this.serviceData.tableTooltipNoShow
+          position: this.serviceData.tableTooltipNoShow,
         },
         // x轴
         xAxis: {
-          type: 'category',
+          type: "category",
           data: date,
           axisLabel: {
-            textStyle:{
-              fontSize :16,
-              color:'#000000'
+            textStyle: {
+              fontSize: 16,
+              color: "#000000",
             },
             color: "#000", //刻度线标签颜色
           },
           //设置坐标轴字体颜色和宽度
-          axisLine: {    
+          axisLine: {
             lineStyle: {
               color: "#000",
             },
           },
-          splitLine: {//分割线配置
-            show:true,
+          splitLine: {
+            //分割线配置
+            show: true,
             lineStyle: {
-              color: '#999',
-            }
-          }
+              color: "#999",
+            },
+          },
         },
         // y轴
         yAxis: {
           //min:10,
-          type: 'value',
-          name: '个',
+          type: "value",
+          name: "个",
           axisLabel: {
-            textStyle:{
-              fontSize :16,
-              color:'#000000'
+            textStyle: {
+              fontSize: 16,
+              color: "#000000",
             },
-            color: "#000" //刻度线标签颜色
+            color: "#000", //刻度线标签颜色
           },
-           //设置坐标轴字体颜色和宽度
-           axisLine: {
+          //设置坐标轴字体颜色和宽度
+          axisLine: {
             lineStyle: {
               color: "#000",
-            }
-          }
+            },
+          },
         },
         // 数据
-        series: [{
+        series: [
+          {
             name: typeName,
-            type: 'line',
+            type: "line",
             markPoint: {
-            
-              symbolSize:[65, 65],
-              data: this.tiaoshiPao
-          },
+              symbolSize: [65, 65],
+              data: this.tiaoshiPao,
+            },
             data: dateNum,
-          }
+          },
         ],
       };
-      item.echart.setOption(option,true);
-      item.echart.getZr().on('click',params=>{
-        const pointInPixel= [params.offsetX, params.offsetY];
-        if (item.echart.containPixel('grid',pointInPixel)) {
-            let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
-            /*事件处理代码书写位置*/
-            // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name)
-            if(option.series[0].name == "year"){
-              this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':this.headname,'id':this.lastId,'type':this.zhiorbuild}});
+      item.echart.setOption(option, true);
+      item.echart.getZr().on("click", (params) => {
+        const pointInPixel = [params.offsetX, params.offsetY];
+        if (item.echart.containPixel("grid", pointInPixel)) {
+          let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [
+            params.offsetX,
+            params.offsetY,
+          ])[0];
+          /*事件处理代码书写位置*/
+          // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name)
+          if (option.series[0].name == "year") {
+            this.router.navigate(
+              [
+                "/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails",
+              ],
+              {
+                queryParams: {
+                  year: this.date2[xIndex],
+                  buildingType: this.headname,
+                  id: this.lastId,
+                  type: this.zhiorbuild,
+                },
+              }
+            );
 
-              /* this.selectType="month"
+            /* this.selectType="month"
               this.yeardatee=option.xAxis.data[xIndex]
               this.getdata() */
-
-            }else{
-              if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){
-                //this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}});
-                this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild,'year':this.thisYear,'month':option.xAxis.data[xIndex]}})
-              }
-              
+          } else {
+            if (
+              this.serviceData.level == "0" ||
+              this.serviceData.level == "1" ||
+              this.serviceData.level == "2"
+            ) {
+              //this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}});
+              this.router.navigate(
+                ["/statisticanalysis/addUnit_one/addUnit_two_type"],
+                {
+                  queryParams: {
+                    level: this.headname,
+                    id: this.lastId,
+                    type: this.zhiorbuild,
+                    year: this.thisYear,
+                    month: option.xAxis.data[xIndex],
+                  },
+                }
+              );
             }
-            
+          }
         }
       });
-    })
+    });
   }
   //返回
-  backClick(){
-    this.router.navigateByUrl('/statisticanalysis/addUnit_one')
+  backClick() {
+    this.router.navigateByUrl("/statisticanalysis/addUnit_one");
   }
 }

src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts

@@ -93,6 +93,9 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
   }
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
+    if (!this.detailPlanEchart) {
+      return;
+    }
     this.detailPlanEchart.clear()
     this.detailPlanEchart.dispose()
   }

src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts

@@ -1,187 +1,230 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { HttpClient } from '@angular/common/http'
-import {EchartsDataService,} from '../../echarts-data.service'
-import { map } from 'rxjs/operators';
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { HttpClient } from "@angular/common/http";
+import { EchartsDataService } from "../../echarts-data.service";
+import { map } from "rxjs/operators";
 declare var echarts: any;
 @Component({
-  selector: 'app-building-type-one',
-  templateUrl: './building-type-one.component.html',
-  styleUrls: ['./building-type-one.component.scss']
+  selector: "app-building-type-one",
+  templateUrl: "./building-type-one.component.html",
+  styleUrls: ["./building-type-one.component.scss"],
 })
 export class BuildingTypeOneComponent implements OnInit {
-
-  constructor(private http:HttpClient,private router: Router,public echartsData:EchartsDataService) { }
+  constructor(
+    private http: HttpClient,
+    private router: Router,
+    public echartsData: EchartsDataService
+  ) {}
 
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1400px)").matches){
-      this.padHw=true
+    if (window.matchMedia("(max-width: 1400px)").matches) {
+      this.padHw = true;
       //this.padjt=
-    }else{
-      this.padHw=false
+    } else {
+      this.padHw = false;
     }
-    
-    window.setTimeout(()=>{
-      this.getechartsdata()
-    })
+
+    window.setTimeout(() => {
+      this.getechartsdata();
+    });
   }
   ngOnDestroy(): void {
-    this.indexBzt.clear()
-    this.indexBzt.dispose()
+    if (!this.indexBzt) {
+      return;
+    }
+    this.indexBzt.clear();
+    this.indexBzt.dispose();
   }
-  async getechartsdata(){
-    await this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`)
-    this.initCharts()
+  async getechartsdata() {
+    await this.echartsData.getData(
+      null,
+      `/api/StatisticsAnalysis/BuildingTypes`
+    );
+    this.initCharts();
   }
   /* 首页饼状图 */
-  indexBzt
-  padHw
-  lengthdata=[]//提示数据
-  count=0//总数
-  indexData=[]//所有数据
-  tabledata
-  initCharts(){
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+  indexBzt;
+  padHw;
+  lengthdata = []; //提示数据
+  count = 0; //总数
+  indexData = []; //所有数据
+  tabledata;
+  initCharts() {
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
-      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
-      // console.log(this.tabledata)
-      //console.log(this.echartsData.orid)
-      for(var i=0;i<this.tabledata[0].buildingTypes.length;i++){
-        this.lengthdata.push(this.tabledata[0].buildingTypes[i].buildingTypeName)
-        this.count=this.count+this.tabledata[0].buildingTypes[i].count
-        this.indexData.push(this.tabledata[0].buildingTypes[i])
-      }
-      //JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name'))
-      this.indexData=this.indexData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}})
-      //console.log(this.indexData)
-      this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden');
-    let options={
+    }
+    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
+    // console.log(this.tabledata)
+    //console.log(this.echartsData.orid)
+    for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) {
+      this.lengthdata.push(this.tabledata[0].buildingTypes[i].buildingTypeName);
+      this.count = this.count + this.tabledata[0].buildingTypes[i].count;
+      this.indexData.push(this.tabledata[0].buildingTypes[i]);
+    }
+    //JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name'))
+    this.indexData = this.indexData.map((v) => {
+      return { name: v.buildingTypeName, value: v.count, id: v.buildingTypeId };
+    });
+    //console.log(this.indexData)
+    this.indexBzt = echarts.init(document.getElementById("indexBzt"), "walden");
+    let options = {
       title: {
         text: `建筑类型统计（${this.count}家）`,
-        left: 'center',
-          top: "7%",
-          textStyle: {
-            fontSize:31
-          }
+        left: "center",
+        top: "7%",
+        textStyle: {
+          fontSize: 31,
+        },
       },
       tooltip: {
-        trigger: 'item',
+        trigger: "item",
         position: this.echartsData.tableTooltipNoShow2,
-        formatter: (params)=>{
-          this.echartsData.biaogeTishiZhi(params.data)
-            return this.echartsData.res
-        }
+        formatter: (params) => {
+          this.echartsData.biaogeTishiZhi(params.data);
+          return this.echartsData.res;
+        },
       },
       legend: {
-        orient: 'vertical',
+        orient: "vertical",
         //left:this.padHw?50:0,
-        right:this.padHw?20:250,
-        top:60,
-        textStyle:{
-          fontSize:18,
-          color:"#000000"
-        }, 
-        data: this.lengthdata
+        right: this.padHw ? 20 : 250,
+        top: 60,
+        textStyle: {
+          fontSize: 18,
+          color: "#000000",
+        },
+        data: this.lengthdata,
       },
       series: [
         {
-          top:this.padHw?'15%':'0',
-          name: '访问来源',
-          type: 'pie',
-          radius: '60%',
-          center: ['50%', '53%'],
-          label:{
-            show:true,
-            fontSize:18,
-            formatter:'{b}{c}家\n{d|({d}%)}',
+          top: this.padHw ? "15%" : "0",
+          name: "访问来源",
+          type: "pie",
+          radius: "60%",
+          center: ["50%", "53%"],
+          label: {
+            show: true,
+            fontSize: 18,
+            formatter: "{b}{c}家\n{d|({d}%)}",
             rich: {
               d: {
-                align: 'center',
-                fontSize:18
-              }
+                align: "center",
+                fontSize: 18,
+              },
             },
           },
-          data:this.indexData,
+          data: this.indexData,
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
     };
-    this.indexBzt.on('click', (params) => {
-      var index=0
-      for(var i=0;i<this.tabledata[0].buildingTypes.length;i++){
-        if(this.tabledata[0].buildingTypes[i].buildingTypeName==params.name){
-          if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].buildingTypes[i].organizations.length>0){
+    this.indexBzt.on("click", (params) => {
+      var index = 0;
+      for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) {
+        if (
+          this.tabledata[0].buildingTypes[i].buildingTypeName == params.name
+        ) {
+          if (
+            (this.echartsData.level == "0" ||
+              this.echartsData.level == "1" ||
+              this.echartsData.level == "2") &&
+            this.tabledata[0].buildingTypes[i].organizations.length > 0
+          ) {
             //总队,支队，大队跳转
-            this.tabledata[0].buildingTypes[i].organizations.forEach((value,index,array) => {
-              if(array[index].organizationId==this.echartsData.orid){
-                array.splice(index,1)
+            this.tabledata[0].buildingTypes[i].organizations.forEach(
+              (value, index, array) => {
+                if (array[index].organizationId == this.echartsData.orid) {
+                  array.splice(index, 1);
+                }
+                if (array.length > 0) {
+                  this.router.navigate(
+                    [
+                      "/statisticanalysis/buildingType_one/buildingType_two_reverse",
+                    ],
+                    { queryParams: { level: params.name, id: params.data.id } }
+                  );
+                } else {
+                  this.router.navigate(["/statisticanalysis/CompangInfo"], {
+                    queryParams: {
+                      name: params.name,
+                      type: 1,
+                      buildid: params.data.id,
+                    },
+                  });
+                }
               }
-              if(array.length>0){
-                this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'],{queryParams:{'level':params.name,'id':params.data.id}});
-              }else{
-                this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}});
-              }
-            });
-            
-          }else {
+            );
+          } else {
             //中队跳转
-            this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}});
+            this.router.navigate(["/statisticanalysis/CompangInfo"], {
+              queryParams: {
+                name: params.name,
+                type: 1,
+                buildid: params.data.id,
+              },
+            });
           }
         }
       }
-      
-      
-      
     });
     this.indexBzt.setOption(options);
-    
-    
-    
   }
-  tishiData
-  res:string
-  biaogeTishiZhi(datas){
-    for(var a in this.tabledata.buildingTypes){
-      if(this.tabledata.buildingTypes[a].buildingTypeId==datas.id){
-        this.tishiData=this.tabledata.buildingTypes[a].organizations
+  tishiData;
+  res: string;
+  biaogeTishiZhi(datas) {
+    for (var a in this.tabledata.buildingTypes) {
+      if (this.tabledata.buildingTypes[a].buildingTypeId == datas.id) {
+        this.tishiData = this.tabledata.buildingTypes[a].organizations;
       }
     }
-    var countall=0//总计
-    var countbi=0//站比
-    var allCountbi=0//总站比
-      for(var i=0;i<this.tishiData.length;i++){
-        countall+=this.tishiData[i].count
-      }
-       this.res= '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>'
-       this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
-       this.res+='<thead style="font-size:18px;"><tr>';
-       this.res+='<td style="text-align:center;width:30%;">名称</td>';
-       this.res+='<td style="text-align:center;width:30%;">数量</td>'
-       this.res+='<td style="text-align:center;width:30%;">总占比</td>'
-       this.res+='</tr></thead>'
-       this.res+='<tbody>';
-       //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
-       for(var i=0;i<this.tishiData.length;i++){
-         countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00
-         allCountbi=allCountbi+countbi
-        this.res+='<tr>'
-        this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
-        this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
-        this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>'
-       }
-       
-       this.res+='</tbody>'
-       this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
-       this.res+='</table></div></div>'
-       return this.res
-    
- }
+    var countall = 0; //总计
+    var countbi = 0; //站比
+    var allCountbi = 0; //总站比
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countall += this.tishiData[i].count;
+    }
+    this.res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
+      datas.name +
+      "</span></div>";
+    this.res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
+    this.res += '<thead style="font-size:18px;"><tr>';
+    this.res += '<td style="text-align:center;width:30%;">名称</td>';
+    this.res += '<td style="text-align:center;width:30%;">数量</td>';
+    this.res += '<td style="text-align:center;width:30%;">总占比</td>';
+    this.res += "</tr></thead>";
+    this.res += "<tbody>";
+    //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countbi =
+        Math.round((this.tishiData[i].count / countall) * 10000) / 100.0;
+      allCountbi = allCountbi + countbi;
+      this.res += "<tr>";
+      this.res +=
+        '<td style="text-align:center;">' +
+        this.tishiData[i].organizationName +
+        "</td>";
+      this.res +=
+        '<td style="text-align:center;">' + this.tishiData[i].count + "</td>";
+      this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>";
+    }
+
+    this.res += "</tbody>";
+    this.res +=
+      '<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' +
+      countall +
+      '</td><td style="text-align:center;">' +
+      allCountbi.toFixed(2) +
+      "%</td></tfoot>";
+    this.res += "</table></div></div>";
+    return this.res;
+  }
 }

src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts

@@ -1,239 +1,316 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
-import { Local } from 'protractor/built/driverProviders';
-import {EchartsDataService} from '../../echarts-data.service';
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { ActivatedRoute } from "@angular/router";
+import { Local } from "protractor/built/driverProviders";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 @Component({
-  selector: 'app-building-type-three-details',
-  templateUrl: './building-type-three-details.component.html',
-  styleUrls: ['./building-type-three-details.component.scss']
+  selector: "app-building-type-three-details",
+  templateUrl: "./building-type-three-details.component.html",
+  styleUrls: ["./building-type-three-details.component.scss"],
 })
 export class BuildingTypeThreeDetailsComponent implements OnInit {
-
-  constructor(public route: ActivatedRoute,private router: Router,public echartsData:EchartsDataService) { }
-  forward(){
-    this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward'])
+  constructor(
+    public route: ActivatedRoute,
+    private router: Router,
+    public echartsData: EchartsDataService
+  ) {}
+  forward() {
+    this.router.navigate([
+      "/statisticanalysis/buildingType_one/buildingType_two_forward",
+    ]);
   }
-  reverse(){
-    this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'])
+  reverse() {
+    this.router.navigate([
+      "/statisticanalysis/buildingType_one/buildingType_two_reverse",
+    ]);
   }
   //返回
-  goBack () {
-    sessionStorage.setItem('refresh', 'true');
+  goBack() {
+    sessionStorage.setItem("refresh", "true");
     history.go(-1);
-    this.echartsData.statefulInspectionToggle = true
+    this.echartsData.statefulInspectionToggle = true;
   }
 
-  organizationName:String
-  listorganizationId//上个页面传过来的组织id
-  buildingTypeName:String
-  buildingTypeId
-  organizationId=[]//本层id
-  padHw
+  organizationName: String;
+  listorganizationId; //上个页面传过来的组织id
+  buildingTypeName: String;
+  buildingTypeId;
+  organizationId = []; //本层id
+  padHw;
 
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1300px)").matches){
-      this.padHw=true
+    if (window.matchMedia("(max-width: 1300px)").matches) {
+      this.padHw = true;
       //this.padjt=
-    }else{
-      this.padHw=false
+    } else {
+      this.padHw = false;
     }
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
-    this.route.queryParams.subscribe(params => {
-      this.organizationName = params['organizationName'];
-      this.buildingTypeName = params['buildingTypeName'];
-      this.listorganizationId=params['organizationId'];
-      this.buildingTypeId=params['buildId'];
+    }
+    this.route.queryParams.subscribe((params) => {
+      this.organizationName = params["organizationName"];
+      this.buildingTypeName = params["buildingTypeName"];
+      this.listorganizationId = params["organizationId"];
+      this.buildingTypeId = params["buildId"];
+    });
+
+    window.setTimeout(() => {
+      this.getechartsdata();
     });
-    
-    
-    window.setTimeout(()=>{
-      this.getechartsdata()
-    })
   }
-  
+
   ngOnDestroy(): void {
-    this.detailPlanEchart.clear()
-    this.detailPlanEchart.dispose()
+    if (!this.detailPlanEchart) {
+      return;
+    }
+    this.detailPlanEchart.clear();
+    this.detailPlanEchart.dispose();
   }
-  async getechartsdata(){
-    let paramsdata={
+  async getechartsdata() {
+    let paramsdata = {
       //id:this.buildingTypeId,
-      organizationId:this.listorganizationId
+      organizationId: this.listorganizationId,
+    };
+    await this.echartsData.getData(
+      paramsdata,
+      `/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`
+    );
+    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
+    //console.log(this.tabledata)
+    for (var i = 0; i < this.tabledata[0].organizations.length; i++) {
+      this.zhongNameData.push(
+        this.tabledata[0].organizations[i].organizationName
+      );
+      this.zhongNumData.push(this.tabledata[0].organizations[i].count);
+      this.organizationId.push(
+        this.tabledata[0].organizations[i].organizationId
+      );
     }
-    await this.echartsData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`)
-    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
-      //console.log(this.tabledata)
-      for(var i=0;i<this.tabledata[0].organizations.length;i++){
-        this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName)
-        this.zhongNumData.push(this.tabledata[0].organizations[i].count)
-        this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
-      }
-      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
-      this.detailEcharts()
+    this.tiaoshiPao = this.echartsData.qipao(
+      this.tiaoshiPao,
+      this.zhongNumData,
+      this.zhongNameData
+    );
+    this.detailEcharts();
   }
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
-  zhongNameData = []
-  zhongNumData = []
-  tiaoshiPao:any
-  detailPlanEchart
-  tabledata
-  detailEcharts(){
-    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');  
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
+  zhongNameData = [];
+  zhongNumData = [];
+  tiaoshiPao: any;
+  detailPlanEchart;
+  tabledata;
+  detailEcharts() {
+    this.detailPlanEchart = echarts.init(
+      document.getElementById("barEchart"),
+      "walden"
+    );
     var option = {
       title: {
-        top:this.padHw?10:0,
-        text: this.buildingTypeName + '(' +this.organizationName + ')'+`：总数(${this.tabledata[0].totalCount})`,
+        top: this.padHw ? 10 : 0,
+        text:
+          this.buildingTypeName +
+          "(" +
+          this.organizationName +
+          ")" +
+          `：总数(${this.tabledata[0].totalCount})`,
         left: "center",
         textStyle: {
-          fontSize: 30
-        }
+          fontSize: 30,
+        },
       },
       grid: {
-        top:this.padHw?120:110,
+        top: this.padHw ? 120 : 110,
         //bottom: 10
-    },
+      },
       xAxis: {
-        id:this.organizationId,
-          type: 'category',
-          data: this.zhongNameData,
-          // axisLabel: this.axisLabel
-          axisLabel:{
-            //this.axisLabel,
-            textStyle:{
-              fontSize :18,
-              color:'#000000'
-            }
-            
-          }
+        id: this.organizationId,
+        type: "category",
+        data: this.zhongNameData,
+        // axisLabel: this.axisLabel
+        axisLabel: {
+          //this.axisLabel,
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
+        },
       },
       yAxis: {
-          type: 'value',
-          axisLabel:{
-            //this.axisLabel,
-            textStyle:{
-              fontSize :18,
-              color:'#000000'
-            }
-            
-          }
+        type: "value",
+        axisLabel: {
+          //this.axisLabel,
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
+        },
       },
       tooltip: {
-        trigger: 'item',
-        formatter:  (params)=>{
-          return this.tableTooltip(params)
-        }
+        trigger: "item",
+        formatter: (params) => {
+          return this.tableTooltip(params);
+        },
       },
-      series: [{
-          id:this.organizationId,
+      series: [
+        {
+          id: this.organizationId,
           data: this.zhongNumData,
-          type: 'bar',
-          barWidth :'38',
+          type: "bar",
+          barWidth: "38",
           markPoint: {
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
-        },
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
           backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
+            color: "rgba(220, 220, 220, 0.8)",
           },
           //label: this.topTextlabel
-      }]
+        },
+      ],
     };
     this.detailPlanEchart.setOption(option);
-    this.detailPlanEchart.getZr().on('click', (params) => {
-      const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
-        let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+    this.detailPlanEchart.getZr().on("click", (params) => {
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.detailPlanEchart.containPixel("grid", pointInPixel)) {
+        let xIndex = this.detailPlanEchart.convertFromPixel(
+          { seriesIndex: 0 },
+          [params.offsetX, params.offsetY]
+        )[0];
         /*事件处理代码书写位置*/
-        if(this.echartsData.level=="0"&&this.tiao==false&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){
+        if (
+          this.echartsData.level == "0" &&
+          this.tiao == false &&
+          this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1
+        ) {
           //总队不跳转
-          this.zhongNameData=[]
-          this.zhongNumData=[]
-          this.organizationId=[]
-          this.tiaoshiPao=''
-          let paramsdatee={
-            id:this.buildingTypeId,
-            organizationId:option.xAxis.id[xIndex]
-          }
-          this.echartsData.getData(paramsdatee,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`)
-          window.setTimeout(()=>{
-            this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
+          this.zhongNameData = [];
+          this.zhongNumData = [];
+          this.organizationId = [];
+          this.tiaoshiPao = "";
+          let paramsdatee = {
+            id: this.buildingTypeId,
+            organizationId: option.xAxis.id[xIndex],
+          };
+          this.echartsData.getData(
+            paramsdatee,
+            `/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`
+          );
+          window.setTimeout(() => {
+            this.tabledata = JSON.parse(
+              JSON.stringify(this.echartsData.allDate)
+            );
             //console.log(this.tabledata)
-            for(var i=0;i<this.tabledata[0].organizations.length;i++){
-              this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName)
-              this.zhongNumData.push(this.tabledata[0].organizations[i].count)
-              this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
+            for (var i = 0; i < this.tabledata[0].organizations.length; i++) {
+              this.zhongNameData.push(
+                this.tabledata[0].organizations[i].organizationName
+              );
+              this.zhongNumData.push(this.tabledata[0].organizations[i].count);
+              this.organizationId.push(
+                this.tabledata[0].organizations[i].organizationId
+              );
             }
-            option.title.text = this.buildingTypeName + '(' +option.xAxis.data[xIndex]+ ')'+`：总数(${this.tabledata[0].totalCount})`
-            option.xAxis.data = this.zhongNameData
-            option.series[0].data = this.zhongNumData
-            this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData)
-            option.series[0].markPoint.data=this.tiaoshiPao
+            option.title.text =
+              this.buildingTypeName +
+              "(" +
+              option.xAxis.data[xIndex] +
+              ")" +
+              `：总数(${this.tabledata[0].totalCount})`;
+            option.xAxis.data = this.zhongNameData;
+            option.series[0].data = this.zhongNumData;
+            this.tiaoshiPao = this.echartsData.qipao(
+              this.tiaoshiPao,
+              this.zhongNumData,
+              this.zhongNameData
+            );
+            option.series[0].markPoint.data = this.tiaoshiPao;
             //option.series[0].id=this.organizationId
-            option.xAxis.id=this.organizationId
-            this.detailPlanEchart.clear()
-            this.detailPlanEchart.setOption(option)
-            
+            option.xAxis.id = this.organizationId;
+            this.detailPlanEchart.clear();
+            this.detailPlanEchart.setOption(option);
+
             //this.detailEcharts()
-          },1000)
-          this.tiao=true
+          }, 1000);
+          this.tiao = true;
+        } else {
+          this.router.navigate(["/statisticanalysis/CompangInfo"], {
+            queryParams: {
+              name: option.xAxis.data[xIndex],
+              type: 1,
+              jsid: option.xAxis.id[xIndex],
+              buildid: this.buildingTypeId,
+            },
+          });
         }
-        else{
-          this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.buildingTypeId}});
-        }
-        
       }
     });
   }
 
-  tiao=false
-  tishiData
-  res
-  tableTooltip(datas:any){
-    for(var a in this.echartsData.obdata[0].organizations){
-      if(this.echartsData.obdata[0].organizations[a].organizationName==datas.name){
-        this.tishiData=this.echartsData.obdata[0].organizations[a].subOrganizations
+  tiao = false;
+  tishiData;
+  res;
+  tableTooltip(datas: any) {
+    for (var a in this.echartsData.obdata[0].organizations) {
+      if (
+        this.echartsData.obdata[0].organizations[a].organizationName ==
+        datas.name
+      ) {
+        this.tishiData =
+          this.echartsData.obdata[0].organizations[a].subOrganizations;
       }
     }
-    var countall=0//总计
-    var countbi=0//站比
-    var allCountbi=0//总站比
-      for(var i=0;i<this.tishiData.length;i++){
-        countall+=this.tishiData[i].count
-      }
-      this.res= '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>'
-      this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
-      this.res+='<thead style="font-size:18px;"><tr>';
-      this.res+='<td style="text-align:center;width:30%;">名称</td>';
-      this.res+='<td style="text-align:center;width:30%;">数量</td>'
-      this.res+='<td style="text-align:center;width:30%;">总占比</td>'
-      this.res+='</tr></thead>'
-      this.res+='<tbody>';
-      for(var i=0;i<this.tishiData.length;i++){
-        countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00
-        allCountbi=allCountbi+countbi
-       this.res+='<tr>'
-       this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
-       this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
-       this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>'
-      }
-      
-      this.res+='</tbody>'
-      this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
-      this.res+='</table></div></div>'
-      return this.res
+    var countall = 0; //总计
+    var countbi = 0; //站比
+    var allCountbi = 0; //总站比
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countall += this.tishiData[i].count;
+    }
+    this.res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
+      datas.name +
+      "</span></div>";
+    this.res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
+    this.res += '<thead style="font-size:18px;"><tr>';
+    this.res += '<td style="text-align:center;width:30%;">名称</td>';
+    this.res += '<td style="text-align:center;width:30%;">数量</td>';
+    this.res += '<td style="text-align:center;width:30%;">总占比</td>';
+    this.res += "</tr></thead>";
+    this.res += "<tbody>";
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countbi =
+        Math.round((this.tishiData[i].count / countall) * 10000) / 100.0;
+      allCountbi = allCountbi + countbi;
+      this.res += "<tr>";
+      this.res +=
+        '<td style="text-align:center;">' +
+        this.tishiData[i].organizationName +
+        "</td>";
+      this.res +=
+        '<td style="text-align:center;">' + this.tishiData[i].count + "</td>";
+      this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>";
+    }
+
+    this.res += "</tbody>";
+    this.res +=
+      '<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' +
+      countall +
+      '</td><td style="text-align:center;">' +
+      allCountbi.toFixed(2) +
+      "%</td></tfoot>";
+    this.res += "</table></div></div>";
+    return this.res;
   }
 }

src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts

@@ -1,213 +1,278 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {EchartsDataService} from '../../echarts-data.service';
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 @Component({
-  selector: 'app-building-type-two-forward',
-  templateUrl: './building-type-two-forward.component.html',
-  styleUrls: ['./building-type-two-forward.component.scss']
+  selector: "app-building-type-two-forward",
+  templateUrl: "./building-type-two-forward.component.html",
+  styleUrls: ["./building-type-two-forward.component.scss"],
 })
 export class BuildingTypeTwoForwardComponent implements OnInit {
-
-  constructor(private router: Router,public data:EchartsDataService) { }
-  forward(){
-    this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward'])
+  constructor(private router: Router, public data: EchartsDataService) {}
+  forward() {
+    this.router.navigate([
+      "/statisticanalysis/buildingType_one/buildingType_two_forward",
+    ]);
   }
-  reverse(){
-    this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'])
+  reverse() {
+    this.router.navigate([
+      "/statisticanalysis/buildingType_one/buildingType_two_reverse",
+    ]);
   }
   ngOnInit(): void {
-    window.setTimeout(()=>{
-      this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
-      this.initCharts()
-      this.barEcharts()
-    },0)
+    window.setTimeout(() => {
+      this.tiaoshiPao = this.data.qipao(
+        this.tiaoshiPao,
+        this.zhiNumData,
+        this.zhiNameData
+      );
+      this.initCharts();
+      this.barEcharts();
+    }, 0);
   }
   ngOnDestroy(): void {
-    this.indexBzt.clear()
-    this.indexBzt.dispose()
-    this.forArr.forEach(item => {
-      item.echart.clear()
-      item.echart.dispose()
-    })
+    this.forArr.forEach((item) => {
+      if (!item.echart) {
+        return;
+      }
+      item.echart.clear();
+      item.echart.dispose();
+    });
+    if (!this.indexBzt) {
+      return;
+    }
+    this.indexBzt.clear();
+    this.indexBzt.dispose();
   }
   //返回
-  goBack () {
-    sessionStorage.setItem('refresh', 'true');
+  goBack() {
+    sessionStorage.setItem("refresh", "true");
     history.go(-1);
-    this.data.statefulInspectionToggle = true
+    this.data.statefulInspectionToggle = true;
   }
   axisLabel = {
-    interval: 0,  
-    textStyle:{
-      fontSize :16,
-      color:'#000000'
-    }, 
-    formatter:function(value)  
-      {    
-        var ret = "";//拼接加\n返回的类目项  
-        var maxLength = 2;//每项显示文字个数  
-        var valLength = value.length;//X轴类目项的文字个数  
-        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
-        if (rowN > 1)//如果类目项的文字大于3,  
-        {  
-            for (var i = 0; i < rowN; i++) {  
-                var temp = "";//每次截取的字符串  
-                var start = i * maxLength;//开始截取的位置  
-                var end = start + maxLength;//结束截取的位置  
-                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
-                temp = value.substring(start, end) + "\n";  
-                ret += temp; //凭借最终的字符串  
-            }  
-            return ret;  
-        }  
-        else {  
-            return value;  
-        }  
-      }  
-  }//echarts两个字换行
+    interval: 0,
+    textStyle: {
+      fontSize: 16,
+      color: "#000000",
+    },
+    formatter: function (value) {
+      var ret = ""; //拼接加\n返回的类目项
+      var maxLength = 2; //每项显示文字个数
+      var valLength = value.length; //X轴类目项的文字个数
+      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+      if (rowN > 1) {
+        //如果类目项的文字大于3,
+        for (var i = 0; i < rowN; i++) {
+          var temp = ""; //每次截取的字符串
+          var start = i * maxLength; //开始截取的位置
+          var end = start + maxLength; //结束截取的位置
+          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+          temp = value.substring(start, end) + "\n";
+          ret += temp; //凭借最终的字符串
+        }
+        return ret;
+      } else {
+        return value;
+      }
+    },
+  }; //echarts两个字换行
 
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
 
-  tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"},
-                    {name:"黄浦支队",number:"144",zhanbi:"2.8%"},
-                    {name:"徐汇支队",number:"133",zhanbi:"2.1%"},
-                    {name:"长宁支队",number:"122",zhanbi:"1.6%"},
-                    {name:"静安支队",number:"120",zhanbi:"1.3%"},
-                    {name:"普陀支队",number:"100",zhanbi:"1.1%"},
-                    {name:"虹口支队",number:"95",zhanbi:"1%"},
-                    {name:"杨浦支队",number:"90",zhanbi:"0.9%"},
-                    {name:"闵行支队",number:"88",zhanbi:"0.8%"},
-                    {name:"宝山支队",number:"83",zhanbi:"0.7%"},
-                    {name:"徐汇支队",number:"133",zhanbi:"2.1%"},
-                    {name:"长宁支队",number:"122",zhanbi:"1.6%"},
-                    {name:"嘉定支队",number:"78",zhanbi:"0.6%"},
-                    {name:"松江支队",number:"75",zhanbi:"0.5%"},
-                    {name:"金山支队",number:"65",zhanbi:"0.4%"},
-                    {name:"崇明支队",number:"55",zhanbi:"0.3%"} ]
-  tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"},
-                      {name:"黄浦中队",number:"144",zhanbi:"2.8%"},
-                      {name:"徐汇中队",number:"133",zhanbi:"2.1%"},
-                      {name:"长宁中队",number:"122",zhanbi:"1.6%"},
-                      {name:"静安中队",number:"120",zhanbi:"1.3%"},
-                      {name:"普陀中队",number:"100",zhanbi:"1.1%"},
-                      {name:"虹口中队",number:"95",zhanbi:"1%"},
-                      {name:"杨浦中队",number:"90",zhanbi:"0.9%"},
-                      {name:"闵行中队",number:"88",zhanbi:"0.8%"},
-                      {name:"宝山中队",number:"83",zhanbi:"0.7%"},
-                      {name:"徐汇中队",number:"133",zhanbi:"2.1%"},
-                      {name:"长宁中队",number:"122",zhanbi:"1.6%"},
-                      {name:"嘉定中队",number:"78",zhanbi:"0.6%"},
-                      {name:"松江中队",number:"75",zhanbi:"0.5%"},
-                      {name:"金山中队",number:"65",zhanbi:"0.4%"},
-                      {name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
-  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队",'青浦支队']
-  zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50]
-  tiaoshiPao:any
+  tableDataZhi = [
+    { name: "浦东支队", number: "156", zhanbi: "3%" },
+    { name: "黄浦支队", number: "144", zhanbi: "2.8%" },
+    { name: "徐汇支队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁支队", number: "122", zhanbi: "1.6%" },
+    { name: "静安支队", number: "120", zhanbi: "1.3%" },
+    { name: "普陀支队", number: "100", zhanbi: "1.1%" },
+    { name: "虹口支队", number: "95", zhanbi: "1%" },
+    { name: "杨浦支队", number: "90", zhanbi: "0.9%" },
+    { name: "闵行支队", number: "88", zhanbi: "0.8%" },
+    { name: "宝山支队", number: "83", zhanbi: "0.7%" },
+    { name: "徐汇支队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁支队", number: "122", zhanbi: "1.6%" },
+    { name: "嘉定支队", number: "78", zhanbi: "0.6%" },
+    { name: "松江支队", number: "75", zhanbi: "0.5%" },
+    { name: "金山支队", number: "65", zhanbi: "0.4%" },
+    { name: "崇明支队", number: "55", zhanbi: "0.3%" },
+  ];
+  tableDataZhong = [
+    { name: "浦东中队", number: "156", zhanbi: "3%" },
+    { name: "黄浦中队", number: "144", zhanbi: "2.8%" },
+    { name: "徐汇中队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁中队", number: "122", zhanbi: "1.6%" },
+    { name: "静安中队", number: "120", zhanbi: "1.3%" },
+    { name: "普陀中队", number: "100", zhanbi: "1.1%" },
+    { name: "虹口中队", number: "95", zhanbi: "1%" },
+    { name: "杨浦中队", number: "90", zhanbi: "0.9%" },
+    { name: "闵行中队", number: "88", zhanbi: "0.8%" },
+    { name: "宝山中队", number: "83", zhanbi: "0.7%" },
+    { name: "徐汇中队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁中队", number: "122", zhanbi: "1.6%" },
+    { name: "嘉定中队", number: "78", zhanbi: "0.6%" },
+    { name: "松江中队", number: "75", zhanbi: "0.5%" },
+    { name: "金山中队", number: "65", zhanbi: "0.4%" },
+    { name: "崇明中队", number: "55", zhanbi: "0.3%" },
+  ];
+  zhiNameData = [
+    "浦东支队",
+    "黄浦支队",
+    "徐汇支队",
+    "长宁支队",
+    "静安支队",
+    "普陀支队",
+    "虹口支队",
+    "杨浦支队",
+    "闵行支队",
+    "宝山支队",
+    "嘉定支队",
+    "松江支队",
+    "金山支队",
+    "崇明支队",
+    "青浦支队",
+  ];
+  zhiNumData = [
+    200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90, 80, 70, 60, 50,
+  ];
+  tiaoshiPao: any;
   //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.zhiNumData.length;i++){
-      arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.zhiNumData.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.zhiNumData[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.zhiNumData[i] +
+        '],"name":' +
+        '"' +
+        this.zhiNameData[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
     //return tishiPao
   }
   pieData = [
-      {value: 500, name: '浦东支队'},
-      {value: 800, name: '黄浦支队'},
-      {value: 900, name: '徐汇支队'},
-      {value: 800, name: '长宁支队'},
-      {value: 1200, name: '静安支队'},
-      {value: 1500, name: '普陀支队'},
-      {value: 1400, name: '虹口支队'},
-      {value: 600, name: '杨浦支队'},
-      {value: 568, name: '闵行支队'},
-      {value: 888, name: '宝山支队'},
-      {value: 485, name: '嘉定支队'},
-      {value: 966, name: '松江支队'},
-      {value: 789, name: '金山支队'},
-      {value: 500, name: '崇明支队'},
-      {value: 600, name: '青浦支队'}
-  ]
-  buildingTypeName = ['高层','地下','轨道交通','化工生产','储罐类','厂房','古建筑','商市场','医院','学校','宾馆','娱乐场所','餐饮业','影剧院','展览建筑','隧道']
-  buildingTypeNum = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50]
-  forArr = [{id:'gaoceng',name:'浦东支队',echart:null},
-            {id:'dixia',name:'黄浦支队',echart:null},
-            {id:'guidao',name:'徐汇支队',echart:null},
-            {id:'huagong',name:'长宁支队',echart:null},
-            {id:'chuguan',name:'静安支队',echart:null},
-            {id:'changfang',name:'普陀支队',echart:null},
-            {id:'gujianzhu',name:'虹口支队',echart:null},
-            {id:'shichang',name:'杨浦支队',echart:null},
-            {id:'yiyuan',name:'闵行支队',echart:null},
-            {id:'xuexiao',name:'宝山支队',echart:null},
-            {id:'binguan',name:'嘉定支队',echart:null},
-            {id:'yule',name:'松江支队',echart:null},
-            {id:'canyin',name:'金山支队',echart:null},
-            {id:'yingyuan',name:'崇明支队',echart:null},
-            {id:'zhanlan',name:'青浦支队',echart:null},
-            ]
+    { value: 500, name: "浦东支队" },
+    { value: 800, name: "黄浦支队" },
+    { value: 900, name: "徐汇支队" },
+    { value: 800, name: "长宁支队" },
+    { value: 1200, name: "静安支队" },
+    { value: 1500, name: "普陀支队" },
+    { value: 1400, name: "虹口支队" },
+    { value: 600, name: "杨浦支队" },
+    { value: 568, name: "闵行支队" },
+    { value: 888, name: "宝山支队" },
+    { value: 485, name: "嘉定支队" },
+    { value: 966, name: "松江支队" },
+    { value: 789, name: "金山支队" },
+    { value: 500, name: "崇明支队" },
+    { value: 600, name: "青浦支队" },
+  ];
+  buildingTypeName = [
+    "高层",
+    "地下",
+    "轨道交通",
+    "化工生产",
+    "储罐类",
+    "厂房",
+    "古建筑",
+    "商市场",
+    "医院",
+    "学校",
+    "宾馆",
+    "娱乐场所",
+    "餐饮业",
+    "影剧院",
+    "展览建筑",
+    "隧道",
+  ];
+  buildingTypeNum = [
+    200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90, 80, 70, 60, 50,
+  ];
+  forArr = [
+    { id: "gaoceng", name: "浦东支队", echart: null },
+    { id: "dixia", name: "黄浦支队", echart: null },
+    { id: "guidao", name: "徐汇支队", echart: null },
+    { id: "huagong", name: "长宁支队", echart: null },
+    { id: "chuguan", name: "静安支队", echart: null },
+    { id: "changfang", name: "普陀支队", echart: null },
+    { id: "gujianzhu", name: "虹口支队", echart: null },
+    { id: "shichang", name: "杨浦支队", echart: null },
+    { id: "yiyuan", name: "闵行支队", echart: null },
+    { id: "xuexiao", name: "宝山支队", echart: null },
+    { id: "binguan", name: "嘉定支队", echart: null },
+    { id: "yule", name: "松江支队", echart: null },
+    { id: "canyin", name: "金山支队", echart: null },
+    { id: "yingyuan", name: "崇明支队", echart: null },
+    { id: "zhanlan", name: "青浦支队", echart: null },
+  ];
 
   /* 顶部饼状图 */
-  indexBzt
-  initCharts(){
-    this.indexBzt = echarts.init(document.getElementById('pie'),'walden');
-    let options={
+  indexBzt;
+  initCharts() {
+    this.indexBzt = echarts.init(document.getElementById("pie"), "walden");
+    let options = {
       title: {
-        text: '组织机构统计（5500家）',
-        left: 'center',
-          top: "7%",
-          textStyle: {
-            fontSize:26
-          }
+        text: "组织机构统计（5500家）",
+        left: "center",
+        top: "7%",
+        textStyle: {
+          fontSize: 26,
+        },
       },
       tooltip: {
-        trigger: 'item',
-        formatter:  (params)=>{
-          return this.data.biaogeTishi(params.name)
+        trigger: "item",
+        formatter: (params) => {
+          return this.data.biaogeTishi(params.name);
         },
         /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
         borderWidth:'1',
         borderRadius :'0', */
-        position: this.data.tableTooltipNoShow2
+        position: this.data.tableTooltipNoShow2,
       },
       legend: {
-        orient: 'vertical',
+        orient: "vertical",
         right: 150,
-        top:80,
-        textStyle:{
-          fontSize:18,
-          color:"#000000"
+        top: 80,
+        textStyle: {
+          fontSize: 18,
+          color: "#000000",
         },
-        data:this.zhiNameData
+        data: this.zhiNameData,
       },
       series: [
         {
-          name: '访问来源',
-          type: 'pie',
-          radius: '70%',
-          center: ['50%', '60%'],
-          label:{
-            show:true,
-            fontSize:16,
-            formatter:'{b}{c}家\n{d|({d}%)}',
+          name: "访问来源",
+          type: "pie",
+          radius: "70%",
+          center: ["50%", "60%"],
+          label: {
+            show: true,
+            fontSize: 16,
+            formatter: "{b}{c}家\n{d|({d}%)}",
             rich: {
               d: {
-                align: 'center',
-                fontSize:16
-              }
+                align: "center",
+                fontSize: 16,
+              },
             },
           },
           data: this.pieData,
@@ -215,97 +280,117 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
     };
-    this.indexBzt.on('click', (params) => {
+    this.indexBzt.on("click", (params) => {
       // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
     });
     this.indexBzt.setOption(options);
   }
   //柱状图
-  barEcharts(){
-    this.forArr.forEach(item=>{
-      let _this = this
-      item.echart = echarts.init(document.getElementById(item.id),'walden');
+  barEcharts() {
+    this.forArr.forEach((item) => {
+      let _this = this;
+      item.echart = echarts.init(document.getElementById(item.id), "walden");
       let option = {
-        color: ['#3398DB'],
+        color: ["#3398DB"],
         title: {
-          text: item.name+'：总数（1024）',
+          text: item.name + "：总数（1024）",
           left: "center",
           top: "0",
           //bottom: '80',
           textStyle: {
-            fontSize: 23
-          }
+            fontSize: 23,
+          },
         },
         xAxis: {
-            type: 'category',
-            data: this.buildingTypeName,
-            axisLabel: this.axisLabel
+          type: "category",
+          data: this.buildingTypeName,
+          axisLabel: this.axisLabel,
         },
         yAxis: {
-            type: 'value',
-            axisLabel:{
-              //this.axisLabel,
-              textStyle:{
-                fontSize :16,
-                color:'#000000'
-              }
-              
-            }
+          type: "value",
+          axisLabel: {
+            //this.axisLabel,
+            textStyle: {
+              fontSize: 16,
+              color: "#000000",
+            },
+          },
         },
         tooltip: {
-          trigger: 'item',
-          formatter:  (params)=>{
-            return this.data.tableTooltip(this.tableDataZhong,params.name)
-          }
+          trigger: "item",
+          formatter: (params) => {
+            return this.data.tableTooltip(this.tableDataZhong, params.name);
+          },
         },
-        series: [{
+        series: [
+          {
             data: this.buildingTypeNum,
-            type: 'bar',
+            type: "bar",
             markPoint: {
-              data: this.tiaoshiPao
-          },
+              data: this.tiaoshiPao,
+            },
             backgroundStyle: {
-                color: 'rgba(220, 220, 220, 0.8)'
+              color: "rgba(220, 220, 220, 0.8)",
             },
-            barWidth :'28',
+            barWidth: "28",
             //label: this.topTextlabel
-        }]
+          },
+        ],
       };
       item.echart.setOption(option);
-      item.echart.on('click', (params) => {
-        this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':item.name,'buildingTypeName':params.name}})
+      item.echart.on("click", (params) => {
+        this.router.navigate(
+          ["/statisticanalysis/buildingType_one/buildingType_three_details"],
+          {
+            queryParams: {
+              organizationName: item.name,
+              buildingTypeName: params.name,
+            },
+          }
+        );
       });
-    })
-    
+    });
   }
   //提示框表格
-  tableTooltip(dataArr,title:string){
-    let data = dataArr
-    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+title+'</span></div>'
-       res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
-       res+='<thead style="font-size:18px;"><tr>';
-       res+='<td style="text-align:center;width:30%;">名称</td>';
-       res+='<td style="text-align:center;width:30%;">数量</td>'
-       res+='<td style="text-align:center;width:30%;">总占比</td>'
-       res+='</tr></thead>'
-       res+='<tbody>';
-       //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
-       for(var i=0;i<this.tableDataZhi.length;i++){
-         res+='<tr>'
-         res+='<td style="text-align:center;">'+this.tableDataZhi[i].name+'</td>'
-         res+='<td style="text-align:center;">'+this.tableDataZhi[i].number+'</td>'
-         res+='<td style="text-align:center;">'+this.tableDataZhi[i].zhanbi+'</td></tr>'
-       }
-       
-       res+='</tbody>'
-       res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>'
-       res+='</table></div></div>'
-       return res
+  tableTooltip(dataArr, title: string) {
+    let data = dataArr;
+    var res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
+      title +
+      "</span></div>";
+    res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
+    res += '<thead style="font-size:18px;"><tr>';
+    res += '<td style="text-align:center;width:30%;">名称</td>';
+    res += '<td style="text-align:center;width:30%;">数量</td>';
+    res += '<td style="text-align:center;width:30%;">总占比</td>';
+    res += "</tr></thead>";
+    res += "<tbody>";
+    //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
+    for (var i = 0; i < this.tableDataZhi.length; i++) {
+      res += "<tr>";
+      res +=
+        '<td style="text-align:center;">' + this.tableDataZhi[i].name + "</td>";
+      res +=
+        '<td style="text-align:center;">' +
+        this.tableDataZhi[i].number +
+        "</td>";
+      res +=
+        '<td style="text-align:center;">' +
+        this.tableDataZhi[i].zhanbi +
+        "</td></tr>";
+    }
+
+    res += "</tbody>";
+    res +=
+      '<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>';
+    res += "</table></div></div>";
+    return res;
   }
 }

src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts

@@ -1,393 +1,478 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import {EchartsDataService} from '../../echarts-data.service';
-import { HttpClient } from '@angular/common/http'
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
+import { HttpClient } from "@angular/common/http";
 declare var echarts: any;
 @Component({
-  selector: 'app-building-type-two-reverse',
-  templateUrl: './building-type-two-reverse.component.html',
-  styleUrls: ['./building-type-two-reverse.component.scss']
+  selector: "app-building-type-two-reverse",
+  templateUrl: "./building-type-two-reverse.component.html",
+  styleUrls: ["./building-type-two-reverse.component.scss"],
 })
 export class BuildingTypeTwoReverseComponent implements OnInit {
+  constructor(
+    private http: HttpClient,
+    private router: Router,
+    public data: EchartsDataService,
+    private route: ActivatedRoute
+  ) {}
 
-  constructor(private http:HttpClient,private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { }
-
-  forward(){
-    this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward'])
+  forward() {
+    this.router.navigate([
+      "/statisticanalysis/buildingType_one/buildingType_two_forward",
+    ]);
   }
-  reverse(){
-    this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'])
+  reverse() {
+    this.router.navigate([
+      "/statisticanalysis/buildingType_one/buildingType_two_reverse",
+    ]);
   }
-  headname//标题
-  buildId//建筑id
-  padHw//是否是华为pad
+  headname; //标题
+  buildId; //建筑id
+  padHw; //是否是华为pad
   ngOnInit(): void {
-    if(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches){
-      this.padHw=true
+    if (
+      window.matchMedia("(max-width: 1300px)").matches &&
+      window.matchMedia("(max-height: 700px)").matches
+    ) {
+      this.padHw = true;
       //this.padjt=
-    }else{
-      this.padHw=false
+    } else {
+      this.padHw = false;
     }
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
-    this.route.queryParams.subscribe(param=>{
-      this.headname=param.level
-      this.buildId=param.id
+    }
+    this.route.queryParams.subscribe((param) => {
+      this.headname = param.level;
+      this.buildId = param.id;
     });
-    let paramsdata:any = {
-      id:this.buildId,
+    let paramsdata: any = {
+      id: this.buildId,
       //organizationId:'1'
-    }
-    
-    window.setTimeout(()=>{
-      this.getechartsdata()
+    };
+
+    window.setTimeout(() => {
+      this.getechartsdata();
     });
-    
   }
   ngOnDestroy(): void {
-    /* this.indexBzt.clear()
-    this.indexBzt.dispose() */
-    this.forArr.forEach(item => {
-      item.echart.clear()
-      item.echart.dispose()
-    })
+    if (this.forArr && this.forArr.length !== 0) {
+      this.forArr.forEach((item) => {
+        item.echart.clear();
+        item.echart.dispose();
+      });
+    }
   }
-  async getechartsdata(){
-    await this.data.getData(null,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`)
-    this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
-      for(var i=0;i<this.tabledata[0].organizations.length;i++){
-        this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName)
-        this.zhiNumData.push(this.tabledata[0].organizations[i].count)
-        this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
-      }
-      this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
-      this.barEcharts()
+  async getechartsdata() {
+    await this.data.getData(
+      null,
+      `/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`
+    );
+    this.tabledata = JSON.parse(JSON.stringify(this.data.allDate));
+    for (var i = 0; i < this.tabledata[0].organizations.length; i++) {
+      this.zhiNameData.push(
+        this.tabledata[0].organizations[i].organizationName
+      );
+      this.zhiNumData.push(this.tabledata[0].organizations[i].count);
+      this.organizationId.push(
+        this.tabledata[0].organizations[i].organizationId
+      );
+    }
+    this.tiaoshiPao = this.data.qipao(
+      this.tiaoshiPao,
+      this.zhiNumData,
+      this.zhiNameData
+    );
+    this.barEcharts();
   }
   axisLabel = {
     interval: 0,
-    rotate:38,
-    textStyle:{
-      fontSize :16,
-      color:'#000000'
-    },   
-    formatter:function(value)  
-      {    
-        var ret = "";//拼接加\n返回的类目项  
-        var maxLength = 2;//每项显示文字个数  
-        var valLength = value.length;//X轴类目项的文字个数  
-        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
-        if (rowN > 1)//如果类目项的文字大于3,  
-        {  
-            for (var i = 0; i < rowN; i++) {  
-                var temp = "";//每次截取的字符串  
-                var start = i * maxLength;//开始截取的位置  
-                var end = start + maxLength;//结束截取的位置  
-                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
-                temp = value.substring(start, end) + "\n";  
-                ret += temp; //凭借最终的字符串  
-            }  
-            return ret;  
-        }  
-        else {  
-            return value;  
-        }  
-      }  
-  }//echarts两个字换行
+    rotate: 38,
+    textStyle: {
+      fontSize: 16,
+      color: "#000000",
+    },
+    formatter: function (value) {
+      var ret = ""; //拼接加\n返回的类目项
+      var maxLength = 2; //每项显示文字个数
+      var valLength = value.length; //X轴类目项的文字个数
+      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+      if (rowN > 1) {
+        //如果类目项的文字大于3,
+        for (var i = 0; i < rowN; i++) {
+          var temp = ""; //每次截取的字符串
+          var start = i * maxLength; //开始截取的位置
+          var end = start + maxLength; //结束截取的位置
+          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+          temp = value.substring(start, end) + "\n";
+          ret += temp; //凭借最终的字符串
+        }
+        return ret;
+      } else {
+        return value;
+      }
+    },
+  }; //echarts两个字换行
 
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
 
-  tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"},
-                    {name:"黄浦支队",number:"144",zhanbi:"2.8%"},
-                    {name:"徐汇支队",number:"133",zhanbi:"2.1%"},
-                    {name:"长宁支队",number:"122",zhanbi:"1.6%"},
-                    {name:"静安支队",number:"120",zhanbi:"1.3%"},
-                    {name:"普陀支队",number:"100",zhanbi:"1.1%"},
-                    {name:"虹口支队",number:"95",zhanbi:"1%"},
-                    {name:"杨浦支队",number:"90",zhanbi:"0.9%"},
-                    {name:"闵行支队",number:"88",zhanbi:"0.8%"},
-                    {name:"宝山支队",number:"83",zhanbi:"0.7%"},
-                    {name:"徐汇支队",number:"133",zhanbi:"2.1%"},
-                    {name:"长宁支队",number:"122",zhanbi:"1.6%"},
-                    {name:"嘉定支队",number:"78",zhanbi:"0.6%"},
-                    {name:"松江支队",number:"75",zhanbi:"0.5%"},
-                    {name:"金山支队",number:"65",zhanbi:"0.4%"},
-                    {name:"崇明支队",number:"55",zhanbi:"0.3%"} ]
-  tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"},
-                      {name:"黄浦中队",number:"144",zhanbi:"2.8%"},
-                      {name:"徐汇中队",number:"133",zhanbi:"2.1%"},
-                      {name:"长宁中队",number:"122",zhanbi:"1.6%"},
-                      {name:"静安中队",number:"120",zhanbi:"1.3%"},
-                      {name:"普陀中队",number:"100",zhanbi:"1.1%"},
-                      {name:"虹口中队",number:"95",zhanbi:"1%"},
-                      {name:"杨浦中队",number:"90",zhanbi:"0.9%"},
-                      {name:"闵行中队",number:"88",zhanbi:"0.8%"},
-                      {name:"宝山中队",number:"83",zhanbi:"0.7%"},
-                      {name:"徐汇中队",number:"133",zhanbi:"2.1%"},
-                      {name:"长宁中队",number:"122",zhanbi:"1.6%"},
-                      {name:"嘉定中队",number:"78",zhanbi:"0.6%"},
-                      {name:"松江中队",number:"75",zhanbi:"0.5%"},
-                      {name:"金山中队",number:"65",zhanbi:"0.4%"},
-                      {name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
-  zhiNameData = []
-  zhiNumData = []
-  tiaoshiPao:any
+  tableDataZhi = [
+    { name: "浦东支队", number: "156", zhanbi: "3%" },
+    { name: "黄浦支队", number: "144", zhanbi: "2.8%" },
+    { name: "徐汇支队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁支队", number: "122", zhanbi: "1.6%" },
+    { name: "静安支队", number: "120", zhanbi: "1.3%" },
+    { name: "普陀支队", number: "100", zhanbi: "1.1%" },
+    { name: "虹口支队", number: "95", zhanbi: "1%" },
+    { name: "杨浦支队", number: "90", zhanbi: "0.9%" },
+    { name: "闵行支队", number: "88", zhanbi: "0.8%" },
+    { name: "宝山支队", number: "83", zhanbi: "0.7%" },
+    { name: "徐汇支队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁支队", number: "122", zhanbi: "1.6%" },
+    { name: "嘉定支队", number: "78", zhanbi: "0.6%" },
+    { name: "松江支队", number: "75", zhanbi: "0.5%" },
+    { name: "金山支队", number: "65", zhanbi: "0.4%" },
+    { name: "崇明支队", number: "55", zhanbi: "0.3%" },
+  ];
+  tableDataZhong = [
+    { name: "浦东中队", number: "156", zhanbi: "3%" },
+    { name: "黄浦中队", number: "144", zhanbi: "2.8%" },
+    { name: "徐汇中队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁中队", number: "122", zhanbi: "1.6%" },
+    { name: "静安中队", number: "120", zhanbi: "1.3%" },
+    { name: "普陀中队", number: "100", zhanbi: "1.1%" },
+    { name: "虹口中队", number: "95", zhanbi: "1%" },
+    { name: "杨浦中队", number: "90", zhanbi: "0.9%" },
+    { name: "闵行中队", number: "88", zhanbi: "0.8%" },
+    { name: "宝山中队", number: "83", zhanbi: "0.7%" },
+    { name: "徐汇中队", number: "133", zhanbi: "2.1%" },
+    { name: "长宁中队", number: "122", zhanbi: "1.6%" },
+    { name: "嘉定中队", number: "78", zhanbi: "0.6%" },
+    { name: "松江中队", number: "75", zhanbi: "0.5%" },
+    { name: "金山中队", number: "65", zhanbi: "0.4%" },
+    { name: "崇明中队", number: "55", zhanbi: "0.3%" },
+  ];
+  zhiNameData = [];
+  zhiNumData = [];
+  tiaoshiPao: any;
   //气泡提示数据获取
-  bianli(){
-    if(this.zhiNumData.length>=1){
-      var arrshuzu='[';
-    for(var i=0;i<this.zhiNumData.length;i++){
-      arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
-    }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+  bianli() {
+    if (this.zhiNumData.length >= 1) {
+      var arrshuzu = "[";
+      for (var i = 0; i < this.zhiNumData.length; i++) {
+        arrshuzu +=
+          '{"value":' +
+          this.zhiNumData[i] +
+          ',"coord":[' +
+          i +
+          "," +
+          this.zhiNumData[i] +
+          '],"name":' +
+          '"' +
+          this.zhiNameData[i] +
+          '"' +
+          "},";
+      }
+      arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+      arrshuzu += "]";
+      this.tiaoshiPao = JSON.parse(arrshuzu);
     }
-    
   }
-  forArr = [{id:'gaoceng',name:'高层',echart:null},
-            {id:'dixia',name:'地下',echart:null},
-            {id:'guidao',name:'轨道交通',echart:null},
-            {id:'huagong',name:'化工生产',echart:null},
-            {id:'chuguan',name:'储罐类',echart:null},
-            {id:'changfang',name:'厂房',echart:null},
-            {id:'gujianzhu',name:'古建筑',echart:null},
-            {id:'shichang',name:'商市场',echart:null},
-            {id:'yiyuan',name:'医院',echart:null},
-            {id:'xuexiao',name:'学校',echart:null},
-            {id:'binguan',name:'宾馆',echart:null},
-            {id:'yule',name:'娱乐场所',echart:null},
-            {id:'canyin',name:'餐饮业',echart:null},
-            {id:'yingyuan',name:'影剧院',echart:null},
-            {id:'zhanlan',name:'展览建筑',echart:null},
-            {id:'suidao',name:'隧道',echart:null}]
-
-
+  forArr = [
+    { id: "gaoceng", name: "高层", echart: null },
+    { id: "dixia", name: "地下", echart: null },
+    { id: "guidao", name: "轨道交通", echart: null },
+    { id: "huagong", name: "化工生产", echart: null },
+    { id: "chuguan", name: "储罐类", echart: null },
+    { id: "changfang", name: "厂房", echart: null },
+    { id: "gujianzhu", name: "古建筑", echart: null },
+    { id: "shichang", name: "商市场", echart: null },
+    { id: "yiyuan", name: "医院", echart: null },
+    { id: "xuexiao", name: "学校", echart: null },
+    { id: "binguan", name: "宾馆", echart: null },
+    { id: "yule", name: "娱乐场所", echart: null },
+    { id: "canyin", name: "餐饮业", echart: null },
+    { id: "yingyuan", name: "影剧院", echart: null },
+    { id: "zhanlan", name: "展览建筑", echart: null },
+    { id: "suidao", name: "隧道", echart: null },
+  ];
 
   //返回
-  goback(){
-    sessionStorage.setItem('refresh', 'true');
+  goback() {
+    sessionStorage.setItem("refresh", "true");
     history.go(-1);
   }
   /* 顶部饼状图 */
-  indexBzt
-  initCharts(){
-    
-    this.indexBzt = echarts.init(document.getElementById('pie'),'walden');
-    let options={
+  indexBzt;
+  initCharts() {
+    this.indexBzt = echarts.init(document.getElementById("pie"), "walden");
+    let options = {
       title: {
-        text: '建筑类型统计（8900家）',
-        left: 'center',
-          top: "7%",
-          textStyle: {
-            fontSize:26
-          }
+        text: "建筑类型统计（8900家）",
+        left: "center",
+        top: "7%",
+        textStyle: {
+          fontSize: 26,
+        },
       },
       tooltip: {
-        trigger: 'item',
-        formatter:  (params)=>{
-          return this.data.tableTooltip(this.tableDataZhi,params.name)
+        trigger: "item",
+        formatter: (params) => {
+          return this.data.tableTooltip(this.tableDataZhi, params.name);
         },
-        position: this.data.tableTooltipNoShow2
+        position: this.data.tableTooltipNoShow2,
       },
       legend: {
-        orient: 'vertical',
+        orient: "vertical",
         right: 150,
-        top:80,
-        textStyle:{
-          fontSize:18,
-          color:"#000000"
+        top: 80,
+        textStyle: {
+          fontSize: 18,
+          color: "#000000",
         },
-        data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
+        data: [
+          "高层",
+          "地下",
+          "轨道交通",
+          "化工生产",
+          "储罐类",
+          "厂房",
+          "古建筑",
+          "商市场",
+          "医院",
+          "学校",
+          "宾馆",
+          "娱乐场所",
+          "餐饮业",
+          "影剧院",
+          "展览建筑",
+          "隧道",
+        ],
       },
       series: [
         {
-          name: '访问来源',
-          type: 'pie',
-          radius: '70%',
-          center: ['50%', '60%'],
-          label:{
-            show:true,
-            fontSize:16,
-            formatter:'{b}{c}家\n{d|({d}%)}',
+          name: "访问来源",
+          type: "pie",
+          radius: "70%",
+          center: ["50%", "60%"],
+          label: {
+            show: true,
+            fontSize: 16,
+            formatter: "{b}{c}家\n{d|({d}%)}",
             rich: {
               d: {
-                align: 'center',
-                fontSize:16
-              }
+                align: "center",
+                fontSize: 16,
+              },
             },
           },
           data: [
-              {value: 500, name: '高层'},
-              {value: 800, name: '地下'},
-              {value: 900, name: '轨道交通'},
-              {value: 800, name: '化工生产'},
-              {value: 1200, name: '储罐类'},
-              {value: 1500, name: '厂房'},
-              {value: 1400, name: '古建筑'},
-              {value: 600, name: '商市场'},
-              {value: 568, name: '医院'},
-              {value: 888, name: '学校'},
-              {value: 485, name: '宾馆'},
-              {value: 966, name: '娱乐场所'},
-              {value: 789, name: '餐饮业'},
-              {value: 500, name: '影剧院'},
-              {value: 1025, name: '展览建筑'},
-              {value: 600, name: '隧道'}
+            { value: 500, name: "高层" },
+            { value: 800, name: "地下" },
+            { value: 900, name: "轨道交通" },
+            { value: 800, name: "化工生产" },
+            { value: 1200, name: "储罐类" },
+            { value: 1500, name: "厂房" },
+            { value: 1400, name: "古建筑" },
+            { value: 600, name: "商市场" },
+            { value: 568, name: "医院" },
+            { value: 888, name: "学校" },
+            { value: 485, name: "宾馆" },
+            { value: 966, name: "娱乐场所" },
+            { value: 789, name: "餐饮业" },
+            { value: 500, name: "影剧院" },
+            { value: 1025, name: "展览建筑" },
+            { value: 600, name: "隧道" },
           ],
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
     };
-    this.indexBzt.on('click', (params) => {
+    this.indexBzt.on("click", (params) => {
       // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
     });
     this.indexBzt.setOption(options);
   }
   //柱状图
-  lengthdata=[]//提示数据
-  count=0//总数
-  indexData=[]//所有数据
-  organizationId=[]
-  tabledata
-  barEcharts(){
-      this.forArr.forEach(item=>{
-        let _this = this
-        item.echart = echarts.init(document.getElementById('gaoceng'),'walden');
-        let option = {
-          title: {
-            text: this.headname+this.tabledata[0].totalCount,
-            left: "center",
-            top:this.padHw?"18":"0",
-            bottom:this.padHw?"0":'510',
+  lengthdata = []; //提示数据
+  count = 0; //总数
+  indexData = []; //所有数据
+  organizationId = [];
+  tabledata;
+  barEcharts() {
+    this.forArr.forEach((item) => {
+      let _this = this;
+      item.echart = echarts.init(document.getElementById("gaoceng"), "walden");
+      let option = {
+        title: {
+          text: this.headname + this.tabledata[0].totalCount,
+          left: "center",
+          top: this.padHw ? "18" : "0",
+          bottom: this.padHw ? "0" : "510",
+          textStyle: {
+            fontSize: 30,
+          },
+        },
+        grid: {
+          //top: 90,
+          bottom: "18%",
+        },
+        xAxis: {
+          id: this.organizationId,
+          type: "category",
+          data: this.zhiNameData,
+          axisLabel: {
+            //this.axisLabel,
+            interval: 0,
+            rotate: 28,
             textStyle: {
-              fontSize: 30
-            }
+              fontSize: 16,
+              color: "#000000",
+            },
           },
-          grid: {
-            //top: 90,
-            bottom: '18%',
         },
-          xAxis: {
-              id:this.organizationId,
-              type: 'category',
-              data: this.zhiNameData,
-              axisLabel:{
-                //this.axisLabel,
-                interval: 0,
-                rotate:28,
-                textStyle:{
-                  fontSize :16,
-                  color:'#000000'
-                }
-                
-              }
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            //this.axisLabel,
+            textStyle: {
+              fontSize: 16,
+              color: "#000000",
+            },
           },
-          yAxis: {
-              type: 'value',
-              axisLabel:{
-                //this.axisLabel,
-                textStyle:{
-                  fontSize :16,
-                  color:'#000000'
-                }
-                
-              }
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return this.tableTooltip(params);
           },
-          tooltip: {
-            trigger: 'item',
-            formatter:  (params)=>{
-              return this.tableTooltip(params)
+          position: this.data.tableTooltipNoShow2,
+        },
+        series: [
+          {
+            data: this.zhiNumData,
+            type: "bar",
+            markPoint: {
+              data: this.tiaoshiPao,
             },
-            position: this.data.tableTooltipNoShow2
-          },
-          series: [{
-              data: this.zhiNumData,
-              type: 'bar',
-              markPoint: {
-                data:this.tiaoshiPao
+            //showBackground: true,
+            backgroundStyle: {
+              color: "rgba(220, 220, 220, 0.8)",
             },
-              //showBackground: true,
-              backgroundStyle: {
-                  color: 'rgba(220, 220, 220, 0.8)'
+            barWidth: "38",
+            //label: this.topTextlabel
+          },
+        ],
+      };
+      item.echart.setOption(option);
+      item.echart.getZr().on("click", (params) => {
+        const pointInPixel = [params.offsetX, params.offsetY];
+        if (item.echart.containPixel("grid", pointInPixel)) {
+          let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [
+            params.offsetX,
+            params.offsetY,
+          ])[0];
+          /*事件处理代码书写位置*/
+          if (
+            (this.data.level == "0" || this.data.level == "1") &&
+            this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1
+          ) {
+            //总队，支队跳转
+            this.router.navigate(
+              [
+                "/statisticanalysis/buildingType_one/buildingType_three_details",
+              ],
+              {
+                queryParams: {
+                  organizationName: option.xAxis.data[xIndex],
+                  buildingTypeName: this.headname,
+                  buildId: this.buildId,
+                  organizationId: option.xAxis.id[xIndex],
+                },
+              }
+            );
+          } else {
+            this.router.navigate(["/statisticanalysis/CompangInfo"], {
+              queryParams: {
+                name: option.xAxis.data[xIndex],
+                type: 1,
+                jsid: option.xAxis.id[xIndex],
+                buildid: this.buildId,
               },
-              barWidth :'38',
-              //label: this.topTextlabel
-          }]
-        };
-        item.echart.setOption(option);
-        item.echart.getZr().on('click',  (params) => {
-          const pointInPixel= [params.offsetX, params.offsetY];
-      if (item.echart.containPixel('grid',pointInPixel)) {
-        let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
-        /*事件处理代码书写位置*/
-        if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){
-          //总队，支队跳转
-          this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'buildId':this.buildId,'organizationId':option.xAxis.id[xIndex]}})
-        }
-        else{
-          this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.buildId}});
+            });
+          }
+          //this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}});
         }
-        //this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}});
-      }
-          
-        });
-      })
-    
-    
+      });
+    });
   }
 
   //提示框表格
-  res
-  tishiData
-  tableTooltip(datas){
-    for(var a in this.data.obdata[0].organizations){
-      if(this.data.obdata[0].organizations[a].organizationName==datas.name){
-        this.tishiData=this.data.obdata[0].organizations[a].subOrganizations
+  res;
+  tishiData;
+  tableTooltip(datas) {
+    for (var a in this.data.obdata[0].organizations) {
+      if (this.data.obdata[0].organizations[a].organizationName == datas.name) {
+        this.tishiData = this.data.obdata[0].organizations[a].subOrganizations;
       }
     }
-    var countall=0//总计
-    var countbi=0//站比
-    var allCountbi=0//总站比
-      for(var i=0;i<this.tishiData.length;i++){
-        countall+=this.tishiData[i].count
-      }
-      this.res= '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>'
-      this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
-      this.res+='<thead style="font-size:18px;"><tr>';
-      this.res+='<td style="text-align:center;width:30%;">名称</td>';
-      this.res+='<td style="text-align:center;width:30%;">数量</td>'
-      this.res+='<td style="text-align:center;width:30%;">总占比</td>'
-      this.res+='</tr></thead>'
-      this.res+='<tbody>';
-      for(var i=0;i<this.tishiData.length;i++){
-        countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00
-        allCountbi=allCountbi+countbi
-       this.res+='<tr>'
-       this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>'
-       this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>'
-       this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>'
-      }
-      
-      this.res+='</tbody>'
-      this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">'+allCountbi.toFixed(2)+'%</td></tfoot>'
-      this.res+='</table></div></div>'
-      return this.res
+    var countall = 0; //总计
+    var countbi = 0; //站比
+    var allCountbi = 0; //总站比
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countall += this.tishiData[i].count;
+    }
+    this.res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
+      datas.name +
+      "</span></div>";
+    this.res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
+    this.res += '<thead style="font-size:18px;"><tr>';
+    this.res += '<td style="text-align:center;width:30%;">名称</td>';
+    this.res += '<td style="text-align:center;width:30%;">数量</td>';
+    this.res += '<td style="text-align:center;width:30%;">总占比</td>';
+    this.res += "</tr></thead>";
+    this.res += "<tbody>";
+    for (var i = 0; i < this.tishiData.length; i++) {
+      countbi =
+        Math.round((this.tishiData[i].count / countall) * 10000) / 100.0;
+      allCountbi = allCountbi + countbi;
+      this.res += "<tr>";
+      this.res +=
+        '<td style="text-align:center;">' +
+        this.tishiData[i].organizationName +
+        "</td>";
+      this.res +=
+        '<td style="text-align:center;">' + this.tishiData[i].count + "</td>";
+      this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>";
+    }
+
+    this.res += "</tbody>";
+    this.res +=
+      '<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' +
+      countall +
+      '</td><td style="text-align:center;">' +
+      allCountbi.toFixed(2) +
+      "%</td></tfoot>";
+    this.res += "</table></div></div>";
+    return this.res;
   }
 }

src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts

@@ -1,153 +1,195 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {EchartsDataService,} from '../../echarts-data.service'
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 
 @Component({
-  selector: 'app-delete-one',
-  templateUrl: './delete-one.component.html',
-  styleUrls: ['./delete-one.component.scss']
+  selector: "app-delete-one",
+  templateUrl: "./delete-one.component.html",
+  styleUrls: ["./delete-one.component.scss"],
 })
 export class DeleteOneComponent implements OnInit {
-  options:any;
+  options: any;
 
-  indexBzt//echarts实例
+  indexBzt; //echarts实例
 
-  constructor(private router: Router,public echartsData:EchartsDataService) { }
+  constructor(private router: Router, public echartsData: EchartsDataService) {}
 
   ngOnInit() {
-    window.setTimeout(()=>{
-      this.initCharts()
-    },0)
+    window.setTimeout(() => {
+      this.initCharts();
+    }, 0);
   }
-  ngOnDestroy():void{
-    this.indexBzt.clear()
-    this.indexBzt.dispose()
+  ngOnDestroy(): void {
+    if (this.indexBzt) {
+      this.indexBzt.clear();
+      this.indexBzt.dispose();
+    }
   }
 
   /* 首页饼状图 */
-  initCharts(){
+  initCharts() {
     //console.log(document.getElementById('indexBzt'))
-    
+
     var ec = echarts as any;
-    this.indexBzt = ec.init(document.getElementById('indexBzt'),'walden');
-    var options={
+    this.indexBzt = ec.init(document.getElementById("indexBzt"), "walden");
+    var options = {
       title: {
-          text: '删除单位统计（8900家）',
-          left: 'center',
-          top: "7%",
-          textStyle:{
-            fontSize:31
-          }
+        text: "删除单位统计（8900家）",
+        left: "center",
+        top: "7%",
+        textStyle: {
+          fontSize: 31,
+        },
       },
       tooltip: {
-          trigger: 'item',
-          //position: this.echartsData.tableTooltipNoShow2,
-          formatter:  (params)=>{
-            //return this.biaogeTishi(params.name)
-            return this.echartsData.biaogeTishiZhi(params.name)
-          } 
+        trigger: "item",
+        //position: this.echartsData.tableTooltipNoShow2,
+        formatter: (params) => {
+          //return this.biaogeTishi(params.name)
+          return this.echartsData.biaogeTishiZhi(params.name);
+        },
       },
       legend: {
-          orient: 'vertical',
-          right: 150,
-          top:80,
-          //padding:20,
-          // itemWidth:60,
-          // itemHeight:25,
-           textStyle:{
-            fontSize:18,
-            color:"#000000"
-          }, 
-          data: ['高层', '地下', '轨道交通', '化工生产', '储罐类', '厂房', '古建筑', '商市场', '医院', '学校', '宾馆', '娱乐场所', '餐饮业', '影剧院', '展览建筑', '隧道']
+        orient: "vertical",
+        right: 150,
+        top: 80,
+        //padding:20,
+        // itemWidth:60,
+        // itemHeight:25,
+        textStyle: {
+          fontSize: 18,
+          color: "#000000",
+        },
+        data: [
+          "高层",
+          "地下",
+          "轨道交通",
+          "化工生产",
+          "储罐类",
+          "厂房",
+          "古建筑",
+          "商市场",
+          "医院",
+          "学校",
+          "宾馆",
+          "娱乐场所",
+          "餐饮业",
+          "影剧院",
+          "展览建筑",
+          "隧道",
+        ],
       },
       series: [
-          {
-              name: '访问来源',
-              type: 'pie',
-              radius: '65%',
-              center: ['50%', '60%'],
-              label:{
-                show:true,
-            fontSize:18,
-            formatter:'{b}{c}家\n{d|({d}%)}',
+        {
+          name: "访问来源",
+          type: "pie",
+          radius: "65%",
+          center: ["50%", "60%"],
+          label: {
+            show: true,
+            fontSize: 18,
+            formatter: "{b}{c}家\n{d|({d}%)}",
             rich: {
               d: {
-                align: 'center',
-                fontSize:18
-              }
-            },
-                
+                align: "center",
+                fontSize: 18,
               },
-              data: [
-                  {value: 500, name: '高层'},
-                  {value: 1300, name: '地下',itemStyle:{color:'#02A7F0'}},
-                  {value: 1500, name: '轨道交通'},
-                  {value: 1500, name: '化工生产'},
-                  {value: 1700, name: '储罐类'},
-                  {value: 800, name: '厂房'},
-                  {value: 1500, name: '古建筑'},
-                  {value: 1500, name: '商市场'},
-                  {value: 1700, name: '医院'},
-                  {value: 1700, name: '学校'},
-                  {value: 1700, name: '宾馆'},
-                  {value: 1700, name: '娱乐场所'},
-                  {value: 1700, name: '餐饮业'},
-                  {value: 1700, name: '影剧院'},
-                  {value: 1700, name: '展览建筑'},
-                  {value: 1700, name: '隧道'}
-              ],
-              emphasis: {
-                  itemStyle: {
-                      shadowBlur: 10,
-                      shadowOffsetX: 0,
-                      shadowColor: 'rgba(0, 0, 0, 0.5)'
-                  }
-              }
-          }
-      ]
+            },
+          },
+          data: [
+            { value: 500, name: "高层" },
+            { value: 1300, name: "地下", itemStyle: { color: "#02A7F0" } },
+            { value: 1500, name: "轨道交通" },
+            { value: 1500, name: "化工生产" },
+            { value: 1700, name: "储罐类" },
+            { value: 800, name: "厂房" },
+            { value: 1500, name: "古建筑" },
+            { value: 1500, name: "商市场" },
+            { value: 1700, name: "医院" },
+            { value: 1700, name: "学校" },
+            { value: 1700, name: "宾馆" },
+            { value: 1700, name: "娱乐场所" },
+            { value: 1700, name: "餐饮业" },
+            { value: 1700, name: "影剧院" },
+            { value: 1700, name: "展览建筑" },
+            { value: 1700, name: "隧道" },
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
     };
-    this.indexBzt.on('click', (params) => {
-      this.router.navigateByUrl('/statisticanalysis/delete_one/delete_two');
+    this.indexBzt.on("click", (params) => {
+      this.router.navigateByUrl("/statisticanalysis/delete_one/delete_two");
     });
     this.indexBzt.setOption(options);
   }
   /**
    * @name: 表格提示框封装
    * @test: test font
-   * @msg: 
+   * @msg:
    * @param {string(表头)}
-   * @return {type} 
+   * @return {type}
    */
-  biaogeTishi(biaotou:string){
-    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'
-    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
-    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
-    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
-    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
-    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
-    var jsonObj =  JSON.parse(shuju);
-    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
-        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
-        res+='<thead><tr>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
-        res+='</tr></thead>'
-        res+='<tbody>';
-        for(var i=0;i<jsonObj.length;i++){
-          res+='<tr>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
-        }
-        
-        res+='</tbody>'
-        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
-        res+='</table></div></div>'
-        return res
-  }
+  biaogeTishi(biaotou: string) {
+    var shuju =
+      '[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},';
+    shuju +=
+      '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},';
+    shuju +=
+      '{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},';
+    shuju +=
+      '{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},';
+    shuju +=
+      '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},';
+    shuju +=
+      '{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]';
+    var jsonObj = JSON.parse(shuju);
+    var res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">' +
+      biaotou +
+      "</span></div>";
+    res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+    res += "<thead><tr>";
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>';
+    res += "</tr></thead>";
+    res += "<tbody>";
+    for (var i = 0; i < jsonObj.length; i++) {
+      res += "<tr>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].name +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].number +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].zhanbi +
+        "</td></tr>";
+    }
 
+    res += "</tbody>";
+    res +=
+      '<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>';
+    res += "</table></div></div>";
+    return res;
+  }
 }

src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts

@@ -1,210 +1,272 @@
 /*
- * @Descripttion: 
- * @version: 
+ * @Descripttion:
+ * @version:
  * @Author: sueRimn
  * @Date: 2020-09-02 16:22:35
  * @LastEditors: sueRimn
  * @LastEditTime: 2020-11-16 09:40:04
  */
-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
-import {EchartsDataService} from '../../echarts-data.service';
-import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
-import { DateAdapter } from '@angular/material/core';
+import { Component, OnInit } from "@angular/core";
+import { Router, ActivatedRoute } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
+import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar";
+import { DateAdapter } from "@angular/material/core";
 declare var echarts: any;
 
 @Component({
-  selector: 'app-delete-there',
-  templateUrl: './delete-there.component.html',
-  styleUrls: ['./delete-there.component.scss']
+  selector: "app-delete-there",
+  templateUrl: "./delete-there.component.html",
+  styleUrls: ["./delete-there.component.scss"],
 })
 export class DeleteThereComponent implements OnInit {
-
-  constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { }
-  zhutu//echarts实例
-  option
-  time:String
-  buildingTypeName:String
-  setTimeoutObj//延时器需要清除
-  headtext:string;
-  zhong:string
-  ngOnDestroy():void{
-    this.zhutu.clear()
-    this.zhutu.dispose()
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    public echartsData: EchartsDataService,
+    public snackBar: MatSnackBar,
+    private adapter: DateAdapter<any>
+  ) {}
+  zhutu; //echarts实例
+  option;
+  time: String;
+  buildingTypeName: String;
+  setTimeoutObj; //延时器需要清除
+  headtext: string;
+  zhong: string;
+  ngOnDestroy(): void {
+    if (this.zhutu) {
+      this.zhutu.clear();
+      this.zhutu.dispose();
+    }
   }
 
   ngOnInit(): void {
-    this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
+    this.tiaoshiPao = this.echartsData.qipao(
+      this.tiaoshiPao,
+      this.zhiNumData,
+      this.zhiNameData
+    );
     this.dateInit();
     //let headtext:string;
-    let datayuex:string;
-    let headName:string;
+    let datayuex: string;
+    let headName: string;
     // console.log(this.activatedRoute.queryParams.subscribe)
     //headtext=this.activatedRoute.queryParams["headtext"];
-    this.activatedRoute.queryParams.subscribe(param=>{
-      this.headtext=param.headtext
-      datayuex=param.level
-      this.zhong=param.zhong
-      headName=this.headtext+''+datayuex;
+    this.activatedRoute.queryParams.subscribe((param) => {
+      this.headtext = param.headtext;
+      datayuex = param.level;
+      this.zhong = param.zhong;
+      headName = this.headtext + "" + datayuex;
       //console.log(headName)
-    }); 
-    window.setTimeout(()=>{
-      this.zhuzhuangtu(headName)
-    },0)
+    });
+    window.setTimeout(() => {
+      this.zhuzhuangtu(headName);
+    }, 0);
   }
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
-  
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
 
   //查询数据
-  years:any = []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+  years: any = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
-      this.years.unshift(i)
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
+      this.years.unshift(i);
     }
     // console.log(this.years)
   }
-  
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectStartMonth:any = 1 //开始月份
-  Submit (e) {
-    
-  }
-  selectStartYear:any = (new Date()).getFullYear() //开始年份
 
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectStartMonth: any = 1; //开始月份
+  Submit(e) {}
+  selectStartYear: any = new Date().getFullYear(); //开始年份
 
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
-  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
-  zhiNumData = [0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-  zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"]
-  tiaoshiPao:any
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
+  zhiNameData = [
+    "浦东支队",
+    "黄浦支队",
+    "徐汇支队",
+    "长宁支队",
+    "静安支队",
+    "普陀支队",
+    "虹口支队",
+    "杨浦支队",
+    "闵行支队",
+    "宝山支队",
+    "嘉定支队",
+    "松江支队",
+    "金山支队",
+    "崇明支队",
+  ];
+  zhiNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+  zhongNameData = [
+    "浦东中队",
+    "黄浦中队",
+    "徐汇中队",
+    "长宁中队",
+    "静安中队",
+    "普陀中队",
+    "虹口中队",
+    "杨浦中队",
+    "闵行中队",
+    "宝山中队",
+    "嘉定中队",
+    "松江中队",
+    "金山中队",
+    "崇明中队",
+  ];
+  tiaoshiPao: any;
   //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.zhiNumData.length;i++){
-      arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.zhiNumData.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.zhiNumData[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.zhiNumData[i] +
+        '],"name":' +
+        '"' +
+        this.zhiNameData[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
     //return tishiPao
   }
-  date = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月']
-  dateNum = [0, 0, 0, 0, 0, 0, 0, 0,0]
+  date = [
+    "一月",
+    "二月",
+    "三月",
+    "四月",
+    "五月",
+    "六月",
+    "七月",
+    "八月",
+    "九月",
+  ];
+  dateNum = [0, 0, 0, 0, 0, 0, 0, 0, 0];
   //返回
-  goBack () {
-    history.go(-1)
-    this.echartsData.statefulInspectionToggle = true
+  goBack() {
+    history.go(-1);
+    this.echartsData.statefulInspectionToggle = true;
   }
 
   axisLabel = {
-    interval: 0,  
-    formatter:function(value)  
-      {    
-        var ret = "";//拼接加\n返回的类目项  
-        var maxLength = 2;//每项显示文字个数  
-        var valLength = value.length;//X轴类目项的文字个数  
-        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
-        if (rowN > 1)//如果类目项的文字大于3,  
-        {  
-            for (var i = 0; i < rowN; i++) {  
-                var temp = "";//每次截取的字符串  
-                var start = i * maxLength;//开始截取的位置  
-                var end = start + maxLength;//结束截取的位置  
-                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
-                temp = value.substring(start, end) + "\n";  
-                ret += temp; //凭借最终的字符串  
-            }  
-            return ret;  
-        }  
-        else {  
-            return value;  
-        }  
-      }  
-  }//echarts两个字换行
+    interval: 0,
+    formatter: function (value) {
+      var ret = ""; //拼接加\n返回的类目项
+      var maxLength = 2; //每项显示文字个数
+      var valLength = value.length; //X轴类目项的文字个数
+      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+      if (rowN > 1) {
+        //如果类目项的文字大于3,
+        for (var i = 0; i < rowN; i++) {
+          var temp = ""; //每次截取的字符串
+          var start = i * maxLength; //开始截取的位置
+          var end = start + maxLength; //结束截取的位置
+          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+          temp = value.substring(start, end) + "\n";
+          ret += temp; //凭借最终的字符串
+        }
+        return ret;
+      } else {
+        return value;
+      }
+    },
+  }; //echarts两个字换行
   /* 柱状图 */
-  zhuzhuangtu(headName:string){
+  zhuzhuangtu(headName: string) {
     var ec = echarts as any;
-    this.zhutu = ec.init(document.getElementById('zhidui'),'walden');
+    this.zhutu = ec.init(document.getElementById("zhidui"), "walden");
     this.option = {
       title: {
-        text: headName+'：总数(0)',
+        text: headName + "：总数(0)",
         left: "center",
         top: "0",
         textStyle: {
-          fontSize: 30
-        }
+          fontSize: 30,
+        },
       },
       /* grid: {  
         left: '5%',  
         bottom:'35%'  
         },   */
       xAxis: {
-          type: 'category',
-          data: this.zhiNameData,
-          //axisLabel: this.axisLabel,
-          axisLabel:{
-            //this.axisLabel,
-            textStyle:{
-              fontSize :18,
-              color:'#000000'
-            }
-            
-          }
+        type: "category",
+        data: this.zhiNameData,
+        //axisLabel: this.axisLabel,
+        axisLabel: {
+          //this.axisLabel,
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
+        },
       },
       yAxis: {
-          type: 'value',
-          axisLabel:{
-            textStyle:{
-              fontSize :18,
-              color:'#000000'
-            }
-            
-          }
+        type: "value",
+        axisLabel: {
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
+        },
       },
       tooltip: {
-        trigger: 'item',
-        formatter:  (params)=>{
-          return this.echartsData.tableTooltip('',headName)
+        trigger: "item",
+        formatter: (params) => {
+          return this.echartsData.tableTooltip("", headName);
         },
-        position: this.echartsData.tableTooltipNoShowq
+        position: this.echartsData.tableTooltipNoShowq,
         /* backgroundColor:'rgba(255,255,255,1)',
         borderWidth:'1',
         borderRadius :'0' */
       },
-      series: [{
+      series: [
+        {
           data: this.zhiNumData,
-          type: 'bar',
+          type: "bar",
           markPoint: {
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
-        },
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
           backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
+            color: "rgba(220, 220, 220, 0.8)",
           },
-          barWidth :'38',
+          barWidth: "38",
           //label: this.topTextlabel
-      }]
+        },
+      ],
     };
-    this.zhutu.getZr().on('click',params=>{
+    this.zhutu.getZr().on("click", (params) => {
       // console.log(params.name)
-      const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.zhutu.containPixel('grid',pointInPixel)) {
-        let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.zhutu.containPixel("grid", pointInPixel)) {
+        let xIndex = this.zhutu.convertFromPixel({ seriesIndex: 0 }, [
+          params.offsetX,
+          params.offsetY,
+        ])[0];
         /*事件处理代码书写位置*/
-        this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}});
+        this.router.navigate(["/statisticanalysis/delete_one/delete_four"], {
+          queryParams: { level: this.option.xAxis.data[xIndex] + headName },
+        });
       }
     });
     /* this.zhutu.on('click', (params) => {
@@ -215,37 +277,50 @@ export class DeleteThereComponent implements OnInit {
     this.zhutu.setOption(this.option);
   }
 
-   /* 鼠标悬停提示 */
-  tableTooltip2(biaotou:string){
-    var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄浦中队","number":"144","zhanbi":"2.8%"},'
-    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},'
-    shuju+='{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},'
-    shuju+='{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},'
-    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},'
-    shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]'
-    var jsonObj =  JSON.parse(shuju);
-     var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+biaotou+'</span></div>'
-        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
-        res+='<thead style="font-size:18px;"><tr>';
-        res+='<td style="text-align:center;width:30%;">名称</td>';
-        res+='<td style="text-align:center;width:30%;">数量</td>'
-        res+='<td style="text-align:center;width:30%;">总占比</td>'
-        res+='</tr></thead>'
-        res+='<tbody>';
-        //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
-        for(var i=0;i<jsonObj.length;i++){
-          res+='<tr>'
-          res+='<td style="text-align:center;">'+jsonObj[i].name+'</td>'
-          res+='<td style="text-align:center;">'+jsonObj[i].number+'</td>'
-          res+='<td style="text-align:center;">'+jsonObj[i].zhanbi+'</td></tr>'
-        }
-        
-        res+='</tbody>'
-        res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>'
-        res+='</table></div></div>'
-        return res
-  }
+  /* 鼠标悬停提示 */
+  tableTooltip2(biaotou: string) {
+    var shuju =
+      '[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄浦中队","number":"144","zhanbi":"2.8%"},';
+    shuju +=
+      '{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},';
+    shuju +=
+      '{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},';
+    shuju +=
+      '{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},';
+    shuju +=
+      '{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},';
+    shuju +=
+      '{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]';
+    var jsonObj = JSON.parse(shuju);
+    var res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
+      biaotou +
+      "</span></div>";
+    res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
+    res += '<thead style="font-size:18px;"><tr>';
+    res += '<td style="text-align:center;width:30%;">名称</td>';
+    res += '<td style="text-align:center;width:30%;">数量</td>';
+    res += '<td style="text-align:center;width:30%;">总占比</td>';
+    res += "</tr></thead>";
+    res += "<tbody>";
+    //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
+    for (var i = 0; i < jsonObj.length; i++) {
+      res += "<tr>";
+      res += '<td style="text-align:center;">' + jsonObj[i].name + "</td>";
+      res += '<td style="text-align:center;">' + jsonObj[i].number + "</td>";
+      res +=
+        '<td style="text-align:center;">' + jsonObj[i].zhanbi + "</td></tr>";
+    }
 
+    res += "</tbody>";
+    res +=
+      '<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>';
+    res += "</table></div></div>";
+    return res;
+  }
 }

src/app/statistic-analysis/deleteUnit/delete-two-newadd/delete-two-newadd.component.ts

@@ -1,227 +1,311 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { ActivatedRoute } from '@angular/router';
-import { EchartsDataService } from '../../echarts-data.service';
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import { ActivatedRoute } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 @Component({
-  selector: 'app-delete-two-newadd',
-  templateUrl: './delete-two-newadd.component.html',
-  styleUrls: ['./delete-two-newadd.component.scss']
+  selector: "app-delete-two-newadd",
+  templateUrl: "./delete-two-newadd.component.html",
+  styleUrls: ["./delete-two-newadd.component.scss"],
 })
 export class DeleteTwoNewaddComponent implements OnInit {
+  constructor(
+    private router: Router,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    private serviceData: EchartsDataService,
+    public route: ActivatedRoute
+  ) {}
 
-  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
-
-  year:String
-  buildingTypeName:String
-  level:String
-  setTimeoutObj//延时器需要清除
+  year: String;
+  buildingTypeName: String;
+  level: String;
+  setTimeoutObj; //延时器需要清除
   ngOnInit(): void {
-    this.dateInit ()
-    this.bianli()
-    this.route.queryParams.subscribe(params => {
-      this.year = params['level'];
-      this.buildingTypeName = params['headtext'];
+    this.dateInit();
+    this.bianli();
+    this.route.queryParams.subscribe((params) => {
+      this.year = params["level"];
+      this.buildingTypeName = params["headtext"];
+    });
+    this.setTimeoutObj = window.setTimeout(() => {
+      this.detailEcharts();
     });
-    this.setTimeoutObj = window.setTimeout(()=>{
-      this.detailEcharts()
-    })
   }
-  ngOnDestroy(){
+  ngOnDestroy() {
     window.clearTimeout(this.setTimeoutObj);
-    this.detailPlanEchart.clear()
-    this.detailPlanEchart.dispose()
+    if (this.detailPlanEchart) {
+      this.detailPlanEchart.clear();
+      this.detailPlanEchart.dispose();
+    }
   }
 
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
 
   //查询数据
-  years:any = []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+  years: any = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
-      this.years.unshift(i)
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
+      this.years.unshift(i);
     }
   }
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectStartMonth:any = 1 //开始月份
-  Submit (e) {
-    
-  }
-  selectStartYear:any = (new Date()).getFullYear() //开始年份
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectStartMonth: any = 1; //开始月份
+  Submit(e) {}
+  selectStartYear: any = new Date().getFullYear(); //开始年份
 
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
-  zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
-  zhongNumData = [0,0,0,0,0,0,0,0,0,0,0]
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
+  zhongNameData = [
+    "浦东中队",
+    "黄浦中队",
+    "徐汇中队",
+    "长宁中队",
+    "静安中队",
+    "普陀中队",
+    "虹口中队",
+    "杨浦中队",
+    "闵行中队",
+    "宝山中队",
+    "嘉定中队",
+  ];
+  zhongNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
-  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
-  zhiNumData = [0,0,0,0,0,0,0,0,0,0,0]
-  tiaoshiPao:any
+  zhiNameData = [
+    "浦东支队",
+    "黄浦支队",
+    "徐汇支队",
+    "长宁支队",
+    "静安支队",
+    "普陀支队",
+    "虹口支队",
+    "杨浦支队",
+    "闵行支队",
+    "宝山支队",
+    "嘉定支队",
+  ];
+  zhiNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+  tiaoshiPao: any;
   //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.dateNum.length;i++){
-      arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},'
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.dateNum.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.dateNum[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.dateNum[i] +
+        '],"name":' +
+        '"' +
+        this.date[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
     //return tishiPao
   }
   //返回
-  goBack () {
-    history.go(-1)
+  goBack() {
+    history.go(-1);
     //this.echartsData.statefulInspectionToggle = true
   }
 
-  detailPlanEchart
-  option
-  date = ['高层', '轨道交通', '储罐类', '古建筑', '地下', '化工生产', '厂房', '商市场']
-  dateNum = [0, 0, 0, 0, 0, 0, 0, 0]
+  detailPlanEchart;
+  option;
+  date = [
+    "高层",
+    "轨道交通",
+    "储罐类",
+    "古建筑",
+    "地下",
+    "化工生产",
+    "厂房",
+    "商市场",
+  ];
+  dateNum = [0, 0, 0, 0, 0, 0, 0, 0];
 
-  detailEcharts(){
-    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');  
+  detailEcharts() {
+    this.detailPlanEchart = echarts.init(
+      document.getElementById("barEchart"),
+      "skinUpp"
+    );
     this.option = {
       grid: {
         top: 90,
-        left:40,
+        left: 40,
         right: 20,
         //bottom: 20,
       },
       // 标题
       title: {
-        text: this.buildingTypeName + '(' + this.year + ')',
+        text: this.buildingTypeName + "(" + this.year + ")",
         top: -4,
-        left: 'center',
-        textStyle:{
+        left: "center",
+        textStyle: {
           //文字颜色
-          color:'#000',
-          fontSize: 30
-        }
+          color: "#000",
+          fontSize: 30,
+        },
       },
       //提示框
       tooltip: {
-        trigger: 'axis',
-        formatter:  (params)=>{
-          if(params[0].seriesName == "year"){
-            return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
-          }else{
-            return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
+        trigger: "axis",
+        formatter: (params) => {
+          if (params[0].seriesName == "year") {
+            return this.serviceData.tableTooltip(
+              this.serviceData.monthTooltip,
+              params[0].name
+            );
+          } else {
+            return this.serviceData.tableTooltip(
+              this.serviceData.tableDataZhi,
+              params[0].name
+            );
           }
         },
-        position:this.serviceData.tableTooltipNoShow2
+        position: this.serviceData.tableTooltipNoShow2,
       },
       // x轴
       xAxis: {
-        type: 'category',
+        type: "category",
         data: this.date,
         axisLabel: {
           color: "#000", //刻度线标签颜色
-          textStyle:{
-            fontSize :18,
-            color:'#000000'
-          }
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
         },
         //设置坐标轴字体颜色和宽度
-        axisLine: {    
+        axisLine: {
           lineStyle: {
             color: "#000",
           },
         },
-        splitLine: {//分割线配置
-          show:true,
+        splitLine: {
+          //分割线配置
+          show: true,
           lineStyle: {
-            color: '#999',
-          }
-        }
+            color: "#999",
+          },
+        },
       },
       // y轴
       yAxis: {
-        type: 'value',
-        name: '个',
+        type: "value",
+        name: "个",
         axisLabel: {
           //color: "#000", //刻度线标签颜色
-          textStyle:{
-            fontSize :18,
-            color:'#000000'
-          }
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
         },
-         //设置坐标轴字体颜色和宽度
-         axisLine: {
+        //设置坐标轴字体颜色和宽度
+        axisLine: {
           lineStyle: {
             color: "#000",
-          }
-        }
+          },
+        },
       },
       // 数据
-      series: [{
-          name: 'xxx',
-          type: 'line',
+      series: [
+        {
+          name: "xxx",
+          type: "line",
           markPoint: {
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
-        },
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
           data: this.dateNum,
-        }
+        },
       ],
     };
     this.detailPlanEchart.setOption(this.option);
-    this.detailPlanEchart.getZr().on('click',params=>{
-      const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
-        let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+    this.detailPlanEchart.getZr().on("click", (params) => {
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.detailPlanEchart.containPixel("grid", pointInPixel)) {
+        let xIndex = this.detailPlanEchart.convertFromPixel(
+          { seriesIndex: 0 },
+          [params.offsetX, params.offsetY]
+        )[0];
         /*事件处理代码书写位置*/
-        if(this.serviceData.level=='0'){
-          this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1'}});
-        }else if(this.serviceData.level=='1'){
-          this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+this.buildingTypeName}});
+        if (this.serviceData.level == "0") {
+          this.router.navigate(["/statisticanalysis/delete_one/delete_there"], {
+            queryParams: {
+              level: this.option.xAxis.data[xIndex],
+              headtext: this.buildingTypeName,
+              zhong: "1",
+            },
+          });
+        } else if (this.serviceData.level == "1") {
+          this.router.navigate(["/statisticanalysis/delete_one/delete_four"], {
+            queryParams: {
+              level: this.option.xAxis.data[xIndex] + this.buildingTypeName,
+            },
+          });
         }
-        
       }
     });
   }
   //返回按钮
-  backBtn(){
-      window.history.go(-1)
-  } 
-  
-  tableTooltip(params:any){
-    var data = [
-      {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
-    ]
-    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
-        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
-        res+='<thead style="font-size:18px;"><tr>';
-        res+='<td style="text-align:center;width:30%;">名称</td>';
-        res+='<td style="text-align:center;width:30%;">数量</td>'
-        res+='<td style="text-align:center;width:30%;">总占比</td>'
-        res+='</tr></thead>'
-        res+='<tbody>';
-        for(var i=0;i<data.length;i++){
-          res+='<tr>'
-          res+='<td style="text-align:center;">'+data[i].name+'</td>'
-          res+='<td style="text-align:center;">'+data[i].number+'</td>'
-          res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
-        }
-        
-        res+='</tbody>'
-        // res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
-        res+='</table></div></div>'
-        return res
+  backBtn() {
+    window.history.go(-1);
   }
 
+  tableTooltip(params: any) {
+    var data = [
+      {
+        name: params.name,
+        number: params.value,
+        zhanbi: ((params.value / 1340) * 100).toFixed(2) + "%",
+      },
+    ];
+    var res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
+      params.name +
+      "</span></div>";
+    res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
+    res += '<thead style="font-size:18px;"><tr>';
+    res += '<td style="text-align:center;width:30%;">名称</td>';
+    res += '<td style="text-align:center;width:30%;">数量</td>';
+    res += '<td style="text-align:center;width:30%;">总占比</td>';
+    res += "</tr></thead>";
+    res += "<tbody>";
+    for (var i = 0; i < data.length; i++) {
+      res += "<tr>";
+      res += '<td style="text-align:center;">' + data[i].name + "</td>";
+      res += '<td style="text-align:center;">' + data[i].number + "</td>";
+      res += '<td style="text-align:center;">' + data[i].zhanbi + "</td></tr>";
+    }
+
+    res += "</tbody>";
+    // res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+    res += "</table></div></div>";
+    return res;
+  }
 }

src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts

@@ -1,123 +1,209 @@
 /*
- * @Descripttion: 
- * @version: 
+ * @Descripttion:
+ * @version:
  * @Author: sueRimn
  * @Date: 2020-09-02 16:21:18
  * @LastEditors: sueRimn
  * @LastEditTime: 2021-06-24 15:27:13
  */
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { MatDatepickerInputEvent } from '@angular/material/datepicker';
-import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
-import { DateAdapter } from '@angular/material/core';
-import {EchartsDataService,} from '../../echarts-data.service'
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { Router, ActivatedRoute } from "@angular/router";
+import { MatDatepickerInputEvent } from "@angular/material/datepicker";
+import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar";
+import { DateAdapter } from "@angular/material/core";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 
 @Component({
-  selector: 'app-delete-two',
-  templateUrl: './delete-two.component.html',
-  styleUrls: ['./delete-two.component.scss']
+  selector: "app-delete-two",
+  templateUrl: "./delete-two.component.html",
+  styleUrls: ["./delete-two.component.scss"],
 })
 export class DeleteTwoComponent implements OnInit {
-  options:any;
-  datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月'];
-  datayuey=[0, 0, 0, 0, 0, 0, 0,0,0];
-  datanianx=[2020,2021];
-  dataniany=[0,0]
-  tiaoshiPao:any//气泡
+  options: any;
+  datayuex = [
+    "一月",
+    "二月",
+    "三月",
+    "四月",
+    "五月",
+    "六月",
+    "七月",
+    "八月",
+    "九月",
+  ];
+  datayuey = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  datanianx = [2020, 2021];
+  dataniany = [0, 0];
+  tiaoshiPao: any; //气泡
 
-  constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService, private route: ActivatedRoute) { }
+  constructor(
+    private router: Router,
+    public snackBar: MatSnackBar,
+    private adapter: DateAdapter<any>,
+    public echartsData: EchartsDataService,
+    private route: ActivatedRoute
+  ) {}
   /* @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
   @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 */
 
   ngOnInit(): void {
-    this.echartsData.statefulInspectionToggle=true
-    this.dateInit()
-    this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
+    this.echartsData.statefulInspectionToggle = true;
+    this.dateInit();
+    this.tiaoshiPao = this.echartsData.qipao(
+      this.tiaoshiPao,
+      this.datayuey,
+      this.datayuex
+    );
     //this.bianli()
-    window.setTimeout(()=>{
-      this.getechartsdata()
-    },0)
+    window.setTimeout(() => {
+      this.getechartsdata();
+    }, 0);
   }
-  ngOnDestroy():void{
-    this.headZx.clear()
-    this.headZx.dispose()
+  ngOnDestroy(): void {
+    if (this.headZx) {
+      this.headZx.clear();
+      this.headZx.dispose();
+    }
   }
 
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
-  headZx//echarts实例
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
+  headZx; //echarts实例
+
+  zhiNameData = [
+    "浦东支队",
+    "黄浦支队",
+    "徐汇支队",
+    "长宁支队",
+    "静安支队",
+    "普陀支队",
+    "虹口支队",
+    "杨浦支队",
+    "闵行支队",
+    "宝山支队",
+    "嘉定支队",
+    "松江支队",
+    "金山支队",
+    "崇明支队",
+  ];
+  zhiNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
-  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
-  zhiNumData = [0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-  
-  
   //查询数据
-  years:any = []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+  years: any = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
-      this.years.unshift(i)
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
+      this.years.unshift(i);
     }
   }
-  TimeType=0//按月查询还是按年查询
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectTwoYear:any = (new Date()).getFullYear() //结束年份
-  selectStartMonth:any = 1 //开始月份
-  selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
+  TimeType = 0; //按月查询还是按年查询
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectTwoYear: any = new Date().getFullYear(); //结束年份
+  selectStartMonth: any = 1; //开始月份
+  selectEndMonth: any = new Date().getMonth() + 1; //结束月份
   //点击月
-  monthClick(){
-      this.TimeType=0
-      this.tiaoshiPao=null
-      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
-      this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
+  monthClick() {
+    this.TimeType = 0;
+    this.tiaoshiPao = null;
+    this.tiaoshiPao = this.echartsData.qipao(
+      this.tiaoshiPao,
+      this.datayuey,
+      this.datayuex
+    );
+    this.headZhexian("Line", "删除数量总统计", this.datayuex, this.datayuey);
   }
   //按月查询
-  monthSubmit (e) {
-    this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
+  monthSubmit(e) {
+    this.headZhexian("Line", "删除数量总统计", this.datayuex, this.datayuey);
     if (e.selectTwoYear > e.selectOneYear) {
-      let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
-      let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
+      let startTime =
+        e.selectOneYear +
+        "-" +
+        e.selectStartMonth +
+        "-" +
+        1 +
+        " " +
+        0 +
+        ":" +
+        0 +
+        ":" +
+        0;
+      let endTime =
+        e.selectTwoYear +
+        "-" +
+        e.selectEndMonth +
+        "-" +
+        31 +
+        " " +
+        23 +
+        ":" +
+        59 +
+        ":" +
+        59;
       // console.log(startTime)
       // console.log(endTime)
     } else if (e.selectTwoYear === e.selectOneYear) {
-      if(e.selectEndMonth >= e.selectStartMonth) {
-        let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
-        let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
+      if (e.selectEndMonth >= e.selectStartMonth) {
+        let startTime =
+          e.selectOneYear +
+          "-" +
+          e.selectStartMonth +
+          "-" +
+          1 +
+          " " +
+          0 +
+          ":" +
+          0 +
+          ":" +
+          0;
+        let endTime =
+          e.selectTwoYear +
+          "-" +
+          e.selectEndMonth +
+          "-" +
+          31 +
+          " " +
+          23 +
+          ":" +
+          59 +
+          ":" +
+          59;
         // console.log(startTime)
         // console.log(endTime)
       } else {
         const config = new MatSnackBarConfig();
-        config.verticalPosition = 'top';
-        config.duration = 3000
-        this.snackBar.open('请选择正确时间区段','确定',config);
+        config.verticalPosition = "top";
+        config.duration = 3000;
+        this.snackBar.open("请选择正确时间区段", "确定", config);
       }
-    }else {
+    } else {
       const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('请选择正确时间区段','确定',config);
+      config.verticalPosition = "top";
+      config.duration = 3000;
+      this.snackBar.open("请选择正确时间区段", "确定", config);
     }
   }
 
-
-
-  selectStartYear:any = (new Date()).getFullYear() //开始年份
-  selectEndYear:any = (new Date()).getFullYear() //结束年份
+  selectStartYear: any = new Date().getFullYear(); //开始年份
+  selectEndYear: any = new Date().getFullYear(); //结束年份
   //点击年
-  yearClick(){
-    this.TimeType=1
-    this.tiaoshiPao=null
-    this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataniany,this.datanianx)
-    this.headZhexian('Line','删除数量总统计',this.datanianx,this.dataniany)
+  yearClick() {
+    this.TimeType = 1;
+    this.tiaoshiPao = null;
+    this.tiaoshiPao = this.echartsData.qipao(
+      this.tiaoshiPao,
+      this.dataniany,
+      this.datanianx
+    );
+    this.headZhexian("Line", "删除数量总统计", this.datanianx, this.dataniany);
   }
   //按年查询
-  yearSubmit (e) {
+  yearSubmit(e) {
     //console.log(this.selectType)
-    this.headZhexian('Line','删除数量总统计',this.datanianx,this.dataniany)
+    this.headZhexian("Line", "删除数量总统计", this.datanianx, this.dataniany);
     /* this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
     this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
     this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
@@ -127,215 +213,288 @@ export class DeleteTwoComponent implements OnInit {
     this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany)
     this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) */
     if (e.selectEndYear >= e.selectStartYear) {
-      let startTime = e.selectStartYear + '-' + 1  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
-      let endTime = e.selectEndYear + '-' + 12  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
+      let startTime =
+        e.selectStartYear + "-" + 1 + "-" + 1 + " " + 0 + ":" + 0 + ":" + 0;
+      let endTime =
+        e.selectEndYear + "-" + 12 + "-" + 31 + " " + 23 + ":" + 59 + ":" + 59;
     } else {
       const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('请选择正确时间区段','确定',config);
+      config.verticalPosition = "top";
+      config.duration = 3000;
+      this.snackBar.open("请选择正确时间区段", "确定", config);
     }
   }
 
   //支队查询
-  zhiFind(){
-    this.echartsData.dezhiorBuinding="zhi"
+  zhiFind() {
+    this.echartsData.dezhiorBuinding = "zhi";
   }
   //建筑类型查询
-  buildingFind(){
-    this.echartsData.dezhiorBuinding="building"
+  buildingFind() {
+    this.echartsData.dezhiorBuinding = "building";
   }
   //返回
-  goBack(){
-    history.go(-1)
+  goBack() {
+    history.go(-1);
   }
   //获取数据
-  tabledata
-  async getechartsdata(){
-    let Parameters={
-      MaintainedState:this.route.snapshot.queryParams.type,
-      TimeType:this.TimeType,
-      TimeStart:this.TimeType==0?this.selectStartYear+'-'+this.selectStartMonth:this.selectStartYear,
-      TimeEnd:this.TimeType==0?this.selectEndYear+'-'+this.selectEndMonth:this.selectEndYear,
+  tabledata;
+  async getechartsdata() {
+    let Parameters = {
+      MaintainedState: this.route.snapshot.queryParams.type,
+      TimeType: this.TimeType,
+      TimeStart:
+        this.TimeType == 0
+          ? this.selectStartYear + "-" + this.selectStartMonth
+          : this.selectStartYear,
+      TimeEnd:
+        this.TimeType == 0
+          ? this.selectEndYear + "-" + this.selectEndMonth
+          : this.selectEndYear,
       //OrganizationId
-    }
-    await this.echartsData.getData(Parameters,`/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`)
-    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
-    console.log(this.tabledata)
-    this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
+    };
+    await this.echartsData.getData(
+      Parameters,
+      `/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`
+    );
+    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
+    console.log(this.tabledata);
+    this.headZhexian("Line", "删除数量总统计", this.datayuex, this.datayuey);
   }
 
   /**
    * @name: 折线图
    * @test: test font
-   * @msg: 
-   * @param {divid(传入的div),headtext(标题)} 
-   * @return {type} 
-   */  
-  headZhexian(divid:string,headtext:string,datayuex,datayuey){
-    var dianji:boolean=headtext=="删除数量总统计" ? false:true;
-    var divsiaze={contentSize: [350, 496], viewSize: [831, 380]}
-    var pagex
-    var pagey
-    var boxsize=[pagex,pagey]
+   * @msg:
+   * @param {divid(传入的div),headtext(标题)}
+   * @return {type}
+   */
+  headZhexian(divid: string, headtext: string, datayuex, datayuey) {
+    var dianji: boolean = headtext == "删除数量总统计" ? false : true;
+    var divsiaze = { contentSize: [350, 496], viewSize: [831, 380] };
+    var pagex;
+    var pagey;
+    var boxsize = [pagex, pagey];
     /* document.onmouseover=function(e){
       console.log("000")
       pagex=e.pageX
       pagey=e.pageY
     } */
     var ec = echarts as any;
-    this.headZx = ec.init(document.getElementById(`${divid}`),'skinUpp');
+    this.headZx = ec.init(document.getElementById(`${divid}`), "skinUpp");
     this.options = {
       grid: {
         top: 50,
-        left:40,
+        left: 40,
         right: 20,
         bottom: 20,
       },
       // 标题
       title: {
-        text: `${headtext}`+`:总数（${this.tabledata[0].totalCount}）`,
-        left:'center',
+        text: `${headtext}` + `:总数（${this.tabledata[0].totalCount}）`,
+        left: "center",
         top: -4,
         //副标题文本样式
-    　subtextStyle:{
-      color:'#999',
-      fontWeight:'bold',
-    },
-        textStyle:{
+        subtextStyle: {
+          color: "#999",
+          fontWeight: "bold",
+        },
+        textStyle: {
           //文字颜色
-          color:'#000',
-          fontSize:divid=='Line'?30: 22,
-        }
+          color: "#000",
+          fontSize: divid == "Line" ? 30 : 22,
+        },
       },
       //提示框
       tooltip: {
-        trigger: 'axis',
-        formatter:  (params)=>{
-          return this.echartsData.dezhiorBuinding=="zhi"?this.echartsData.tableTooltip(this.echartsData.tableDataZhi,`${headtext}`):this.echartsData.tableTooltip(this.echartsData.buildingType,`${headtext}`)
+        trigger: "axis",
+        formatter: (params) => {
+          return this.echartsData.dezhiorBuinding == "zhi"
+            ? this.echartsData.tableTooltip(
+                this.echartsData.tableDataZhi,
+                `${headtext}`
+              )
+            : this.echartsData.tableTooltip(
+                this.echartsData.buildingType,
+                `${headtext}`
+              );
         },
         /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
         borderWidth:'1',
         borderRadius :'0', */
-        position: this.echartsData.tableTooltipNoShow2
+        position: this.echartsData.tableTooltipNoShow2,
       },
       xAxis: {
-          type: 'category',
-          boundaryGap:true,
-          data: datayuex,
-          axisLabel: {
-            textStyle:{
-              fontSize :15,
-              color:'#000000'
-            },
-            color: "#000", //刻度线标签颜色
+        type: "category",
+        boundaryGap: true,
+        data: datayuex,
+        axisLabel: {
+          textStyle: {
+            fontSize: 15,
+            color: "#000000",
           },
-          //设置坐标轴字体颜色和宽度
-          axisLine: {    
-            lineStyle: {
-              color: "#000",
-            },
+          color: "#000", //刻度线标签颜色
+        },
+        //设置坐标轴字体颜色和宽度
+        axisLine: {
+          lineStyle: {
+            color: "#000",
           },
-          splitLine: {//分割线配置
-            show:true,
-            lineStyle: {
-              color: '#999',
-            }
-          }
+        },
+        splitLine: {
+          //分割线配置
+          show: true,
+          lineStyle: {
+            color: "#999",
+          },
+        },
       },
       yAxis: {
-          type: 'value',
-          axisLabel: {
-            textStyle:{
-              fontSize :15,
-              color:'#000000'
-            },
-            color: "#000" //刻度线标签颜色
+        type: "value",
+        axisLabel: {
+          textStyle: {
+            fontSize: 15,
+            color: "#000000",
           },
-            //设置坐标轴字体颜色和宽度
-            axisLine: {
-            lineStyle: {
-              color: "#000",
-            }
-          }
+          color: "#000", //刻度线标签颜色
+        },
+        //设置坐标轴字体颜色和宽度
+        axisLine: {
+          lineStyle: {
+            color: "#000",
+          },
+        },
       },
-      series: [{
+      series: [
+        {
           data: datayuey,
-          type: 'line',
+          type: "line",
           markPoint: {
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
+          clickable: false,
         },
-          clickable:false,
-      }]
+      ],
     };
-    this.headZx.getZr().on('click', (params) => {
+    this.headZx.getZr().on("click", (params) => {
       // console.log(params.name)
-        /* this.echartsData.statefulInspectionName =params.name+headtext;
+      /* this.echartsData.statefulInspectionName =params.name+headtext;
         this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */
-        const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.headZx.containPixel('grid',pointInPixel)) {
-        let xIndex=this.headZx.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
-        if(this.options.xAxis.data[xIndex]=='2019'||this.options.xAxis.data[xIndex]=='2020'){
-          this.router.navigate(['/statisticanalysis/delete_thereLineDetails'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}});
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.headZx.containPixel("grid", pointInPixel)) {
+        let xIndex = this.headZx.convertFromPixel({ seriesIndex: 0 }, [
+          params.offsetX,
+          params.offsetY,
+        ])[0];
+        if (
+          this.options.xAxis.data[xIndex] == "2019" ||
+          this.options.xAxis.data[xIndex] == "2020"
+        ) {
+          this.router.navigate(["/statisticanalysis/delete_thereLineDetails"], {
+            queryParams: {
+              level: this.options.xAxis.data[xIndex],
+              headtext: headtext,
+            },
+          });
           //this.router.navigate(['/statisticanalysis/delete_two_newadd'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}});
-        }else{
+        } else {
           /*事件处理代码书写位置*/
           //this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}});
-          if(this.echartsData.dezhiorBuinding=="zhi"){
-            if(this.echartsData.level=='0'){
-              this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}});
-            }else if(this.echartsData.level=='1'){
-              this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.options.xAxis.data[xIndex]+headtext}});
+          if (this.echartsData.dezhiorBuinding == "zhi") {
+            if (this.echartsData.level == "0") {
+              this.router.navigate(
+                ["/statisticanalysis/delete_one/delete_there"],
+                {
+                  queryParams: {
+                    level: this.options.xAxis.data[xIndex],
+                    headtext: headtext,
+                  },
+                }
+              );
+            } else if (this.echartsData.level == "1") {
+              this.router.navigate(
+                ["/statisticanalysis/delete_one/delete_four"],
+                {
+                  queryParams: {
+                    level: this.options.xAxis.data[xIndex] + headtext,
+                  },
+                }
+              );
             }
-            
-          }else{
-            this.router.navigate(['/statisticanalysis/delete_two_newadd'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}});
+          } else {
+            this.router.navigate(["/statisticanalysis/delete_two_newadd"], {
+              queryParams: {
+                level: this.options.xAxis.data[xIndex],
+                headtext: headtext,
+              },
+            });
           }
-          
         }
-        
       }
-      
     });
     this.headZx.setOption(this.options);
   }
   /**
    * @name: 表格提示框封装
    * @test: test font
-   * @msg: 
+   * @msg:
    * @param {string(表头)}
-   * @return {type} 
+   * @return {type}
    */
-  biaogeTishi(biaotou:string){
-    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'
-    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
-    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
-    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
-    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
-    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
-    var jsonObj =  JSON.parse(shuju);
-    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
-        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
-        res+='<thead><tr>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
-        res+='</tr></thead>'
-        res+='<tbody>';
-        for(var i=0;i<jsonObj.length;i++){
-          res+='<tr>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
-        }
-        
-        res+='</tbody>'
-        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
-        res+='</table></div></div>'
-        return res
+  biaogeTishi(biaotou: string) {
+    var shuju =
+      '[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},';
+    shuju +=
+      '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},';
+    shuju +=
+      '{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},';
+    shuju +=
+      '{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},';
+    shuju +=
+      '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},';
+    shuju +=
+      '{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]';
+    var jsonObj = JSON.parse(shuju);
+    var res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">' +
+      biaotou +
+      "</span></div>";
+    res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+    res += "<thead><tr>";
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>';
+    res += "</tr></thead>";
+    res += "<tbody>";
+    for (var i = 0; i < jsonObj.length; i++) {
+      res += "<tr>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].name +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].number +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].zhanbi +
+        "</td></tr>";
+    }
+
+    res += "</tbody>";
+    res +=
+      '<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>';
+    res += "</table></div></div>";
+    return res;
   }
-  
 }

src/app/statistic-analysis/plan-analysis-by-synthesis/plan-analysis-by-synthesis.component.html

@@ -170,8 +170,7 @@
             <!-- <span  (click)="lookUnitInfo(element)" style="color: blue;cursor: pointer;">查看单位信息</span> -->
             <span (click)="routerTo(element)"
               style="color: blue;cursor: pointer;margin-left: 10px;">{{url=='1'?'审核预案':'查看预案'}} </span>
-            <!-- <label style="color: #0000FF;margin-left: 10px;cursor: pointer;" (click)='openReserve(element)' *ngIf="element.auditStatus==2">预案公开</label>
-                    <label style="color: #0000FF;margin-left: 10px;cursor: pointer;" (click)='closeReserve(element)' *ngIf="element.auditStatus==2">预案取消公开</label> -->
+
           </td>
         </ng-container>
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts

@@ -1,39 +1,47 @@
 /*
- * @Descripttion: 
- * @version: 
+ * @Descripttion:
+ * @version:
  * @Author: sueRimn
  * @Date: 2021-05-08 09:42:43
  * @LastEditors: sueRimn
  * @LastEditTime: 2021-05-19 14:46:30
  */
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 //import {Foimport { FormGroup, FormControl } from '@angular/forms';
-import { EchartsDataService } from '../echarts-data.service';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { EchartsDataService } from "../echarts-data.service";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+} from "@angular/material/core";
 declare var echarts: any;
 
 @Component({
-  selector: 'app-real-monitoring',
-  templateUrl: './real-monitoring.component.html',
-  styleUrls: ['./real-monitoring.component.scss'],
-
+  selector: "app-real-monitoring",
+  templateUrl: "./real-monitoring.component.html",
+  styleUrls: ["./real-monitoring.component.scss"],
 })
 export class RealMonitoringComponent implements OnInit {
-
   /* campaignOne: FormGroup;
   campaignTwo: FormGroup; */
-  constructor(private router: Router, public EchartsData: EchartsDataService, private route: ActivatedRoute, public snackBar: MatSnackBar) { }
+  constructor(
+    private router: Router,
+    public EchartsData: EchartsDataService,
+    private route: ActivatedRoute,
+    public snackBar: MatSnackBar
+  ) {}
 
-  addtime = String(new Date().getFullYear()) + '-01'//添加时间
-  endtime = String(new Date().getFullYear()) + '-0' + String(new Date().getMonth() + 1)
+  addtime = String(new Date().getFullYear()) + "-01"; //添加时间
+  endtime =
+    String(new Date().getFullYear()) + "-0" + String(new Date().getMonth() + 1);
   /* addtime=String(new Date().getFullYear()+new Date().getMonth())
   endtime=String(new Date().getFullYear()+new Date().getMonth()) */
   ngOnInit(): void {
     window.setTimeout(() => {
-      this.getechartsdata(true)
-    }, 0)
+      this.getechartsdata(true);
+    }, 0);
   }
   //获取echarts数据
   async getechartsdata(chushi: boolean) {
@@ -60,162 +68,178 @@ export class RealMonitoringComponent implements OnInit {
     });
     } */
 
-    for (var i = Number(this.addtime.split('-')[0]); i <= Number(this.endtime.split('-')[0]); i++) {
+    for (
+      var i = Number(this.addtime.split("-")[0]);
+      i <= Number(this.endtime.split("-")[0]);
+      i++
+    ) {
       let paramdataleft = {
         objectType: 3,
-        TrendYear: i
-      }
+        TrendYear: i,
+      };
       //获取左侧柱状图的数据
-      await this.EchartsData.getData(paramdataleft, '/api/StatisticsAnalysis/Trends')
-      this.leftzhuTable = JSON.parse(JSON.stringify(this.EchartsData.allDate))
+      await this.EchartsData.getData(
+        paramdataleft,
+        "/api/StatisticsAnalysis/Trends"
+      );
+      this.leftzhuTable = JSON.parse(JSON.stringify(this.EchartsData.allDate));
       //console.log(this.leftzhuTable)
       this.leftzhuTable[0].forEach((value, index, array) => {
-        if (this.addtime.split('-')[0] != this.endtime.split('-')[0]) {
-          if ((array[index].year == Number(this.addtime.split('-')[0]) && array[index].month >= Number(this.addtime.split('-')[1])) || (array[index].year == Number(this.endtime.split('-')[0]) && array[index].month <= Number(this.endtime.split('-')[1]))) {
-            this.dateNum.push(array[index].count)
-            this.dateyue.push(array[index].year + '-' + array[index].month)
+        if (this.addtime.split("-")[0] != this.endtime.split("-")[0]) {
+          if (
+            (array[index].year == Number(this.addtime.split("-")[0]) &&
+              array[index].month >= Number(this.addtime.split("-")[1])) ||
+            (array[index].year == Number(this.endtime.split("-")[0]) &&
+              array[index].month <= Number(this.endtime.split("-")[1]))
+          ) {
+            this.dateNum.push(array[index].count);
+            this.dateyue.push(array[index].year + "-" + array[index].month);
           }
         } else {
-          if (array[index].month >= this.addtime.split('-')[1] && array[index].month <= this.endtime.split('-')[1]) {
-            this.dateNum.push(array[index].count)
-            this.dateyue.push(array[index].year + '-' + array[index].month)
+          if (
+            array[index].month >= this.addtime.split("-")[1] &&
+            array[index].month <= this.endtime.split("-")[1]
+          ) {
+            this.dateNum.push(array[index].count);
+            this.dateyue.push(array[index].year + "-" + array[index].month);
           }
         }
-
       });
     }
 
     //获取底端柱状图数据
     let paramBottom = {
-      TimeIntervalStart: this.addtime == '0' ? '' : this.endtime,
-      TimeIntervalEnd: this.endtime == '0' ? '' : this.endtime
-    }
+      TimeIntervalStart: this.addtime == "0" ? "" : this.endtime,
+      TimeIntervalEnd: this.endtime == "0" ? "" : this.endtime,
+    };
     if (chushi) {
-      await this.EchartsData.getData(paramBottom, '/api/StatisticsAnalysis/Plans/AuditApproved/Organizations')
-      this.bottomTable = JSON.parse(JSON.stringify(this.EchartsData.allDate))
-      this.addNum = this.bottomTable[0].totalCount
+      await this.EchartsData.getData(
+        paramBottom,
+        "/api/StatisticsAnalysis/Plans/AuditApproved/Organizations"
+      );
+      this.bottomTable = JSON.parse(JSON.stringify(this.EchartsData.allDate));
+      this.addNum = this.bottomTable[0].totalCount;
       this.bottomTable[0].organizations.forEach((value, index, array) => {
-        this.zhiNameData.push(array[index].organizationName)
-        this.zhiNumData.push(array[index].count)
+        this.zhiNameData.push(array[index].organizationName);
+        this.zhiNumData.push(array[index].count);
         if (index > 0 && index < 4) {
-          this.addyuan.push(array[index].organizationName)
+          this.addyuan.push(array[index].organizationName);
         }
-
       });
-      this.bottomzhutu()
+      this.bottomzhutu();
     }
 
     //右侧饼状图数据
     let param = {
-      TimeIntervalStart: this.addtime == '0' ? '' : this.addtime,
-      TimeIntervalEnd: this.endtime == '0' ? '' : this.endtime
-    }
-    await this.EchartsData.getData(param, '/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes')
-    this.rightbTable = JSON.parse(JSON.stringify(this.EchartsData.allDate))
-    console.log(this.rightbTable)
-    this.rightbTable[0].planTypeStatistics.planTypes.forEach((value,index,array) => {
-      if(array[index].planTypeName=='Plan2D'){
-        this.indexData.push({name:'二维预案',value:array[index].count})
-      }else if(array[index].planTypeName=='Plan3D'){
-        //array[index].planTypeName=='三维预案'
-        this.indexData.push({name:'三维预案',value:array[index].count})
-      }else if(array[index].planTypeName=='Other'){
-        //array[index].planTypeName=='其他预案'
-        this.indexData.push({name:'其他预案',value:array[index].count})
-      }else if(array[index].planTypeName=='PlanText'){
-        //array[index].planTypeName=='文本预案'
-        this.indexData.push({name:'文本预案',value:array[index].count})
+      TimeIntervalStart: this.addtime == "0" ? "" : this.addtime,
+      TimeIntervalEnd: this.endtime == "0" ? "" : this.endtime,
+    };
+    await this.EchartsData.getData(
+      param,
+      "/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes"
+    );
+    this.rightbTable = JSON.parse(JSON.stringify(this.EchartsData.allDate));
+    console.log(this.rightbTable);
+    this.rightbTable[0].planTypeStatistics.planTypes.forEach(
+      (value, index, array) => {
+        if (array[index].planTypeName == "Plan2D") {
+          this.indexData.push({ name: "二维预案", value: array[index].count });
+        } else if (array[index].planTypeName == "Plan3D") {
+          //array[index].planTypeName=='三维预案'
+          this.indexData.push({ name: "三维预案", value: array[index].count });
+        } else if (array[index].planTypeName == "Other") {
+          //array[index].planTypeName=='其他预案'
+          this.indexData.push({ name: "其他预案", value: array[index].count });
+        } else if (array[index].planTypeName == "PlanText") {
+          //array[index].planTypeName=='文本预案'
+          this.indexData.push({ name: "文本预案", value: array[index].count });
+        }
       }
-    });
-    console.log(this.indexData)
-    this.leftzhuzhuangtu()
-    this.rightbingtu()
-
+    );
+    console.log(this.indexData);
+    this.leftzhuzhuangtu();
+    this.rightbingtu();
   }
   //查询按钮
   findClick() {
-    console.log(this.addtime, this.endtime)
+    console.log(this.addtime, this.endtime);
     const config = new MatSnackBarConfig();
-    config.verticalPosition = 'top';
-    config.duration = 3000
-    if (this.addtime == '0' || this.endtime == '0') {
-      this.snackBar.open('结束时间或者开始时间不能为空!', '确定', config);
+    config.verticalPosition = "top";
+    config.duration = 3000;
+    if (this.addtime == "0" || this.endtime == "0") {
+      this.snackBar.open("结束时间或者开始时间不能为空!", "确定", config);
     } else {
       if (this.endtime < this.addtime) {
-        this.snackBar.open('结束时间不能大于开始时间!', '确定', config);
+        this.snackBar.open("结束时间不能大于开始时间!", "确定", config);
       } else {
-        this.leftzhutu.clear()
-        this.leftzhutu.dispose()
-        this.dateyue = []
-        this.dateNum = []
+        if (this.leftzhutu) {
+          this.leftzhutu.clear();
+          this.leftzhutu.dispose();
+        }
+
+        this.dateyue = [];
+        this.dateNum = [];
         //this.zhiNameData = []
         //this.zhiNumData = []
         //this.addyuan = []
-        this.getechartsdata(false)
+        this.getechartsdata(false);
       }
     }
-
   }
 
-  addNum = 0//新增预案个数
-  addyuan = []
-  leftzhuTable//左侧柱状图数据
-  rightbTable//右侧饼图数据
-  bottomTable//最低端柱状图数据
-  leftzhutu
-  optionLeftzhu//中间左侧柱状图实例
-  dateyue = []
-  dateNum = []
-  zhiNameData = []
-  zhiNumData = []
-  rightbing
-  optionRightbing//中间右侧柱状图
-  bottomzhu//底部柱状图实例
-  bottomZhuoption
-  tiaoshiPao: any
+  addNum = 0; //新增预案个数
+  addyuan = [];
+  leftzhuTable; //左侧柱状图数据
+  rightbTable; //右侧饼图数据
+  bottomTable; //最低端柱状图数据
+  leftzhutu;
+  optionLeftzhu; //中间左侧柱状图实例
+  dateyue = [];
+  dateNum = [];
+  zhiNameData = [];
+  zhiNumData = [];
+  rightbing;
+  optionRightbing; //中间右侧柱状图
+  bottomzhu; //底部柱状图实例
+  bottomZhuoption;
+  tiaoshiPao: any;
   //中间左侧柱状图
   async leftzhuzhuangtu() {
     var ec = echarts as any;
-    this.leftzhutu = ec.init(document.getElementById(`leftecharts`), 'walden');
+    this.leftzhutu = ec.init(document.getElementById(`leftecharts`), "walden");
     this.optionLeftzhu = {
       grid: {
         //top: 10,
         containLabel: true,
         bottom: 10,
-        left: 50
+        left: 50,
       },
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         axisPointer: {
-          type: 'none'
-        }
+          type: "none",
+        },
       },
       xAxis: {
-          type: 'category',
-          data: this.dateyue,
-          //axisLabel: this.axisLabel,
-          axisLabel:{
-            //this.axisLabel,
-            textStyle:{
-              fontSize :14,
-              color:'#000000'
-            }
-            
-          }
-
-        
+        type: "category",
+        data: this.dateyue,
+        //axisLabel: this.axisLabel,
+        axisLabel: {
+          //this.axisLabel,
+          textStyle: {
+            fontSize: 14,
+            color: "#000000",
+          },
+        },
       },
       yAxis: {
-          type: 'value',
-          axisLabel:{
-            textStyle:{
-              fontSize :14,
-              color:'#000000'
-            }
-            
-          }
-
-        
+        type: "value",
+        axisLabel: {
+          textStyle: {
+            fontSize: 14,
+            color: "#000000",
+          },
+        },
       },
       /* tooltip: {
         trigger: 'item',
@@ -226,24 +250,30 @@ export class RealMonitoringComponent implements OnInit {
       }, */
       dataZoom: [
         {
-          type: 'slider',
-          bottom:2
-      }
-      ],
-      series: [{
-        name: '数量',
-        data: this.dateNum,
-        type: 'bar',
-        markPoint: {
-          symbolSize: [65, 65],
-          data: this.EchartsData.qipao(this.tiaoshiPao, this.dateNum, this.dateyue)
+          type: "slider",
+          bottom: 2,
         },
-        backgroundStyle: {
-          color: 'rgba(220, 220, 220, 0.8)'
+      ],
+      series: [
+        {
+          name: "数量",
+          data: this.dateNum,
+          type: "bar",
+          markPoint: {
+            symbolSize: [65, 65],
+            data: this.EchartsData.qipao(
+              this.tiaoshiPao,
+              this.dateNum,
+              this.dateyue
+            ),
+          },
+          backgroundStyle: {
+            color: "rgba(220, 220, 220, 0.8)",
+          },
+          barWidth: "38",
+          //label: this.topTextlabel
         },
-        barWidth: '38',
-        //label: this.topTextlabel
-      }]
+      ],
     };
     this.leftzhutu.setOption(this.optionLeftzhu);
     /* this.leftzhutu.getZr().on('click', async (params)=>{
@@ -282,14 +312,15 @@ export class RealMonitoringComponent implements OnInit {
       
       
     }); */
-
-
   }
   //中间右侧饼图
-  indexData = []//所有数据
-  lengthdata = ['二维预案', '三维预案', '文本预案', '其他预案']
+  indexData = []; //所有数据
+  lengthdata = ["二维预案", "三维预案", "文本预案", "其他预案"];
   rightbingtu() {
-    this.rightbing = echarts.init(document.getElementById('rightecharts'), 'walden');
+    this.rightbing = echarts.init(
+      document.getElementById("rightecharts"),
+      "walden"
+    );
     this.optionRightbing = {
       /* title: {
         text: `建筑类型统计（${this.count}家）`,
@@ -308,39 +339,39 @@ export class RealMonitoringComponent implements OnInit {
         }
       }, */
       tooltip: {
-        trigger: 'item',
+        trigger: "item",
         axisPointer: {
-          type: 'shadow'
-        }
+          type: "shadow",
+        },
       },
       legend: {
-        orient: 'vertical',
+        orient: "vertical",
         //left:this.padHw?50:0,
         //right:this.padHw?20:250,
         top: 20,
         right: 30,
         textStyle: {
           fontSize: 16,
-          color: "#000000"
+          color: "#000000",
         },
-        data: this.lengthdata
+        data: this.lengthdata,
       },
       series: [
         {
-          top: '0',
-          name: '预案类型',
-          type: 'pie',
-          radius: '60%',
-          center: ['50%', '53%'],
+          top: "0",
+          name: "预案类型",
+          type: "pie",
+          radius: "60%",
+          center: ["50%", "53%"],
           label: {
             show: true,
             fontSize: 16,
-            formatter: '{b}{c}家\n{d|({d}%)}',
+            formatter: "{b}{c}家\n{d|({d}%)}",
             rich: {
               d: {
-                align: 'center',
-                fontSize: 18
-              }
+                align: "center",
+                fontSize: 18,
+              },
             },
           },
           /* data: [
@@ -349,110 +380,116 @@ export class RealMonitoringComponent implements OnInit {
             { value: this.rightbTable[0].planTypeStatistics.planTypes[2] != undefined ? this.rightbTable[0].planTypeStatistics.planTypes[2].count : 0, name: '其他预案' },
             { value: this.rightbTable[0].planTypeStatistics.planTypes[3] != undefined ? this.rightbTable[0].planTypeStatistics.planTypes[3].count : 0, name: '文本预案' }
           ], */
-          data:this.indexData,
+          data: this.indexData,
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
     };
-    this.rightbing.setOption(this.optionRightbing)
+    this.rightbing.setOption(this.optionRightbing);
   }
   //最底部柱状图
   bottomzhutu() {
     var ec = echarts as any;
-    this.bottomzhu = ec.init(document.getElementById(`bottomEcharts`), 'walden');
+    this.bottomzhu = ec.init(
+      document.getElementById(`bottomEcharts`),
+      "walden"
+    );
     this.bottomZhuoption = {
       grid: {
         //top: 10,
-        containLabel:true,
-        bottom:2,
-        left:50
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-          type: 'none'
-        }
+        containLabel: true,
+        bottom: 2,
+        left: 50,
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "none",
+        },
       },
       xAxis: {
-          type: 'category',
-          data: this.zhiNameData,
-          //axisLabel: this.axisLabel,
-          axisLabel:{
-            //this.axisLabel,
-            textStyle:{
-              fontSize :14,
-              color:'#000000'
-            },
-            interval: 0,
-            //rotate:38
-        formatter:function(value){
-          var ret = "";//拼接加\n返回的类目项 
-          var maxLength = 3;//每项显示文字个数
-          var valLength = value.length;//X轴类目项的文字个数
-          var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
-          if (rowN > 1) { //如果类目项的文字大于3,
-            for (var i = 0; i < rowN; i++) {
-              var temp = "";//每次截取的字符串
-              var start = i * maxLength;//开始截取的位置
-              var end = start + maxLength;//结束截取的位置
-              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
-              temp = value.substring(start, end) + "\n";
-              ret += temp;
-            } //凭借最终的字符串
-            return ret;
-          }else {
-          return value;
-          }
-        } //function
-          }
-
-        
+        type: "category",
+        data: this.zhiNameData,
+        //axisLabel: this.axisLabel,
+        axisLabel: {
+          //this.axisLabel,
+          textStyle: {
+            fontSize: 14,
+            color: "#000000",
+          },
+          interval: 0,
+          //rotate:38
+          formatter: function (value) {
+            var ret = ""; //拼接加\n返回的类目项
+            var maxLength = 3; //每项显示文字个数
+            var valLength = value.length; //X轴类目项的文字个数
+            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+            if (rowN > 1) {
+              //如果类目项的文字大于3,
+              for (var i = 0; i < rowN; i++) {
+                var temp = ""; //每次截取的字符串
+                var start = i * maxLength; //开始截取的位置
+                var end = start + maxLength; //结束截取的位置
+                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+                temp = value.substring(start, end) + "\n";
+                ret += temp;
+              } //凭借最终的字符串
+              return ret;
+            } else {
+              return value;
+            }
+          }, //function
+        },
       },
       yAxis: {
-          type: 'value',
-          axisLabel:{
-            textStyle:{
-              fontSize :14,
-              color:'#000000'
-            }
-            
-          }
+        type: "value",
+        axisLabel: {
+          textStyle: {
+            fontSize: 14,
+            color: "#000000",
+          },
+        },
       },
       dataZoom: [
         {
-          type: 'slider',
-          bottom:90,
+          type: "slider",
+          bottom: 90,
           //backgroundColor:'rgba(47,69,84,-0.2)',
-          dataBackground:{
-            areaStyle:{
-              opacity:0
-            }
-          }
-      }
-      ],
-      series: [{
-        name: '数量',
-        data: this.zhiNumData,
-        type: 'bar',
-        markPoint: {
-          symbolSize: [65, 65],
-          data: this.EchartsData.qipao(this.tiaoshiPao, this.zhiNumData, this.zhiNameData)
+          dataBackground: {
+            areaStyle: {
+              opacity: 0,
+            },
+          },
         },
-         
-          barWidth :'38',
+      ],
+      series: [
+        {
+          name: "数量",
+          data: this.zhiNumData,
+          type: "bar",
+          markPoint: {
+            symbolSize: [65, 65],
+            data: this.EchartsData.qipao(
+              this.tiaoshiPao,
+              this.zhiNumData,
+              this.zhiNameData
+            ),
+          },
+
+          barWidth: "38",
           //label: this.topTextlabel
-        }]
-      };
-      this.bottomzhu.setOption(this.bottomZhuoption);
-      /* this.bottomzhu.getZr().on('click',(params)=>{
+        },
+      ],
+    };
+    this.bottomzhu.setOption(this.bottomZhuoption);
+    /* this.bottomzhu.getZr().on('click',(params)=>{
         console.log(params)
       }) */
-    }
-  
   }
+}

src/app/statistic-analysis/state/page-one/page-one.component.ts

@@ -1,310 +1,543 @@
 /*
- * @Descripttion: 
- * @version: 
+ * @Descripttion:
+ * @version:
  * @Author: sueRimn
  * @Date: 2020-09-01 15:24:39
  * @LastEditors: sueRimn
  * @LastEditTime: 2021-07-21 08:54:04
  */
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {EchartsDataService,} from '../../echarts-data.service'
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
-declare var CryptoJS
+declare var CryptoJS;
 
 @Component({
-  selector: 'app-page-one',
-  templateUrl: './page-one.component.html',
-  styleUrls: ['./page-one.component.scss']
+  selector: "app-page-one",
+  templateUrl: "./page-one.component.html",
+  styleUrls: ["./page-one.component.scss"],
 })
 export class PageOneComponent implements OnInit {
-  options:any;
-  
-  constructor(private router: Router,public echartsData:EchartsDataService) { }
+  options: any;
 
-  padHw
-  orid
+  constructor(private router: Router, public echartsData: EchartsDataService) {}
+
+  padHw;
+  orid;
   ngOnInit() {
-    if(window.matchMedia("(max-width: 1400px)").matches){
-      this.padHw=true
+    if (window.matchMedia("(max-width: 1400px)").matches) {
+      this.padHw = true;
       //this.padjt=
-    }else{
-      this.padHw=false
+    } else {
+      this.padHw = false;
     }
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
-    
-    window.setTimeout(()=>{
-      this.getechartsdata()
-    })
+    }
+
+    window.setTimeout(() => {
+      this.getechartsdata();
+    });
     let jwt = sessionStorage.getItem("token");
-    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]);
+    let rawJwt = CryptoJS.enc.Base64.parse(jwt.split(".")[1]);
     let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt);
-    let identityJsonparse=JSON.parse(identityJson)
-    this.orid=identityJsonparse.oid
+    let identityJsonparse = JSON.parse(identityJson);
+    this.orid = identityJsonparse.oid;
     //console.log(identityJsonparse)
   }
   ngOnDestroy(): void {
-    this.indexBzt.clear()
-    this.indexBzt.dispose()
+    if (!this.indexBzt) {
+      return;
+    }
+    this.indexBzt.clear();
+    this.indexBzt.dispose();
   }
-  async getechartsdata(){
-    await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans`)
-    this.initCharts("pieone")
-    this.initCharts("pietwo")
+  async getechartsdata() {
+    await this.echartsData.getData(null, `/api/StatisticsAnalysis/Plans`);
+    this.initCharts("pieone");
+    this.initCharts("pietwo");
   }
   //级别和类型转换
-  pieonetype=true//级别
-  clickhuan(){
-    this.pieonetype=!this.pieonetype
-    this.initCharts("pieone")
+  pieonetype = true; //级别
+  clickhuan() {
+    this.pieonetype = !this.pieonetype;
+    this.initCharts("pieone");
   }
 
   /* 首页饼状图 */
-  indexBzt
-  tabledata
-  count
-  indexData
-  planCategoriesData=[]//预案级别
-  planStatusesData=[]//预案状态
-  planTypeStatisticsdata=[]//预案类型
-  initCharts(tid){
-    this.planTypeStatisticsdata=[]
-    this.planCategoriesData=[]
-    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
-    if(tid=='pieone')
-    {
-      if(this.pieonetype){
-        this.tabledata[0].planCategoryStatistics.planCategories.forEach((value,index,array) => {
-          if(array[index].planCategoryName=='LevelOne'){
-            this.planCategoriesData.push({name:'Ⅰ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:1})
-          }else if(array[index].planCategoryName=='LevelTwo'){
-            this.planCategoriesData.push({name:'Ⅱ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:2})
-          }else if(array[index].planCategoryName=='LevelThree'){
-            this.planCategoriesData.push({name:'Ⅲ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:3})
-          }else if(array[index].planCategoryName=='LevelFour'){
-            this.planCategoriesData.push({name:'Ⅳ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:4})
-          }else if(array[index].planCategoryName=='LevelFive'){
-            this.planCategoriesData.push({name:'Ⅴ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:5})
+  indexBzt;
+  tabledata;
+  count;
+  indexData;
+  planCategoriesData = []; //预案级别
+  planStatusesData = []; //预案状态
+  planTypeStatisticsdata = []; //预案类型
+  initCharts(tid) {
+    this.planTypeStatisticsdata = [];
+    this.planCategoriesData = [];
+    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
+    if (tid == "pieone") {
+      if (this.pieonetype) {
+        this.tabledata[0].planCategoryStatistics.planCategories.forEach(
+          (value, index, array) => {
+            if (array[index].planCategoryName == "LevelOne") {
+              this.planCategoriesData.push({
+                name: "Ⅰ级预案",
+                value: array[index].count,
+                planStatusName: array[index].planCategoryName,
+                type: 1,
+              });
+            } else if (array[index].planCategoryName == "LevelTwo") {
+              this.planCategoriesData.push({
+                name: "Ⅱ级预案",
+                value: array[index].count,
+                planStatusName: array[index].planCategoryName,
+                type: 2,
+              });
+            } else if (array[index].planCategoryName == "LevelThree") {
+              this.planCategoriesData.push({
+                name: "Ⅲ级预案",
+                value: array[index].count,
+                planStatusName: array[index].planCategoryName,
+                type: 3,
+              });
+            } else if (array[index].planCategoryName == "LevelFour") {
+              this.planCategoriesData.push({
+                name: "Ⅳ级预案",
+                value: array[index].count,
+                planStatusName: array[index].planCategoryName,
+                type: 4,
+              });
+            } else if (array[index].planCategoryName == "LevelFive") {
+              this.planCategoriesData.push({
+                name: "Ⅴ级预案",
+                value: array[index].count,
+                planStatusName: array[index].planCategoryName,
+                type: 5,
+              });
+            }
           }
-        });
-      }else{
-        this.tabledata[0].planTypeStatistics.planTypes.forEach((value,index,array) => {
-          if(array[index].planTypeName=='Plan2D'){
-            this.planTypeStatisticsdata.push({name:'二维预案',value:array[index].count,planStatusName:array[index].planTypeName,type:1})
-          }else if(array[index].planTypeName=='Plan3D'){
-            this.planTypeStatisticsdata.push({name:'三维预案',value:array[index].count,planStatusName:array[index].planTypeName,type:2})
-          }else if(array[index].planTypeName=='Other'){
-            this.planTypeStatisticsdata.push({name:'其它预案',value:array[index].count,planStatusName:array[index].planTypeName,type:3})
-          }else if(array[index].planTypeName=='PlanText'){
-            this.planTypeStatisticsdata.push({name:'文本预案',value:array[index].count,planStatusName:array[index].planTypeName,type:4})
+        );
+      } else {
+        this.tabledata[0].planTypeStatistics.planTypes.forEach(
+          (value, index, array) => {
+            if (array[index].planTypeName == "Plan2D") {
+              this.planTypeStatisticsdata.push({
+                name: "二维预案",
+                value: array[index].count,
+                planStatusName: array[index].planTypeName,
+                type: 1,
+              });
+            } else if (array[index].planTypeName == "Plan3D") {
+              this.planTypeStatisticsdata.push({
+                name: "三维预案",
+                value: array[index].count,
+                planStatusName: array[index].planTypeName,
+                type: 2,
+              });
+            } else if (array[index].planTypeName == "Other") {
+              this.planTypeStatisticsdata.push({
+                name: "其它预案",
+                value: array[index].count,
+                planStatusName: array[index].planTypeName,
+                type: 3,
+              });
+            } else if (array[index].planTypeName == "PlanText") {
+              this.planTypeStatisticsdata.push({
+                name: "文本预案",
+                value: array[index].count,
+                planStatusName: array[index].planTypeName,
+                type: 4,
+              });
+            }
           }
-        });
+        );
       }
-      
-    }else{
-      this.tabledata[0].planStatusStatistics.planStatuses.forEach((value,index,array) => {
-        if(array[index].planStatusName=='New'){
-          this.planStatusesData.push({name:'预案新增',value:array[index].count,type:1,planStatusName:array[index].planStatusName})
-        }else if(array[index].planStatusName=='Auditing'){
-          this.planStatusesData.push({name:'预案审核中',value:array[index].count,type:2,planStatusName:array[index].planStatusName})
-        }else if(array[index].planStatusName=='Approved'){
-          this.planStatusesData.push({name:'预案审核通过',value:array[index].count,type:3,planStatusName:array[index].planStatusName})
-        }else if(array[index].planStatusName=='Rejected'){
-          this.planStatusesData.push({name:'预案审核退回',value:array[index].count,type:4,planStatusName:array[index].planStatusName})
-        }else if(array[index].planStatusName=='Editing'){
-          this.planStatusesData.push({name:'预案编制',value:array[index].count,type:5,planStatusName:array[index].planStatusName})
+    } else {
+      this.tabledata[0].planStatusStatistics.planStatuses.forEach(
+        (value, index, array) => {
+          if (array[index].planStatusName == "New") {
+            this.planStatusesData.push({
+              name: "预案新增",
+              value: array[index].count,
+              type: 1,
+              planStatusName: array[index].planStatusName,
+            });
+          } else if (array[index].planStatusName == "Auditing") {
+            this.planStatusesData.push({
+              name: "预案审核中",
+              value: array[index].count,
+              type: 2,
+              planStatusName: array[index].planStatusName,
+            });
+          } else if (array[index].planStatusName == "Approved") {
+            this.planStatusesData.push({
+              name: "预案审核通过",
+              value: array[index].count,
+              type: 3,
+              planStatusName: array[index].planStatusName,
+            });
+          } else if (array[index].planStatusName == "Rejected") {
+            this.planStatusesData.push({
+              name: "预案审核退回",
+              value: array[index].count,
+              type: 4,
+              planStatusName: array[index].planStatusName,
+            });
+          } else if (array[index].planStatusName == "Editing") {
+            this.planStatusesData.push({
+              name: "预案编制",
+              value: array[index].count,
+              type: 5,
+              planStatusName: array[index].planStatusName,
+            });
+          }
         }
-      });
+      );
     }
-    
-    
+
     var ec = echarts as any;
-    this.indexBzt = ec.init(document.getElementById(tid),'walden');
-    var options={
+    this.indexBzt = ec.init(document.getElementById(tid), "walden");
+    var options = {
       title: {
-          text:tid=='pieone'&&this.pieonetype?`预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）` :tid=='pieone'&&!this.pieonetype?`预案类型统计（${this.tabledata[0].planTypeStatistics.totalCount}份）`:`预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`,
-          top: "7%",
-          left: 'center',
-          textStyle:{
-            fontSize:this.padHw?25: 31
-          }
+        text:
+          tid == "pieone" && this.pieonetype
+            ? `预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）`
+            : tid == "pieone" && !this.pieonetype
+            ? `预案类型统计（${this.tabledata[0].planTypeStatistics.totalCount}份）`
+            : `预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`,
+        top: "7%",
+        left: "center",
+        textStyle: {
+          fontSize: this.padHw ? 25 : 31,
+        },
       },
       tooltip: {
-          trigger: 'item',
-            formatter:  (params)=>{
-            this.echartsData.biaogeTishiyuan(params.data,tid,this.pieonetype)
-            return this.echartsData.res
-          }
+        trigger: "item",
+        formatter: (params) => {
+          this.echartsData.biaogeTishiyuan(params.data, tid, this.pieonetype);
+          return this.echartsData.res;
+        },
       },
       legend: {
         bottom: 50,
-        left: 'center',
-          //padding:20,
-          // itemWidth:60,
-          // itemHeight:25,
-          textStyle:{
-            fontSize:this.padHw?15: 18,
-            color:"#000000"
-          },
-          data:tid=='pieone'&&this.pieonetype?['Ⅰ级预案', 'Ⅱ级预案', 'Ⅲ级预案', 'Ⅳ级预案', 'Ⅴ级预案']:tid=='pieone'&&!this.pieonetype?['二维预案', '三维预案', '其它预案', '文本预案'] :['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
+        left: "center",
+        //padding:20,
+        // itemWidth:60,
+        // itemHeight:25,
+        textStyle: {
+          fontSize: this.padHw ? 15 : 18,
+          color: "#000000",
+        },
+        data:
+          tid == "pieone" && this.pieonetype
+            ? ["Ⅰ级预案", "Ⅱ级预案", "Ⅲ级预案", "Ⅳ级预案", "Ⅴ级预案"]
+            : tid == "pieone" && !this.pieonetype
+            ? ["二维预案", "三维预案", "其它预案", "文本预案"]
+            : [
+                "预案新增",
+                "预案审核通过",
+                "预案编制",
+                "预案审核退回",
+                "预案审核中",
+              ],
       },
       series: [
-          {
-              name: '访问来源',
-              type: 'pie',
-              radius: '50%',
-              center: ['50%', '45%'],
-              label:{
-                normal:{
-                show:true,
-                // position: 'inner',
-                fontSize:this.padHw?14: 18,
-                formatter:this.padHw?'{b} \n{c}份({d}%)' :'{b} {c}份\n({d}%)',
-                },
-                rich: {
-                  d: {
-                    align: 'center',
-                  }
-                },
-                
+        {
+          name: "访问来源",
+          type: "pie",
+          radius: "50%",
+          center: ["50%", "45%"],
+          label: {
+            normal: {
+              show: true,
+              // position: 'inner',
+              fontSize: this.padHw ? 14 : 18,
+              formatter: this.padHw ? "{b} \n{c}份({d}%)" : "{b} {c}份\n({d}%)",
+            },
+            rich: {
+              d: {
+                align: "center",
               },
-              data:tid=='pieone'&&this.pieonetype?this.planCategoriesData:tid=='pieone'&&!this.pieonetype?this.planTypeStatisticsdata:this.planStatusesData,
-              emphasis: {
-                  itemStyle: {
-                      shadowBlur: 10,
-                      shadowOffsetX: 0,
-                      shadowColor: 'rgba(0, 0, 0, 0.5)'
-                  }
-              }
-          }
-      ]
+            },
+          },
+          data:
+            tid == "pieone" && this.pieonetype
+              ? this.planCategoriesData
+              : tid == "pieone" && !this.pieonetype
+              ? this.planTypeStatisticsdata
+              : this.planStatusesData,
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
     };
-    this.indexBzt.on('click', (params) => {
+    this.indexBzt.on("click", (params) => {
       // console.log(params)
-      if(tid=='pieone'){
-        if(this.pieonetype){
-          for(var i=0;i<this.tabledata[0].planCategoryStatistics.planCategories.length;i++){
-            if(this.tabledata[0].planCategoryStatistics.planCategories[i].planCategoryName==params.data.planStatusName){
-              if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.length>0){
-                this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.forEach((element,index,array) => {
-                  if(array[index].organizationId==this.orid){
-                    array.splice(index,1)
+      if (tid == "pieone") {
+        if (this.pieonetype) {
+          for (
+            var i = 0;
+            i < this.tabledata[0].planCategoryStatistics.planCategories.length;
+            i++
+          ) {
+            if (
+              this.tabledata[0].planCategoryStatistics.planCategories[i]
+                .planCategoryName == params.data.planStatusName
+            ) {
+              if (
+                (this.echartsData.level == "0" ||
+                  this.echartsData.level == "1" ||
+                  this.echartsData.level == "2") &&
+                this.tabledata[0].planCategoryStatistics.planCategories[i]
+                  .organizations.length > 0
+              ) {
+                this.tabledata[0].planCategoryStatistics.planCategories[
+                  i
+                ].organizations.forEach((element, index, array) => {
+                  if (array[index].organizationId == this.orid) {
+                    array.splice(index, 1);
                   }
-                  window.setTimeout(()=>{
-                    if(array.length>0){
-                      this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}});
-                    }
-                    else{
-                      this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}});
+                  window.setTimeout(() => {
+                    if (array.length > 0) {
+                      this.router.navigate(
+                        ["/statisticanalysis/statePageOne/time"],
+                        {
+                          queryParams: {
+                            level: params.name,
+                            type: params.data.type,
+                            tid: "pieone",
+                            pieonetype: this.pieonetype,
+                          },
+                        }
+                      );
+                    } else {
+                      this.router.navigate(["/statisticanalysis/AllPlan"], {
+                        queryParams: {
+                          xname: params.name,
+                          name: params.name,
+                          id: null,
+                          type: params.data.type,
+                          tid: "pieone",
+                          pieonetype: this.pieonetype,
+                        },
+                      });
                     }
-                  })
+                  });
                 });
-                
-              }
-              else if(this.echartsData.level=='3'){
+              } else if (this.echartsData.level == "3") {
                 //中队跳转
-                this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}});
+                this.router.navigate(["/statisticanalysis/AllPlan"], {
+                  queryParams: {
+                    xname: params.name,
+                    name: params.name,
+                    id: null,
+                    type: params.data.type,
+                    tid: "pieone",
+                    pieonetype: this.pieonetype,
+                  },
+                });
               }
             }
           }
-        }else{
-          for(var i=0;i<this.tabledata[0].planTypeStatistics.planTypes.length;i++){
-            if(this.tabledata[0].planTypeStatistics.planTypes[i].planTypeName==params.data.planStatusName){
-              if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.length>0){
-                this.tabledata[0].planTypeStatistics.planTypes[i].organizations.forEach((element,index,array) => {
-                  if(array[index].organizationId==this.orid){
-                    array.splice(index,1)
+        } else {
+          for (
+            var i = 0;
+            i < this.tabledata[0].planTypeStatistics.planTypes.length;
+            i++
+          ) {
+            if (
+              this.tabledata[0].planTypeStatistics.planTypes[i].planTypeName ==
+              params.data.planStatusName
+            ) {
+              if (
+                (this.echartsData.level == "0" ||
+                  this.echartsData.level == "1" ||
+                  this.echartsData.level == "2") &&
+                this.tabledata[0].planCategoryStatistics.planCategories[i]
+                  .organizations.length > 0
+              ) {
+                this.tabledata[0].planTypeStatistics.planTypes[
+                  i
+                ].organizations.forEach((element, index, array) => {
+                  if (array[index].organizationId == this.orid) {
+                    array.splice(index, 1);
                   }
-                  window.setTimeout(()=>{
-                    if(array.length>0){
-                      this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}});
-                    }
-                    else{
-                      this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}});
+                  window.setTimeout(() => {
+                    if (array.length > 0) {
+                      this.router.navigate(
+                        ["/statisticanalysis/statePageOne/time"],
+                        {
+                          queryParams: {
+                            level: params.name,
+                            type: params.data.type,
+                            tid: "pieone",
+                            pieonetype: this.pieonetype,
+                          },
+                        }
+                      );
+                    } else {
+                      this.router.navigate(["/statisticanalysis/AllPlan"], {
+                        queryParams: {
+                          xname: params.name,
+                          name: params.name,
+                          id: null,
+                          type: params.data.type,
+                          tid: "pieone",
+                          pieonetype: this.pieonetype,
+                        },
+                      });
                     }
-                  })
+                  });
                 });
-                
-              }
-              else if(this.echartsData.level=='3'){
+              } else if (this.echartsData.level == "3") {
                 //中队跳转
-                this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}});
+                this.router.navigate(["/statisticanalysis/AllPlan"], {
+                  queryParams: {
+                    xname: params.name,
+                    name: params.name,
+                    id: null,
+                    type: params.data.type,
+                    tid: "pieone",
+                    pieonetype: this.pieonetype,
+                  },
+                });
               }
             }
           }
         }
-        
-      }else{
-        for(var i=0;i<this.tabledata[0].planStatusStatistics.planStatuses.length;i++){
-          if(this.tabledata[0].planStatusStatistics.planStatuses[i].planStatusName==params.data.planStatusName){
-            if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.length>0){
-              this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.forEach((element,index,array) => {
-                if(array[index].organizationId==this.orid){
-                  array.splice(index,1)
+      } else {
+        for (
+          var i = 0;
+          i < this.tabledata[0].planStatusStatistics.planStatuses.length;
+          i++
+        ) {
+          if (
+            this.tabledata[0].planStatusStatistics.planStatuses[i]
+              .planStatusName == params.data.planStatusName
+          ) {
+            if (
+              (this.echartsData.level == "0" ||
+                this.echartsData.level == "1" ||
+                this.echartsData.level == "2") &&
+              this.tabledata[0].planStatusStatistics.planStatuses[i]
+                .organizations.length > 0
+            ) {
+              this.tabledata[0].planStatusStatistics.planStatuses[
+                i
+              ].organizations.forEach((element, index, array) => {
+                if (array[index].organizationId == this.orid) {
+                  array.splice(index, 1);
                 }
-                window.setTimeout(()=>{
-                  if(array.length>0){
-                    this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pietwo'}});
-                  }
-                  else{
-                    this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}});
+                window.setTimeout(() => {
+                  if (array.length > 0) {
+                    this.router.navigate(
+                      ["/statisticanalysis/statePageOne/time"],
+                      {
+                        queryParams: {
+                          level: params.name,
+                          type: params.data.type,
+                          tid: "pietwo",
+                        },
+                      }
+                    );
+                  } else {
+                    this.router.navigate(["/statisticanalysis/AllPlan"], {
+                      queryParams: {
+                        xname: params.name,
+                        name: params.name,
+                        id: null,
+                        type: params.data.type,
+                        tid: "pietwo",
+                      },
+                    });
                   }
-                })
+                });
               });
-              
-            }
-            else if(this.echartsData.level=='3'){
+            } else if (this.echartsData.level == "3") {
               //中队跳转
-              this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}});
+              this.router.navigate(["/statisticanalysis/AllPlan"], {
+                queryParams: {
+                  xname: params.name,
+                  name: params.name,
+                  id: null,
+                  type: params.data.type,
+                  tid: "pietwo",
+                },
+              });
             }
           }
         }
       }
-      
-      
-      
     });
     this.indexBzt.setOption(options);
   }
   /**
    * @name: 表格提示框封装
    * @test: test font
-   * @msg: 
+   * @msg:
    * @param {string(表头)}
-   * @return {type} 
+   * @return {type}
    */
-  biaogeTishi(biaotou:string){
-    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'
-    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
-    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
-    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
-    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
-    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
-    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
-    var jsonObj =  JSON.parse(shuju);
-    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
-        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
-        res+='<thead><tr>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
-        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
-        res+='</tr></thead>'
-        res+='<tbody>';
-        for(var i=0;i<jsonObj.length;i++){
-          res+='<tr>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
-          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
-        }
-        
-        res+='</tbody>'
-        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
-        res+='</table></div></div>'
-        return res
-  }
+  biaogeTishi(biaotou: string) {
+    var shuju =
+      '[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},';
+    shuju +=
+      '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},';
+    shuju +=
+      '{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},';
+    shuju +=
+      '{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},';
+    shuju +=
+      '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},';
+    shuju +=
+      '{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},';
+    shuju +=
+      '{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]';
+    var jsonObj = JSON.parse(shuju);
+    var res =
+      '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">' +
+      biaotou +
+      "</span></div>";
+    res +=
+      '</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+    res += "<thead><tr>";
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>';
+    res +=
+      '<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>';
+    res += "</tr></thead>";
+    res += "<tbody>";
+    for (var i = 0; i < jsonObj.length; i++) {
+      res += "<tr>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].name +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].number +
+        "</td>";
+      res +=
+        '<td style="text-align:center;border:1px solid #000000">' +
+        jsonObj[i].zhanbi +
+        "</td></tr>";
+    }
 
+    res += "</tbody>";
+    res +=
+      '<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>';
+    res += "</table></div></div>";
+    return res;
+  }
 }

src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts

@@ -1,160 +1,218 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { ActivatedRoute } from '@angular/router';
-import { EchartsDataService } from '../../echarts-data.service';
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
+import { ActivatedRoute } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
 declare var echarts: any;
 
 @Component({
-  selector: 'app-page-there-year',
-  templateUrl: './page-there-year.component.html',
-  styleUrls: ['./page-there-year.component.scss']
+  selector: "app-page-there-year",
+  templateUrl: "./page-there-year.component.html",
+  styleUrls: ["./page-there-year.component.scss"],
 })
 export class PageThereYearComponent implements OnInit {
+  constructor(
+    private router: Router,
+    public dialog: MatDialog,
+    public snackBar: MatSnackBar,
+    private serviceData: EchartsDataService,
+    public route: ActivatedRoute
+  ) {}
 
-  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
-
-  tid
-  year:String
-  buildingTypeName:String
-  level:String
-  setTimeoutObj//延时器需要清除
-  type
-  tabledata//获取所有数据
-  lastyears//上个页面传过来的年份
-  count=0//总数
-  pieonetype//判断是级别还是类型，上个页面传过来的参数
-  planType//预案类型
+  tid;
+  year: String;
+  buildingTypeName: String;
+  level: String;
+  setTimeoutObj; //延时器需要清除
+  type;
+  tabledata; //获取所有数据
+  lastyears; //上个页面传过来的年份
+  count = 0; //总数
+  pieonetype; //判断是级别还是类型，上个页面传过来的参数
+  planType; //预案类型
   ngOnInit(): void {
-    this.dateInit ()
-    this.route.queryParams.subscribe(params => {
-      this.year = params['level'];
-      this.buildingTypeName = params['headtext'];
-      this.type=params['type']
-      this.lastyears=params['headtext'].substring(0,4)
-      this.tid=params.tid
-      this.pieonetype=params.pieonetype
+    this.dateInit();
+    this.route.queryParams.subscribe((params) => {
+      this.year = params["level"];
+      this.buildingTypeName = params["headtext"];
+      this.type = params["type"];
+      this.lastyears = params["headtext"].substring(0, 4);
+      this.tid = params.tid;
+      this.pieonetype = params.pieonetype;
     });
-    if(this.year=='二维预案'){
-      this.planType=1
-    }else if(this.year=='三维预案'){
-      this.planType=2
-    }else if(this.year=='其他预案'){
-      this.planType=4
-    }else if(this.year=='文本预案'){
-      this.planType=16
+    if (this.year == "二维预案") {
+      this.planType = 1;
+    } else if (this.year == "三维预案") {
+      this.planType = 2;
+    } else if (this.year == "其他预案") {
+      this.planType = 4;
+    } else if (this.year == "文本预案") {
+      this.planType = 16;
     }
-    this.setTimeoutObj = window.setTimeout(()=>{
-      this.getechartsData()
-    })
+    this.setTimeoutObj = window.setTimeout(() => {
+      this.getechartsData();
+    });
   }
-  ngOnDestroy(){
+  ngOnDestroy() {
     window.clearTimeout(this.setTimeoutObj);
-    this.detailPlanEchart.clear()
-    this.detailPlanEchart.dispose()
+    if (!this.detailPlanEchart) {
+      return;
+    }
+    this.detailPlanEchart.clear();
+    this.detailPlanEchart.dispose();
   }
-  async getechartsData(){
-    let paramdata={
-      planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1,
-      TrendYear:this.lastyears||'',
-      TrendType:0
+  async getechartsData() {
+    let paramdata = {
+      planStatus: this.tid == "pieone" ? "" : this.type,
+      PlanCategory:
+        this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+      objectType:
+        this.tid == "pieone" && this.pieonetype == "true"
+          ? 2
+          : this.tid == "pieone" && this.pieonetype == "false"
+          ? 5
+          : 1,
+      TrendYear: this.lastyears || "",
+      TrendType: 0,
+    };
+    await this.serviceData.getData(paramdata, `/api/StatisticsAnalysis/Trends`);
+    this.tabledata = JSON.parse(JSON.stringify(this.serviceData.allDate));
+    // console.log(this.tabledata)
+    for (var i = 0; i < this.tabledata[0].length; i++) {
+      this.date.push(this.tabledata[0][i].month);
+      this.dateNum.push(this.tabledata[0][i].count);
+      this.count += this.tabledata[0][i].count;
     }
-    await this.serviceData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
-    this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate))
-      // console.log(this.tabledata)
-      for(var i=0;i<this.tabledata[0].length;i++){
-        this.date.push(this.tabledata[0][i].month)
-        this.dateNum.push(this.tabledata[0][i].count)
-        this.count+=this.tabledata[0][i].count
-      }
-      this.date.forEach((value,index,array)=>{
-        this.date[index]=this.date[index]+'月'
-      })
-      this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
-      this.detailEcharts()
+    this.date.forEach((value, index, array) => {
+      this.date[index] = this.date[index] + "月";
+    });
+    this.tiaoshiPao = this.serviceData.qipao(
+      this.tiaoshiPao,
+      this.dateNum,
+      this.date
+    );
+    this.detailEcharts();
   }
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
 
   //查询数据
-  years:any = []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+  years: any = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
-      this.years.unshift(i)
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
+      this.years.unshift(i);
     }
   }
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectStartMonth:any = 1 //开始月份
-  Submit (e) {
-    
-  }
-  selectStartYear:any = (new Date()).getFullYear() //开始年份
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectStartMonth: any = 1; //开始月份
+  Submit(e) {}
+  selectStartYear: any = new Date().getFullYear(); //开始年份
 
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
-  zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
-  zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
+  zhongNameData = [
+    "浦东中队",
+    "黄浦中队",
+    "徐汇中队",
+    "长宁中队",
+    "静安中队",
+    "普陀中队",
+    "虹口中队",
+    "杨浦中队",
+    "闵行中队",
+    "宝山中队",
+    "嘉定中队",
+  ];
+  zhongNumData = [200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100];
 
-  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
-  zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]
-  tiaoshiPao:any
+  zhiNameData = [
+    "浦东支队",
+    "黄浦支队",
+    "徐汇支队",
+    "长宁支队",
+    "静安支队",
+    "普陀支队",
+    "虹口支队",
+    "杨浦支队",
+    "闵行支队",
+    "宝山支队",
+    "嘉定支队",
+  ];
+  zhiNumData = [300, 290, 280, 270, 260, 250, 240, 230, 220, 210, 200];
+  tiaoshiPao: any;
   //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.dateNum.length;i++){
-      arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},'
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.dateNum.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.dateNum[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.dateNum[i] +
+        '],"name":' +
+        '"' +
+        this.date[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
     //return tishiPao
   }
   //返回
-  goBack () {
-    history.go(-1)
+  goBack() {
+    history.go(-1);
     //this.echartsData.statefulInspectionToggle = true
   }
 
-  detailPlanEchart
-  option
-  date = []
-  dateNum = []
+  detailPlanEchart;
+  option;
+  date = [];
+  dateNum = [];
 
-  detailEcharts(){
-    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');  
+  detailEcharts() {
+    this.detailPlanEchart = echarts.init(
+      document.getElementById("barEchart"),
+      "skinUpp"
+    );
     this.option = {
       grid: {
         top: 110,
-        
       },
       // 标题
       title: {
         text: `${this.year}${this.buildingTypeName}总数（${this.count}）`,
         //top: -14,
-        left: 'center',
-        textStyle:{
+        left: "center",
+        textStyle: {
           //文字颜色
-          color:'#000',
-          fontSize: 30
-        }
+          color: "#000",
+          fontSize: 30,
+        },
       },
       //提示框
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         /* formatter:  (params)=>{
           if(params[0].seriesName == "year"){
             return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
@@ -162,89 +220,111 @@ export class PageThereYearComponent implements OnInit {
             return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
           }
         }, */
-        position:this.serviceData.tableTooltipNoShow2
+        position: this.serviceData.tableTooltipNoShow2,
       },
       // x轴
       xAxis: {
-        type: 'category',
+        type: "category",
         data: this.date,
         axisLabel: {
           color: "#000", //刻度线标签颜色
-          textStyle:{
-            fontSize :18,
-            color:'#000000'
-          }
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
         },
         //设置坐标轴字体颜色和宽度
-        axisLine: {    
+        axisLine: {
           lineStyle: {
             color: "#000",
           },
         },
-        splitLine: {//分割线配置
-          show:true,
+        splitLine: {
+          //分割线配置
+          show: true,
           lineStyle: {
-            color: '#999',
-          }
-        }
+            color: "#999",
+          },
+        },
       },
       // y轴
       yAxis: {
-        type: 'value',
-        name: '个',
+        type: "value",
+        name: "个",
         axisLabel: {
           //color: "#000", //刻度线标签颜色
-          textStyle:{
-            fontSize :18,
-            color:'#000000'
-          }
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
         },
-         //设置坐标轴字体颜色和宽度
-         axisLine: {
+        //设置坐标轴字体颜色和宽度
+        axisLine: {
           lineStyle: {
             color: "#000",
-          }
-        }
+          },
+        },
       },
       // 数据
-      series: [{
-          name: 'xxx',
-          type: 'line',
+      series: [
+        {
+          name: "xxx",
+          type: "line",
           markPoint: {
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
-        },
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
           data: this.dateNum,
-        }
+        },
       ],
     };
     this.detailPlanEchart.setOption(this.option);
-    this.detailPlanEchart.getZr().on('click',params=>{
-      const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
-        let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+    this.detailPlanEchart.getZr().on("click", (params) => {
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.detailPlanEchart.containPixel("grid", pointInPixel)) {
+        let xIndex = this.detailPlanEchart.convertFromPixel(
+          { seriesIndex: 0 },
+          [params.offsetX, params.offsetY]
+        )[0];
         /*事件处理代码书写位置*/
-        if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){
-          this.serviceData.isQuery=true
-          this.serviceData.planMonth=this.option.xAxis.data[xIndex].substring(0,1)
-          this.serviceData.planYear=this.lastyears
+        if (
+          this.serviceData.level == "0" ||
+          this.serviceData.level == "1" ||
+          this.serviceData.level == "2"
+        ) {
+          this.serviceData.isQuery = true;
+          this.serviceData.planMonth = this.option.xAxis.data[xIndex].substring(
+            0,
+            1
+          );
+          this.serviceData.planYear = this.lastyears;
           /* if(!this.serviceData.isQuery){
             this.serviceData.planYear=this.lastyears
           } */
-          
+
           //this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1','type':this.type}});
-          this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.year,'headtext':this.buildingTypeName,'zhong':'1','type':this.type,'pieonetype':this.pieonetype,'tid':this.tid,'month':this.option.xAxis.data[xIndex]}});
-        }
-        else if(this.serviceData.level=='3'){
+          this.router.navigate(["/statisticanalysis/statePageOne/time"], {
+            queryParams: {
+              level: this.year,
+              headtext: this.buildingTypeName,
+              zhong: "1",
+              type: this.type,
+              pieonetype: this.pieonetype,
+              tid: this.tid,
+              month: this.option.xAxis.data[xIndex],
+            },
+          });
+        } else if (this.serviceData.level == "3") {
           //中队跳转
-          this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':this.type}});
+          this.router.navigate(["/statisticanalysis/CompangInfo"], {
+            queryParams: { name: params.name, type: this.type },
+          });
         }
       }
     });
   }
   //返回按钮
-  backBtn(){
-      window.history.go(-1)
-  } 
-
+  backBtn() {
+    window.history.go(-1);
+  }
 }

src/app/statistic-analysis/state/page-there/page-there.component.ts

@@ -1,286 +1,372 @@
-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
-import {EchartsDataService} from '../../echarts-data.service';
-import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
-import { DateAdapter } from '@angular/material/core';
+import { Component, OnInit } from "@angular/core";
+import { Router, ActivatedRoute } from "@angular/router";
+import { EchartsDataService } from "../../echarts-data.service";
+import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar";
+import { DateAdapter } from "@angular/material/core";
 declare var echarts: any;
 
 @Component({
-  selector: 'app-page-there',
-  templateUrl: './page-there.component.html',
-  styleUrls: ['./page-there.component.scss']
+  selector: "app-page-there",
+  templateUrl: "./page-there.component.html",
+  styleUrls: ["./page-there.component.scss"],
 })
 export class PageThereComponent implements OnInit {
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    public echartsData: EchartsDataService,
+    public snackBar: MatSnackBar,
+    private adapter: DateAdapter<any>
+  ) {}
 
-  constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { }
+  zhutu; //echarts实例
+  option;
+  time: String;
+  buildingTypeName: String;
+  setTimeoutObj; //延时器需要清除
+  headtext: string;
+  zhong: string;
+  type;
+  tabledata;
+  organizationId = [];
+  lastid;
+  tid;
 
-  zhutu//echarts实例
-  option
-  time:String
-  buildingTypeName:String
-  setTimeoutObj//延时器需要清除
-  headtext:string;
-  zhong:string
-  type
-  tabledata
-  organizationId=[]
-  lastid
-  tid
-
-  ngOnDestroy():void{
-    this.zhutu.clear()
-    this.zhutu.dispose()
+  ngOnDestroy(): void {
+    if (!this.zhutu) {
+      return;
+    }
+    this.zhutu.clear();
+    this.zhutu.dispose();
   }
 
   ngOnInit(): void {
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
-    if(window.matchMedia("(max-width: 1400px)").matches){
-      this.padHw=true
+    }
+    if (window.matchMedia("(max-width: 1400px)").matches) {
+      this.padHw = true;
       //this.padjt=
-    }else{
-      this.padHw=false
+    } else {
+      this.padHw = false;
     }
     this.dateInit();
-    let datayuex:string;
-    this.activatedRoute.queryParams.subscribe(param=>{
-      this.lastid=param.id
-      this.type=param.type
-      this.headtext=param.headtext
-      datayuex=param.level
-      this.zhong=param.zhong
-      this.headName=datayuex+this.headtext;
-      this.tid=param.tid
-      this.pieonetype=param.pieonetype
-      if(this.headtext=='二维预案'){
-        this.planType=1
-      }else if(this.headtext=='三维预案'){
-        this.planType=2
-      }else if(this.headtext=='其他预案'){
-        this.planType=4
-      }else if(this.headtext=='文本预案'){
-        this.planType=16
+    let datayuex: string;
+    this.activatedRoute.queryParams.subscribe((param) => {
+      this.lastid = param.id;
+      this.type = param.type;
+      this.headtext = param.headtext;
+      datayuex = param.level;
+      this.zhong = param.zhong;
+      this.headName = datayuex + this.headtext;
+      this.tid = param.tid;
+      this.pieonetype = param.pieonetype;
+      if (this.headtext == "二维预案") {
+        this.planType = 1;
+      } else if (this.headtext == "三维预案") {
+        this.planType = 2;
+      } else if (this.headtext == "其他预案") {
+        this.planType = 4;
+      } else if (this.headtext == "文本预案") {
+        this.planType = 16;
       }
       //console.log(headName)
-    }); 
-    
-    window.setTimeout(()=>{
-      this.getechartsdata()
-    })
+    });
+
+    window.setTimeout(() => {
+      this.getechartsdata();
+    });
   }
-  pieonetype//判断是级别还是类型，上个页面传过来的参数
-  planType//预案类型
-  padHw
-  headName
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
-  async getechartsdata(){
-    let paramdata/* ={
+  pieonetype; //判断是级别还是类型，上个页面传过来的参数
+  planType; //预案类型
+  padHw;
+  headName;
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
+  async getechartsdata() {
+    let paramdata; /* ={
       planStatus:this.tid=='pieone'?'': this.type,
       PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
       OrganizationId:this.lastid,
       PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:''
     } */
-    if(this.echartsData.planYear==undefined&&this.echartsData.planMonth!=undefined){
-      this.echartsData.planYear=new Date().getFullYear()
-      paramdata={
-        planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      OrganizationId:this.lastid,
-      PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'',
-      TimeIntervalStart:this.echartsData.planYear+'-'+this.echartsData.planMonth,
-      TimeIntervalEnd:this.echartsData.planYear+'-'+this.echartsData.planMonth,
-      }
-      
-    }else if(this.echartsData.planYear==undefined&&this.echartsData.planMonth==undefined){
-      paramdata={
-        planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      OrganizationId:this.lastid,
-      PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'',
-      }
-    }else{
-      paramdata={
-        planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      OrganizationId:this.lastid,
-      PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'',
-      TimeIntervalStart:this.echartsData.planYear+'-'+this.echartsData.planMonth,
-      TimeIntervalEnd:this.echartsData.planYear+'-'+this.echartsData.planMonth,
-      }
+    if (
+      this.echartsData.planYear == undefined &&
+      this.echartsData.planMonth != undefined
+    ) {
+      this.echartsData.planYear = new Date().getFullYear();
+      paramdata = {
+        planStatus: this.tid == "pieone" ? "" : this.type,
+        PlanCategory:
+          this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+        OrganizationId: this.lastid,
+        PlanType:
+          this.tid == "pieone" && this.pieonetype == "false"
+            ? this.planType
+            : "",
+        TimeIntervalStart:
+          this.echartsData.planYear + "-" + this.echartsData.planMonth,
+        TimeIntervalEnd:
+          this.echartsData.planYear + "-" + this.echartsData.planMonth,
+      };
+    } else if (
+      this.echartsData.planYear == undefined &&
+      this.echartsData.planMonth == undefined
+    ) {
+      paramdata = {
+        planStatus: this.tid == "pieone" ? "" : this.type,
+        PlanCategory:
+          this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+        OrganizationId: this.lastid,
+        PlanType:
+          this.tid == "pieone" && this.pieonetype == "false"
+            ? this.planType
+            : "",
+      };
+    } else {
+      paramdata = {
+        planStatus: this.tid == "pieone" ? "" : this.type,
+        PlanCategory:
+          this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+        OrganizationId: this.lastid,
+        PlanType:
+          this.tid == "pieone" && this.pieonetype == "false"
+            ? this.planType
+            : "",
+        TimeIntervalStart:
+          this.echartsData.planYear + "-" + this.echartsData.planMonth,
+        TimeIntervalEnd:
+          this.echartsData.planYear + "-" + this.echartsData.planMonth,
+      };
     }
-    await this.echartsData.getData(paramdata,this.tid=='pieone'&&this.pieonetype=='true'?'/api/StatisticsAnalysis/Plans/Category':this.tid=='pieone'&&this.pieonetype=='false'?'/api/StatisticsAnalysis/Plans/Type': `/api/StatisticsAnalysis/Plans/Status`)
-    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
-      // console.log(this.tabledata)
-      for(var i=0;i<this.tabledata[0].organizations.length;i++){
-      this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName)
-      this.zhiNumData.push(this.tabledata[0].organizations[i].count)
-      this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
+    await this.echartsData.getData(
+      paramdata,
+      this.tid == "pieone" && this.pieonetype == "true"
+        ? "/api/StatisticsAnalysis/Plans/Category"
+        : this.tid == "pieone" && this.pieonetype == "false"
+        ? "/api/StatisticsAnalysis/Plans/Type"
+        : `/api/StatisticsAnalysis/Plans/Status`
+    );
+    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
+    // console.log(this.tabledata)
+    for (var i = 0; i < this.tabledata[0].organizations.length; i++) {
+      this.zhiNameData.push(
+        this.tabledata[0].organizations[i].organizationName
+      );
+      this.zhiNumData.push(this.tabledata[0].organizations[i].count);
+      this.organizationId.push(
+        this.tabledata[0].organizations[i].organizationId
+      );
     }
-      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
-      this.zhuzhuangtu(this.headName)
+    this.tiaoshiPao = this.echartsData.qipao(
+      this.tiaoshiPao,
+      this.zhiNumData,
+      this.zhiNameData
+    );
+    this.zhuzhuangtu(this.headName);
   }
 
   //查询数据
-  years:any = []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
+  years: any = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
-      this.years.unshift(i)
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
+      this.years.unshift(i);
     }
     // console.log(this.years)
   }
-  
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectStartMonth:any = 1 //开始月份
-  Submit (e) {
-    
-  }
-  selectStartYear:any = (new Date()).getFullYear() //开始年份
 
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectStartMonth: any = 1; //开始月份
+  Submit(e) {}
+  selectStartYear: any = new Date().getFullYear(); //开始年份
 
   topTextlabel = {
     show: true, // 开启显示
-    position: 'top', // 在上方显示
+    position: "top", // 在上方显示
     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
-    verticalAlign: 'middle',
-    textStyle: { // 数值样式
-      color: 'black',
-      fontSize: 12
-    }
-  }//柱状图数值顶部显示
-  zhiNameData = []
-  zhiNumData = []
-  tiaoshiPao:any
+    verticalAlign: "middle",
+    textStyle: {
+      // 数值样式
+      color: "black",
+      fontSize: 12,
+    },
+  }; //柱状图数值顶部显示
+  zhiNameData = [];
+  zhiNumData = [];
+  tiaoshiPao: any;
   //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.zhiNumData.length;i++){
-      arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.zhiNumData.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.zhiNumData[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.zhiNumData[i] +
+        '],"name":' +
+        '"' +
+        this.zhiNameData[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
     //return tishiPao
   }
-  date = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月']
-  dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200]
+  date = [
+    "一月",
+    "二月",
+    "三月",
+    "四月",
+    "五月",
+    "六月",
+    "七月",
+    "八月",
+    "九月",
+  ];
+  dateNum = [270, 253, 244, 199, 189, 173, 160, 198, 200];
   //返回
-  goBack () {
+  goBack() {
     //this.zhutu.clear()
-    this.zhutu.dispose()
-    history.go(-1)
-    this.echartsData.statefulInspectionToggle = true
+    this.zhutu ? this.zhutu.dispose() : null;
+    history.go(-1);
+    this.echartsData.statefulInspectionToggle = true;
   }
 
   axisLabel = {
     interval: 0,
-    //rotate:-30,  
-    textStyle:{
-      fontSize :15,
-      color:'#000000'
+    //rotate:-30,
+    textStyle: {
+      fontSize: 15,
+      color: "#000000",
     },
-    formatter:function(value)  
-      {    
-        var ret = "";//拼接加\n返回的类目项  
-        var maxLength = 2;//每项显示文字个数  
-        var valLength = value.length;//X轴类目项的文字个数  
-        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
-        if (rowN > 1)//如果类目项的文字大于3,  
-        {  
-            for (var i = 0; i < rowN; i++) {  
-                var temp = "";//每次截取的字符串  
-                var start = i * maxLength;//开始截取的位置  
-                var end = start + maxLength;//结束截取的位置  
-                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
-                temp = value.substring(start, end) + "\n";  
-                ret += temp; //凭借最终的字符串  
-            }  
-            return ret;  
-        }  
-        else {  
-            return value;  
-        }  
+    formatter: function (value) {
+      var ret = ""; //拼接加\n返回的类目项
+      var maxLength = 2; //每项显示文字个数
+      var valLength = value.length; //X轴类目项的文字个数
+      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+      if (rowN > 1) {
+        //如果类目项的文字大于3,
+        for (var i = 0; i < rowN; i++) {
+          var temp = ""; //每次截取的字符串
+          var start = i * maxLength; //开始截取的位置
+          var end = start + maxLength; //结束截取的位置
+          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+          temp = value.substring(start, end) + "\n";
+          ret += temp; //凭借最终的字符串
+        }
+        return ret;
+      } else {
+        return value;
       }
-  }//echarts两个字换行
+    },
+  }; //echarts两个字换行
   /* 柱状图 */
-  zhuzhuangtu(headName:string){
+  zhuzhuangtu(headName: string) {
     var ec = echarts as any;
-    this.zhutu = ec.init(document.getElementById('zhidui'),'walden');
+    this.zhutu = ec.init(document.getElementById("zhidui"), "walden");
     this.option = {
       title: {
-        text: headName+`总数(${this.tabledata[0].totalCount})`,
+        text: headName + `总数(${this.tabledata[0].totalCount})`,
         left: "center",
-        top:0,
+        top: 0,
         //bottom: "540",
         textStyle: {
-          fontSize: 30
-        }
+          fontSize: 30,
+        },
       },
       grid: {
-        top: this.padHw?90:110,
-        containLabel:true,
+        top: this.padHw ? 90 : 110,
+        containLabel: true,
         //bottom: 10
-       },
+      },
       xAxis: {
-          id:this.organizationId,
-          type: 'category',
-          data: this.zhiNameData,
-          axisLabel: this.axisLabel,
-          
+        id: this.organizationId,
+        type: "category",
+        data: this.zhiNameData,
+        axisLabel: this.axisLabel,
       },
       yAxis: {
-          type: 'value',
-          axisLabel:{
-            textStyle:{
-              fontSize :18,
-              color:'#000000'
-            }
-            
-          }
+        type: "value",
+        axisLabel: {
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
+          },
+        },
       },
       tooltip: {
-        trigger: 'item',
-        formatter:  (params)=>{
-          return this.echartsData.biaogeTishida(params)
+        trigger: "item",
+        formatter: (params) => {
+          return this.echartsData.biaogeTishida(params);
         },
-        position: this.echartsData.tableTooltipNoShowq
+        position: this.echartsData.tableTooltipNoShowq,
         /* backgroundColor:'rgba(255,255,255,1)',
         borderWidth:'1',
         borderRadius :'0' */
       },
-      series: [{
+      series: [
+        {
           data: this.zhiNumData,
-          type: 'bar',
+          type: "bar",
           markPoint: {
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
-        },
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
           backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
+            color: "rgba(220, 220, 220, 0.8)",
           },
-          barWidth :'38',
+          barWidth: "38",
           //label: this.topTextlabel
-      }]
+        },
+      ],
     };
-    this.zhutu.getZr().on('click',params=>{
+    this.zhutu.getZr().on("click", (params) => {
       // console.log(params.name)
-      const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.zhutu.containPixel('grid',pointInPixel)) {
-        let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.zhutu.containPixel("grid", pointInPixel)) {
+        let xIndex = this.zhutu.convertFromPixel({ seriesIndex: 0 }, [
+          params.offsetX,
+          params.offsetY,
+        ])[0];
         /*事件处理代码书写位置*/
-        this.echartsData.isQuery==false? this.echartsData.planYear=this.option.xAxis.data[xIndex]:this.echartsData.planYear==undefined
-        console.log(this.echartsData.planYear)
-        if((this.echartsData.level=='0'||this.echartsData.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){
-          this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':this.option.xAxis.data[xIndex],'name':this.headtext,'id':this.option.xAxis.id[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}});
-        }else{
-          this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':this.option.xAxis.data[xIndex],'name':this.headtext,'id':this.option.xAxis.id[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}});
+        this.echartsData.isQuery == false
+          ? (this.echartsData.planYear = this.option.xAxis.data[xIndex])
+          : this.echartsData.planYear == undefined;
+        console.log(this.echartsData.planYear);
+        if (
+          (this.echartsData.level == "0" || this.echartsData.level == "1") &&
+          this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1
+        ) {
+          this.router.navigate(["/statisticanalysis/PageZhongDuiDetails"], {
+            queryParams: {
+              level: this.option.xAxis.data[xIndex],
+              name: this.headtext,
+              id: this.option.xAxis.id[xIndex],
+              type: this.type,
+              tid: this.tid,
+              pieonetype: this.pieonetype,
+            },
+          });
+        } else {
+          this.router.navigate(["/statisticanalysis/AllPlan"], {
+            queryParams: {
+              xname: this.option.xAxis.data[xIndex],
+              name: this.headtext,
+              id: this.option.xAxis.id[xIndex],
+              type: this.type,
+              tid: this.tid,
+              pieonetype: this.pieonetype,
+            },
+          });
         }
-        
       }
     });
     /* this.zhutu.on('click', (params) => {

src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

@@ -1,75 +1,76 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatDatepickerInputEvent } from '@angular/material/datepicker';
-import { ActivatedRoute, Router } from '@angular/router';
-import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
-import { FormControl } from '@angular/forms';
-import { DateAdapter } from '@angular/material/core';
-import { PageTwoNameComponent } from '../page-two-name/page-two-name.component';
-import {EchartsDataService} from '../../echarts-data.service'
-import { resolve } from 'dns';
+import { Component, Input, OnInit, ViewChild } from "@angular/core";
+import { MatDatepickerInputEvent } from "@angular/material/datepicker";
+import { ActivatedRoute, Router } from "@angular/router";
+import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar";
+import { FormControl } from "@angular/forms";
+import { DateAdapter } from "@angular/material/core";
+import { PageTwoNameComponent } from "../page-two-name/page-two-name.component";
+import { EchartsDataService } from "../../echarts-data.service";
+import { resolve } from "dns";
 declare var echarts: any;
 
 @Component({
-  selector: 'app-page-two-time',
-  templateUrl: './page-two-time.component.html',
-  styleUrls: ['./page-two-time.component.scss']
+  selector: "app-page-two-time",
+  templateUrl: "./page-two-time.component.html",
+  styleUrls: ["./page-two-time.component.scss"],
 })
 export class PageTwoTimeComponent implements OnInit {
+  constructor(
+    private router: Router,
+    public snackBar: MatSnackBar,
+    private adapter: DateAdapter<any>,
+    public echartsData: EchartsDataService,
+    private activatedRoute: ActivatedRoute
+  ) {}
 
-  constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService,private activatedRoute: ActivatedRoute) { }
-  
-  @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
-  @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
-  @ViewChild('echartsComponent')echartsComponent :echartsComponent; //父组件中获得子组件的引用
+  @ViewChild("appEcharts") appEcharts: echartsComponent; //父组件中获得子组件的引用
+  @ViewChild("pageTwoName") pageTwoName: PageTwoNameComponent; //父组件中获得子组件的引用
+  @ViewChild("echartsComponent") echartsComponent: echartsComponent; //父组件中获得子组件的引用
 
   ngOnInit(): void {
-    this.activatedRoute.queryParams.subscribe(param=>{
-      this.type=param.type
+    this.activatedRoute.queryParams.subscribe((param) => {
+      this.type = param.type;
     });
-    this.echartsData.statefulInspectionToggle = true
-    this.dateInit()
-    this.bianli()
-  }
-  ngOnDestroy(): void {
+    this.echartsData.statefulInspectionToggle = true;
+    this.dateInit();
+    this.bianli();
   }
+  ngOnDestroy(): void {}
 
-  isQuery:boolean = true; //横纵向查询
-  type
+  isQuery: boolean = true; //横纵向查询
+  type;
   //shao
-  toggleTrue () { 
+  toggleTrue() {
     //this.isQuery = true
-    this.echartsData.isQuery=true
-    this.echartsData.statefulInspectionToggle = true
+    this.echartsData.isQuery = true;
+    this.echartsData.statefulInspectionToggle = true;
   }
 
   //chen
-  toggleFalse () { 
+  toggleFalse() {
     //this.isQuery = false
-    this.echartsData.isQuery=false
-    this.echartsData.statefulInspectionToggle = true
-    this.selectType = 'month'
+    this.echartsData.isQuery = false;
+    this.echartsData.statefulInspectionToggle = true;
+    this.selectType = "month";
   }
 
   //返回
-  goBack () {
-    //this.echartsComponent.twoExample.clear()
-    //this.echartsComponent.dispose()
-    this.echartsData.statefulInspectionToggle = true
-    sessionStorage.setItem('refresh', 'true');
+  goBack() {
+    this.echartsData.statefulInspectionToggle = true;
+    sessionStorage.setItem("refresh", "true");
     history.go(-1);
   }
 
-  selectType:string = 'month'; //选择当前的 查询类型 按月/年
+  selectType: string = "month"; //选择当前的 查询类型 按月/年
 
-  async changeTime (e) {
-    let data = e.value
-    await this.appEcharts.changeTime(data)
-    if(e.value=='month'){
-      this.echartsData.selectType=0
-    }
-    else if(e.value=='year'){
-      this.years=[2020,2021,2022]
-      this.echartsData.selectType=2
+  async changeTime(e) {
+    let data = e.value;
+    await this.appEcharts.changeTime(data);
+    if (e.value == "month") {
+      this.echartsData.selectType = 0;
+    } else if (e.value == "year") {
+      this.years = [2020, 2021, 2022];
+      this.echartsData.selectType = 2;
       /* console.log(this.appEcharts.tabledata)
       this.appEcharts.tabledata[0].forEach((value,index,array) => {
         this.years.push(array[index].year)
@@ -80,288 +81,390 @@ export class PageTwoTimeComponent implements OnInit {
   }
 
   //查询数据
-  years= []
-  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
-  tiaoshiPao:any
-  datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
-  datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
+  years = [];
+  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  tiaoshiPao: any;
+  datayuey = [270, 253, 244, 199, 189, 173, 160, 198, 200];
+  datayuex = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"];
 
   //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.datayuey.length;i++){
-      arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.datayuey.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.datayuey[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.datayuey[i] +
+        '],"name":' +
+        '"' +
+        this.datayuex[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
   }
 
   //日期初始化
-  dateInit () {
-    let date = (new Date()).getFullYear()
-    for (let i=date; i>=date-10;i--) {
+  dateInit() {
+    let date = new Date().getFullYear();
+    for (let i = date; i >= date - 10; i--) {
       //this.years.unshift(i)
     }
   }
 
-  selectOneYear:any = (new Date()).getFullYear() //开始年份
-  selectTwoYear:any = (new Date()).getFullYear() //结束年份
-  selectStartMonth:any = 1 //开始月份
-  selectEndMonth:any = 12 //结束月份
+  selectOneYear: any = new Date().getFullYear(); //开始年份
+  selectTwoYear: any = new Date().getFullYear(); //结束年份
+  selectStartMonth: any = 1; //开始月份
+  selectEndMonth: any = 12; //结束月份
   //按月查询
-  monthSubmit (e) {
-    if(e.selectEndMonth >= e.selectStartMonth) {
-      let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
-      let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
-      this.echartsData.selectStartMonth=e.selectStartMonth
-      this.echartsData.selectEndMonth=e.selectEndMonth
-      this.appEcharts.findYue()
+  monthSubmit(e) {
+    if (e.selectEndMonth >= e.selectStartMonth) {
+      let startTime =
+        e.selectOneYear +
+        "-" +
+        e.selectStartMonth +
+        "-" +
+        1 +
+        " " +
+        0 +
+        ":" +
+        0 +
+        ":" +
+        0;
+      let endTime =
+        e.selectTwoYear +
+        "-" +
+        e.selectEndMonth +
+        "-" +
+        31 +
+        " " +
+        23 +
+        ":" +
+        59 +
+        ":" +
+        59;
+      this.echartsData.selectStartMonth = e.selectStartMonth;
+      this.echartsData.selectEndMonth = e.selectEndMonth;
+      this.appEcharts.findYue();
     } else {
       const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('请选择正确时间区段','确定',config);
+      config.verticalPosition = "top";
+      config.duration = 3000;
+      this.snackBar.open("请选择正确时间区段", "确定", config);
     }
   }
 
-
-
-  selectStartYear:any = (new Date()).getFullYear()-1 //开始年份
-  selectEndYear:any = (new Date()).getFullYear() //结束年份
+  selectStartYear: any = new Date().getFullYear() - 1; //开始年份
+  selectEndYear: any = new Date().getFullYear(); //结束年份
   //按年查询
-  yearSubmit (e) {
+  yearSubmit(e) {
     if (e.selectEndYear >= e.selectStartYear) {
-      let startTime = e.selectStartYear + '-' + 1  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
-      let endTime = e.selectEndYear + '-' + 12  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
-      this.echartsData.selectOneYear=e.selectStartYear
-      this.echartsData.selectTwoYear=e.selectEndYear
-      this.appEcharts.findyear()
+      let startTime =
+        e.selectStartYear + "-" + 1 + "-" + 1 + " " + 0 + ":" + 0 + ":" + 0;
+      let endTime =
+        e.selectEndYear + "-" + 12 + "-" + 31 + " " + 23 + ":" + 59 + ":" + 59;
+      this.echartsData.selectOneYear = e.selectStartYear;
+      this.echartsData.selectTwoYear = e.selectEndYear;
+      this.appEcharts.findyear();
     } else {
       const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
-      this.snackBar.open('结束时间必须大于开始时间','确定',config);
+      config.verticalPosition = "top";
+      config.duration = 3000;
+      this.snackBar.open("结束时间必须大于开始时间", "确定", config);
     }
   }
-
-
-
 }
 
 @Component({
-  selector: 'app-echarts',
-  templateUrl: './echarts.html',
-  styleUrls: ['./page-two-time.component.scss']
+  selector: "app-echarts",
+  templateUrl: "./echarts.html",
+  styleUrls: ["./page-two-time.component.scss"],
 })
 export class echartsComponent implements OnInit {
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    public snackBar: MatSnackBar,
+    private adapter: DateAdapter<any>,
+    public echartsData: EchartsDataService
+  ) {}
 
-  constructor(private router: Router,private activatedRoute: ActivatedRoute,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
-
-  tid
-  zongcount=0
-  type
-  organizationId=[]
-  tiaoshiPao:any
-  datayuey=[]
-  datayuex=[]
-  dataYearX = []
-  dataYearY = []
-  pieonetype//判断是级别还是类型，上个页面传过来的参数
-  planType//预案类型
-  toggleTrue (){}
-    //气泡提示数据获取
-  bianli(){
-    var arrshuzu='[';
-    for(var i=0;i<this.datayuey.length;i++){
-      arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
+  tid;
+  zongcount = 0;
+  type;
+  organizationId = [];
+  tiaoshiPao: any;
+  datayuey = [];
+  datayuex = [];
+  dataYearX = [];
+  dataYearY = [];
+  pieonetype; //判断是级别还是类型，上个页面传过来的参数
+  planType; //预案类型
+  toggleTrue() {}
+  //气泡提示数据获取
+  bianli() {
+    var arrshuzu = "[";
+    for (var i = 0; i < this.datayuey.length; i++) {
+      arrshuzu +=
+        '{"value":' +
+        this.datayuey[i] +
+        ',"coord":[' +
+        i +
+        "," +
+        this.datayuey[i] +
+        '],"name":' +
+        '"' +
+        this.datayuex[i] +
+        '"' +
+        "},";
     }
-    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
-    arrshuzu+=']'
-    this.tiaoshiPao=JSON.parse(arrshuzu)
+    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
+    arrshuzu += "]";
+    this.tiaoshiPao = JSON.parse(arrshuzu);
   }
   ngOnInit(): void {
-    if(sessionStorage.getItem('refresh') === 'true') {
-      sessionStorage.removeItem('refresh');
+    if (sessionStorage.getItem("refresh") === "true") {
+      sessionStorage.removeItem("refresh");
       location.reload();
-     }
-    this.activatedRoute.queryParams.subscribe(param=>{
-      this.headtext=param.level
-      this.type=param.type
-      this.tid=param.tid
-      this.pieonetype=param.pieonetype
+    }
+    this.activatedRoute.queryParams.subscribe((param) => {
+      this.headtext = param.level;
+      this.type = param.type;
+      this.tid = param.tid;
+      this.pieonetype = param.pieonetype;
     });
-    if(this.headtext=='二维预案'){
-      this.planType=1
-    }else if(this.headtext=='三维预案'){
-      this.planType=2
-    }else if(this.headtext=='其他预案'){
-      this.planType=4
-    }else if(this.headtext=='文本预案'){
-      this.planType=16
+    if (this.headtext == "二维预案") {
+      this.planType = 1;
+    } else if (this.headtext == "三维预案") {
+      this.planType = 2;
+    } else if (this.headtext == "其他预案") {
+      this.planType = 4;
+    } else if (this.headtext == "文本预案") {
+      this.planType = 16;
     }
-    window.setTimeout(()=>{
-      this.getechartsData()
-    })
+    window.setTimeout(() => {
+      this.getechartsData();
+    });
   }
-  
-  ngOnDestroy () {
-    this.twoExample.clear()
-    this.twoExample.dispose()
-   
+
+  ngOnDestroy() {
+    this.twoExample.clear();
+    this.twoExample.dispose();
   }
   //获取数据
-  async getechartsData(){
-    this.datayuex=[]
-    this.datayuey=[]
-    this.zongcount=0
-    let paramdata={
-      planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1,
-      TrendType:0
+  async getechartsData() {
+    this.datayuex = [];
+    this.datayuey = [];
+    this.zongcount = 0;
+    let paramdata = {
+      planStatus: this.tid == "pieone" ? "" : this.type,
+      PlanCategory:
+        this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+      objectType:
+        this.tid == "pieone" && this.pieonetype == "true"
+          ? 2
+          : this.tid == "pieone" && this.pieonetype == "false"
+          ? 5
+          : 1,
+      TrendType: 0,
+    };
+    await this.echartsData.getData(paramdata, `/api/StatisticsAnalysis/Trends`);
+    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
+    //console.log(this.tabledata)
+    for (var i = 0; i < this.tabledata[0].length; i++) {
+      if (
+        this.tabledata[0][i].month >= this.echartsData.selectStartMonth ||
+        this.tabledata[0][i].month <= this.echartsData.selectEndMonth
+      ) {
+        this.datayuex.push(this.tabledata[0][i].month);
+        this.datayuey.push(this.tabledata[0][i].count);
+        this.zongcount = this.zongcount + this.tabledata[0][i].count;
+      }
     }
-    await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
-    this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
-       //console.log(this.tabledata)
-        for(var i=0;i<this.tabledata[0].length;i++){
-          if(this.tabledata[0][i].month>=this.echartsData.selectStartMonth||this.tabledata[0][i].month<=this.echartsData.selectEndMonth){
-            this.datayuex.push(this.tabledata[0][i].month)
-            this.datayuey.push(this.tabledata[0][i].count)
-            this.zongcount=this.zongcount+this.tabledata[0][i].count
-          }
-        }
-      this.datayuex.forEach((value,index,array)=>{
-        array[index]=array[index]+'月'
-      })
-      
-      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) 
-      //this.oneInit()
-      this.twoInit(this.datayuex,this.datayuey)
+    this.datayuex.forEach((value, index, array) => {
+      array[index] = array[index] + "月";
+    });
+
+    this.tiaoshiPao = this.echartsData.qipao(
+      this.tiaoshiPao,
+      this.datayuey,
+      this.datayuex
+    );
+    //this.oneInit()
+    this.twoInit(this.datayuex, this.datayuey);
   }
 
-  async changeTime (e) {
-    this.twoExample.clear()
-    this.twoExample.dispose()
-    if (e=='year') {
+  async changeTime(e) {
+    if (this.twoExample) {
+      this.twoExample.clear();
+      this.twoExample.dispose();
+    }
+
+    if (e == "year") {
       //this.oneInit(this.dataYearX,this.dataYearY)
-      this.dataYearX=[]
-      this.dataYearY=[]
-      this.echartsData.selectType=2
-      this.zongcount=0
-      let paramdata={
-        planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1,
-        TrendType:this.echartsData.selectType
-      }
-      await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
-      window.setTimeout(()=>{
-        this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
-        console.log(this.tabledata)
+      this.dataYearX = [];
+      this.dataYearY = [];
+      this.echartsData.selectType = 2;
+      this.zongcount = 0;
+      let paramdata = {
+        planStatus: this.tid == "pieone" ? "" : this.type,
+        PlanCategory:
+          this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+        objectType:
+          this.tid == "pieone" && this.pieonetype == "true"
+            ? 2
+            : this.tid == "pieone" && this.pieonetype == "false"
+            ? 5
+            : 1,
+        TrendType: this.echartsData.selectType,
+      };
+      await this.echartsData.getData(
+        paramdata,
+        `/api/StatisticsAnalysis/Trends`
+      );
+      window.setTimeout(() => {
+        this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
+        console.log(this.tabledata);
         //resolve(this.tabledata)
-        for(var i=0;i<this.tabledata[0].length;i++){
-          this.dataYearX.push(this.tabledata[0][i].year)
-          this.dataYearY.push(this.tabledata[0][i].count)
-          this.zongcount=this.zongcount+this.tabledata[0][i].count
+        for (var i = 0; i < this.tabledata[0].length; i++) {
+          this.dataYearX.push(this.tabledata[0][i].year);
+          this.dataYearY.push(this.tabledata[0][i].count);
+          this.zongcount = this.zongcount + this.tabledata[0][i].count;
         }
-        this.dataYearX.forEach((value,index,array)=>{
-          this.dataYearX[index]=this.dataYearX[index]+'年'
-        })
-        //this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) 
+        this.dataYearX.forEach((value, index, array) => {
+          this.dataYearX[index] = this.dataYearX[index] + "年";
+        });
+        //this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
         //this.oneInit()
-        this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX)
-        this.twoInit(this.dataYearX,this.dataYearY)
-      })
+        this.tiaoshiPao = this.echartsData.qipao(
+          this.tiaoshiPao,
+          this.dataYearY,
+          this.dataYearX
+        );
+        this.twoInit(this.dataYearX, this.dataYearY);
+      });
       //this.twoInit(this.dataYearX,this.dataYearY)
-      
     } else {
-      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
+      this.tiaoshiPao = this.echartsData.qipao(
+        this.tiaoshiPao,
+        this.datayuey,
+        this.datayuex
+      );
       //this.oneInit()
-      this.echartsData.selectType=0
-      this.getechartsData()
-      this.twoInit(this.datayuex,this.datayuey)
-      
+      this.echartsData.selectType = 0;
+      this.getechartsData();
+      this.twoInit(this.datayuex, this.datayuey);
     }
   }
   //按月查询
-  async findYue(){
-    this.twoExample.clear()
-    this.datayuex=[]
-    this.datayuey=[]
-    let paramdata={
-      planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1,
-      TrendType:this.echartsData.selectType
-    }
-    await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
-    window.setTimeout(()=>{
-      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
+  async findYue() {
+    this.twoExample.clear();
+    this.datayuex = [];
+    this.datayuey = [];
+    let paramdata = {
+      planStatus: this.tid == "pieone" ? "" : this.type,
+      PlanCategory:
+        this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+      objectType:
+        this.tid == "pieone" && this.pieonetype == "true"
+          ? 2
+          : this.tid == "pieone" && this.pieonetype == "false"
+          ? 5
+          : 1,
+      TrendType: this.echartsData.selectType,
+    };
+    await this.echartsData.getData(paramdata, `/api/StatisticsAnalysis/Trends`);
+    window.setTimeout(() => {
+      this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
       //console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
-        for(var i=0;i<this.tabledata[0].length;i++){
-          if(this.tabledata[0][i].month>=this.echartsData.selectStartMonth&&this.tabledata[0][i].month<=this.echartsData.selectEndMonth){
-            this.datayuex.push(this.tabledata[0][i].month)
-            this.datayuey.push(this.tabledata[0][i].count)
-          }
+      for (var i = 0; i < this.tabledata[0].length; i++) {
+        if (
+          this.tabledata[0][i].month >= this.echartsData.selectStartMonth &&
+          this.tabledata[0][i].month <= this.echartsData.selectEndMonth
+        ) {
+          this.datayuex.push(this.tabledata[0][i].month);
+          this.datayuey.push(this.tabledata[0][i].count);
         }
-      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) 
-      this.twoInit(this.datayuex,this.datayuey)
-    })
+      }
+      this.tiaoshiPao = this.echartsData.qipao(
+        this.tiaoshiPao,
+        this.datayuey,
+        this.datayuex
+      );
+      this.twoInit(this.datayuex, this.datayuey);
+    });
   }
   //按年查询
-  async findyear(){
-    this.twoExample.clear()
-    this.dataYearX=[]
-    this.dataYearY=[]
-    let paramdata={
-      planStatus:this.tid=='pieone'?'': this.type,
-      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
-      objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1,
-      TrendType:this.echartsData.selectType
-    }
-    await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`)
-    window.setTimeout(()=>{
-      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
+  async findyear() {
+    this.twoExample.clear();
+    this.dataYearX = [];
+    this.dataYearY = [];
+    let paramdata = {
+      planStatus: this.tid == "pieone" ? "" : this.type,
+      PlanCategory:
+        this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
+      objectType:
+        this.tid == "pieone" && this.pieonetype == "true"
+          ? 2
+          : this.tid == "pieone" && this.pieonetype == "false"
+          ? 5
+          : 1,
+      TrendType: this.echartsData.selectType,
+    };
+    await this.echartsData.getData(paramdata, `/api/StatisticsAnalysis/Trends`);
+    window.setTimeout(() => {
+      this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
       //console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
-        for(var i=0;i<this.tabledata[0].length;i++){
-          if(this.tabledata[0][i].year>=this.echartsData.selectOneYear&&this.tabledata[0][i].year<=this.echartsData.selectTwoYear){
-            this.dataYearX.push(this.tabledata[0][i].year)
-            this.dataYearY.push(this.tabledata[0][i].count)
-          }
+      for (var i = 0; i < this.tabledata[0].length; i++) {
+        if (
+          this.tabledata[0][i].year >= this.echartsData.selectOneYear &&
+          this.tabledata[0][i].year <= this.echartsData.selectTwoYear
+        ) {
+          this.dataYearX.push(this.tabledata[0][i].year);
+          this.dataYearY.push(this.tabledata[0][i].count);
         }
-      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) 
-      this.twoInit(this.dataYearX,this.dataYearY)
-    })
+      }
+      this.tiaoshiPao = this.echartsData.qipao(
+        this.tiaoshiPao,
+        this.dataYearY,
+        this.dataYearX
+      );
+      this.twoInit(this.dataYearX, this.dataYearY);
+    });
   }
-  headtext
-  twoExample:any;
-  tabledata
-  thisYear=new Date().getFullYear()
-  twoInit (X, Y) {
+  headtext;
+  twoExample: any;
+  tabledata;
+  thisYear = new Date().getFullYear();
+  twoInit(X, Y) {
     /* X.forEach((element,index,array) => {
       array[index]=array[index]+'月'
     }); */
-    let that = this
-    this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp');
+    let that = this;
+    this.twoExample = echarts.init(document.getElementById("two"), "skinUpp");
     var option = {
       // 标题
       title: {
-        text: this.headtext+`：总数（${this.zongcount}）`,
+        text: this.headtext + `：总数（${this.zongcount}）`,
         top: -4,
-        left: 'center',
+        left: "center",
         bottom: 100,
-        textStyle:{
+        textStyle: {
           //文字颜色
           fontSize: 30,
-          color:'#000',
-        }
+          color: "#000",
+        },
       },
       grid: {
         top: 90,
       },
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         position: this.echartsData.tableTooltipNoShowq,
         /* formatter:  (params)=>{
           return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增')
@@ -369,95 +472,117 @@ export class echartsComponent implements OnInit {
       },
       // x轴
       xAxis: {
-        type: 'category',
+        type: "category",
         data: X,
         boundaryGap: true,
         axisLabel: {
           color: "#000", //刻度线标签颜色
-          textStyle:{
-            fontSize :18,
-            color:'#000000'
+          textStyle: {
+            fontSize: 18,
+            color: "#000000",
           },
         },
         //设置坐标轴字体颜色和宽度
-        axisLine: {    
+        axisLine: {
           lineStyle: {
             color: "#000",
           },
         },
-        splitLine: {//分割线配置
-          show:true,
+        splitLine: {
+          //分割线配置
+          show: true,
           lineStyle: {
-            color: '#999',
-          }
-        }
+            color: "#999",
+          },
+        },
       },
       // y轴
       yAxis: {
-        type: 'value',
-        name: '个',
+        type: "value",
+        name: "个",
         axisLabel: {
-          textStyle:{
-            fontSize :15,
-            color:'#000000'
+          textStyle: {
+            fontSize: 15,
+            color: "#000000",
           },
-          color: "#000" //刻度线标签颜色
+          color: "#000", //刻度线标签颜色
         },
-         //设置坐标轴字体颜色和宽度
-         axisLine: {
+        //设置坐标轴字体颜色和宽度
+        axisLine: {
           lineStyle: {
             color: "#000",
-          }
-        }
+          },
+        },
       },
       // 数据
-      series: [{
-          name: '单位预案编制数量',
-          type: 'line',
+      series: [
+        {
+          name: "单位预案编制数量",
+          type: "line",
           markPoint: {
-            
-            symbolSize:[65, 65],
-            data: this.tiaoshiPao
-        },
+            symbolSize: [65, 65],
+            data: this.tiaoshiPao,
+          },
           data: Y,
-        }
+        },
       ],
     };
     this.twoExample.setOption(option);
-    this.twoExample.getZr().on('click', (params) => {
+    this.twoExample.getZr().on("click", (params) => {
       // console.log(params.name)
-        /* this.echartsData.statefulInspectionName =params.name+headtext;
+      /* this.echartsData.statefulInspectionName =params.name+headtext;
         this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */
-        const pointInPixel= [params.offsetX, params.offsetY];
-      if (this.twoExample.containPixel('grid',pointInPixel)) {
-        let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
-        if(this.echartsData.selectType==2){
-          this.echartsData.planYear=X[xIndex].substring(0,4)
-          this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':this.headtext,'headtext':X[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}});
-        }else{
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (this.twoExample.containPixel("grid", pointInPixel)) {
+        let xIndex = this.twoExample.convertFromPixel({ seriesIndex: 0 }, [
+          params.offsetX,
+          params.offsetY,
+        ])[0];
+        if (this.echartsData.selectType == 2) {
+          this.echartsData.planYear = X[xIndex].substring(0, 4);
+          this.router.navigate(
+            ["/statisticanalysis/stataPageThereYearComponent"],
+            {
+              queryParams: {
+                level: this.headtext,
+                headtext: X[xIndex],
+                type: this.type,
+                tid: this.tid,
+                pieonetype: this.pieonetype,
+              },
+            }
+          );
+        } else {
           /*事件处理代码书写位置*/
-          if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){
-            this.twoExample.clear()
-            this.echartsData.isQuery=true
+          if (
+            this.echartsData.level == "0" ||
+            this.echartsData.level == "1" ||
+            this.echartsData.level == "2"
+          ) {
+            this.twoExample.clear();
+            this.echartsData.isQuery = true;
             this.twoExample.setOption(option);
-            this.echartsData.planMonth=option.xAxis.data[xIndex].substring(0,1)
+            this.echartsData.planMonth = option.xAxis.data[xIndex].substring(
+              0,
+              1
+            );
             //this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'zhong':'1','type':this.type,'pieonetype':this.pieonetype,'tid':this.tid,'month':option.xAxis.data[xIndex]}});
             //this.router.navigate(['/statisticanalysis/statePageOne/name'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':this.headtext,'type':this.type}});
-          } else if(this.echartsData.level=='3'){
+          } else if (this.echartsData.level == "3") {
             //中队跳转
-            this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}});
+            this.router.navigate(["/statisticanalysis/AllPlan"], {
+              queryParams: {
+                name: params.name,
+                type: this.type,
+                tid: this.tid,
+                pieonetype: this.pieonetype,
+              },
+            });
           }
-          
         }
-        
       }
-      
     });
   }
 
-  threeExample:any;
-  
-
-
-
+  threeExample: any;
 }

src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

@@ -69,8 +69,11 @@ export class PageZhongDuiDetailsComponent implements OnInit {
     })
   }
   ngOnDestroy(): void {
-    this.detailPlanEchart.clear()
-    this.detailPlanEchart.dispose()
+    if (this.detailPlanEchart) {
+      this.detailPlanEchart.clear()
+      this.detailPlanEchart.dispose()
+    }
+   
   }
   async getechartsdata(){
     let paramdata={

src/app/ui/app-key/add-key.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>新增App-Key</h1>
+<div mat-dialog-content>
+    <mat-form-field style="width: 100%;">
+        <mat-label>app名称</mat-label>
+        <input matInput [(ngModel)]="nameData.applicationName">
+    </mat-form-field>
+    <mat-form-field style="width: 100%;">
+        <mat-label>厂商名称</mat-label>
+        <input matInput [(ngModel)]="nameData.companyName">
+    </mat-form-field>
+</div>
+<div mat-dialog-actions>
+    <button mat-button (click)="onNoClick()">取消</button>
+    <button mat-button (click)="onClick()" cdkFocusInitial>确定</button>
+</div>

src/app/ui/app-key/app-key.component.html

@@ -0,0 +1,39 @@
+<div class="app_key_box">
+    <button mat-flat-button color="primary" (click)="openDialog()">新增appKey</button>
+    <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+        <ng-container matColumnDef="num">
+            <mat-header-cell *matHeaderCellDef> 序号 </mat-header-cell>
+            <mat-cell *matCellDef="let element;let i =index">
+                {{i+1}}
+            </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="id">
+            <mat-header-cell *matHeaderCellDef> appKey </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="applicationName">
+            <mat-header-cell *matHeaderCellDef> app名称 </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.applicationName}} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="companyName">
+            <mat-header-cell *matHeaderCellDef> 厂商 </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.companyName}} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="appSecret">
+            <mat-header-cell *matHeaderCellDef> appSecret </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.appSecret}} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="creationTime">
+            <mat-header-cell *matHeaderCellDef> 创建时间 </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.creationTime | date:'yyyy-MM-dd HH:mm:ss' }} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="operate">
+            <mat-header-cell *matHeaderCellDef> 操作 </mat-header-cell>
+            <mat-cell *matCellDef="let element;let i =index">
+                <span class="delete" (click)="delete(element,i)">删除</span>
+            </mat-cell>
+        </ng-container>
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
+</div>

src/app/ui/app-key/app-key.component.scss

@@ -0,0 +1,18 @@
+.app_key_box {
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+button {
+  margin-bottom: 10px;
+}
+
+table {
+  width: 100%;
+}
+.mat-column-num {
+  flex: 0.3;
+}
+.delete {
+  cursor: pointer;
+  color: #f44336;
+}

src/app/ui/app-key/app-key.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppKeyComponent } from './app-key.component';
+
+describe('AppKeyComponent', () => {
+  let component: AppKeyComponent;
+  let fixture: ComponentFixture<AppKeyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AppKeyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppKeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ui/app-key/app-key.component.ts

@@ -0,0 +1,99 @@
+import { HttpClient } from "@angular/common/http";
+import { Component, Inject, OnInit } from "@angular/core";
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+
+@Component({
+  selector: "app-app-key",
+  templateUrl: "./app-key.component.html",
+  styleUrls: ["./app-key.component.scss"],
+})
+export class AppKeyComponent implements OnInit {
+  constructor(public dialog: MatDialog, private http: HttpClient) {}
+  displayedColumns: string[] = [
+    "num",
+    "id",
+    "applicationName",
+    "companyName",
+    "appSecret",
+    "creationTime",
+    "operate",
+  ];
+  dataSource: any;
+  ngOnInit(): void {
+    this.getList();
+  }
+
+  getList() {
+    this.http.get("/api/ExternalApplications").subscribe((res) => {
+      this.dataSource = res;
+    });
+  }
+  openDialog(): void {
+    const dialogRef = this.dialog.open(AddKeyDialog, {
+      width: "300px",
+      data: {},
+    });
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log("uuu", result);
+      if (result) {
+        console.log("uuu", this.dataSource);
+        this.dataSource.push(result);
+        this.dataSource = [...this.dataSource];
+      }
+    });
+  }
+  delete(element, index) {
+    const isTrue = confirm("你确定要删除这个AppKey吗？");
+    if (isTrue) {
+      this.http
+        .delete(`/api/ExternalApplications/${element.id}`)
+        .subscribe((res) => {
+          console.log("删除成功");
+          this.dataSource.splice(index, 1);
+          this.dataSource = [...this.dataSource];
+        });
+    }
+  }
+}
+
+@Component({
+  selector: "add-key",
+  templateUrl: "./add-key.html",
+})
+export class AddKeyDialog {
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<AddKeyDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  nameData = {
+    applicationName: "",
+    companyName: "",
+  };
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onClick() {
+    if (!this.nameData.applicationName || !this.nameData.companyName) {
+      return;
+    }
+    let body = this.nameData;
+    this.http.post("/api/ExternalApplications", body).subscribe((res) => {
+      this.dialogRef.close(res);
+      this._snackBar.open("新建成功", "确定", {
+        duration: 500,
+        horizontalPosition: "center",
+        verticalPosition: "top",
+      });
+    });
+  }
+}

src/app/ui/organization/organization.component.html

@@ -1,42 +1,53 @@
-<div class="box" style="height: 100%; overflow-y: auto;position: relative">
-  <div>
-    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
+<div class="box">
+  <div style="position: relative;">
+    <button mat-raised-button color="primary" (click)="create(null)">新增</button>
+    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <mat-tree-node *matTreeNodeDef="let node;" matTreeNodePadding (click)="getOffices(node)">
-        <button mat-icon-button disabled ></button>
+        <button mat-icon-button disabled></button>
         {{node.name}}
         <button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button>
         <button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button>
-        <button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
-        <button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"  color="warn"><mat-icon>block</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="up" (click)="up(node,$event)"
+          [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
+        <button mat-icon-button class="down" (click)="down(node,$event)"
+          [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"
+          color="warn"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)"
+          *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
         <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
-       
+
       </mat-tree-node>
-    
-    
-      <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)="getOffices(node)">
-        <button mat-icon-button 
-                matTreeNodeToggle
-                [attr.aria-label]="'toggle ' + node.name">
+
+
+      <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="getOffices(node)">
+        <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
           <mat-icon class="mat-icon-rtl-mirror">
             {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
-        {{node.name}} 
+        {{node.name}}
         <button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button>
         <button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button>
-        <button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
-        <button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled" color="warn"><mat-icon>block</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="up" (click)="up(node,$event)"
+          [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
+        <button mat-icon-button class="down" (click)="down(node,$event)"
+          [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"
+          color="warn"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)"
+          *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
         <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
-    
+
       </mat-tree-node>
-     
+
     </mat-tree>
+
+    <div *ngIf="isloading" class="spinner">
+      <mat-spinner diameter="30"></mat-spinner>
+    </div>
   </div>
-  
+
   <!-- 组织机构下属机关 -->
   <div class="rightDiv" *ngIf="selectedOrg">
 
@@ -51,7 +62,8 @@
           <span>{{item.officeName}}</span>
           <span class="btnbox">
             <button mat-icon-button class="edit" (click)="editOffice(item)"><mat-icon>create</mat-icon></button>
-            <button mat-icon-button class="deleted" (click)="deleteOffice(item)"><mat-icon style="color: #f44336;">delete</mat-icon></button>
+            <button mat-icon-button class="deleted" (click)="deleteOffice(item)"><mat-icon
+                style="color: #f44336;">delete</mat-icon></button>
           </span>
         </li>
       </ul>
@@ -60,9 +72,5 @@
       </span>
     </div>
   </div>
-  <div *ngIf="isloading" style="position: absolute;width: 100%;height: 100%;background-color: rgba(125, 125, 125, 0.3);z-index: 999;left: 0;top: 0;text-align: center;">
-    <mat-spinner style="position: fixed;top: 40%;left: 50%;transform: translate(-40%,-50%);"></mat-spinner>
-    <p style="position: fixed;top:53%;left: 53%;transform: translate(-53%,-50%);">努力加载中...</p>
-  </div>
-</div>
 
+</div>

src/app/ui/organization/organization.component.scss

@@ -1,109 +1,126 @@
-mat-tree{
-    width:800px;
-    button{
-        display: block;
-        float: right;
-    }
-    mat-tree-node{
-        position: relative;
+mat-tree {
+  width: 800px;
+  button {
+    display: block;
+    float: right;
+  }
+  mat-tree-node {
+    position: relative;
 
-        .deleted{
-            position: absolute;
-            right: 0px;
-        }
+    .deleted {
+      position: absolute;
+      right: 0px;
+    }
 
-        .disabled{
-            position: absolute;
-            right: 40px;
-        }
+    .disabled {
+      position: absolute;
+      right: 40px;
+    }
 
-        .edit{
-            position: absolute;
-            right:160px;
-        }
-        .create{
-            position: absolute;
-            right: 200px;
-        }
-        .up{
-            position: absolute;
-            right: 120px;
-        }
-        .down{
-            position: absolute;
-            right: 80px;
-        }
+    .edit {
+      position: absolute;
+      right: 160px;
     }
-}
-form{
-    text-align: center;
-    button{
-        margin: 0 8px;
-        margin-top: 8px;
+    .create {
+      position: absolute;
+      right: 200px;
     }
+    .up {
+      position: absolute;
+      right: 120px;
+    }
+    .down {
+      position: absolute;
+      right: 80px;
+    }
+  }
+}
+form {
+  text-align: center;
+  button {
+    margin: 0 8px;
+    margin-top: 8px;
+  }
 }
 
-.leftbox{
-    width: 300px;
-    float: left;
+.leftbox {
+  width: 300px;
+  float: left;
 }
-.treebox{
-    float: right;
-    height: 250px;
-    width: 300px;
-    /* overflow: auto; */
-    overflow-x: hidden;
-    overflow-y: auto;
+.treebox {
+  float: right;
+  height: 250px;
+  width: 300px;
+  /* overflow: auto; */
+  overflow-x: hidden;
+  overflow-y: auto;
 }
-.smalltreebox{
+.smalltreebox {
+  width: 300px;
+  mat-tree-node {
     width: 300px;
-    mat-tree-node{
-        width: 300px;
-    }
+  }
 }
-.orilist{
-    list-style: none;
-
+.orilist {
+  list-style: none;
 }
-.orilist:hover{
-    cursor: pointer;
-    background-color: rgba(225, 225, 225, 0.8);
+.orilist:hover {
+  cursor: pointer;
+  background-color: rgba(225, 225, 225, 0.8);
 }
 
-.box{
-    div{
-        float: left;
+.box {
+  box-sizing: border-box;
+  padding: 12px;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+  div {
+    float: left;
+  }
+  .rightDiv {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid gray;
+    border-radius: 6px;
+    box-sizing: border-box;
+    padding: 20px;
+
+    .topbox {
+      display: flex;
+      height: 40px;
+      line-height: 40px;
     }
-    .rightDiv{
+    .listBox {
+      width: 100%;
+      text-align: center;
+      li {
         display: flex;
-        flex-direction: column;
-        border: 1px solid gray;
-        border-radius: 6px;
+        justify-content: space-between;
         box-sizing: border-box;
-        padding: 20px;
-
-        .topbox{
-            display: flex;
-            height: 40px;
-            line-height: 40px;
-        }
-        .listBox{
-            width: 100%;
-            text-align: center;
-            li{
-                display: flex;
-                justify-content: space-between;
-                box-sizing: border-box;
-                padding: 3px 6px;
-                align-items: center;
-                .btnbox{
-                    display: flex;
-                    align-items: center;
-                    button{
-                        margin: 0 2px;
-                    }
-                }
-            }
+        padding: 3px 6px;
+        align-items: center;
+        .btnbox {
+          display: flex;
+          align-items: center;
+          button {
+            margin: 0 2px;
+          }
         }
+      }
     }
-}
+  }
+}
+
+.spinner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(125, 125, 125, 0.3);
+  z-index: 999;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -1,53 +1,59 @@
 /*
- * @Descripttion: 
- * @version: 
+ * @Descripttion:
+ * @version:
  * @Author: sueRimn
  * @Date: 2021-01-29 15:54:45
  * @LastEditors: sueRimn
  * @LastEditTime: 2021-05-20 10:14:47
  */
-import { Routes, RouterModule } from '@angular/router';
-import { NgModule } from '@angular/core';
-import { UiComponent } from './ui.component';
-import { PaginatorComponent } from './paginator/paginator.component';
-import { UserdataComponent } from './userdata/userdata.component';
-import { OrganizationComponent } from './organization/organization.component';
-import { UnittypeComponent } from './unittype/unittype.component';
-import { AuthorityComponent } from './authority/authority.component';
-import { RoleComponent } from './role/role.component';
-import { UsermanagementComponent } from './usermanagement/usermanagement.component';
-import { NavmenusComponent } from './navmenus/navmenus.component';
-import { FireProtectionElementsComponent } from './fire-protection-elements/fire-protection-elements.component';
-import {MaterialBankComponent} from './material-bank/material-bank.component'
-import {UnitInformationComponent} from './unit-information/unit-information.component'
-import { EnterpriseuserComponent } from './enterpriseuser/enterpriseuser.component';
-import { FireFightingFacilitiesFormworkComponent } from './fire-fighting-facilities-formwork/fire-fighting-facilities-formwork.component'
-import { CollectionToolsComponent } from './collection-tools/collection-tools.component';
-import { PlanTemplateComponent } from './plan-template/plan-template.component'
-
-
+import { Routes, RouterModule } from "@angular/router";
+import { NgModule } from "@angular/core";
+import { UiComponent } from "./ui.component";
+import { PaginatorComponent } from "./paginator/paginator.component";
+import { UserdataComponent } from "./userdata/userdata.component";
+import { OrganizationComponent } from "./organization/organization.component";
+import { UnittypeComponent } from "./unittype/unittype.component";
+import { AuthorityComponent } from "./authority/authority.component";
+import { RoleComponent } from "./role/role.component";
+import { UsermanagementComponent } from "./usermanagement/usermanagement.component";
+import { NavmenusComponent } from "./navmenus/navmenus.component";
+import { FireProtectionElementsComponent } from "./fire-protection-elements/fire-protection-elements.component";
+import { MaterialBankComponent } from "./material-bank/material-bank.component";
+import { UnitInformationComponent } from "./unit-information/unit-information.component";
+import { EnterpriseuserComponent } from "./enterpriseuser/enterpriseuser.component";
+import { FireFightingFacilitiesFormworkComponent } from "./fire-fighting-facilities-formwork/fire-fighting-facilities-formwork.component";
+import { CollectionToolsComponent } from "./collection-tools/collection-tools.component";
+import { PlanTemplateComponent } from "./plan-template/plan-template.component";
+import { AppKeyComponent } from "./app-key/app-key.component";
 
 const routes: Routes = [
-    { path: '', component: UiComponent},
-    { path: 'paginator', component:PaginatorComponent },
-    { path: 'userdata', component:UserdataComponent },
-    { path: 'organization', component:OrganizationComponent },
-    { path: 'unittype', component:UnittypeComponent },
-    { path: 'authority', component:AuthorityComponent },
-    { path: 'role', component:RoleComponent },
-    { path: 'usermanagement', component:UsermanagementComponent },
-    { path: 'navmenus', component:NavmenusComponent },
-    { path: 'fireProtectionElements', component:FireProtectionElementsComponent },
-    { path: 'materialBank', component:MaterialBankComponent },
-    { path: 'unitInformation', component:UnitInformationComponent },
-    { path: 'enterpriseuser', component:EnterpriseuserComponent },
-    { path: 'fireFightingFacilitiesFormwork', component:FireFightingFacilitiesFormworkComponent },
-    { path: 'collectionTools', component:CollectionToolsComponent },
-    { path: 'PlanTemplate', component:PlanTemplateComponent },
+  { path: "", component: UiComponent },
+  { path: "paginator", component: PaginatorComponent },
+  { path: "userdata", component: UserdataComponent },
+  { path: "organization", component: OrganizationComponent },
+  { path: "unittype", component: UnittypeComponent },
+  { path: "authority", component: AuthorityComponent },
+  { path: "role", component: RoleComponent },
+  { path: "usermanagement", component: UsermanagementComponent },
+  { path: "navmenus", component: NavmenusComponent },
+  {
+    path: "fireProtectionElements",
+    component: FireProtectionElementsComponent,
+  },
+  { path: "materialBank", component: MaterialBankComponent },
+  { path: "unitInformation", component: UnitInformationComponent },
+  { path: "enterpriseuser", component: EnterpriseuserComponent },
+  {
+    path: "fireFightingFacilitiesFormwork",
+    component: FireFightingFacilitiesFormworkComponent,
+  },
+  { path: "collectionTools", component: CollectionToolsComponent },
+  { path: "PlanTemplate", component: PlanTemplateComponent },
+  { path: "appkey", component: AppKeyComponent },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
 export class UiRoutingModule {}

src/app/ui/ui.module.ts

@@ -1,113 +1,282 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UiComponent } from './ui.component';
-import { UiRoutingModule } from './ui-routing.module';
-import { A11yModule } from '@angular/cdk/a11y';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { PortalModule } from '@angular/cdk/portal';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { CdkStepperModule } from '@angular/cdk/stepper';
-import { CdkTableModule } from '@angular/cdk/table';
-import { CdkTreeModule } from '@angular/cdk/tree';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatNativeDateModule, MatRippleModule, MatOption } from '@angular/material/core';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatTreeModule } from '@angular/material/tree';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatPaginatorIntl } from '@angular/material/paginator';
-import { PaginatorModule } from './paginator/paginator.module';
-import { UserdataComponent, EditUser } from './userdata/userdata.component';
-import { ChangepasswordComponent } from './changepassword/changepassword.component';
-import { OrganizationComponent, CreateOrganization, EditOrganization, addOffices, editOffices } from './organization/organization.component';
-import { UnittypeComponent, DialogOverviewExampleDialog, editorialUnit } from './unittype/unittype.component';
-import { AuthorityComponent, CreateAuthority } from './authority/authority.component';
-import { RoleComponent, CreateRole, EditRole } from './role/role.component';
-import { UsermanagementComponent, CreateNewUser, EditNewUser, allRoles, seeInformation } from './usermanagement/usermanagement.component';
-import { IsnoPipe } from '../pipes/boolean.pipe';
-import { ConfirmpswDirective } from './changepassword/equal-validator.directive'
-import { TimePipe } from '../pipes/time.pipe';
-import { NavmenusComponent, CreateMenus, EditMenus } from './navmenus/navmenus.component';
-import { FireProtectionElementsComponent, Establish, EditingFireControl } from './fire-protection-elements/fire-protection-elements.component';
-import { FireFightingTemplateComponent, NewFireFighting, EditFireClassification } from './fire-fighting-template/fire-fighting-template.component';
-import { MaterialBankComponent, attributeComponent, addAttributeComponent, editAttribute } from './material-bank/material-bank.component';
-import { UnitInformationComponent, addUnitAttributeComponent, editUnitAttribute } from './unit-information/unit-information.component';
-import { AddMatLibrary } from './material-bank/addmatlibrary.component';
-import { EditMatLibrary } from './material-bank/editmatlibrary.component';
-import { AddOriginalCopy } from './material-bank/addoriginalcopy.component';
-import { NzTreeModule } from 'ng-zorro-antd/tree';
-import { FileUploadModule } from 'ng2-file-upload'
-import { EditOriginalCopy } from './material-bank/editoriginalcopy.component';
-import { SelectOriginalCopy } from './material-bank/selectoriginalcopy.component';
-import { EditUnitInfo } from './unit-information/editunitinfo.component';
-import { AddUnitInfo } from './unit-information/addunitinfo.component';
-import { AddGroups } from './unit-information/addgroups.component';
-import { EditGroup } from './unit-information/editgroup.component';
-import { EnterpriseuserComponent, seeenterpriseuser, editenterpriseuser } from './enterpriseuser/enterpriseuser.component';
-import { AddEnterpriserUser } from './enterpriseuser/addenterpriseuser.component';
-import { FireFightingFacilitiesFormworkComponent, addFireFightingFacilitiesFormworkComponent, editFireFightingFacilitiesFormworkComponent, addBuiltInComponent, addBuiltInAttributeComponent, addOptionalComponent, addOptionalAttributeComponent, editBuiltInAttributeComponent, editOptionalAttributeComponent } from './fire-fighting-facilities-formwork/fire-fighting-facilities-formwork.component';
-import { CollectionToolsComponent, Organization } from './collection-tools/collection-tools.component';
-import { WorkingAreaComponent } from '../working-area/working-area.component';
-import { leftFunctionalDomainComponent, editPlaneFigureComponent, addDisposalNodeComponent, editDisposalNodeComponent, addBGCDisposalNodeComponent } from './collection-tools/leftFunctionalDomain'
-import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
-import { CollectionToolsPlanComponent, CreateBuildingPlan, EditBuildingPlan } from './collection-tools-plan/collection-tools.component';
-import { editPlaneFigureComponentPlan, leftFunctionalDomainComponentPlan } from './collection-tools-plan/leftFunctionalDomain';
-import { CollectionToolsBuildingComponent, CreateBuildingBuilding, EditBuildingBuilding } from './collection-tools-building/collection-tools.component'
-import { leftFunctionalDomainBuildingComponent, editPlaneFigureBuildingComponent } from './collection-tools-building/leftFunctionalDomain';
-import { PlanTemplateComponent } from './plan-template/plan-template.component'
-import { addPlanname } from './plan-template/plan-template.component'
-import { upPlanname } from './plan-template/plan-template.component'
-import { addGroup } from './plan-template/plan-template.component'
-import { adddwsurvey } from './plan-template/plan-template.component'
-import { addattinf } from './plan-template/plan-template.component'
-import { disaster } from './plan-template/plan-template.component'
-import { BrowserModule } from '@angular/platform-browser';
-import { TreeDiagramModule } from './ng-tree-diagram/src/ng-tree-diagram';
-import { zdyaddGroup } from './plan-template/plan-template.component'
-import { zdyaddattinf } from './plan-template/plan-template.component'
-import { zdydisaster } from './plan-template/plan-template.component'
-import { updataHl } from './plan-template/plan-template.component'
-
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { UiComponent } from "./ui.component";
+import { UiRoutingModule } from "./ui-routing.module";
+import { A11yModule } from "@angular/cdk/a11y";
+import { DragDropModule } from "@angular/cdk/drag-drop";
+import { PortalModule } from "@angular/cdk/portal";
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { CdkStepperModule } from "@angular/cdk/stepper";
+import { CdkTableModule } from "@angular/cdk/table";
+import { CdkTreeModule } from "@angular/cdk/tree";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatBadgeModule } from "@angular/material/badge";
+import { MatBottomSheetModule } from "@angular/material/bottom-sheet";
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { MatCardModule } from "@angular/material/card";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatChipsModule } from "@angular/material/chips";
+import { MatStepperModule } from "@angular/material/stepper";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatListModule } from "@angular/material/list";
+import { MatMenuModule } from "@angular/material/menu";
+import {
+  MatNativeDateModule,
+  MatRippleModule,
+  MatOption,
+} from "@angular/material/core";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatRadioModule } from "@angular/material/radio";
+import { MatSelectModule } from "@angular/material/select";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatSliderModule } from "@angular/material/slider";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { MatSortModule } from "@angular/material/sort";
+import { MatTableModule } from "@angular/material/table";
+import { MatTabsModule } from "@angular/material/tabs";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatTreeModule } from "@angular/material/tree";
+import { ReactiveFormsModule, FormsModule } from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatPaginatorIntl } from "@angular/material/paginator";
+import { PaginatorModule } from "./paginator/paginator.module";
+import { UserdataComponent, EditUser } from "./userdata/userdata.component";
+import { ChangepasswordComponent } from "./changepassword/changepassword.component";
+import {
+  OrganizationComponent,
+  CreateOrganization,
+  EditOrganization,
+  addOffices,
+  editOffices,
+} from "./organization/organization.component";
+import {
+  UnittypeComponent,
+  DialogOverviewExampleDialog,
+  editorialUnit,
+} from "./unittype/unittype.component";
+import {
+  AuthorityComponent,
+  CreateAuthority,
+} from "./authority/authority.component";
+import { RoleComponent, CreateRole, EditRole } from "./role/role.component";
+import {
+  UsermanagementComponent,
+  CreateNewUser,
+  EditNewUser,
+  allRoles,
+  seeInformation,
+} from "./usermanagement/usermanagement.component";
+import { IsnoPipe } from "../pipes/boolean.pipe";
+import { ConfirmpswDirective } from "./changepassword/equal-validator.directive";
+import { TimePipe } from "../pipes/time.pipe";
+import {
+  NavmenusComponent,
+  CreateMenus,
+  EditMenus,
+} from "./navmenus/navmenus.component";
+import {
+  FireProtectionElementsComponent,
+  Establish,
+  EditingFireControl,
+} from "./fire-protection-elements/fire-protection-elements.component";
+import {
+  FireFightingTemplateComponent,
+  NewFireFighting,
+  EditFireClassification,
+} from "./fire-fighting-template/fire-fighting-template.component";
+import {
+  MaterialBankComponent,
+  attributeComponent,
+  addAttributeComponent,
+  editAttribute,
+} from "./material-bank/material-bank.component";
+import {
+  UnitInformationComponent,
+  addUnitAttributeComponent,
+  editUnitAttribute,
+} from "./unit-information/unit-information.component";
+import { AddMatLibrary } from "./material-bank/addmatlibrary.component";
+import { EditMatLibrary } from "./material-bank/editmatlibrary.component";
+import { AddOriginalCopy } from "./material-bank/addoriginalcopy.component";
+import { NzTreeModule } from "ng-zorro-antd/tree";
+import { FileUploadModule } from "ng2-file-upload";
+import { EditOriginalCopy } from "./material-bank/editoriginalcopy.component";
+import { SelectOriginalCopy } from "./material-bank/selectoriginalcopy.component";
+import { EditUnitInfo } from "./unit-information/editunitinfo.component";
+import { AddUnitInfo } from "./unit-information/addunitinfo.component";
+import { AddGroups } from "./unit-information/addgroups.component";
+import { EditGroup } from "./unit-information/editgroup.component";
+import {
+  EnterpriseuserComponent,
+  seeenterpriseuser,
+  editenterpriseuser,
+} from "./enterpriseuser/enterpriseuser.component";
+import { AddEnterpriserUser } from "./enterpriseuser/addenterpriseuser.component";
+import {
+  FireFightingFacilitiesFormworkComponent,
+  addFireFightingFacilitiesFormworkComponent,
+  editFireFightingFacilitiesFormworkComponent,
+  addBuiltInComponent,
+  addBuiltInAttributeComponent,
+  addOptionalComponent,
+  addOptionalAttributeComponent,
+  editBuiltInAttributeComponent,
+  editOptionalAttributeComponent,
+} from "./fire-fighting-facilities-formwork/fire-fighting-facilities-formwork.component";
+import {
+  CollectionToolsComponent,
+  Organization,
+} from "./collection-tools/collection-tools.component";
+import { WorkingAreaComponent } from "../working-area/working-area.component";
+import {
+  leftFunctionalDomainComponent,
+  editPlaneFigureComponent,
+  addDisposalNodeComponent,
+  editDisposalNodeComponent,
+  addBGCDisposalNodeComponent,
+} from "./collection-tools/leftFunctionalDomain";
+import { saveOneDialog, saveTwoDialog } from "./collection-tools/save";
+import {
+  CollectionToolsPlanComponent,
+  CreateBuildingPlan,
+  EditBuildingPlan,
+} from "./collection-tools-plan/collection-tools.component";
+import {
+  editPlaneFigureComponentPlan,
+  leftFunctionalDomainComponentPlan,
+} from "./collection-tools-plan/leftFunctionalDomain";
+import {
+  CollectionToolsBuildingComponent,
+  CreateBuildingBuilding,
+  EditBuildingBuilding,
+} from "./collection-tools-building/collection-tools.component";
+import {
+  leftFunctionalDomainBuildingComponent,
+  editPlaneFigureBuildingComponent,
+} from "./collection-tools-building/leftFunctionalDomain";
+import { PlanTemplateComponent } from "./plan-template/plan-template.component";
+import { addPlanname } from "./plan-template/plan-template.component";
+import { upPlanname } from "./plan-template/plan-template.component";
+import { addGroup } from "./plan-template/plan-template.component";
+import { adddwsurvey } from "./plan-template/plan-template.component";
+import { addattinf } from "./plan-template/plan-template.component";
+import { disaster } from "./plan-template/plan-template.component";
+import { TreeDiagramModule } from "./ng-tree-diagram/src/ng-tree-diagram";
+import { zdyaddGroup } from "./plan-template/plan-template.component";
+import { zdyaddattinf } from "./plan-template/plan-template.component";
+import { zdydisaster } from "./plan-template/plan-template.component";
+import { updataHl } from "./plan-template/plan-template.component";
+import { AddKeyDialog, AppKeyComponent } from "./app-key/app-key.component";
 @NgModule({
-  declarations: [UiComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,
-    IsnoPipe, ConfirmpswDirective, DialogOverviewExampleDialog, CreateAuthority, CreateRole, TimePipe, CreateNewUser, EditNewUser, allRoles, EditRole, CreateOrganization, EditOrganization,
-    seeInformation, EditUser, editorialUnit, FireProtectionElementsComponent, Establish, EditingFireControl, FireFightingTemplateComponent, NavmenusComponent, CreateMenus, EditMenus,
-    NewFireFighting, EditFireClassification, MaterialBankComponent, UnitInformationComponent, AddMatLibrary, EditMatLibrary, attributeComponent, AddOriginalCopy, addAttributeComponent,
-    editAttribute, EditOriginalCopy, SelectOriginalCopy, EditUnitInfo, AddUnitInfo, AddGroups, EditGroup, EnterpriseuserComponent, AddEnterpriserUser, addUnitAttributeComponent, editUnitAttribute,
-    seeenterpriseuser, editenterpriseuser, FireFightingFacilitiesFormworkComponent, addFireFightingFacilitiesFormworkComponent, editFireFightingFacilitiesFormworkComponent, addBuiltInComponent,
-    addBuiltInAttributeComponent, addOptionalComponent, addOptionalAttributeComponent, editBuiltInAttributeComponent, editOptionalAttributeComponent, CollectionToolsComponent, WorkingAreaComponent, leftFunctionalDomainComponent, editPlaneFigureComponent, saveOneDialog, saveTwoDialog, addDisposalNodeComponent, editDisposalNodeComponent, CollectionToolsPlanComponent,
-    CreateBuildingPlan, EditBuildingPlan, leftFunctionalDomainComponentPlan, editPlaneFigureComponentPlan, addOffices, editOffices, addBGCDisposalNodeComponent, CollectionToolsBuildingComponent, CreateBuildingBuilding,
-    EditBuildingBuilding, leftFunctionalDomainBuildingComponent, editPlaneFigureBuildingComponent, Organization, PlanTemplateComponent, addPlanname, upPlanname, addGroup, adddwsurvey, addattinf, disaster, zdyaddGroup, zdyaddattinf, zdydisaster, updataHl],
+  declarations: [
+    UiComponent,
+    UserdataComponent,
+    ChangepasswordComponent,
+    OrganizationComponent,
+    UnittypeComponent,
+    AuthorityComponent,
+    RoleComponent,
+    UsermanagementComponent,
+    IsnoPipe,
+    ConfirmpswDirective,
+    DialogOverviewExampleDialog,
+    CreateAuthority,
+    CreateRole,
+    TimePipe,
+    CreateNewUser,
+    EditNewUser,
+    allRoles,
+    EditRole,
+    CreateOrganization,
+    EditOrganization,
+    seeInformation,
+    EditUser,
+    editorialUnit,
+    FireProtectionElementsComponent,
+    Establish,
+    EditingFireControl,
+    FireFightingTemplateComponent,
+    NavmenusComponent,
+    CreateMenus,
+    EditMenus,
+    NewFireFighting,
+    EditFireClassification,
+    MaterialBankComponent,
+    UnitInformationComponent,
+    AddMatLibrary,
+    EditMatLibrary,
+    attributeComponent,
+    AddOriginalCopy,
+    addAttributeComponent,
+    editAttribute,
+    EditOriginalCopy,
+    SelectOriginalCopy,
+    EditUnitInfo,
+    AddUnitInfo,
+    AddGroups,
+    EditGroup,
+    EnterpriseuserComponent,
+    AddEnterpriserUser,
+    addUnitAttributeComponent,
+    editUnitAttribute,
+    seeenterpriseuser,
+    editenterpriseuser,
+    FireFightingFacilitiesFormworkComponent,
+    addFireFightingFacilitiesFormworkComponent,
+    editFireFightingFacilitiesFormworkComponent,
+    addBuiltInComponent,
+    addBuiltInAttributeComponent,
+    addOptionalComponent,
+    addOptionalAttributeComponent,
+    editBuiltInAttributeComponent,
+    editOptionalAttributeComponent,
+    CollectionToolsComponent,
+    WorkingAreaComponent,
+    leftFunctionalDomainComponent,
+    editPlaneFigureComponent,
+    saveOneDialog,
+    saveTwoDialog,
+    addDisposalNodeComponent,
+    editDisposalNodeComponent,
+    CollectionToolsPlanComponent,
+    CreateBuildingPlan,
+    EditBuildingPlan,
+    leftFunctionalDomainComponentPlan,
+    editPlaneFigureComponentPlan,
+    addOffices,
+    editOffices,
+    addBGCDisposalNodeComponent,
+    CollectionToolsBuildingComponent,
+    CreateBuildingBuilding,
+    EditBuildingBuilding,
+    leftFunctionalDomainBuildingComponent,
+    editPlaneFigureBuildingComponent,
+    Organization,
+    PlanTemplateComponent,
+    addPlanname,
+    upPlanname,
+    addGroup,
+    adddwsurvey,
+    addattinf,
+    disaster,
+    zdyaddGroup,
+    zdyaddattinf,
+    zdydisaster,
+    updataHl,
+    AppKeyComponent,
+    AddKeyDialog,
+  ],
 
   imports: [
     CommonModule,
@@ -159,16 +328,15 @@ import { updataHl } from './plan-template/plan-template.component'
     FormsModule,
     PaginatorModule,
     FileUploadModule,
-    //BrowserModule,
-    TreeDiagramModule
+    TreeDiagramModule,
   ],
-
+  entryComponents: [AddKeyDialog],
 
   exports: [
     CollectionToolsComponent,
     CollectionToolsBuildingComponent,
     CollectionToolsPlanComponent,
-    ConfirmpswDirective
-  ]
+    ConfirmpswDirective,
+  ],
 })
-export class UiModule { }
+export class UiModule {}

src/app/ui/usermanagement/seeInformation.html

@@ -1,4 +1,4 @@
-<span  mat-dialog-title>查看用户</span>
+<span mat-dialog-title>查看用户</span>
 
 <div mat-dialog-content>
     <mat-list role="list">
@@ -11,13 +11,13 @@
         <mat-list-item role="listitem">所属机构:
             <span class="maginleft">{{data.organizationName}}</span>
         </mat-list-item>
-        <mat-list-item role="listitem">所属角色:  
+        <mat-list-item role="listitem">所属角色:
             <span *ngFor="let item of data.roleNames" class="maginleft">{{item}}</span>
         </mat-list-item>
-        <mat-list-item role="listitem">创建时间:  
-            <span class="maginleft">{{data.creationTime|date:'yyyy-MM-dd'}}</span>
+        <mat-list-item role="listitem">创建时间:
+            <span class="maginleft">{{data.creationTime | date:'yyyy-MM-dd'}}</span>
         </mat-list-item>
-        <mat-list-item role="listitem">是否禁用:  
+        <mat-list-item role="listitem">是否禁用:
             <span class="maginleft" *ngIf="data.enabled">否</span>
             <span class="maginleft" *ngIf="!data.enabled">是</span>
         </mat-list-item>

src/index.html

@@ -21,14 +21,14 @@
 
 <script type="text/javascript">
   window._AMapSecurityConfig = {
-    securityJsCode: '0afa0b144398727fad2ca06f5f7156b3'
+    securityJsCode: 'dca2583973d0448116433fd64f97f8f8'
   }
 </script>
 <script
-  src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=17bb9b27e49451cde8f2e6655b11ff1a&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
+  src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=2584e43582b85680d76a515979503538&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
 <script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script>
 <!-- <script
-  src="https://webapi.amap.com/maps?v=2.0&key=17bb9b27e49451cde8f2e6655b11ff1a&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
+  src="https://webapi.amap.com/maps?v=2.0&key=2584e43582b85680d76a515979503538&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
 <script src="https://webapi.amap.com/ui/1.1/main.js"></script> -->
 <script src="/assets/html2canvas.js"></script>
 <script type="text/javascript" src="/assets/wordexport/jquery.js"></script>

src/styles.scss

@@ -6,7 +6,7 @@
 @import "~ng-zorro-antd/date-picker/style/index.min.css";
 @import "~ng-zorro-antd/input/style/index.min.css";
 @import "~ng-zorro-antd/button/style/index.min.css";
-
+@import "~ng-zorro-antd/modal/style/index.min.css";
 /* 引入组件样式 */
 @font-face {
   font-family: Regular;