Browse Source

[完善]修改echarts报错

tianjin
邵佳豪 2 years ago
parent
commit
10bec5eb87
  1. 4
      src/app/plan-management/entry-plan-look/entry-plan-look.component.html
  2. 4
      src/app/plan-management/entry-plan/entry-plan.component.html
  3. 4
      src/app/plan-management/open-plan/open-plan.component.html
  4. 8
      src/app/plan-management/pass-plan/pass-plan.component.html
  5. 581
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
  6. 22
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html
  7. 593
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts
  8. 239
      src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts
  9. 20
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html
  10. 496
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts
  11. 34
      src/app/tabbar/tabbar.component.html

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

@ -112,8 +112,8 @@
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span (click)="changeName(element)" <span (click)="changeName(element)"
*ngIf="element.auditStatus==8 || element.maintenanceVerifyState=='未提交审核'">改名</span> *ngIf="element.auditStatus==8 || element.maintenanceVerifyState=='未提交审核'">改名</span>
<span (click)="upzhuanMb(element)" <!-- <span (click)="upzhuanMb(element)"
*ngIf="element.planMode==1&&element.planType==16&&element.planCategory==5">转在线导入</span> *ngIf="element.planMode==1&&element.planType==16&&element.planCategory==5">转在线导入</span> -->
<span (click)="editPlan(element)" <span (click)="editPlan(element)"
[ngClass]="{'grey': !(element.auditStatus!='16' && element.auditStatus != '1' )}">编辑</span> [ngClass]="{'grey': !(element.auditStatus!='16' && element.auditStatus != '1' )}">编辑</span>
<span (click)="lookPlan(element)" <span (click)="lookPlan(element)"

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

@ -158,14 +158,14 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="queryField" *ngIf="!padMore&&!pcMore"> <!-- <div class="queryField" *ngIf="!padMore&&!pcMore">
<mat-checkbox (ngModelChange)="templatePlanChange($event,1)" [(ngModel)]="templatePlan" <mat-checkbox (ngModelChange)="templatePlanChange($event,1)" [(ngModel)]="templatePlan"
name="templatePlan">模板录入预案</mat-checkbox> name="templatePlan">模板录入预案</mat-checkbox>
</div> </div>
<div class="queryField" *ngIf="!padMore&&!pcMore"> <div class="queryField" *ngIf="!padMore&&!pcMore">
<mat-checkbox (ngModelChange)="templatePlanChange($event,2)" [(ngModel)]="customPlan" <mat-checkbox (ngModelChange)="templatePlanChange($event,2)" [(ngModel)]="customPlan"
name="customPlan">自定义预案</mat-checkbox> name="customPlan">自定义预案</mat-checkbox>
</div> </div> -->
</div> </div>
</form> </form>
</div> </div>

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

@ -66,14 +66,14 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="queryField" *ngIf="!padMore"> <!-- <div class="queryField" *ngIf="!padMore">
<mat-checkbox (ngModelChange)="templatePlanChange($event,1)" [(ngModel)]="templatePlan" name="templatePlan"> <mat-checkbox (ngModelChange)="templatePlanChange($event,1)" [(ngModel)]="templatePlan" name="templatePlan">
模板录入预案</mat-checkbox> 模板录入预案</mat-checkbox>
</div> </div>
<div class="queryField" *ngIf="!padMore"> <div class="queryField" *ngIf="!padMore">
<mat-checkbox (ngModelChange)="templatePlanChange($event,2)" [(ngModel)]="customPlan" name="customPlan">自定义预案 <mat-checkbox (ngModelChange)="templatePlanChange($event,2)" [(ngModel)]="customPlan" name="customPlan">自定义预案
</mat-checkbox> </mat-checkbox>
</div> </div> -->
<div class="queryField" *ngIf="pcfind"> <div class="queryField" *ngIf="pcfind">
<button mat-raised-button color="primary">查询</button> <button mat-raised-button color="primary">查询</button>
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>

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

@ -90,11 +90,11 @@
<label style="margin-right: 10px;">预案级别:</label> <label style="margin-right: 10px;">预案级别:</label>
<mat-form-field> <mat-form-field>
<mat-select placeholder='请选择预案级别' [(ngModel)]="planCategory" name="planCategory" [multiple]="true"> <mat-select placeholder='请选择预案级别' [(ngModel)]="planCategory" name="planCategory" [multiple]="true">
<mat-option value=6>应急预案(国家级)</mat-option> <!-- <mat-option value=6>应急预案(国家级)</mat-option>
<mat-option value=7>应急预案(市级)</mat-option> <mat-option value=7>应急预案(市级)</mat-option>
<mat-option value=8>类型预案</mat-option> <mat-option value=8>类型预案</mat-option>
<mat-option value=1>Ⅰ级预案</mat-option> <mat-option value=1>Ⅰ级预案</mat-option>
<mat-option value=2>Ⅱ级预案</mat-option> <mat-option value=2>Ⅱ级预案</mat-option> -->
<mat-option value=3>Ⅲ级预案</mat-option> <mat-option value=3>Ⅲ级预案</mat-option>
<mat-option value=4>Ⅳ级预案</mat-option> <mat-option value=4>Ⅳ级预案</mat-option>
<mat-option value=5>Ⅴ级预案</mat-option> <mat-option value=5>Ⅴ级预案</mat-option>
@ -131,14 +131,14 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="queryField" *ngIf="!padMore&&!pcMore"> <!-- <div class="queryField" *ngIf="!padMore&&!pcMore">
<mat-checkbox (ngModelChange)="templatePlanChange($event,1)" [(ngModel)]="templatePlan" name="templatePlan"> <mat-checkbox (ngModelChange)="templatePlanChange($event,1)" [(ngModel)]="templatePlan" name="templatePlan">
模板录入预案</mat-checkbox> 模板录入预案</mat-checkbox>
</div> </div>
<div class="queryField" *ngIf="!padMore&&!pcMore"> <div class="queryField" *ngIf="!padMore&&!pcMore">
<mat-checkbox (ngModelChange)="templatePlanChange($event,2)" [(ngModel)]="customPlan" name="customPlan">自定义预案 <mat-checkbox (ngModelChange)="templatePlanChange($event,2)" [(ngModel)]="customPlan" name="customPlan">自定义预案
</mat-checkbox> </mat-checkbox>
</div> </div> -->
</div> </div>
</form> </form>

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

@ -1,270 +1,365 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from "@angular/router";
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; import {
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; MatDialog,
import { EchartsDataService } from '../../echarts-data.service'; 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; declare var echarts: any;
@Component({ @Component({
selector: 'app-add-unit-two-time', selector: "app-add-unit-two-time",
templateUrl: './add-unit-two-time.component.html', templateUrl: "./add-unit-two-time.component.html",
styleUrls: ['./add-unit-two-time.component.scss'] styleUrls: ["./add-unit-two-time.component.scss"],
}) })
export class AddUnitTwoTimeComponent implements OnInit { export class AddUnitTwoTimeComponent implements OnInit {
constructor(
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,private route:ActivatedRoute) { } private router: Router,
setTimeoutObj//延时器需要清除 public dialog: MatDialog,
headname public snackBar: MatSnackBar,
type=1 private serviceData: EchartsDataService,
lastId private route: ActivatedRoute
tabledata ) {}
zongcount=0 setTimeoutObj; //延时器需要清除
zhiorbuild headname;
type = 1;
lastId;
tabledata;
zongcount = 0;
zhiorbuild;
ngOnInit(): void { ngOnInit(): void {
this.serviceData.selectType=0 this.serviceData.selectType = 0;
this.dateInit () this.dateInit();
this.route.queryParams.subscribe(param=>{ this.route.queryParams.subscribe((param) => {
this.headname=param.level this.headname = param.level;
this.zhiorbuild=param.type this.zhiorbuild = param.type;
this.lastId=param.id this.lastId = param.id;
}); });
this.getdata() this.getdata();
} }
ngOnDestroy() { ngOnDestroy() {
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
this.forArr.forEach(item => { // this.forArr.forEach((item) => {
item.echart.clear() // item.echart.clear();
item.echart.dispose() // item.echart.dispose();
}) // });
this.xxx.echart.clear();
this.xxx.echart.dispose();
} }
//获取数据 //获取数据
yeardatee=new Date().getFullYear() yeardatee = new Date().getFullYear();
async getdata() { async getdata() {
this.date=[] this.date = [];
this.dateNum=[] this.dateNum = [];
this.zongcount=0 this.zongcount = 0;
let parzhi = { let parzhi = {
objectType: 0, objectType: 0,
BuildingTypeId: this.lastId, BuildingTypeId: this.lastId,
TrendType: this.serviceData.selectType, TrendType: this.serviceData.selectType,
TrendYear:this.yeardatee||'' TrendYear: this.yeardatee || "",
} };
let parbuild = { let parbuild = {
objectType: 0, objectType: 0,
OrganizationId: this.lastId, OrganizationId: this.lastId,
TrendType: this.serviceData.selectType, TrendType: this.serviceData.selectType,
TrendYear:this.yeardatee||'' TrendYear: this.yeardatee || "",
} };
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.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]) //console.log(this.tabledata[0])
for (var i = 0; i < this.tabledata[0].length; i++) { 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){ if (
this.date.push(this.tabledata[0][i].month) this.tabledata[0][i].month >= this.serviceData.selectStartMonth ||
this.dateNum.push(this.tabledata[0][i].count) this.tabledata[0][i].month <= this.serviceData.selectEndMonth
this.zongcount=this.zongcount+this.tabledata[0][i].count ) {
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.forEach((value, index, array) => {
this.date[index]=this.date[index]+'月' this.date[index] = this.date[index] + "月";
}) });
//this.oneInit (this.date,this.dateNum) //this.oneInit (this.date,this.dateNum)
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) this.tiaoshiPao = this.serviceData.qipao(
this.twoInit (this.date,this.dateNum,'month') this.tiaoshiPao,
this.dateNum,
this.date
);
this.twoInit(this.date, this.dateNum, "month");
}); });
} }
forward() { forward() {
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_type"], {
queryParams: {
level: this.headname,
id: this.lastId,
type: this.zhiorbuild == "zhi" ? "zhi" : "build",
},
});
} }
reverse() { reverse() {
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) 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= [] years = [];
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
//日期初始化 //日期初始化
dateInit() { dateInit() {
let date = (new Date()).getFullYear() let date = new Date().getFullYear();
for (let i = date; i >= date - 10; i--) { for (let i = date; i >= date - 10; i--) {
//this.years.unshift(i) //this.years.unshift(i)
} }
} }
selectOneYear:any = (new Date()).getFullYear() //开始年份 selectOneYear: any = new Date().getFullYear(); //开始年份
selectTwoYear:any = (new Date()).getFullYear() //结束年份 selectTwoYear: any = new Date().getFullYear(); //结束年份
selectStartMonth:any = 1 //开始月份 selectStartMonth: any = 1; //开始月份
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份 selectEndMonth: any = new Date().getMonth() + 1; //结束月份
//按月查询 //按月查询
monthSubmit(e) { monthSubmit(e) {
this.serviceData.selectStartMonth=this.selectStartMonth this.serviceData.selectStartMonth = this.selectStartMonth;
this.serviceData.selectEndMonth=this.selectEndMonth this.serviceData.selectEndMonth = this.selectEndMonth;
//console.log(this.selectStartMonth,this.selectEndMonth) //console.log(this.selectStartMonth,this.selectEndMonth)
this.date=[] this.date = [];
this.dateNum=[] this.dateNum = [];
this.zongcount=0 this.zongcount = 0;
if (e.selectEndMonth >= e.selectStartMonth) { if (e.selectEndMonth >= e.selectStartMonth) {
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 let startTime =
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 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++) { 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){ if (
this.date.push(this.tabledata[0][i].month) this.tabledata[0][i].month >= this.serviceData.selectStartMonth &&
this.dateNum.push(this.tabledata[0][i].count) this.tabledata[0][i].month <= this.serviceData.selectEndMonth
this.zongcount=this.zongcount+this.tabledata[0][i].count ) {
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.oneInit (this.date,this.dateNum)
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) this.tiaoshiPao = this.serviceData.qipao(
this.twoInit (this.date,this.dateNum,'month') this.tiaoshiPao,
this.dateNum,
this.date
);
this.twoInit(this.date, this.dateNum, "month");
} else { } else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = "top";
config.duration = 3000 config.duration = 3000;
this.snackBar.open('请选择正确时间区段','确定',config); this.snackBar.open("请选择正确时间区段", "确定", config);
} }
} }
selectStartYear:any = (new Date()).getFullYear()-1 //开始年份 selectStartYear: any = new Date().getFullYear() - 1; //开始年份
selectEndYear:any = (new Date()).getFullYear() //结束年份 selectEndYear: any = new Date().getFullYear(); //结束年份
//按年查询 //按年查询
yearSubmit(e) { yearSubmit(e) {
this.zongcount=0 this.zongcount = 0;
this.date2=[] this.date2 = [];
this.dateNum2=[] this.dateNum2 = [];
if (e.selectEndYear >= e.selectStartYear) { if (e.selectEndYear >= e.selectStartYear) {
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 let startTime =
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 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++) { 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){ if (
this.date2.push(this.tabledata[0][i].year) this.tabledata[0][i].year >= e.selectStartYear &&
this.dateNum2.push(this.tabledata[0][i].count) this.tabledata[0][i].year <= e.selectEndYear
this.zongcount=this.zongcount+this.tabledata[0][i].count ) {
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.oneInit (this.date,this.dateNum)
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2) this.tiaoshiPao = this.serviceData.qipao(
this.twoInit (this.date2,this.dateNum2,'year') this.tiaoshiPao,
this.dateNum2,
this.date2
);
this.twoInit(this.date2, this.dateNum2, "year");
} else { } else {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = "top";
config.duration = 3000 config.duration = 3000;
this.snackBar.open('结束年份必须大于开始年份','确定',config); this.snackBar.open("结束年份必须大于开始年份", "确定", config);
} }
} }
//年或月点击 //年或月点击
async dateChange() { async dateChange() {
this.tiaoshiPao=null this.tiaoshiPao = null;
this.forArr.forEach(item => { this.forArr.forEach((item) => {
item.echart.dispose() item.echart.dispose();
}) });
if (this.selectType == "year") { if (this.selectType == "year") {
this.zongcount=0 this.zongcount = 0;
this.date2=[] this.date2 = [];
this.dateNum2=[] this.dateNum2 = [];
this.years=[] this.years = [];
this.serviceData.selectType=2 this.serviceData.selectType = 2;
let parzhi = { let parzhi = {
objectType: 0, objectType: 0,
BuildingTypeId: this.lastId, BuildingTypeId: this.lastId,
TrendType: this.serviceData.selectType, TrendType: this.serviceData.selectType,
} };
let parbuild = { let parbuild = {
objectType: 0, objectType: 0,
OrganizationId: this.lastId, OrganizationId: this.lastId,
TrendType: this.serviceData.selectType, TrendType: this.serviceData.selectType,
} };
/* let paramdata={ /* let paramdata={
BuildingTypeId:this.lastId, BuildingTypeId:this.lastId,
TrendType:this.serviceData.selectType 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.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) console.log(this.tabledata);
for (var i = 0; i < this.tabledata[0].length; i++) { for (var i = 0; i < this.tabledata[0].length; i++) {
this.date2.push(this.tabledata[0][i].year) this.date2.push(this.tabledata[0][i].year);
this.dateNum2.push(this.tabledata[0][i].count) this.dateNum2.push(this.tabledata[0][i].count);
this.zongcount=this.zongcount+this.tabledata[0][i].count this.zongcount = this.zongcount + this.tabledata[0][i].count;
//this.years.push(this.tabledata[0][i].year) //this.years.push(this.tabledata[0][i].year)
this.years=['2020','2021','2022'] this.years = ["2020", "2021", "2022"];
} }
//this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) //this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date)
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2) this.tiaoshiPao = this.serviceData.qipao(
this.twoInit (this.date2,this.dateNum2,'year') 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.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2)
this.twoInit(this.date2,this.dateNum2,'year') */ this.twoInit(this.date2,this.dateNum2,'year') */
} }
if (this.selectType == "month") { if (this.selectType == "month") {
this.serviceData.selectType=0 this.serviceData.selectType = 0;
this.getdata() this.getdata();
this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) this.tiaoshiPao = this.serviceData.qipao(
this.tiaoshiPao,
this.dateNum,
this.date
);
//this.oneInit(this.date,this.dateNum) //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//顶部大图实例 date = [];
forArr =this.serviceData.zuzhiorBuilding=="zhi"? [{id:'gaoceng',name:'浦东支队',echart:null}, dateNum = [];
{id:'dixia',name:'黄浦支队',echart:null}, tiaoshiPao: any;
{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
//气泡提示数据获取 //气泡提示数据获取
bianli() { bianli() {
var arrshuzu='['; var arrshuzu = "[";
for (var i = 0; i < this.dateNum.length; i++) { for (var i = 0; i < this.dateNum.length; i++) {
arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},' arrshuzu +=
} '{"value":' +
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) this.dateNum[i] +
arrshuzu+=']' ',"coord":[' +
this.tiaoshiPao=JSON.parse(arrshuzu) i +
"," +
this.dateNum[i] +
'],"name":' +
'"' +
this.date[i] +
'"' +
"},";
}
arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
arrshuzu += "]";
this.tiaoshiPao = JSON.parse(arrshuzu);
//console.log(this.tiaoshiPao) //console.log(this.tiaoshiPao)
//return tishiPao //return tishiPao
} }
thisYear=new Date().getFullYear() thisYear = new Date().getFullYear();
date2 = ['2020', '2021','2022'] date2 = ["2020", "2021", "2022"];
dateNum2 = [] dateNum2 = [];
//新增数量统计 //新增数量统计
oneInit(date, dateNum) { oneInit(date, dateNum) {
this.chartQusj = echarts.init(document.getElementById('Line'), 'skinUpp'); this.chartQusj = echarts.init(document.getElementById("Line"), "skinUpp");
var option = { var option = {
grid: { grid: {
top: 70, top: 70,
@ -274,31 +369,36 @@ export class AddUnitTwoTimeComponent implements OnInit {
}, },
// 标题 // 标题
title: { title: {
text: '新增数量统计:总数(1012)', text: "新增数量统计:总数(1012)",
top: -4, top: -4,
left: 'center', left: "center",
textStyle: { textStyle: {
//文字颜色 //文字颜色
color:'#000', color: "#000",
fontSize: 30, fontSize: 30,
} },
}, },
//提示框 //提示框
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
formatter: (params) => { formatter: (params) => {
return this.serviceData.tableTooltip(this.serviceData.zuzhiorBuilding=="zhi"?this.serviceData.tableDataZhi :this.serviceData.buildingType,params[0].name) 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轴 // x轴
xAxis: { xAxis: {
type: 'category', type: "category",
data: date, data: date,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontSize: 15, fontSize: 15,
color:'#000000' color: "#000000",
}, },
color: "#000", //刻度线标签颜色 color: "#000", //刻度线标签颜色
}, },
@ -308,52 +408,55 @@ export class AddUnitTwoTimeComponent implements OnInit {
color: "#000", color: "#000",
}, },
}, },
splitLine: {//分割线配置 splitLine: {
//分割线配置
show: true, show: true,
lineStyle: { lineStyle: {
color: '#999', color: "#999",
} },
} },
}, },
// y轴 // y轴
yAxis: { yAxis: {
type: 'value', type: "value",
name: '个', name: "个",
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontSize: 15, fontSize: 15,
color:'#000000' color: "#000000",
}, },
color: "#000" //刻度线标签颜色 color: "#000", //刻度线标签颜色
}, },
//设置坐标轴字体颜色和宽度 //设置坐标轴字体颜色和宽度
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#000", color: "#000",
} },
} },
}, },
// 数据 // 数据
series: [{ series: [
name: '新增数量', {
type: 'line', name: "新增数量",
type: "line",
markPoint: { markPoint: {
symbolSize: [65, 65], symbolSize: [65, 65],
data: this.tiaoshiPao data: this.tiaoshiPao,
}, },
data: dateNum, data: dateNum,
} },
], ],
} };
this.chartQusj.setOption(option); this.chartQusj.setOption(option);
} }
//剩余折线图 //剩余折线图
xxx = { echart: null };
twoInit(date, dateNum, typeName) { twoInit(date, dateNum, typeName) {
this.forArr.forEach((item,key) => { let item = this.xxx;
let that = this // this.forArr.forEach((item,key) => {
item.echart = echarts.init(document.getElementById('gaoceng'), 'skinUpp');
item.echart = echarts.init(document.getElementById("gaoceng"), "skinUpp");
var option = { var option = {
grid: { grid: {
top: 90, top: 90,
@ -362,19 +465,21 @@ export class AddUnitTwoTimeComponent implements OnInit {
title: { title: {
text: this.headname + `:总数(${this.zongcount}`, text: this.headname + `:总数(${this.zongcount}`,
top: -4, top: -4,
left: 'center', left: "center",
textStyle: { textStyle: {
//文字颜色 //文字颜色
color:'#000', color: "#000",
fontSize:30 fontSize: 30,
} },
}, },
//提示框 //提示框
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
formatter: function (params) { formatter: function (params) {
//console.log(params) //console.log(params)
return '时间:' + params[0].axisValueLabel + '<br>数量: ' + params[0].data; return (
"时间:" + params[0].axisValueLabel + "<br>数量: " + params[0].data
);
}, },
/* formatter: (params)=>{ /* formatter: (params)=>{
if(params[0].seriesName == "year"){ if(params[0].seriesName == "year"){
@ -383,16 +488,16 @@ export class AddUnitTwoTimeComponent implements OnInit {
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
} }
}, */ }, */
position: this.serviceData.tableTooltipNoShow position: this.serviceData.tableTooltipNoShow,
}, },
// x轴 // x轴
xAxis: { xAxis: {
type: 'category', type: "category",
data: date, data: date,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color:'#000000' color: "#000000",
}, },
color: "#000", //刻度线标签颜色 color: "#000", //刻度线标签颜色
}, },
@ -402,73 +507,101 @@ export class AddUnitTwoTimeComponent implements OnInit {
color: "#000", color: "#000",
}, },
}, },
splitLine: {//分割线配置 splitLine: {
//分割线配置
show: true, show: true,
lineStyle: { lineStyle: {
color: '#999', color: "#999",
} },
} },
}, },
// y轴 // y轴
yAxis: { yAxis: {
//min:10, //min:10,
type: 'value', type: "value",
name: '个', name: "个",
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color:'#000000' color: "#000000",
}, },
color: "#000" //刻度线标签颜色 color: "#000", //刻度线标签颜色
}, },
//设置坐标轴字体颜色和宽度 //设置坐标轴字体颜色和宽度
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#000", color: "#000",
} },
} },
}, },
// 数据 // 数据
series: [{ series: [
{
name: typeName, name: typeName,
type: 'line', type: "line",
markPoint: { markPoint: {
symbolSize: [65, 65], symbolSize: [65, 65],
data: this.tiaoshiPao data: this.tiaoshiPao,
}, },
data: dateNum, data: dateNum,
} },
], ],
}; };
item.echart.setOption(option, true); item.echart.setOption(option, true);
item.echart.getZr().on('click',params=>{ item.echart.getZr().on("click", (params) => {
const pointInPixel = [params.offsetX, params.offsetY]; const pointInPixel = [params.offsetX, params.offsetY];
if (item.echart.containPixel('grid',pointInPixel)) { if (item.echart.containPixel("grid", pointInPixel)) {
let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; 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) // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name)
if (option.series[0].name == "year") { 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.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.yeardatee=option.xAxis.data[xIndex]
this.getdata() */ this.getdata() */
} else { } else {
if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){ 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_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]}}) 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() { backClick() {
this.router.navigateByUrl('/statisticanalysis/addUnit_one') this.router.navigateByUrl("/statisticanalysis/addUnit_one");
} }
} }

22
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html

@ -10,28 +10,16 @@
<div class="topbox"> <div class="topbox">
<div class="btnbox"> <div class="btnbox">
<button mat-stroked-button style="margin-left: 30px;" (click)="backClick()">返回</button> <button mat-stroked-button style="margin-left: 30px;" (click)="backClick()">返回</button>
<button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_time'}">区间选择</button> <button mat-stroked-button (click)="reverse()"
<button mat-stroked-button (click)="forward()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_type'}" style="margin-right: 30px;">类型统计</button> [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_time'}">区间选择</button>
<button mat-stroked-button (click)="forward()"
[ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_type'}"
style="margin-right: 30px;">类型统计</button>
</div> </div>
</div> </div>
<div class="echartsbox"> <div class="echartsbox">
<div style="padding-top: 100px;"> <div style="padding-top: 100px;">
<div class="publicCss" id="gaoceng"></div> <div class="publicCss" id="gaoceng"></div>
<!-- <div class="publicCss" id="dixia"></div>
<div class="publicCss" id="guidao"></div>
<div class="publicCss" id="huagong"></div>
<div class="publicCss" id="chuguan"></div>
<div class="publicCss" id="changfang"></div>
<div class="publicCss" id="gujianzhu"></div>
<div class="publicCss" id="shichang"></div>
<div class="publicCss" id="yiyuan"></div>
<div class="publicCss" id="xuexiao"></div>
<div class="publicCss" id="binguan"></div>
<div class="publicCss" id="yule"></div>
<div class="publicCss" id="canyin"></div>
<div class="publicCss" id="yingyuan"></div>
<div class="publicCss" id="zhanlan"></div>
<div class="publicCss" id="suidao"></div> -->
</div> </div>
</div> </div>

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

@ -1,119 +1,153 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from "@angular/router";
import { threadId } from 'worker_threads'; import { threadId } from "worker_threads";
import {EchartsDataService} from '../../echarts-data.service'; import { EchartsDataService } from "../../echarts-data.service";
declare var echarts: any; declare var echarts: any;
@Component({ @Component({
selector: 'app-add-unit-two-type-statistics', selector: "app-add-unit-two-type-statistics",
templateUrl: './add-unit-two-type-statistics.component.html', templateUrl: "./add-unit-two-type-statistics.component.html",
styleUrls: ['./add-unit-two-type-statistics.component.scss'] styleUrls: ["./add-unit-two-type-statistics.component.scss"],
}) })
export class AddUnitTwoTypeStatisticsComponent implements OnInit { export class AddUnitTwoTypeStatisticsComponent implements OnInit {
constructor(
constructor(private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { } private router: Router,
public data: EchartsDataService,
private route: ActivatedRoute
) {}
forward() { forward() {
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_type"], {
queryParams: {
level: this.headname,
id: this.lastId,
type: this.zhiorbuild == "zhi" ? "zhi" : "build",
},
});
} }
reverse() { reverse() {
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_time"], {
} queryParams: {
url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址 level: this.headname,
setTimeoutObj//延时器需要清除 id: this.lastId,
headname type: this.zhiorbuild == "zhi" ? "zhi" : "build",
lastId },
organizationId=[] });
buildingTypeId=[] }
zhiorbuild url = "/statisticanalysis/addUnit_one/addUnit_two_type"; //当前路由地址
padHw setTimeoutObj; //延时器需要清除
year headname;
month lastId;
organizationId = [];
buildingTypeId = [];
zhiorbuild;
padHw;
year;
month;
ngOnInit(): void { ngOnInit(): void {
if (window.matchMedia("(max-width: 1400px)").matches) { if (window.matchMedia("(max-width: 1400px)").matches) {
this.padHw=true this.padHw = true;
//this.padjt=
} else { } else {
this.padHw=false this.padHw = false;
} }
if(sessionStorage.getItem('refresh') === 'true') { if (sessionStorage.getItem("refresh") === "true") {
sessionStorage.removeItem('refresh'); sessionStorage.removeItem("refresh");
location.reload(); location.reload();
} }
this.route.queryParams.subscribe(param=>{ this.route.queryParams.subscribe((param) => {
this.headname=param.level this.headname = param.level;
this.lastId=param.id this.lastId = param.id;
this.zhiorbuild=param.type this.zhiorbuild = param.type;
this.year=param.year||null this.year = param.year || null;
this.month=param.month.substring(0,1)||null this.month = param.month.substring(0, 1) || null;
}); });
console.log(this.month) console.log(this.month);
this.setTimeoutObj = window.setTimeout(() => { this.setTimeoutObj = window.setTimeout(() => {
this.getechartsData() this.getechartsData();
}) });
} }
ngOnDestroy() { ngOnDestroy() {
window.clearTimeout(this.setTimeoutObj); window.clearTimeout(this.setTimeoutObj);
this.forArr.forEach(item => { this.forArr.forEach((item) => {
item.echart.clear() if (item.echart) {
item.echart.dispose() item.echart.clear();
}) item.echart.dispose();
}
});
echarts.echart.clear();
echarts.echart.dispose();
} }
//获取服务层数据 //获取服务层数据
async getechartsData() { async getechartsData() {
let paramsdata let paramsdata;
if (this.year == null) { if (this.year == null) {
paramsdata = { paramsdata = {
id: this.lastId, id: this.lastId,
//organizationId:'1' //organizationId:'1'
} };
} else { } else {
paramsdata = { paramsdata = {
id: this.lastId, id: this.lastId,
TimeIntervalStart:this.year+'-'+this.month||'', TimeIntervalStart: this.year + "-" + this.month || "",
TimeIntervalEnd:this.year+'-'+this.month||'' TimeIntervalEnd: this.year + "-" + this.month || "",
//organizationId:'1' //organizationId:'1'
} };
this.data.addYear=this.year this.data.addYear = this.year;
this.data.addMonth=this.month this.data.addMonth = this.month;
} }
await this.data.getData(this.zhiorbuild=="zhi"?paramsdata:paramsdata,this.zhiorbuild=="zhi"?`/api/StatisticsAnalysis/Companies/Organizations/${this.lastId}`:`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.lastId}`) await this.data.getData(
this.tabledata=JSON.parse(JSON.stringify(this.data.allDate)) this.zhiorbuild == "zhi" ? paramsdata : paramsdata,
this.zhiorbuild == "zhi"
? `/api/StatisticsAnalysis/Companies/Organizations/${this.lastId}`
: `/api/StatisticsAnalysis/Companies/BuildingTypes/${this.lastId}`
);
this.tabledata = JSON.parse(JSON.stringify(this.data.allDate));
//console.log(this.tabledata) //console.log(this.tabledata)
if (this.zhiorbuild == "zhi") { if (this.zhiorbuild == "zhi") {
for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) { for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) {
this.buildingData.push(this.tabledata[0].buildingTypes[i].buildingTypeName) this.buildingData.push(
this.buildnumData.push(this.tabledata[0].buildingTypes[i].count) this.tabledata[0].buildingTypes[i].buildingTypeName
this.buildingTypeId.push(this.tabledata[0].buildingTypes[i].buildingTypeId) );
this.buildnumData.push(this.tabledata[0].buildingTypes[i].count);
this.buildingTypeId.push(
this.tabledata[0].buildingTypes[i].buildingTypeId
);
} }
} else { } else {
for (var i = 0; i < this.tabledata[0].organizations.length; i++) { for (var i = 0; i < this.tabledata[0].organizations.length; i++) {
this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName) this.zhiNameData.push(
this.zhiNumData.push(this.tabledata[0].organizations[i].count) this.tabledata[0].organizations[i].organizationName
this.organizationId.push(this.tabledata[0].organizations[i].organizationId) );
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.zhiorbuild=="zhi"?this.buildnumData:this.zhiNumData,this.zhiorbuild=="zhi"?this.buildingData:this.zhiNameData) this.tiaoshiPao = this.data.qipao(
this.tiaoshiPao,
this.zhiorbuild == "zhi" ? this.buildnumData : this.zhiNumData,
this.zhiorbuild == "zhi" ? this.buildingData : this.zhiNameData
);
//this.initCharts() //this.initCharts()
this.barEcharts() this.barEcharts();
} }
axisLabel = { axisLabel = {
interval: 0, interval: 0,
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color:'#000000' color: "#000000",
}, },
formatter:function(value) formatter: function (value) {
{
var ret = ""; //拼接加\n返回的类目项 var ret = ""; //拼接加\n返回的类目项
var maxLength = 2; //每项显示文字个数 var maxLength = 2; //每项显示文字个数
var valLength = value.length; //X轴类目项的文字个数 var valLength = value.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于3, if (rowN > 1) {
{ //如果类目项的文字大于3,
for (var i = 0; i < rowN; i++) { for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串 var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置 var start = i * maxLength; //开始截取的位置
@ -123,25 +157,26 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
ret += temp; //凭借最终的字符串 ret += temp; //凭借最终的字符串
} }
return ret; return ret;
} } else {
else {
return value; return value;
} }
} },
}//echarts两个字换行 }; //echarts两个字换行
topTextlabel = { topTextlabel = {
show: true, // 开启显示 show: true, // 开启显示
position: 'top', // 在上方显示 position: "top", // 在上方显示
distance: 10, // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。 distance: 10, // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。
verticalAlign: 'middle', verticalAlign: "middle",
textStyle: { // 数值样式 textStyle: {
color: 'black', // 数值样式
fontSize: 12 color: "black",
} fontSize: 12,
}//柱状图数值顶部显示 },
}; //柱状图数值顶部显示
tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, tableDataZhi = [
{ name: "浦东支队", number: "156", zhanbi: "3%" },
{ name: "黄浦支队", number: "144", zhanbi: "2.8%" }, { name: "黄浦支队", number: "144", zhanbi: "2.8%" },
{ name: "徐汇支队", number: "133", zhanbi: "2.1%" }, { name: "徐汇支队", number: "133", zhanbi: "2.1%" },
{ name: "长宁支队", number: "122", zhanbi: "1.6%" }, { name: "长宁支队", number: "122", zhanbi: "1.6%" },
@ -156,8 +191,10 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
{ name: "嘉定支队", number: "78", zhanbi: "0.6%" }, { name: "嘉定支队", number: "78", zhanbi: "0.6%" },
{ name: "松江支队", number: "75", zhanbi: "0.5%" }, { name: "松江支队", number: "75", zhanbi: "0.5%" },
{ name: "金山支队", number: "65", zhanbi: "0.4%" }, { name: "金山支队", number: "65", zhanbi: "0.4%" },
{name:"崇明支队",number:"55",zhanbi:"0.3%"} ] { name: "崇明支队", number: "55", zhanbi: "0.3%" },
tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, ];
tableDataZhong = [
{ name: "浦东中队", number: "156", zhanbi: "3%" },
{ name: "黄浦中队", number: "144", zhanbi: "2.8%" }, { name: "黄浦中队", number: "144", zhanbi: "2.8%" },
{ name: "徐汇中队", number: "133", zhanbi: "2.1%" }, { name: "徐汇中队", number: "133", zhanbi: "2.1%" },
{ name: "长宁中队", number: "122", zhanbi: "1.6%" }, { name: "长宁中队", number: "122", zhanbi: "1.6%" },
@ -172,108 +209,144 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
{ name: "嘉定中队", number: "78", zhanbi: "0.6%" }, { name: "嘉定中队", number: "78", zhanbi: "0.6%" },
{ name: "松江中队", number: "75", zhanbi: "0.5%" }, { name: "松江中队", number: "75", zhanbi: "0.5%" },
{ name: "金山中队", number: "65", zhanbi: "0.4%" }, { name: "金山中队", number: "65", zhanbi: "0.4%" },
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ] { name: "崇明中队", number: "55", zhanbi: "0.3%" },
zhiNameData = [] ];
zhiNumData = [] zhiNameData = [];
tiaoshiPao:any zhiNumData = [];
tiaoshiPao: any;
//气泡提示数据获取 //气泡提示数据获取
bianli() { bianli() {
var arrshuzu='['; var arrshuzu = "[";
if (this.zhiorbuild == "zhi") { if (this.zhiorbuild == "zhi") {
for (var i = 0; i < this.buildnumData.length; i++) { for (var i = 0; i < this.buildnumData.length; i++) {
arrshuzu+='{"value":'+this.buildnumData[i]+',"coord":['+i+','+this.buildnumData[i]+'],"name":'+'"'+this.buildingData[i]+'"'+'},' arrshuzu +=
'{"value":' +
this.buildnumData[i] +
',"coord":[' +
i +
"," +
this.buildnumData[i] +
'],"name":' +
'"' +
this.buildingData[i] +
'"' +
"},";
} }
} else { } else {
for (var i = 0; i < this.zhiNumData.length; i++) { for (var i = 0; i < this.zhiNumData.length; i++) {
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},' arrshuzu +=
'{"value":' +
this.zhiNumData[i] +
',"coord":[' +
i +
"," +
this.zhiNumData[i] +
'],"name":' +
'"' +
this.zhiNameData[i] +
'"' +
"},";
} }
} }
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
arrshuzu+=']' arrshuzu += "]";
this.tiaoshiPao=JSON.parse(arrshuzu) this.tiaoshiPao = JSON.parse(arrshuzu);
//return tishiPao //return tishiPao
} }
forArr =this.data.zuzhiorBuilding=="zhi"? [{id:'gaoceng',name:this.zhiNameData[0],echart:null}, forArr =
{id:'dixia',name:this.zhiNameData[1],echart:null}, this.data.zuzhiorBuilding == "zhi"
{id:'guidao',name:this.zhiNameData[2],echart:null}, ? [
{id:'huagong',name:this.zhiNameData[3],echart:null}, { id: "gaoceng", name: this.zhiNameData[0], echart: null },
{id:'chuguan',name:this.zhiNameData[4],echart:null}, { id: "dixia", name: this.zhiNameData[1], echart: null },
{id:'changfang',name:this.zhiNameData[5],echart:null}, { id: "guidao", name: this.zhiNameData[2], echart: null },
{id:'gujianzhu',name:this.zhiNameData[6],echart:null}, { id: "huagong", name: this.zhiNameData[3], echart: null },
{id:'shichang',name:this.zhiNameData[7],echart:null}, { id: "chuguan", name: this.zhiNameData[4], echart: null },
{id:'yiyuan',name:this.zhiNameData[8],echart:null}, { id: "changfang", name: this.zhiNameData[5], echart: null },
{id:'xuexiao',name:this.zhiNameData[9],echart:null}, { id: "gujianzhu", name: this.zhiNameData[6], echart: null },
{id:'binguan',name:this.zhiNameData[10],echart:null}, { id: "shichang", name: this.zhiNameData[7], echart: null },
{id:'yule',name:this.zhiNameData[11],echart:null}, { id: "yiyuan", name: this.zhiNameData[8], echart: null },
{id:'canyin',name:this.zhiNameData[12],echart:null}, { id: "xuexiao", name: this.zhiNameData[9], echart: null },
{id:'yingyuan',name:this.zhiNameData[13],echart:null}]: { id: "binguan", name: this.zhiNameData[10], echart: null },
[{id:'gaoceng',name:'高层',echart:null}, { id: "yule", name: this.zhiNameData[11], echart: null },
{id:'dixia',name:'地下',echart:null}, { id: "canyin", name: this.zhiNameData[12], echart: null },
{id:'guidao',name:'轨道交通',echart:null}, { id: "yingyuan", name: this.zhiNameData[13], echart: null },
{id:'huagong',name:'化工生产',echart:null}, ]
{id:'chuguan',name:'储罐类',echart:null}, : [
{id:'changfang',name:'厂房',echart:null}, { id: "gaoceng", name: "高层", echart: null },
{id:'gujianzhu',name:'古建筑',echart:null}, { id: "dixia", name: "地下", echart: null },
{id:'shichang',name:'商市场',echart:null}, { id: "guidao", name: "轨道交通", echart: null },
{id:'yiyuan',name:'医院',echart:null}, { id: "huagong", name: "化工生产", echart: null },
{id:'xuexiao',name:'学校',echart:null}, { id: "chuguan", name: "储罐类", echart: null },
{id:'binguan',name:'宾馆',echart:null}, { id: "changfang", name: "厂房", echart: null },
{id:'yule',name:'娱乐场所',echart:null}, { id: "gujianzhu", name: "古建筑", echart: null },
{id:'canyin',name:'餐饮业',echart:null}, { id: "shichang", name: "商市场", echart: null },
{id:'yingyuan',name:'影剧院',echart:null}, { id: "yiyuan", name: "医院", echart: null },
{id:'zhanlan',name:'展览建筑',echart:null}, { id: "xuexiao", name: "学校", echart: null },
{id:'suidao',name:'隧道',echart:null}] { id: "binguan", name: "宾馆", echart: null },
buildingData=[] { id: "yule", name: "娱乐场所", echart: null },
buildnumData=[] { id: "canyin", name: "餐饮业", echart: null },
indexBzt //顶部饼状图 { id: "yingyuan", name: "影剧院", echart: null },
{ id: "zhanlan", name: "展览建筑", echart: null },
{ id: "suidao", name: "隧道", echart: null },
];
buildingData = [];
buildnumData = [];
indexBzt; //顶部饼状图
/* 顶部饼状图 */ /* 顶部饼状图 */
initCharts() { initCharts() {
this.indexBzt = echarts.init(document.getElementById('pie'),'walden'); this.indexBzt = echarts.init(document.getElementById("pie"), "walden");
let options = { let options = {
title: { title: {
text: '新增单位统计(8900家)', text: "新增单位统计(8900家)",
left: 'center', left: "center",
top: "7%", top: "7%",
textStyle: { textStyle: {
fontSize:26 fontSize: 26,
} },
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: (params) => { formatter: (params) => {
return this.data.tableTooltip(this.zhiorbuild=="zhi"?this.data.buildingType:this.data.tableDataZhi,params.name) return this.data.tableTooltip(
this.zhiorbuild == "zhi"
? this.data.buildingType
: this.data.tableDataZhi,
params.name
);
}, },
position: this.data.tableTooltipNoShow2 position: this.data.tableTooltipNoShow2,
}, },
legend: { legend: {
orient: 'vertical', orient: "vertical",
right: 150, right: 150,
top: 80, top: 80,
textStyle: { textStyle: {
fontSize: 18, fontSize: 18,
color:"#000000" color: "#000000",
}, },
data:this.zhiorbuild=="zhi"? this.zhiNameData:this.buildingData data: this.zhiorbuild == "zhi" ? this.zhiNameData : this.buildingData,
}, },
series: [ series: [
{ {
name: '访问来源', name: "访问来源",
type: 'pie', type: "pie",
radius: '70%', radius: "70%",
center: ['50%', '60%'], center: ["50%", "60%"],
label: { label: {
show: true, show: true,
fontSize: 16, fontSize: 16,
formatter:'{b}{c}家\n{d|({d}%)}', formatter: "{b}{c}家\n{d|({d}%)}",
rich: { rich: {
d: { d: {
align: 'center', align: "center",
fontSize:16 fontSize: 16,
}
}, },
}, },
data:this.zhiorbuild=="zhi"? [ },
data:
this.zhiorbuild == "zhi"
? [
{ value: 500, name: this.zhiNameData[0] }, { value: 500, name: this.zhiNameData[0] },
{ value: 800, name: this.zhiNameData[1] }, { value: 800, name: this.zhiNameData[1] },
{ value: 900, name: this.zhiNameData[2] }, { value: 900, name: this.zhiNameData[2] },
@ -288,55 +361,55 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
{ value: 966, name: this.zhiNameData[11] }, { value: 966, name: this.zhiNameData[11] },
{ value: 789, name: this.zhiNameData[12] }, { value: 789, name: this.zhiNameData[12] },
{ value: 500, name: this.zhiNameData[13] }, { value: 500, name: this.zhiNameData[13] },
]:[ ]
{value: 500, name: '高层'}, : [
{value: 800, name: '地下'}, { value: 500, name: "高层" },
{value: 900, name: '轨道交通'}, { value: 800, name: "地下" },
{value: 800, name: '化工生产'}, { value: 900, name: "轨道交通" },
{value: 1200, name: '储罐类'}, { value: 800, name: "化工生产" },
{value: 1500, name: '厂房'}, { value: 1200, name: "储罐类" },
{value: 1400, name: '古建筑'}, { value: 1500, name: "厂房" },
{value: 600, name: '商市场'}, { value: 1400, name: "古建筑" },
{value: 568, name: '医院'}, { value: 600, name: "商市场" },
{value: 888, name: '学校'}, { value: 568, name: "医院" },
{value: 485, name: '宾馆'}, { value: 888, name: "学校" },
{value: 966, name: '娱乐场所'}, { value: 485, name: "宾馆" },
{value: 789, name: '餐饮业'}, { value: 966, name: "娱乐场所" },
{value: 500, name: '影剧院'}, { value: 789, name: "餐饮业" },
{value: 1025, name: '展览建筑'}, { value: 500, name: "影剧院" },
{value: 600, name: '隧道'} { value: 1025, name: "展览建筑" },
{ value: 600, name: "隧道" },
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, 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.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
}); });
this.indexBzt.setOption(options); this.indexBzt.setOption(options);
} }
//柱状图 //柱状图
tabledata tabledata;
asixLablehw = { asixLablehw = {
interval: 0, interval: 0,
textStyle: { textStyle: {
fontSize: 18, fontSize: 18,
color:'#000000' color: "#000000",
}, },
formatter:function(value) formatter: function (value) {
{
var ret = ""; //拼接加\n返回的类目项 var ret = ""; //拼接加\n返回的类目项
var maxLength = 2; //每项显示文字个数 var maxLength = 2; //每项显示文字个数
var valLength = value.length; //X轴类目项的文字个数 var valLength = value.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于3, if (rowN > 1) {
{ //如果类目项的文字大于3,
for (var i = 0; i < rowN; i++) { for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串 var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置 var start = i * maxLength; //开始截取的位置
@ -346,18 +419,17 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
ret += temp; //凭借最终的字符串 ret += temp; //凭借最终的字符串
} }
return ret; return ret;
} } else {
else {
return value; return value;
} }
} },
} };
asixLable = { asixLable = {
interval: 0, interval: 0,
rotate: 38, rotate: 38,
textStyle: { textStyle: {
fontSize: 15, fontSize: 15,
color:'#000000' color: "#000000",
}, },
/* formatter:function(value) /* formatter:function(value)
{ {
@ -381,12 +453,14 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
return value; return value;
} }
} */ } */
} };
barEcharts(){
this.forArr.forEach(item=>{ echarts = { echart: null };
let _this = this barEcharts() {
item.echart = echarts.init(document.getElementById('gaoceng'),'walden'); let item = echarts;
console.log("this.data.zuzhiorBuilding", this.forArr);
// this.forArr.forEach((item) => {
item.echart = echarts.init(document.getElementById("gaoceng"), "walden");
let option = { let option = {
title: { title: {
text: this.headname + `:总数(${this.tabledata[0].totalCount}`, text: this.headname + `:总数(${this.tabledata[0].totalCount}`,
@ -394,8 +468,8 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
top: -4, top: -4,
//bottom: '80%', //bottom: '80%',
textStyle: { textStyle: {
fontSize: 30 fontSize: 30,
} },
}, },
grid: { grid: {
containLabel: true, containLabel: true,
@ -403,100 +477,157 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
// top: 10 // top: 10
}, },
xAxis: { xAxis: {
id:this.zhiorbuild=="zhi"?this.buildingTypeId:this.organizationId, id:
type: 'category', this.zhiorbuild == "zhi" ? this.buildingTypeId : this.organizationId,
type: "category",
data: this.zhiorbuild == "zhi" ? this.buildingData : this.zhiNameData, data: this.zhiorbuild == "zhi" ? this.buildingData : this.zhiNameData,
axisLabel: this.padHw ? this.asixLablehw : this.asixLable, axisLabel: this.padHw ? this.asixLablehw : this.asixLable,
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { axisLabel: {
//this.axisLabel, //this.axisLabel,
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color:'#000000' color: "#000000",
} },
},
}
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: (params) => { formatter: (params) => {
return this.zhiorbuild=="zhi"?this.data.biaogeTishiZhi(params): this.data.biaogeTishida(params) return this.zhiorbuild == "zhi"
? this.data.biaogeTishiZhi(params)
: this.data.biaogeTishida(params);
}, },
position: this.data.tableTooltipNoShow2 position: this.data.tableTooltipNoShow2,
}, },
series: [{ series: [
{
data: this.zhiorbuild == "zhi" ? this.buildnumData : this.zhiNumData, data: this.zhiorbuild == "zhi" ? this.buildnumData : this.zhiNumData,
type: 'bar', type: "bar",
markPoint: { markPoint: {
data: this.tiaoshiPao data: this.tiaoshiPao,
}, },
backgroundStyle: { backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)' color: "rgba(220, 220, 220, 0.8)",
}, },
barWidth :'38', barWidth: "38",
//label: this.topTextlabel //label: this.topTextlabel
}] },
],
}; };
item.echart.setOption(option); item.echart.setOption(option);
item.echart.getZr().on('click', (params) => { item.echart.getZr().on("click", (params) => {
const pointInPixel = [params.offsetX, params.offsetY]; const pointInPixel = [params.offsetX, params.offsetY];
console.log(this.data.level) console.log(this.data.level);
if (item.echart.containPixel('grid',pointInPixel)){ if (item.echart.containPixel("grid", pointInPixel)) {
let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [
if(this.zhiorbuild=='zhi'){ params.offsetX,
if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].buildingTypes[xIndex].organizations.length>=1){ params.offsetY,
])[0];
if (this.zhiorbuild == "zhi") {
if (
(this.data.level == "0" || this.data.level == "1") &&
this.tabledata[0].buildingTypes[xIndex].organizations.length >= 1
) {
console.log("走这里了吗");
// 总队,支队跳转 // 总队,支队跳转
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'id':this.lastId,'zhuId':option.xAxis.id[xIndex],'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) this.router.navigate(
["/statisticanalysis/addUnit_one/addUnit_two_typeDetails"],
{
queryParams: {
organizationName: option.xAxis.data[xIndex],
buildingTypeName: this.headname,
id: this.lastId,
zhuId: option.xAxis.id[xIndex],
type: this.zhiorbuild == "zhi" ? "zhi" : "build",
},
} }
else{ );
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':this.lastId,'buildid':option.xAxis.id[xIndex]}}); } else {
this.router.navigate(["/statisticanalysis/CompangInfo"], {
queryParams: {
name: option.xAxis.data[xIndex],
type: 1,
jsid: this.lastId,
buildid: option.xAxis.id[xIndex],
},
});
} }
} else { } else {
if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ if (
(this.data.level == "0" || this.data.level == "1") &&
this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1
) {
//总队,支队跳转 //总队,支队跳转
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'id':this.lastId,'zhuId':option.xAxis.id[xIndex],'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) this.router.navigate(
["/statisticanalysis/addUnit_one/addUnit_two_typeDetails"],
{
queryParams: {
organizationName: option.xAxis.data[xIndex],
buildingTypeName: this.headname,
id: this.lastId,
zhuId: option.xAxis.id[xIndex],
type: this.zhiorbuild == "zhi" ? "zhi" : "build",
},
} }
else{ );
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.lastId}}); } else {
this.router.navigate(["/statisticanalysis/CompangInfo"], {
queryParams: {
name: option.xAxis.data[xIndex],
type: 1,
jsid: option.xAxis.id[xIndex],
buildid: this.lastId,
},
});
} }
} }
} }
}); });
}) // });
} }
//提示框表格 //提示框表格
tableTooltip(dataArr, title: string) { tableTooltip(dataArr, title: string) {
let data = dataArr let data = dataArr;
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+title+'</span></div>' var res =
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"; >'; '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' +
title +
"</span></div>";
res +=
'</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
res += '<thead style="font-size:18px;"><tr>'; res += '<thead style="font-size:18px;"><tr>';
res += '<td style="text-align:center;width:30%;">名称</td>'; res += '<td style="text-align:center;width:30%;">名称</td>';
res+='<td style="text-align:center;width:30%;">数量</td>' res += '<td style="text-align:center;width:30%;">数量</td>';
res+='<td style="text-align:center;width:30%;">总占比</td>' res += '<td style="text-align:center;width:30%;">总占比</td>';
res+='</tr></thead>' res += "</tr></thead>";
res+='<tbody>'; res += "<tbody>";
//var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>' //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.tableDataZhong.length; i++) { for (var i = 0; i < this.tableDataZhong.length; i++) {
res+='<tr>' res += "<tr>";
res+='<td style="text-align:center;">'+this.tableDataZhong[i].name+'</td>' res +=
res+='<td style="text-align:center;">'+this.tableDataZhong[i].number+'</td>' '<td style="text-align:center;">' +
res+='<td style="text-align:center;">'+this.tableDataZhong[i].zhanbi+'</td></tr>' this.tableDataZhong[i].name +
"</td>";
res +=
'<td style="text-align:center;">' +
this.tableDataZhong[i].number +
"</td>";
res +=
'<td style="text-align:center;">' +
this.tableDataZhong[i].zhanbi +
"</td></tr>";
} }
res+='</tbody>' res += "</tbody>";
res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>' res +=
res+='</table></div></div>' '<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>';
return res res += "</table></div></div>";
return res;
} }
//返回 //返回
backClick() { backClick() {
this.router.navigateByUrl('/statisticanalysis/addUnit_one') this.router.navigateByUrl("/statisticanalysis/addUnit_one");
} }
} }

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

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

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

@ -15,26 +15,8 @@
</div> </div>
</div> </div>
<div class="echartsbox"> <div class="echartsbox">
<!-- <div id="pie">
</div> -->
<div> <div>
<div class="publicCss" id="gaoceng"></div> <div class="publicCss" id="buildingTypeEcharts"></div>
<!-- <div class="publicCss" id="dixia"></div>
<div class="publicCss" id="guidao"></div>
<div class="publicCss" id="huagong"></div>
<div class="publicCss" id="chuguan"></div>
<div class="publicCss" id="changfang"></div>
<div class="publicCss" id="gujianzhu"></div>
<div class="publicCss" id="shichang"></div>
<div class="publicCss" id="yiyuan"></div>
<div class="publicCss" id="xuexiao"></div>
<div class="publicCss" id="binguan"></div>
<div class="publicCss" id="yule"></div>
<div class="publicCss" id="canyin"></div>
<div class="publicCss" id="yingyuan"></div>
<div class="publicCss" id="zhanlan"></div>
<div class="publicCss" id="suidao"></div> -->
</div> </div>
</div> </div>

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

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

34
src/app/tabbar/tabbar.component.html

@ -226,39 +226,7 @@
<span style="font-size: 13px;margin-left: 6px;">帮助文档下载中,请等待...</span> <span style="font-size: 13px;margin-left: 6px;">帮助文档下载中,请等待...</span>
</div> --> </div> -->
<!-- 帮助文档按钮 --> <!-- 帮助文档按钮 -->
<button mat-icon-button [matMenuTriggerFor]="appSetHelp" class="help" title="帮助">
<mat-icon>help</mat-icon>
</button>
<mat-menu #appSetHelp="matMenu" yPosition="below" xPosition="after">
<button mat-menu-item (click)='lookUpdate()'>
<mat-icon>update</mat-icon>
<span>查看更新内容</span>
</button>
<button mat-menu-item (click)="aFile('/assets/helpword/help.pdf','数字化预案编制管理平台手册.pdf')">
<mat-icon>save_alt</mat-icon>
<span>下载帮助文档</span>
</button>
<button mat-menu-item (click)="aFile('/assets/helpword/plantemplate.zip','V级文本预案模板.zip')">
<mat-icon>save_alt</mat-icon>
<span>V级文本预案模板</span>
</button>
<button mat-menu-item (click)="aFile('/assets/helpword/plancustom.zip','V级预案自定义.zip')">
<mat-icon>save_alt</mat-icon>
<span>V级预案自定义</span>
</button>
<button mat-menu-item (click)="aFile('/assets/helpword/planonlineedit.zip','V级在线编制.zip')">
<mat-icon>save_alt</mat-icon>
<span>V级在线编制</span>
</button>
<button mat-menu-item (click)="aFile('/assets/helpword/planonlineimport.zip','V级预案转在线导入.zip')">
<mat-icon>save_alt</mat-icon>
<span>V级预案转在线导入</span>
</button>
<button mat-menu-item (click)="aFile('/assets/helpword/keyunit.pdf','重点单位设置说明.pdf')">
<mat-icon>save_alt</mat-icon>
<span>重点单位设置说明</span>
</button>
</mat-menu>
<!-- 全屏 --> <!-- 全屏 -->
<button mat-button (click)="!isfullscreen?fullscreenToggle():closefullscreen()" class="fullscreen"> <button mat-button (click)="!isfullscreen?fullscreenToggle():closefullscreen()" class="fullscreen">
<ng-container *ngIf="!isfullscreen; else elseTemplate"> <ng-container *ngIf="!isfullscreen; else elseTemplate">

Loading…
Cancel
Save