Compare commits
13 Commits
| Author | SHA1 | Date |
|---|---|---|
 邵佳豪
|
1c6d26e8a9 | 2 years ago |
|
邵佳豪
|
944b176d47 | 2 years ago |
|
邵佳豪
|
cd50d63171 | 2 years ago |
|
邵佳豪
|
bdc4b6ced9 | 2 years ago |
|
邵佳豪
|
f994b8c722 | 2 years ago |
|
邵佳豪
|
6adb92365b | 2 years ago |
|
邵佳豪
|
5325bac67c | 2 years ago |
|
邵佳豪
|
26f71de134 | 2 years ago |
|
邵佳豪
|
eb125121d1 | 2 years ago |
|
邵佳豪
|
10bec5eb87 | 2 years ago |
|
邵佳豪
|
acad95128e | 2 years ago |
|
邵佳豪
|
6716f69161 | 2 years ago |
|
邵佳豪
|
40f5bb9789 | 2 years ago |
67 changed files with 24582 additions and 5169 deletions
@ -1,54 +1,107 @@
|
||||
/* |
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2021-01-11 14:48:03 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2021-07-29 10:26:58 |
||||
*/ |
||||
import { NgModule } from '@angular/core'; |
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import { LoginComponent } from './pages/login/login.component'; |
||||
import { NavigationComponent } from './navigation/navigation.component'; |
||||
import {HomeComponent} from './home/home.component' |
||||
import { PlanPassComponent } from '../app/plan-audit/plan-pass/plan-pass.component'; |
||||
import { NgModule } from "@angular/core"; |
||||
import { Routes, RouterModule } from "@angular/router"; |
||||
import { LoginComponent } from "./pages/login/login.component"; |
||||
import { NavigationComponent } from "./navigation/navigation.component"; |
||||
import { HomeComponent } from "./home/home.component"; |
||||
import { PlanPassComponent } from "../app/plan-audit/plan-pass/plan-pass.component"; |
||||
|
||||
//路由守卫
|
||||
import {AuthGuard} from './auth.guard' |
||||
import {MTokenK1Component} from './m-token-k1/m-token-k1.component' //K1秘钥
|
||||
import {ViewUnitDetailsPlanComponent} from './key-unit/view-unit-details-plan/view-unit-details-plan.component' |
||||
import { TestComponent } from './test/test.component'; |
||||
import { ExternalLinksPlanComponent } from './external-links-plan/external-links-plan.component'; |
||||
import { CreatePlanOnlineFiveComponent } from './plan-management/create-plan-online-five/create-plan-online-five.component' |
||||
import { ExportExcelComponent } from './export-excel/export-excel.component' |
||||
import { AuthGuard } from "./auth.guard"; |
||||
import { MTokenK1Component } from "./m-token-k1/m-token-k1.component"; //K1秘钥
|
||||
import { ViewUnitDetailsPlanComponent } from "./key-unit/view-unit-details-plan/view-unit-details-plan.component"; |
||||
import { ExternalLinksPlanComponent } from "./external-links-plan/external-links-plan.component"; |
||||
import { CreatePlanOnlineFiveComponent } from "./plan-management/create-plan-online-five/create-plan-online-five.component"; |
||||
import { ExportExcelComponent } from "./export-excel/export-excel.component"; |
||||
|
||||
const routes: Routes = [ |
||||
{path:'',redirectTo:'login',pathMatch:'full'}, |
||||
{ path: "", redirectTo: "login", pathMatch: "full" }, |
||||
{ |
||||
path:'',component:NavigationComponent,canActivate: [AuthGuard],//守卫验证
|
||||
children:[ |
||||
{path:'ui',loadChildren:() => import('./ui/ui.module').then(m => m.UiModule)}, |
||||
{path:'keyUnit',loadChildren:() => import('./key-unit/key-unit.module').then(m => m.KeyUnitModule)}, |
||||
{path:'planManagement',loadChildren:() => import('./plan-management/plan-management.module').then(m => m.PlanManagementModule)}, |
||||
{path:'planAudit',loadChildren:() => import('./plan-audit/plan-audit.module').then(m => m.PlanAuditModule)}, |
||||
{path:'visualization',component: HomeComponent}, |
||||
{path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)}, |
||||
{path:'statisticanalysis',loadChildren:() => import('./statistic-analysis/statistic-analysis.module').then(m => m.StatisticAnalysisModule)}, |
||||
{path:'dataCollection',loadChildren:() => import('./data-collection/data-collection.module').then(m => m.DataCollectionModule)}, |
||||
] |
||||
path: "", |
||||
component: NavigationComponent, |
||||
canActivate: [AuthGuard], //守卫验证
|
||||
children: [ |
||||
{ |
||||
path: "ui", |
||||
loadChildren: () => import("./ui/ui.module").then((m) => m.UiModule), |
||||
}, |
||||
{ |
||||
path: "keyUnit", |
||||
loadChildren: () => |
||||
import("./key-unit/key-unit.module").then((m) => m.KeyUnitModule), |
||||
}, |
||||
{ |
||||
path: "planManagement", |
||||
loadChildren: () => |
||||
import("./plan-management/plan-management.module").then( |
||||
(m) => m.PlanManagementModule |
||||
), |
||||
}, |
||||
{ |
||||
path: "planAudit", |
||||
loadChildren: () => |
||||
import("./plan-audit/plan-audit.module").then( |
||||
(m) => m.PlanAuditModule |
||||
), |
||||
}, |
||||
{ path: "visualization", component: HomeComponent }, |
||||
{ |
||||
path: "gis", |
||||
loadChildren: () => |
||||
import("./gis-management/gis-management.module").then( |
||||
(m) => m.GISManagementModule |
||||
), |
||||
}, |
||||
{ |
||||
path: "statisticanalysis", |
||||
loadChildren: () => |
||||
import("./statistic-analysis/statistic-analysis.module").then( |
||||
(m) => m.StatisticAnalysisModule |
||||
), |
||||
}, |
||||
{ |
||||
path: "dataCollection", |
||||
loadChildren: () => |
||||
import("./data-collection/data-collection.module").then( |
||||
(m) => m.DataCollectionModule |
||||
), |
||||
}, |
||||
], |
||||
}, |
||||
{ path: "login", component: LoginComponent }, |
||||
{ |
||||
path: "keyUnit/viewunitinfoplans", |
||||
component: ViewUnitDetailsPlanComponent, |
||||
canActivate: [AuthGuard], |
||||
}, |
||||
{ |
||||
path: "getNoMToken", |
||||
component: MTokenK1Component, |
||||
canActivate: [AuthGuard], |
||||
}, //K1秘钥验证失败是跳转页面
|
||||
{ |
||||
path: "planAudit/planpass", |
||||
component: PlanPassComponent, |
||||
canActivate: [AuthGuard], |
||||
}, |
||||
{ path: "linksPlan", component: ExternalLinksPlanComponent }, |
||||
{ path: "CreatePlanOnlineFive", component: CreatePlanOnlineFiveComponent }, |
||||
{ |
||||
path: "exportExcel", |
||||
component: ExportExcelComponent, |
||||
canActivate: [AuthGuard], |
||||
}, |
||||
{path:'login',component:LoginComponent}, |
||||
{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:'linksPlan', component: ExternalLinksPlanComponent }, |
||||
{path:'CreatePlanOnlineFive',component:CreatePlanOnlineFiveComponent}, |
||||
{path:'exportExcel',component:ExportExcelComponent, canActivate: [AuthGuard]}, |
||||
]; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forRoot(routes)], |
||||
exports: [RouterModule] |
||||
exports: [RouterModule], |
||||
}) |
||||
export class AppRoutingModule { } |
||||
export class AppRoutingModule {} |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,188 +1,204 @@
|
||||
import { ApplicationRef, Component, ComponentFactoryResolver, Injector, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { Data } from '../../interface' |
||||
import { Router, ActivatedRoute } from '@angular/router' |
||||
import { CacheTokenService } from '../../http-interceptors/cache-token.service'//引入服务
|
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog'; |
||||
import { |
||||
ApplicationRef, |
||||
Component, |
||||
ComponentFactoryResolver, |
||||
Injector, |
||||
OnInit, |
||||
} from "@angular/core"; |
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { Data } from "../../interface"; |
||||
import { Router, ActivatedRoute } from "@angular/router"; |
||||
import { CacheTokenService } from "../../http-interceptors/cache-token.service"; //引入服务
|
||||
import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; |
||||
import { MatDialog, MatDialogRef } from "@angular/material/dialog"; |
||||
|
||||
@Component({ |
||||
selector: 'app-login', |
||||
templateUrl: './login.component.html', |
||||
styleUrls: ['./login.component.scss'], |
||||
selector: "app-login", |
||||
templateUrl: "./login.component.html", |
||||
styleUrls: ["./login.component.scss"], |
||||
}) |
||||
export class LoginComponent implements OnInit { |
||||
constructor( |
||||
private http: HttpClient, |
||||
private router: Router, |
||||
private route: ActivatedRoute, |
||||
public token: CacheTokenService, |
||||
public snackBar: MatSnackBar, |
||||
public dialog: MatDialog |
||||
) {} |
||||
|
||||
ngOnInit() { |
||||
this.automaticLogin(); |
||||
} |
||||
|
||||
errmsg: string = ""; |
||||
|
||||
onSubmit(e) { |
||||
this.http |
||||
.post("/api/Account/SignIn", { |
||||
name: e.name, |
||||
password: e.password, |
||||
}) |
||||
.subscribe( |
||||
(data: Data) => { |
||||
sessionStorage.setItem("level", data.level); |
||||
sessionStorage.setItem("token", data.token); |
||||
sessionStorage.setItem("refreshToken", data.refreshToken); |
||||
sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword); //是否需要修改默认密码
|
||||
this.http.get("/api/Account/NavMenus").subscribe((data: any) => { |
||||
console.log("菜单数据", data); |
||||
|
||||
let isHave = data.find((item) => { |
||||
return item.url == "/statisticanalysis/home"; |
||||
}); |
||||
let isHaveGis = data.find((item) => { |
||||
return item.url == "/gis"; |
||||
}); |
||||
let isKeyUnit = data.find((item) => { |
||||
return item.url == "/keyUnit"; |
||||
}); |
||||
|
||||
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, public snackBar: MatSnackBar, public dialog: MatDialog) { |
||||
|
||||
} |
||||
|
||||
ngOnInit() { |
||||
this.automaticLogin() |
||||
} |
||||
|
||||
errmsg: string = '' |
||||
|
||||
onSubmit(e) { |
||||
this.http.post('/api/Account/SignIn', { |
||||
name: e.name, |
||||
password: e.password |
||||
}).subscribe((data: Data) => { |
||||
sessionStorage.setItem("level", data.level); |
||||
sessionStorage.setItem("token", data.token); |
||||
sessionStorage.setItem("refreshToken", data.refreshToken); |
||||
sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword);//是否需要修改默认密码
|
||||
this.http.get('/api/Account/NavMenus').subscribe((data: any) => { |
||||
let isHave = data.find(item => { return item.url == "/statisticanalysis/home" }) |
||||
let isHaveGis = data.find(item => { return item.url == "/gis" }) |
||||
if (isHave) { |
||||
this.router.navigate([`/statisticanalysis/home`]) |
||||
this.dialogChangePassword() |
||||
return |
||||
} else if (isHaveGis) { |
||||
this.router.navigate([`/gis`]) |
||||
this.dialogChangePassword() |
||||
return |
||||
} else if (data.length != 0) { |
||||
this.router.navigate([`/keyUnit`]) |
||||
this.dialogChangePassword() |
||||
return |
||||
} else { |
||||
this.snackBar.open('该用户角色未分配任何菜单', '确定', { |
||||
duration: 3000 |
||||
}); |
||||
} |
||||
|
||||
}) |
||||
if (e.notlogin) { //7天免登录时
|
||||
localStorage.setItem("isnologin", "true") |
||||
localStorage.setItem("token", data.token) |
||||
localStorage.setItem("refreshToken", data.refreshToken) |
||||
let URL = data.find((item) => { |
||||
return item.url; |
||||
}); |
||||
console.log(URL); |
||||
if (isHave) { |
||||
this.router.navigate([`/statisticanalysis/home`]); |
||||
this.dialogChangePassword(); |
||||
return; |
||||
} else if (isHaveGis) { |
||||
this.router.navigate([`/gis`]); |
||||
this.dialogChangePassword(); |
||||
return; |
||||
} else if (isKeyUnit) { |
||||
this.router.navigate([`/keyUnit`]); |
||||
this.dialogChangePassword(); |
||||
return; |
||||
} else if (data.length != 0) { |
||||
this.router.navigate([URL.url]); |
||||
this.dialogChangePassword(); |
||||
return; |
||||
} else { |
||||
this.snackBar.open("该用户角色未分配任何菜单", "确定", { |
||||
duration: 3000, |
||||
}); |
||||
} |
||||
//调用服务中的function刷新token
|
||||
this.token.startUp() |
||||
}); |
||||
if (e.notlogin) { |
||||
//7天免登录时
|
||||
localStorage.setItem("isnologin", "true"); |
||||
localStorage.setItem("token", data.token); |
||||
localStorage.setItem("refreshToken", data.refreshToken); |
||||
} |
||||
//调用服务中的function刷新token
|
||||
this.token.startUp(); |
||||
}, |
||||
(err) => { this.errmsg = err } |
||||
) |
||||
} |
||||
|
||||
|
||||
dialogChangePassword() { |
||||
if (sessionStorage.getItem('isDefaultPassword') == 'true') { |
||||
let dialogRef = this.dialog.open(ChangepasswordComponent2, |
||||
{ width: '348px' }); |
||||
|
||||
dialogRef.afterClosed().subscribe((data) => { |
||||
sessionStorage.setItem('isDefaultPassword', 'false') |
||||
// this.lookUpdateData()
|
||||
}); |
||||
} else { |
||||
// this.lookUpdateData()
|
||||
(err) => { |
||||
this.errmsg = err; |
||||
} |
||||
); |
||||
} |
||||
|
||||
dialogChangePassword() { |
||||
if (sessionStorage.getItem("isDefaultPassword") == "true") { |
||||
let dialogRef = this.dialog.open(ChangepasswordComponent2, { |
||||
width: "348px", |
||||
}); |
||||
|
||||
dialogRef.afterClosed().subscribe((data) => { |
||||
sessionStorage.setItem("isDefaultPassword", "false"); |
||||
}); |
||||
} |
||||
|
||||
//查看更新内容
|
||||
lookUpdateData() { |
||||
|
||||
|
||||
|
||||
let dialogRef = this.dialog.open(lookUpdateDataComponent, |
||||
{ width: '668px' }); |
||||
|
||||
dialogRef.afterClosed().subscribe((data) => { |
||||
|
||||
}); |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
//7天免登录自动登录
|
||||
automaticLogin() { |
||||
let isNoLogin = localStorage.getItem("isnologin") |
||||
if (isNoLogin) { //7天免登录时
|
||||
let token = localStorage.getItem("token"); |
||||
let refreshToken = localStorage.getItem("refreshToken"); |
||||
this.http.post('/api/Account/RefreshToken', { |
||||
token: token, |
||||
refreshToken: refreshToken |
||||
}).subscribe((data: any) => { |
||||
sessionStorage.setItem("level", data.level); |
||||
sessionStorage.setItem("token", data.token); |
||||
sessionStorage.setItem("refreshToken", data.refreshToken); |
||||
this.token.startUp() |
||||
this.router.navigate(['/keyUnit']) |
||||
this.snackBar.open('已自动登录', '确定', { duration: 3000 }); |
||||
}) |
||||
} //if
|
||||
|
||||
} |
||||
|
||||
//打开弹窗
|
||||
open() { |
||||
this.snackBar.open('请联系管理员', '确定', { |
||||
duration: 3000 |
||||
} |
||||
|
||||
//查看更新内容
|
||||
lookUpdateData() { |
||||
let dialogRef = this.dialog.open(lookUpdateDataComponent, { |
||||
width: "668px", |
||||
}); |
||||
|
||||
dialogRef.afterClosed().subscribe((data) => {}); |
||||
} |
||||
|
||||
//7天免登录自动登录
|
||||
automaticLogin() { |
||||
let isNoLogin = localStorage.getItem("isnologin"); |
||||
if (isNoLogin) { |
||||
//7天免登录时
|
||||
let token = localStorage.getItem("token"); |
||||
let refreshToken = localStorage.getItem("refreshToken"); |
||||
this.http |
||||
.post("/api/Account/RefreshToken", { |
||||
token: token, |
||||
refreshToken: refreshToken, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
sessionStorage.setItem("level", data.level); |
||||
sessionStorage.setItem("token", data.token); |
||||
sessionStorage.setItem("refreshToken", data.refreshToken); |
||||
this.token.startUp(); |
||||
this.router.navigate(["/keyUnit"]); |
||||
this.snackBar.open("已自动登录", "确定", { duration: 3000 }); |
||||
}); |
||||
} |
||||
|
||||
|
||||
|
||||
} //if
|
||||
} |
||||
|
||||
//打开弹窗
|
||||
open() { |
||||
this.snackBar.open("请联系管理员", "确定", { |
||||
duration: 3000, |
||||
}); |
||||
} |
||||
} |
||||
|
||||
@Component({ |
||||
selector: 'app-changepassword', |
||||
templateUrl: './changePassword.html', |
||||
styleUrls: ['./changepassword.scss'] |
||||
selector: "app-changepassword", |
||||
templateUrl: "./changePassword.html", |
||||
styleUrls: ["./changepassword.scss"], |
||||
}) |
||||
|
||||
export class ChangepasswordComponent2 implements OnInit { |
||||
|
||||
constructor(private http: HttpClient, public snackBar: MatSnackBar, |
||||
public dialogRef: MatDialogRef<ChangepasswordComponent2>) { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
errmsg: string = '' |
||||
|
||||
onSubmit(e) { |
||||
this.http.put( |
||||
'/api/Account/Password', |
||||
{ |
||||
newPassword: e.newPassword, |
||||
password: 'SHya119!@' |
||||
} |
||||
).subscribe(data => { |
||||
this.dialogRef.close(data); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('密码修改成功', '确定', config); |
||||
}, (err) => { this.errmsg = err } |
||||
) |
||||
} |
||||
|
||||
|
||||
|
||||
constructor( |
||||
private http: HttpClient, |
||||
public snackBar: MatSnackBar, |
||||
public dialogRef: MatDialogRef<ChangepasswordComponent2> |
||||
) {} |
||||
|
||||
ngOnInit() {} |
||||
errmsg: string = ""; |
||||
|
||||
onSubmit(e) { |
||||
this.http |
||||
.put("/api/Account/Password", { |
||||
newPassword: e.newPassword, |
||||
password: "SHya119!@", |
||||
}) |
||||
.subscribe( |
||||
(data) => { |
||||
this.dialogRef.close(data); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = "top"; |
||||
config.duration = 3000; |
||||
this.snackBar.open("密码修改成功", "确定", config); |
||||
}, |
||||
(err) => { |
||||
this.errmsg = err; |
||||
} |
||||
); |
||||
} |
||||
} |
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-lookUpdateData', |
||||
templateUrl: './lookUpdateData.html', |
||||
styleUrls: ['./lookUpdateData.scss'] |
||||
selector: "app-lookUpdateData", |
||||
templateUrl: "./lookUpdateData.html", |
||||
styleUrls: ["./lookUpdateData.scss"], |
||||
}) |
||||
|
||||
export class lookUpdateDataComponent implements OnInit { |
||||
|
||||
constructor(private http: HttpClient, public snackBar: MatSnackBar, |
||||
public dialogRef: MatDialogRef<lookUpdateDataComponent>) { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
onSubmit(e) { |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
constructor( |
||||
private http: HttpClient, |
||||
public snackBar: MatSnackBar, |
||||
public dialogRef: MatDialogRef<lookUpdateDataComponent> |
||||
) {} |
||||
|
||||
ngOnInit() {} |
||||
onSubmit(e) {} |
||||
} |
||||
|
||||
@ -1,474 +1,609 @@
|
||||
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() |
||||
}) |
||||
|
||||
// this.forArr.forEach((item) => {
|
||||
// item.echart.clear();
|
||||
// item.echart.dispose();
|
||||
// });
|
||||
this.xxx.echart.clear(); |
||||
this.xxx.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) => { |
||||
if (item.echart) { |
||||
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", "2023", "2024"]; |
||||
} |
||||
//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", "2023", "2024"]; |
||||
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'); |
||||
var option = { |
||||
grid: { |
||||
top: 90, |
||||
}, |
||||
// 标题
|
||||
title: { |
||||
text: this.headname+`：总数（${this.zongcount}）`, |
||||
top:-4, |
||||
left: 'center', |
||||
textStyle:{ |
||||
//文字颜色
|
||||
color:'#000', |
||||
fontSize:30 |
||||
} |
||||
xxx = { echart: null }; |
||||
twoInit(date, dateNum, typeName) { |
||||
let item = this.xxx; |
||||
// this.forArr.forEach((item,key) => {
|
||||
|
||||
item.echart = echarts.init(document.getElementById("gaoceng"), "skinUpp"); |
||||
var option = { |
||||
grid: { |
||||
top: 90, |
||||
}, |
||||
// 标题
|
||||
title: { |
||||
text: this.headname + `：总数（${this.zongcount}）`, |
||||
top: -4, |
||||
left: "center", |
||||
textStyle: { |
||||
//文字颜色
|
||||
color: "#000", |
||||
fontSize: 30, |
||||
}, |
||||
//提示框
|
||||
tooltip: { |
||||
trigger: 'axis', |
||||
formatter: function (params) { |
||||
//console.log(params)
|
||||
return '时间:' + params[0].axisValueLabel + '<br>数量: ' + params[0].data; |
||||
}, |
||||
//提示框
|
||||
tooltip: { |
||||
trigger: "axis", |
||||
formatter: function (params) { |
||||
//console.log(params)
|
||||
return ( |
||||
"时间:" + params[0].axisValueLabel + "<br>数量: " + params[0].data |
||||
); |
||||
}, |
||||
/* formatter: (params)=>{ |
||||
/* 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.tableTooltipNoShow |
||||
position: this.serviceData.tableTooltipNoShow, |
||||
}, |
||||
// x轴
|
||||
xAxis: { |
||||
type: "category", |
||||
data: date, |
||||
axisLabel: { |
||||
textStyle: { |
||||
fontSize: 16, |
||||
color: "#000000", |
||||
}, |
||||
color: "#000", //刻度线标签颜色
|
||||
}, |
||||
// x轴
|
||||
xAxis: { |
||||
type: 'category', |
||||
data: date, |
||||
axisLabel: { |
||||
textStyle:{ |
||||
fontSize :16, |
||||
color:'#000000' |
||||
}, |
||||
color: "#000", //刻度线标签颜色
|
||||
//设置坐标轴字体颜色和宽度
|
||||
axisLine: { |
||||
lineStyle: { |
||||
color: "#000", |
||||
}, |
||||
//设置坐标轴字体颜色和宽度
|
||||
axisLine: {
|
||||
lineStyle: { |
||||
color: "#000", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
//分割线配置
|
||||
show: true, |
||||
lineStyle: { |
||||
color: "#999", |
||||
}, |
||||
splitLine: {//分割线配置
|
||||
show:true, |
||||
lineStyle: { |
||||
color: '#999', |
||||
} |
||||
} |
||||
}, |
||||
// y轴
|
||||
yAxis: { |
||||
//min:10,
|
||||
type: 'value', |
||||
name: '个', |
||||
axisLabel: { |
||||
textStyle:{ |
||||
fontSize :16, |
||||
color:'#000000' |
||||
}, |
||||
color: "#000" //刻度线标签颜色
|
||||
}, |
||||
// y轴
|
||||
yAxis: { |
||||
//min:10,
|
||||
type: "value", |
||||
name: "个", |
||||
axisLabel: { |
||||
textStyle: { |
||||
fontSize: 16, |
||||
color: "#000000", |
||||
}, |
||||
//设置坐标轴字体颜色和宽度
|
||||
axisLine: { |
||||
lineStyle: { |
||||
color: "#000", |
||||
} |
||||
} |
||||
color: "#000", //刻度线标签颜色
|
||||
}, |
||||
// 数据
|
||||
series: [{ |
||||
name: typeName, |
||||
type: 'line', |
||||
markPoint: { |
||||
|
||||
symbolSize:[65, 65], |
||||
data: this.tiaoshiPao |
||||
//设置坐标轴字体颜色和宽度
|
||||
axisLine: { |
||||
lineStyle: { |
||||
color: "#000", |
||||
}, |
||||
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}}); |
||||
}, |
||||
}, |
||||
// 数据
|
||||
series: [ |
||||
{ |
||||
name: typeName, |
||||
type: "line", |
||||
markPoint: { |
||||
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, |
||||
}, |
||||
} |
||||
); |
||||
|
||||
/* 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"); |
||||
} |
||||
} |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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() |
||||
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 |
||||
) { |
||||
|
||||
console.log(111) |
||||
//总队,支队，大队跳转
|
||||
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 { |
||||
console.log(222) |
||||
//中队跳转
|
||||
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; |
||||
} |
||||
} |
||||
|
||||
@ -1,393 +1,477 @@
|
||||
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() |
||||
}) |
||||
} |
||||
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.forArr.forEach((item) => { |
||||
if (item.echart) { |
||||
item.echart.clear(); |
||||
item.echart.dispose(); |
||||
} |
||||
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', |
||||
textStyle: { |
||||
fontSize: 30 |
||||
} |
||||
lengthdata = []; //提示数据
|
||||
count = 0; //总数
|
||||
indexData = []; //所有数据
|
||||
organizationId = []; |
||||
tabledata; |
||||
|
||||
barEcharts() { |
||||
let item = this.forArr.find((v) => this.headname.indexOf(v.name) !== -1); |
||||
item.echart = echarts.init( |
||||
document.getElementById("buildingTypeEcharts"), |
||||
"walden" |
||||
); |
||||
let option = { |
||||
title: { |
||||
text: this.headname + this.tabledata[0].totalCount, |
||||
left: "center", |
||||
top: this.padHw ? "18" : "0", |
||||
bottom: this.padHw ? "0" : "600", |
||||
textStyle: { |
||||
fontSize: 18, |
||||
}, |
||||
}, |
||||
grid: { |
||||
bottom: "15%", |
||||
}, |
||||
xAxis: { |
||||
id: this.organizationId, |
||||
type: "category", |
||||
data: this.zhiNameData, |
||||
axisLabel: { |
||||
interval: 0, |
||||
rotate: 28, |
||||
textStyle: { |
||||
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: { |
||||
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); |
||||
}, |
||||
position: this.data.tableTooltipNoShow2, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: this.zhiNumData, |
||||
type: "bar", |
||||
markPoint: { |
||||
data: this.tiaoshiPao, |
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: (params)=>{ |
||||
return this.tableTooltip(params) |
||||
}, |
||||
position: this.data.tableTooltipNoShow2 |
||||
backgroundStyle: { |
||||
color: "rgba(220, 220, 220, 0.8)", |
||||
}, |
||||
series: [{ |
||||
data: this.zhiNumData, |
||||
type: 'bar', |
||||
markPoint: { |
||||
data:this.tiaoshiPao |
||||
}, |
||||
//showBackground: true,
|
||||
backgroundStyle: { |
||||
color: 'rgba(220, 220, 220, 0.8)' |
||||
barWidth: "38", |
||||
}, |
||||
], |
||||
}; |
||||
item.echart.setOption(option); |
||||
item.echart.getZr().on("click", (params) => { |
||||
const pointInPixel = [params.offsetX, params.offsetY]; |
||||
// console.log("点击图表", pointInPixel);
|
||||
if (item.echart.containPixel("grid", pointInPixel)) { |
||||
let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [ |
||||
params.offsetX, |
||||
params.offsetY, |
||||
])[0]; |
||||
// console.log("点击柱状图index", xIndex);
|
||||
// console.log("this.data", this.data);
|
||||
// console.log("this.tabledata", this.tabledata);
|
||||
if ( |
||||
(this.data.level == "0" || this.data.level == "1") && |
||||
this.tabledata[0].organizations[xIndex].subOrganizations.length !== 0 |
||||
) { |
||||
// 总队，支队跳转
|
||||
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], |
||||
}, |
||||
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}}); |
||||
} |
||||
); |
||||
return; |
||||
} 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}});
|
||||
} |
||||
|
||||
}); |
||||
}) |
||||
|
||||
|
||||
return; |
||||
}); |
||||
} |
||||
|
||||
//提示框表格
|
||||
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; |
||||
} |
||||
} |
||||
|
||||
@ -1,25 +1,56 @@
|
||||
@import "../../../assets/css/newStyle.css"; |
||||
.main-center{ |
||||
position: relative; |
||||
// .main{ |
||||
|
||||
// } |
||||
.main-center { |
||||
position: relative; |
||||
} |
||||
#chartMap { |
||||
margin-left: 5px; |
||||
} |
||||
#chartMap{ |
||||
margin-left: 5px; |
||||
.number-area { |
||||
position: absolute; |
||||
top: 0; |
||||
display: block; |
||||
width: 80%; |
||||
} |
||||
.number-area{ |
||||
position: absolute; |
||||
top: 0; |
||||
display: block; |
||||
width:80%; |
||||
.total-item { |
||||
z-index: 200; |
||||
cursor: pointer; |
||||
} |
||||
.total-item{ |
||||
z-index: 200; |
||||
cursor: pointer; |
||||
.total-item div { |
||||
height: 23px !important; |
||||
line-height: 23px !important; |
||||
} |
||||
.total-item div{ |
||||
height: 23px!important; |
||||
line-height: 23px!important; |
||||
.xxx div { |
||||
height: 20px !important; |
||||
line-height: 20px !important; |
||||
} |
||||
.xxx div{ |
||||
height: 20px!important; |
||||
line-height: 20px!important; |
||||
|
||||
#tooltip { |
||||
width: 170px; |
||||
height: 90px; |
||||
position: fixed; |
||||
background-color: rgba(0, 0, 0, 0.8); |
||||
border-radius: 8px; |
||||
z-index: 999; |
||||
.content { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
color: #fff; |
||||
font-size: 14px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
box-sizing: border-box; |
||||
padding-left: 12px; |
||||
.close { |
||||
position: absolute; |
||||
right: 8px; |
||||
top: 3px; |
||||
|
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +0,0 @@
|
||||
<div class="box"> |
||||
<button mat-button style="position: absolute;left: 50%;top: 0;z-index: 999;" (click)="createimg()">生成图片</button> |
||||
<div id="mapxxx"></div> |
||||
<div class="img"> |
||||
<img [src]="canvasImg" alt=""> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,17 +0,0 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
#mapxxx{ |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
.img{ |
||||
width: 500px; |
||||
height: 500px; |
||||
img{ |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { TestComponent } from './test.component'; |
||||
|
||||
describe('TestComponent', () => { |
||||
let component: TestComponent; |
||||
let fixture: ComponentFixture<TestComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ TestComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(TestComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,56 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
declare var html2canvas: any; |
||||
declare var AMap: any; |
||||
@Component({ |
||||
selector: 'app-test', |
||||
templateUrl: './test.component.html', |
||||
styleUrls: ['./test.component.scss'] |
||||
}) |
||||
export class TestComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
map: any |
||||
ngOnInit(): void { |
||||
setTimeout(() => { |
||||
this.map = new AMap.Map('mapxxx', { |
||||
WebGLParams: { |
||||
preserveDrawingBuffer: true |
||||
} |
||||
}); |
||||
|
||||
this.map.setCity('上海市'); |
||||
}, 0); |
||||
} |
||||
//生成图片
|
||||
canvasImg |
||||
createimg() { |
||||
|
||||
// 使用html2canvas插件，将数据源中的数据转换成画布。
|
||||
html2canvas(document.querySelector("#mapxxx"), { |
||||
useCORS: true, |
||||
onrendered: function (canvas) { |
||||
var dataUrl = canvas.toDataURL("image/png"); |
||||
} |
||||
}).then(canvas => { |
||||
// 修改生成的宽度
|
||||
// canvas.style.width = "1000px";
|
||||
console.log(canvas, "生成的画布文件"); |
||||
this.canvasImg = canvas.toDataURL("image/png"); |
||||
// console.log(this.canvasImg)
|
||||
}).then(() => { |
||||
this.downloadFile("导出图片", this.canvasImg); |
||||
|
||||
}) |
||||
|
||||
} |
||||
downloadFile(filename, content) { |
||||
var base64Img = content; |
||||
var oA = document.createElement('a'); |
||||
oA.href = base64Img; |
||||
oA.download = filename; |
||||
var event = document.createEvent('MouseEvents'); |
||||
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); |
||||
oA.dispatchEvent(event); |
||||
} |
||||
|
||||
} |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue