shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]修改echarts报错

tianjin
邵佳豪 2 years ago
parent
acad95128e
commit
10bec5eb87
11 changed files with 1610 additions and 1281 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 805
      src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
  6. 24
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html
  7. 941
      src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts
  8. 325
      src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts
  9. 22
      src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html
  10. 720
      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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

805
src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
Unescape View File

@ -1,474 +1,607 @@
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[index]=this.date[index]+'月' this.date.forEach((value, index, array) => {
}) 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 +
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){ e.selectStartMonth +
this.date.push(this.tabledata[0][i].month) "-" +
this.dateNum.push(this.tabledata[0][i].count) 1 +
this.zongcount=this.zongcount+this.tabledata[0][i].count " " +
0 +
":" +
0 +
":" +
0;
let endTime =
e.selectTwoYear +
"-" +
e.selectEndMonth +
"-" +
31 +
" " +
23 +
":" +
59 +
":" +
59;
for (var i = 0; i < this.tabledata[0].length; i++) {
if (
this.tabledata[0][i].month >= this.serviceData.selectStartMonth &&
this.tabledata[0][i].month <= this.serviceData.selectEndMonth
) {
this.date.push(this.tabledata[0][i].month);
this.dateNum.push(this.tabledata[0][i].count);
this.zongcount = this.zongcount + this.tabledata[0][i].count;
} }
} }
//this.oneInit (this.date,this.dateNum) //this.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;
for(var i=0;i<this.tabledata[0].length;i++){ let endTime =
if(this.tabledata[0][i].year>=e.selectStartYear&&this.tabledata[0][i].year<=e.selectEndYear){ e.selectEndYear + "-" + 12 + "-" + 31 + " " + 23 + ":" + 59 + ":" + 59;
this.date2.push(this.tabledata[0][i].year) for (var i = 0; i < this.tabledata[0].length; i++) {
this.dateNum2.push(this.tabledata[0][i].count) if (
this.zongcount=this.zongcount+this.tabledata[0][i].count this.tabledata[0][i].year >= e.selectStartYear &&
this.tabledata[0][i].year <= e.selectEndYear
) {
this.date2.push(this.tabledata[0][i].year);
this.dateNum2.push(this.tabledata[0][i].count);
this.zongcount = this.zongcount + this.tabledata[0][i].count;
} }
} }
//this.oneInit (this.date,this.dateNum) //this.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":' +
this.dateNum[i] +
',"coord":[' +
i +
"," +
this.dateNum[i] +
'],"name":' +
'"' +
this.date[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);
//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,
left:40, left: 40,
right: 20, right: 20,
bottom: 20, bottom: 20,
}, },
// 标题 // 标题
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", //刻度线标签颜色
}, },
//设置坐标轴字体颜色和宽度 //设置坐标轴字体颜色和宽度
axisLine: { axisLine: {
lineStyle: { lineStyle: {
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);
} }
//剩余折线图 //剩余折线图
twoInit (date,dateNum,typeName) { xxx = { echart: null };
this.forArr.forEach((item,key) => { twoInit(date, dateNum, typeName) {
let that = this let item = this.xxx;
item.echart = echarts.init(document.getElementById('gaoceng'), 'skinUpp'); // this.forArr.forEach((item,key) => {
var option = {
grid: { item.echart = echarts.init(document.getElementById("gaoceng"), "skinUpp");
top: 90, var option = {
}, grid: {
// 标题 top: 90,
title: { },
text: this.headname+`：总数（${this.zongcount}）`, // 标题
top:-4, title: {
left: 'center', text: this.headname + `：总数（${this.zongcount}）`,
textStyle:{ top: -4,
//文字颜色 left: "center",
color:'#000', textStyle: {
fontSize:30 //文字颜色
} color: "#000",
fontSize: 30,
}, },
//提示框 },
tooltip: { //提示框
trigger: 'axis', tooltip: {
formatter: function (params) { trigger: "axis",
//console.log(params) formatter: function (params) {
return '时间:' + params[0].axisValueLabel + '<br>数量: ' + params[0].data; //console.log(params)
return (
"时间:" + params[0].axisValueLabel + "<br>数量: " + params[0].data
);
}, },
/* formatter: (params)=>{ /* formatter: (params)=>{
if(params[0].seriesName == "year"){ if(params[0].seriesName == "year"){
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
}else{ }else{
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轴
xAxis: {
type: "category",
data: date,
axisLabel: {
textStyle: {
fontSize: 16,
color: "#000000",
},
color: "#000", //刻度线标签颜色
}, },
// x轴 //设置坐标轴字体颜色和宽度
xAxis: { axisLine: {
type: 'category', lineStyle: {
data: date, color: "#000",
axisLabel: {
textStyle:{
fontSize :16,
color:'#000000'
},
color: "#000", //刻度线标签颜色
}, },
//设置坐标轴字体颜色和宽度 },
axisLine: { splitLine: {
lineStyle: { //分割线配置
color: "#000", show: true,
}, lineStyle: {
color: "#999",
}, },
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
}, },
// y轴 },
yAxis: { // y轴
//min:10, yAxis: {
type: 'value', //min:10,
name: '个', type: "value",
axisLabel: { name: "个",
textStyle:{ axisLabel: {
fontSize :16, textStyle: {
color:'#000000' fontSize: 16,
}, color: "#000000",
color: "#000" //刻度线标签颜色
}, },
//设置坐标轴字体颜色和宽度 color: "#000", //刻度线标签颜色
axisLine: {
lineStyle: {
color: "#000",
}
}
}, },
// 数据 //设置坐标轴字体颜色和宽度
series: [{ axisLine: {
name: typeName, lineStyle: {
type: 'line', color: "#000",
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
}, },
data: dateNum, },
} },
], // 数据
}; series: [
item.echart.setOption(option,true); {
item.echart.getZr().on('click',params=>{ name: typeName,
const pointInPixel= [params.offsetX, params.offsetY]; type: "line",
if (item.echart.containPixel('grid',pointInPixel)) { markPoint: {
let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; symbolSize: [65, 65],
/*事件处理代码书写位置*/ data: this.tiaoshiPao,
// console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name) },
if(option.series[0].name == "year"){ data: dateNum,
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':this.headname,'id':this.lastId,'type':this.zhiorbuild}}); },
],
};
item.echart.setOption(option, true);
item.echart.getZr().on("click", (params) => {
const pointInPixel = [params.offsetX, params.offsetY];
if (item.echart.containPixel("grid", pointInPixel)) {
let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY,
])[0];
/*事件处理代码书写位置*/
// console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name)
if (option.series[0].name == "year") {
this.router.navigate(
[
"/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails",
],
{
queryParams: {
year: this.date2[xIndex],
buildingType: this.headname,
id: this.lastId,
type: this.zhiorbuild,
},
}
);
/* this.selectType="month" /* this.selectType="month"
this.yeardatee=option.xAxis.data[xIndex] this.yeardatee=option.xAxis.data[xIndex]
this.getdata() */ this.getdata() */
} else {
}else{ if (
if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){ this.serviceData.level == "0" ||
//this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}}); this.serviceData.level == "1" ||
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.serviceData.level == "2"
) {
//this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}});
this.router.navigate(
["/statisticanalysis/addUnit_one/addUnit_two_type"],
{
queryParams: {
level: this.headname,
id: this.lastId,
type: this.zhiorbuild,
year: this.thisYear,
month: option.xAxis.data[xIndex],
},
} }
);
} }
} }
}); }
}) });
// })
} }
//返回 //返回
backClick(){ backClick() {
this.router.navigateByUrl('/statisticanalysis/addUnit_one') this.router.navigateByUrl("/statisticanalysis/addUnit_one");
} }
} }

24
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html
Unescape View File

@ -10,29 +10,17 @@
<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>
</div> </div>

941
src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts
View File

File diff suppressed because it is too large Load Diff

325
src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts
Unescape View File

@ -1,187 +1,230 @@
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) => {
//console.log(this.indexData) return { name: v.buildingTypeName, value: v.count, id: v.buildingTypeId };
this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden'); });
let options={ //console.log(this.indexData)
this.indexBzt = echarts.init(document.getElementById("indexBzt"), "walden");
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,
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) => {
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(
if(array[index].organizationId==this.echartsData.orid){ (value, index, array) => {
array.splice(index,1) if (array[index].organizationId == this.echartsData.orid) {
array.splice(index, 1);
}
if (array.length > 0) {
this.router.navigate(
[
"/statisticanalysis/buildingType_one/buildingType_two_reverse",
],
{ queryParams: { level: params.name, id: params.data.id } }
);
} else {
this.router.navigate(["/statisticanalysis/CompangInfo"], {
queryParams: {
name: params.name,
type: 1,
buildid: params.data.id,
},
});
}
} }
if(array.length>0){ );
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'],{queryParams:{'level':params.name,'id':params.data.id}}); } else {
}else{ console.log(222)
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}});
}
});
}else {
//中队跳转 //中队跳转
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}}); this.router.navigate(["/statisticanalysis/CompangInfo"], {
queryParams: {
name: params.name,
type: 1,
buildid: params.data.id,
},
});
} }
} }
} }
}); });
this.indexBzt.setOption(options); 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;">' +
this.res+='<thead style="font-size:18px;"><tr>'; datas.name +
this.res+='<td style="text-align:center;width:30%;">名称</td>'; "</span></div>";
this.res+='<td style="text-align:center;width:30%;">数量</td>' this.res +=
this.res+='<td style="text-align:center;width:30%;">总占比</td>' '</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+='</tr></thead>' this.res += '<thead style="font-size:18px;"><tr>';
this.res+='<tbody>'; this.res += '<td style="text-align:center;width:30%;">名称</td>';
//var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>' this.res += '<td style="text-align:center;width:30%;">数量</td>';
for(var i=0;i<this.tishiData.length;i++){ this.res += '<td style="text-align:center;width:30%;">总占比</td>';
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 this.res += "</tr></thead>";
allCountbi=allCountbi+countbi this.res += "<tbody>";
this.res+='<tr>' //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>' for (var i = 0; i < this.tishiData.length; i++) {
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>' countbi =
this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>' Math.round((this.tishiData[i].count / countall) * 10000) / 100.0;
} allCountbi = allCountbi + countbi;
this.res += "<tr>";
this.res+='</tbody>' this.res +=
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>' '<td style="text-align:center;">' +
this.res+='</table></div></div>' this.tishiData[i].organizationName +
return this.res "</td>";
this.res +=
} '<td style="text-align:center;">' + this.tishiData[i].count + "</td>";
this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>";
}
this.res += "</tbody>";
this.res +=
'<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' +
countall +
'</td><td style="text-align:center;">' +
allCountbi.toFixed(2) +
"%</td></tfoot>";
this.res += "</table></div></div>";
return this.res;
}
} }

22
src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html
Unescape View File

@ -15,27 +15,9 @@
</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>
</div> </div>

720
src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts
Unescape View File

@ -1,393 +1,477 @@
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(
private http: HttpClient,
private router: Router,
public data: EchartsDataService,
private route: ActivatedRoute
) {}
constructor(private http:HttpClient,private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { } forward() {
this.router.navigate([
forward(){ "/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(){
await this.data.getData(null,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`)
this.tabledata=JSON.parse(JSON.stringify(this.data.allDate))
for(var i=0;i<this.tabledata[0].organizations.length;i++){
this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName)
this.zhiNumData.push(this.tabledata[0].organizations[i].count)
this.organizationId.push(this.tabledata[0].organizations[i].organizationId)
} }
this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) });
this.barEcharts() }
async getechartsdata() {
await this.data.getData(
null,
`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`
);
this.tabledata = JSON.parse(JSON.stringify(this.data.allDate));
for (var i = 0; i < this.tabledata[0].organizations.length; i++) {
this.zhiNameData.push(
this.tabledata[0].organizations[i].organizationName
);
this.zhiNumData.push(this.tabledata[0].organizations[i].count);
this.organizationId.push(
this.tabledata[0].organizations[i].organizationId
);
}
this.tiaoshiPao = this.data.qipao(
this.tiaoshiPao,
this.zhiNumData,
this.zhiNameData
);
this.barEcharts();
} }
axisLabel = { 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) {
if (rowN > 1)//如果类目项的文字大于3, //如果类目项的文字大于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;//开始截取的位置 var end = start + maxLength; //结束截取的位置
var end = start + maxLength;//结束截取的位置 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 temp = value.substring(start, end) + "\n";
temp = value.substring(start, end) + "\n"; ret += temp; //凭借最终的字符串
ret += temp; //凭借最终的字符串 }
} return ret;
return ret; } else {
} return value;
else { }
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:"144",zhanbi:"2.8%"}, { name: "浦东支队", number: "156", zhanbi: "3%" },
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, { name: "黄浦支队", number: "144", zhanbi: "2.8%" },
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, { name: "徐汇支队", number: "133", zhanbi: "2.1%" },
{name:"静安支队",number:"120",zhanbi:"1.3%"}, { name: "长宁支队", number: "122", zhanbi: "1.6%" },
{name:"普陀支队",number:"100",zhanbi:"1.1%"}, { name: "静安支队", number: "120", zhanbi: "1.3%" },
{name:"虹口支队",number:"95",zhanbi:"1%"}, { name: "普陀支队", number: "100", zhanbi: "1.1%" },
{name:"杨浦支队",number:"90",zhanbi:"0.9%"}, { name: "虹口支队", number: "95", zhanbi: "1%" },
{name:"闵行支队",number:"88",zhanbi:"0.8%"}, { name: "杨浦支队", number: "90", zhanbi: "0.9%" },
{name:"宝山支队",number:"83",zhanbi:"0.7%"}, { name: "闵行支队", number: "88", zhanbi: "0.8%" },
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, { name: "宝山支队", number: "83", zhanbi: "0.7%" },
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, { name: "徐汇支队", number: "133", zhanbi: "2.1%" },
{name:"嘉定支队",number:"78",zhanbi:"0.6%"}, { name: "长宁支队", number: "122", zhanbi: "1.6%" },
{name:"松江支队",number:"75",zhanbi:"0.5%"}, { name: "嘉定支队", number: "78", zhanbi: "0.6%" },
{name:"金山支队",number:"65",zhanbi:"0.4%"}, { name: "松江支队", number: "75", zhanbi: "0.5%" },
{name:"崇明支队",number:"55",zhanbi:"0.3%"} ] { name: "金山支队", number: "65", zhanbi: "0.4%" },
tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, { name: "崇明支队", number: "55", zhanbi: "0.3%" },
{name:"黄浦中队",number:"144",zhanbi:"2.8%"}, ];
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, tableDataZhong = [
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, { name: "浦东中队", number: "156", zhanbi: "3%" },
{name:"静安中队",number:"120",zhanbi:"1.3%"}, { name: "黄浦中队", number: "144", zhanbi: "2.8%" },
{name:"普陀中队",number:"100",zhanbi:"1.1%"}, { name: "徐汇中队", number: "133", zhanbi: "2.1%" },
{name:"虹口中队",number:"95",zhanbi:"1%"}, { name: "长宁中队", number: "122", zhanbi: "1.6%" },
{name:"杨浦中队",number:"90",zhanbi:"0.9%"}, { name: "静安中队", number: "120", zhanbi: "1.3%" },
{name:"闵行中队",number:"88",zhanbi:"0.8%"}, { name: "普陀中队", number: "100", zhanbi: "1.1%" },
{name:"宝山中队",number:"83",zhanbi:"0.7%"}, { name: "虹口中队", number: "95", zhanbi: "1%" },
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, { name: "杨浦中队", number: "90", zhanbi: "0.9%" },
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, { name: "闵行中队", number: "88", zhanbi: "0.8%" },
{name:"嘉定中队",number:"78",zhanbi:"0.6%"}, { name: "宝山中队", number: "83", zhanbi: "0.7%" },
{name:"松江中队",number:"75",zhanbi:"0.5%"}, { name: "徐汇中队", number: "133", zhanbi: "2.1%" },
{name:"金山中队",number:"65",zhanbi:"0.4%"}, { name: "长宁中队", number: "122", zhanbi: "1.6%" },
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ] { name: "嘉定中队", number: "78", zhanbi: "0.6%" },
zhiNameData = [] { name: "松江中队", number: "75", zhanbi: "0.5%" },
zhiNumData = [] { name: "金山中队", number: "65", zhanbi: "0.4%" },
tiaoshiPao:any { name: "崇明中队", number: "55", zhanbi: "0.3%" },
];
zhiNameData = [];
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":' +
'"' +
this.zhiNameData[i] +
'"' +
"},";
}
arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
arrshuzu += "]";
this.tiaoshiPao = JSON.parse(arrshuzu);
} }
} }
forArr = [{id:'gaoceng',name:'高层',echart:null}, forArr = [
{id:'dixia',name:'地下',echart:null}, { id: "gaoceng", name: "高层", echart: null },
{id:'guidao',name:'轨道交通',echart:null}, { id: "dixia", name: "地下", echart: null },
{id:'huagong',name:'化工生产',echart:null}, { id: "guidao", name: "轨道交通", echart: null },
{id:'chuguan',name:'储罐类',echart:null}, { id: "huagong", name: "化工生产", echart: null },
{id:'changfang',name:'厂房',echart:null}, { id: "chuguan", name: "储罐类", echart: null },
{id:'gujianzhu',name:'古建筑',echart:null}, { id: "changfang", name: "厂房", echart: null },
{id:'shichang',name:'商市场',echart:null}, { id: "gujianzhu", name: "古建筑", echart: null },
{id:'yiyuan',name:'医院',echart:null}, { id: "shichang", name: "商市场", echart: null },
{id:'xuexiao',name:'学校',echart:null}, { id: "yiyuan", name: "医院", echart: null },
{id:'binguan',name:'宾馆',echart:null}, { id: "xuexiao", name: "学校", echart: null },
{id:'yule',name:'娱乐场所',echart:null}, { id: "binguan", name: "宾馆", echart: null },
{id:'canyin',name:'餐饮业',echart:null}, { id: "yule", name: "娱乐场所", echart: null },
{id:'yingyuan',name:'影剧院',echart:null}, { id: "canyin", name: "餐饮业", echart: null },
{id:'zhanlan',name:'展览建筑',echart:null}, { id: "yingyuan", name: "影剧院", echart: null },
{id:'suidao',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(){
this.forArr.forEach(item=>{ barEcharts() {
let _this = this let item = this.forArr.find((v) => this.headname.indexOf(v.name) !== -1);
item.echart = echarts.init(document.getElementById('gaoceng'),'walden'); item.echart = echarts.init(
let option = { document.getElementById("buildingTypeEcharts"),
title: { "walden"
text: this.headname+this.tabledata[0].totalCount, );
left: "center", let option = {
top:this.padHw?"18":"0", title: {
bottom:this.padHw?"0":'510', text: this.headname + this.tabledata[0].totalCount,
textStyle: { left: "center",
fontSize: 30 top: this.padHw ? "18" : "0",
} bottom: this.padHw ? "0" : "600",
textStyle: {
fontSize: 18,
},
},
grid: {
bottom: "15%",
},
xAxis: {
id: this.organizationId,
type: "category",
data: this.zhiNameData,
axisLabel: {
interval: 0,
rotate: 28,
textStyle: {
fontSize: 16,
color: "#000000",
}, },
grid: {
//top: 90,
bottom: '18%',
}, },
xAxis: { },
id:this.organizationId, yAxis: {
type: 'category', type: "value",
data: this.zhiNameData, axisLabel: {
axisLabel:{ textStyle: {
//this.axisLabel, fontSize: 16,
interval: 0, color: "#000000",
rotate:28,
textStyle:{
fontSize :16,
color:'#000000'
}
}
}, },
yAxis: { },
type: 'value', },
axisLabel:{ tooltip: {
//this.axisLabel, trigger: "item",
textStyle:{ formatter: (params) => {
fontSize :16, return this.tableTooltip(params);
color:'#000000' },
} position: this.data.tableTooltipNoShow2,
},
} series: [
{
data: this.zhiNumData,
type: "bar",
markPoint: {
data: this.tiaoshiPao,
}, },
tooltip: { backgroundStyle: {
trigger: 'item', color: "rgba(220, 220, 220, 0.8)",
formatter: (params)=>{
return this.tableTooltip(params)
},
position: this.data.tableTooltipNoShow2
}, },
series: [{ barWidth: "38",
data: this.zhiNumData, },
type: 'bar', ],
markPoint: { };
data:this.tiaoshiPao item.echart.setOption(option);
}, item.echart.getZr().on("click", (params) => {
//showBackground: true, const pointInPixel = [params.offsetX, params.offsetY];
backgroundStyle: { // console.log("点击图表", pointInPixel);
color: 'rgba(220, 220, 220, 0.8)' if (item.echart.containPixel("grid", pointInPixel)) {
let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY,
])[0];
// console.log("点击柱状图index", xIndex);
// console.log("this.data", this.data);
// console.log("this.tabledata", this.tabledata);
if (
(this.data.level == "0" || this.data.level == "1") &&
this.tabledata[0].organizations[xIndex].subOrganizations.length !== 0
) {
// 总队，支队跳转
this.router.navigate(
["/statisticanalysis/buildingType_one/buildingType_three_details"],
{
queryParams: {
organizationName: option.xAxis.data[xIndex],
buildingTypeName: this.headname,
buildId: this.buildId,
organizationId: option.xAxis.id[xIndex],
}, },
barWidth :'38', }
//label: this.topTextlabel );
}] return;
}; } else {
item.echart.setOption(option); this.router.navigate(["/statisticanalysis/CompangInfo"], {
item.echart.getZr().on('click', (params) => { queryParams: {
const pointInPixel= [params.offsetX, params.offsetY]; name: option.xAxis.data[xIndex],
if (item.echart.containPixel('grid',pointInPixel)) { type: 1,
let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; jsid: option.xAxis.id[xIndex],
/*事件处理代码书写位置*/ buildid: this.buildId,
if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ },
//总队，支队跳转 });
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'buildId':this.buildId,'organizationId':option.xAxis.id[xIndex]}})
}
else{
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.buildId}});
} }
//this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}});
} }
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;">' +
this.res+='<thead style="font-size:18px;"><tr>'; datas.name +
this.res+='<td style="text-align:center;width:30%;">名称</td>'; "</span></div>";
this.res+='<td style="text-align:center;width:30%;">数量</td>' this.res +=
this.res+='<td style="text-align:center;width:30%;">总占比</td>' '</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+='</tr></thead>' this.res += '<thead style="font-size:18px;"><tr>';
this.res+='<tbody>'; this.res += '<td style="text-align:center;width:30%;">名称</td>';
for(var i=0;i<this.tishiData.length;i++){ this.res += '<td style="text-align:center;width:30%;">数量</td>';
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 this.res += '<td style="text-align:center;width:30%;">总占比</td>';
allCountbi=allCountbi+countbi this.res += "</tr></thead>";
this.res+='<tr>' this.res += "<tbody>";
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>' for (var i = 0; i < this.tishiData.length; i++) {
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>' countbi =
this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>' Math.round((this.tishiData[i].count / countall) * 10000) / 100.0;
} allCountbi = allCountbi + countbi;
this.res += "<tr>";
this.res+='</tbody>' this.res +=
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>' '<td style="text-align:center;">' +
this.res+='</table></div></div>' this.tishiData[i].organizationName +
return this.res "</td>";
this.res +=
'<td style="text-align:center;">' + this.tishiData[i].count + "</td>";
this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>";
}
this.res += "</tbody>";
this.res +=
'<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' +
countall +
'</td><td style="text-align:center;">' +
allCountbi.toFixed(2) +
"%</td></tfoot>";
this.res += "</table></div></div>";
return this.res;
} }
} }

34
src/app/tabbar/tabbar.component.html
Unescape View File

@ -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">

Write Preview
Loading…
Cancel
Save