chenjingyu
4 years ago
50 changed files with 3491 additions and 108 deletions
@ -0,0 +1,4 @@ |
|||||||
|
<body> |
||||||
|
<!--饼状图 --> |
||||||
|
<div id="indexBzt" style="width: 100%;height: 100%;"></div> |
||||||
|
</body> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.tishi{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
span{ |
||||||
|
font-size: 25px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { AddUnitOneComponent } from './add-unit-one.component'; |
||||||
|
|
||||||
|
describe('AddUnitOneComponent', () => { |
||||||
|
let component: AddUnitOneComponent; |
||||||
|
let fixture: ComponentFixture<AddUnitOneComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ AddUnitOneComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(AddUnitOneComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,124 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
declare var echarts: any; |
||||||
|
@Component({ |
||||||
|
selector: 'app-add-unit-one', |
||||||
|
templateUrl: './add-unit-one.component.html', |
||||||
|
styleUrls: ['./add-unit-one.component.scss'] |
||||||
|
}) |
||||||
|
export class AddUnitOneComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.initCharts() |
||||||
|
},0) |
||||||
|
} |
||||||
|
/* 首页饼状图 */ |
||||||
|
initCharts(){ |
||||||
|
let indexBzt = echarts.init(document.getElementById('indexBzt')); |
||||||
|
let options={ |
||||||
|
title: { |
||||||
|
text: '新增单位统计（8900家）', |
||||||
|
left: 'center', |
||||||
|
top: "7%", |
||||||
|
textStyle: { |
||||||
|
fontSize:31 |
||||||
|
} |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.biaogeTishi(params.name) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
right: 150, |
||||||
|
top:80, |
||||||
|
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '访问来源', |
||||||
|
type: 'pie', |
||||||
|
radius: '60%', |
||||||
|
center: ['50%', '53%'], |
||||||
|
label:{ |
||||||
|
show:true, |
||||||
|
fontSize:13, |
||||||
|
formatter:'{b}{c}家\n{d|({d}%)}', |
||||||
|
rich: { |
||||||
|
d: { |
||||||
|
align: 'center', |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{value: 500, name: '高层'}, |
||||||
|
{value: 800, name: '地下'}, |
||||||
|
{value: 900, name: '轨道交通'}, |
||||||
|
{value: 800, name: '化工生产'}, |
||||||
|
{value: 1200, name: '储罐类'}, |
||||||
|
{value: 1500, name: '厂房'}, |
||||||
|
{value: 1400, name: '古建筑'}, |
||||||
|
{value: 600, name: '商市场'}, |
||||||
|
{value: 568, name: '医院'}, |
||||||
|
{value: 888, name: '学校'}, |
||||||
|
{value: 485, name: '宾馆'}, |
||||||
|
{value: 966, name: '娱乐场所'}, |
||||||
|
{value: 789, name: '餐饮业'}, |
||||||
|
{value: 500, name: '影剧院'}, |
||||||
|
{value: 1025, name: '展览建筑'}, |
||||||
|
{value: 600, name: '隧道'} |
||||||
|
], |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
indexBzt.on('click', (params) => { |
||||||
|
this.router.navigateByUrl('/statisticanalysis/addUnit_one/addUnit_two_type'); |
||||||
|
}); |
||||||
|
indexBzt.setOption(options); |
||||||
|
} |
||||||
|
biaogeTishi(biaotou:string){ |
||||||
|
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},' |
||||||
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
||||||
|
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' |
||||||
|
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' |
||||||
|
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' |
||||||
|
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
||||||
|
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' |
||||||
|
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' |
||||||
|
var jsonObj = JSON.parse(shuju); |
||||||
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>' |
||||||
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
|
res+='<thead><tr>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||||
|
res+='</tr></thead>' |
||||||
|
res+='<tbody>'; |
||||||
|
for(var i=0;i<jsonObj.length;i++){ |
||||||
|
res+='<tr>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>' |
||||||
|
} |
||||||
|
|
||||||
|
res+='</tbody>' |
||||||
|
res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
||||||
|
res+='</table></div></div>' |
||||||
|
return res |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="header"> |
||||||
|
<div class="queryField"> |
||||||
|
<mat-radio-group [(ngModel)]="selectType" (change)="dateChange()"> |
||||||
|
<mat-radio-button value="month">月</mat-radio-button> |
||||||
|
<mat-radio-button value="year" style="margin-left: 10px;">年</mat-radio-button> |
||||||
|
</mat-radio-group> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="queryField" *ngIf="selectType=='month'"> |
||||||
|
<form #form="ngForm" (ngSubmit)="monthSubmit(form.value)"> |
||||||
|
<span>开始年份:</span> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(ngModel)]="selectOneYear" name='selectOneYear'> |
||||||
|
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
<span>开始月份:</span> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(ngModel)]="selectStartMonth" name='selectStartMonth'> |
||||||
|
<mat-option *ngFor="let item of selectMonth" [value]="item">{{item}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
<span>结束年份:</span> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(ngModel)]="selectTwoYear" name='selectTwoYear'> |
||||||
|
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
<span>结束月份:</span> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(ngModel)]="selectEndMonth" name='selectEndMonth'> |
||||||
|
<mat-option *ngFor="let item of selectMonth" [value]="item">{{item}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
<button type="submit" mat-raised-button color="primary">查询</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="queryField" *ngIf="selectType=='year'"> |
||||||
|
<form #form2="ngForm" (ngSubmit)="yearSubmit(form2.value)"> |
||||||
|
<span>开始年份:</span> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(ngModel)]="selectStartYear" name='selectStartYear'> |
||||||
|
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
<span>结束年份:</span> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(ngModel)]="selectEndYear" name='selectEndYear'> |
||||||
|
<mat-option *ngFor="let item of years" [value]="item">{{item}}</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
<button type="submit" mat-raised-button color="primary">查询</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- <div class="fixedCss"> |
||||||
|
<button mat-raised-button color="primary" (click)='toggleTrue()'>横向查询</button> |
||||||
|
<button mat-raised-button color="primary" style="margin-left: 10px;" (click)='toggleFalse()'>纵向查询</button> |
||||||
|
</div> --> |
||||||
|
<div class="btnbox"> |
||||||
|
<button mat-stroked-button (click)="forward()">类型统计</button> |
||||||
|
<button mat-stroked-button (click)="reverse()">区间选择</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="echartsbox"> |
||||||
|
<div id="Line"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<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> |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 92%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.echartsbox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
#Line{ |
||||||
|
width: 50%; |
||||||
|
height: 420px; |
||||||
|
margin: 50px auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.publicCss{ |
||||||
|
height: 350px; |
||||||
|
width: 50%; |
||||||
|
display: inline-block; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
//头部搜索栏 |
||||||
|
.header { |
||||||
|
border-bottom: 1px solid #999; |
||||||
|
height: 80px; |
||||||
|
min-height: 81px;; |
||||||
|
box-sizing: border-box; |
||||||
|
// padding: 0 15px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items:center; |
||||||
|
justify-content:center; |
||||||
|
.queryField { |
||||||
|
margin: 0 10px; |
||||||
|
font-size: 14px; |
||||||
|
.mat-form-field { |
||||||
|
width: 130px; |
||||||
|
max-height: 50px;; |
||||||
|
margin: 0 15px 0 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
.btnbox{ |
||||||
|
height: 80px; |
||||||
|
display: flex; |
||||||
|
flex-direction:column; |
||||||
|
justify-content: space-around; |
||||||
|
position: fixed; |
||||||
|
top: 64px; |
||||||
|
right: 4%; |
||||||
|
width: 88px; |
||||||
|
button{ |
||||||
|
width: 88px; |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { AddUnitTwoTimeComponent } from './add-unit-two-time.component'; |
||||||
|
|
||||||
|
describe('AddUnitTwoTimeComponent', () => { |
||||||
|
let component: AddUnitTwoTimeComponent; |
||||||
|
let fixture: ComponentFixture<AddUnitTwoTimeComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ AddUnitTwoTimeComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(AddUnitTwoTimeComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,296 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import { EchartsDataService } from '../../echarts-data.service'; |
||||||
|
declare var echarts: any; |
||||||
|
@Component({ |
||||||
|
selector: 'app-add-unit-two-time', |
||||||
|
templateUrl: './add-unit-two-time.component.html', |
||||||
|
styleUrls: ['./add-unit-two-time.component.scss'] |
||||||
|
}) |
||||||
|
export class AddUnitTwoTimeComponent implements OnInit { |
||||||
|
forward(){ |
||||||
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type']) |
||||||
|
} |
||||||
|
reverse(){ |
||||||
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) |
||||||
|
} |
||||||
|
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.dateInit () |
||||||
|
setTimeout(() => { |
||||||
|
this.oneInit (this.date,this.dateNum) |
||||||
|
this.twoInit (this.date,this.dateNum,'year') |
||||||
|
}, 0); |
||||||
|
} |
||||||
|
|
||||||
|
selectType:string = 'month'; //选择当前的 查询类型 按月/年
|
||||||
|
|
||||||
|
//查询数据
|
||||||
|
years:any = [] |
||||||
|
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
||||||
|
|
||||||
|
//日期初始化
|
||||||
|
dateInit () { |
||||||
|
let date = (new Date()).getFullYear() |
||||||
|
for (let i=date; i>=date-10;i--) { |
||||||
|
this.years.unshift(i) |
||||||
|
} |
||||||
|
} |
||||||
|
selectOneYear:any = (new Date()).getFullYear() //开始年份
|
||||||
|
selectTwoYear:any = (new Date()).getFullYear() //结束年份
|
||||||
|
selectStartMonth:any = 1 //开始月份
|
||||||
|
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
|
||||||
|
//按月查询
|
||||||
|
monthSubmit (e) { |
||||||
|
if (e.selectTwoYear > e.selectOneYear) { |
||||||
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
||||||
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
||||||
|
console.log(startTime) |
||||||
|
console.log(endTime) |
||||||
|
} else if (e.selectTwoYear === e.selectOneYear) { |
||||||
|
if(e.selectEndMonth >= e.selectStartMonth) { |
||||||
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
||||||
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
||||||
|
console.log(startTime) |
||||||
|
console.log(endTime) |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择正确时间区段','确定',config); |
||||||
|
} |
||||||
|
}else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择正确时间区段','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
selectStartYear:any = (new Date()).getFullYear() //开始年份
|
||||||
|
selectEndYear:any = (new Date()).getFullYear() //结束年份
|
||||||
|
//按年查询
|
||||||
|
yearSubmit (e) { |
||||||
|
if (e.selectEndYear >= e.selectStartYear) { |
||||||
|
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
||||||
|
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
||||||
|
console.log(startTime) |
||||||
|
console.log(endTime) |
||||||
|
} else { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('请选择正确时间区段','确定',config); |
||||||
|
} |
||||||
|
} |
||||||
|
//年或月点击
|
||||||
|
dateChange(){ |
||||||
|
this.forArr.forEach(item => { |
||||||
|
item.echart.dispose() |
||||||
|
}) |
||||||
|
|
||||||
|
if(this.selectType == "year"){ |
||||||
|
this.oneInit(this.date2,this.dateNum2) |
||||||
|
this.twoInit(this.date2,this.dateNum2,'year') |
||||||
|
} |
||||||
|
if(this.selectType == "month"){ |
||||||
|
this.oneInit(this.date,this.dateNum) |
||||||
|
this.twoInit(this.date,this.dateNum,'month') |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
forArr = [{id:'gaoceng',name:'高层',echart:null}, |
||||||
|
{id:'dixia',name:'地下',echart:null}, |
||||||
|
{id:'guidao',name:'轨道交通',echart:null}, |
||||||
|
{id:'huagong',name:'化工生产',echart:null}, |
||||||
|
{id:'chuguan',name:'储罐类',echart:null}, |
||||||
|
{id:'changfang',name:'厂房',echart:null}, |
||||||
|
{id:'gujianzhu',name:'古建筑',echart:null}, |
||||||
|
{id:'shichang',name:'商市场',echart:null}, |
||||||
|
{id:'yiyuan',name:'医院',echart:null}, |
||||||
|
{id:'xuexiao',name:'学校',echart:null}, |
||||||
|
{id:'binguan',name:'宾馆',echart:null}, |
||||||
|
{id:'yule',name:'娱乐场所',echart:null}, |
||||||
|
{id:'canyin',name:'餐饮业',echart:null}, |
||||||
|
{id:'yingyuan',name:'影剧院',echart:null}, |
||||||
|
{id:'zhanlan',name:'展览建筑',echart:null}, |
||||||
|
{id:'suidao',name:'隧道',echart:null}] |
||||||
|
|
||||||
|
|
||||||
|
date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] |
||||||
|
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] |
||||||
|
|
||||||
|
date2 = ['2019', '2020'] |
||||||
|
dateNum2 = [220, 180] |
||||||
|
|
||||||
|
//新增数量统计
|
||||||
|
oneInit (date,dateNum) { |
||||||
|
var chartQusj = echarts.init(document.getElementById('Line'), 'skinUpp'); |
||||||
|
var option = { |
||||||
|
grid: { |
||||||
|
top: 70, |
||||||
|
left:40, |
||||||
|
right: 20, |
||||||
|
bottom: 20, |
||||||
|
}, |
||||||
|
// 标题
|
||||||
|
title: { |
||||||
|
text: '新增数量统计', |
||||||
|
top: -4, |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
//文字颜色
|
||||||
|
color:'#000', |
||||||
|
fontSize: 22, |
||||||
|
} |
||||||
|
}, |
||||||
|
//提示框
|
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.serviceData.tableTooltip(this.serviceData.buildingType,params[0].name) |
||||||
|
}, |
||||||
|
position:this.serviceData.tableTooltipNoShow |
||||||
|
}, |
||||||
|
// x轴
|
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: date, |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: {//分割线配置
|
||||||
|
show:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#999', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// y轴
|
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
name: '个', |
||||||
|
axisLabel: { |
||||||
|
color: "#000" //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 数据
|
||||||
|
series: [{ |
||||||
|
name: '新增数量', |
||||||
|
type: 'line', |
||||||
|
data: dateNum, |
||||||
|
} |
||||||
|
], |
||||||
|
} |
||||||
|
chartQusj.setOption(option); |
||||||
|
} |
||||||
|
|
||||||
|
//剩余折线图
|
||||||
|
twoInit (date,dateNum,typeName) { |
||||||
|
this.forArr.forEach((item,key) => { |
||||||
|
let that = this |
||||||
|
item.echart = echarts.init(document.getElementById(item.id), 'skinUpp'); |
||||||
|
var option = { |
||||||
|
grid: { |
||||||
|
top: 50, |
||||||
|
left:40, |
||||||
|
right: 20, |
||||||
|
bottom: 20, |
||||||
|
}, |
||||||
|
// 标题
|
||||||
|
title: { |
||||||
|
text: item.name, |
||||||
|
top: -4, |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
//文字颜色
|
||||||
|
color:'#000', |
||||||
|
} |
||||||
|
}, |
||||||
|
//提示框
|
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) |
||||||
|
} |
||||||
|
}, |
||||||
|
// x轴
|
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: date, |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: {//分割线配置
|
||||||
|
show:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#999', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// y轴
|
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
name: '个', |
||||||
|
axisLabel: { |
||||||
|
color: "#000" //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 数据
|
||||||
|
series: [{ |
||||||
|
name: typeName, |
||||||
|
type: 'line', |
||||||
|
data: dateNum, |
||||||
|
} |
||||||
|
], |
||||||
|
}; |
||||||
|
item.echart.setOption(option,true); |
||||||
|
// item.echart.on('click', (params) => {
|
||||||
|
// console.log(params)
|
||||||
|
// });
|
||||||
|
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]) |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="btnbox"> |
||||||
|
<button mat-stroked-button (click)="forward()">类型查询</button> |
||||||
|
<button mat-stroked-button (click)="reverse()">区间选择</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="echartsbox"> |
||||||
|
<div id="barEchart"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 92%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.topbox{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
min-height: 80px; |
||||||
|
border-bottom: 1px gray solid; |
||||||
|
.btnbox{ |
||||||
|
height: 80px; |
||||||
|
display: flex; |
||||||
|
flex-direction:column; |
||||||
|
justify-content: space-around; |
||||||
|
position: fixed; |
||||||
|
top: 64px; |
||||||
|
right: 4%; |
||||||
|
width: 88px; |
||||||
|
button{ |
||||||
|
width: 88px; |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.echartsbox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
#barEchart{ |
||||||
|
width: 100%; |
||||||
|
height: 350px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { AddUnitTwoTypeDetailsComponent } from './add-unit-two-type-details.component'; |
||||||
|
|
||||||
|
describe('AddUnitTwoTypeDetailsComponent', () => { |
||||||
|
let component: AddUnitTwoTypeDetailsComponent; |
||||||
|
let fixture: ComponentFixture<AddUnitTwoTypeDetailsComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ AddUnitTwoTypeDetailsComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(AddUnitTwoTypeDetailsComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
import { ActivatedRoute } from '@angular/router'; |
||||||
|
declare var echarts: any; |
||||||
|
@Component({ |
||||||
|
selector: 'app-add-unit-two-type-details', |
||||||
|
templateUrl: './add-unit-two-type-details.component.html', |
||||||
|
styleUrls: ['./add-unit-two-type-details.component.scss'] |
||||||
|
}) |
||||||
|
export class AddUnitTwoTypeDetailsComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(public route: ActivatedRoute,private router: Router) { } |
||||||
|
forward(){ |
||||||
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type']) |
||||||
|
} |
||||||
|
reverse(){ |
||||||
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) |
||||||
|
} |
||||||
|
|
||||||
|
organizationName:String |
||||||
|
buildingTypeName:String |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.route.queryParams.subscribe(params => { |
||||||
|
this.organizationName = params['organizationName']; |
||||||
|
this.buildingTypeName = params['buildingTypeName']; |
||||||
|
}); |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.detailEcharts() |
||||||
|
}) |
||||||
|
} |
||||||
|
topTextlabel = { |
||||||
|
show: true, // 开启显示
|
||||||
|
position: 'top', // 在上方显示
|
||||||
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
|
verticalAlign: 'middle', |
||||||
|
textStyle: { // 数值样式
|
||||||
|
color: 'black', |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
}//柱状图数值顶部显示
|
||||||
|
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] |
||||||
|
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] |
||||||
|
detailEcharts(){ |
||||||
|
var detailPlanEchart = echarts.init(document.getElementById('barEchart'));
|
||||||
|
var option = { |
||||||
|
title: { |
||||||
|
text: this.buildingTypeName + '(' +this.organizationName + ')', |
||||||
|
left: "center", |
||||||
|
textStyle: { |
||||||
|
fontSize: 28 |
||||||
|
} |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.zhongNameData, |
||||||
|
// axisLabel: this.axisLabel
|
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(params) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: this.zhongNumData, |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
barWidth :'58', |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0.8)' |
||||||
|
}, |
||||||
|
label: this.topTextlabel |
||||||
|
}] |
||||||
|
}; |
||||||
|
detailPlanEchart.setOption(option); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
tableTooltip(params:any){ |
||||||
|
var data = [ |
||||||
|
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} |
||||||
|
] |
||||||
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>' |
||||||
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
|
res+='<thead><tr>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||||
|
res+='</tr></thead>' |
||||||
|
res+='<tbody>'; |
||||||
|
for(var i=0;i<data.length;i++){ |
||||||
|
res+='<tr>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>' |
||||||
|
} |
||||||
|
|
||||||
|
res+='</tbody>' |
||||||
|
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
|
||||||
|
res+='</table></div></div>' |
||||||
|
return res |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="btnbox"> |
||||||
|
<button mat-stroked-button (click)="forward()">类型统计</button> |
||||||
|
<button mat-stroked-button (click)="reverse()">区间选择</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="echartsbox"> |
||||||
|
<div id="pie"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<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> |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 92%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.topbox{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
min-height: 80px; |
||||||
|
border-bottom: 1px gray solid; |
||||||
|
.btnbox{ |
||||||
|
height: 80px; |
||||||
|
display: flex; |
||||||
|
flex-direction:column; |
||||||
|
justify-content: space-around; |
||||||
|
position: fixed; |
||||||
|
top: 64px; |
||||||
|
right: 4%; |
||||||
|
width: 88px; |
||||||
|
button{ |
||||||
|
width: 88px; |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.echartsbox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
#pie{ |
||||||
|
width: 100%; |
||||||
|
height: 450px; |
||||||
|
} |
||||||
|
} |
||||||
|
.publicCss{ |
||||||
|
height: 350px; |
||||||
|
width: 50%; |
||||||
|
display: inline-block; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { AddUnitTwoTypeStatisticsComponent } from './add-unit-two-type-statistics.component'; |
||||||
|
|
||||||
|
describe('AddUnitTwoTypeStatisticsComponent', () => { |
||||||
|
let component: AddUnitTwoTypeStatisticsComponent; |
||||||
|
let fixture: ComponentFixture<AddUnitTwoTypeStatisticsComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ AddUnitTwoTypeStatisticsComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(AddUnitTwoTypeStatisticsComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,297 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
declare var echarts: any; |
||||||
|
@Component({ |
||||||
|
selector: 'app-add-unit-two-type-statistics', |
||||||
|
templateUrl: './add-unit-two-type-statistics.component.html', |
||||||
|
styleUrls: ['./add-unit-two-type-statistics.component.scss'] |
||||||
|
}) |
||||||
|
export class AddUnitTwoTypeStatisticsComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router) { } |
||||||
|
|
||||||
|
forward(){ |
||||||
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type']) |
||||||
|
} |
||||||
|
reverse(){ |
||||||
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) |
||||||
|
} |
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.initCharts() |
||||||
|
this.barEcharts() |
||||||
|
},0) |
||||||
|
} |
||||||
|
|
||||||
|
axisLabel = { |
||||||
|
interval: 0,
|
||||||
|
formatter:function(value)
|
||||||
|
{
|
||||||
|
var ret = "";//拼接加\n返回的类目项
|
||||||
|
var maxLength = 2;//每项显示文字个数
|
||||||
|
var valLength = value.length;//X轴类目项的文字个数
|
||||||
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||||||
|
if (rowN > 1)//如果类目项的文字大于3,
|
||||||
|
{
|
||||||
|
for (var i = 0; i < rowN; i++) {
|
||||||
|
var temp = "";//每次截取的字符串
|
||||||
|
var start = i * maxLength;//开始截取的位置
|
||||||
|
var end = start + maxLength;//结束截取的位置
|
||||||
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||||
|
temp = value.substring(start, end) + "\n";
|
||||||
|
ret += temp; //凭借最终的字符串
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}//echarts两个字换行
|
||||||
|
|
||||||
|
topTextlabel = { |
||||||
|
show: true, // 开启显示
|
||||||
|
position: 'top', // 在上方显示
|
||||||
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
|
verticalAlign: 'middle', |
||||||
|
textStyle: { // 数值样式
|
||||||
|
color: 'black', |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
}//柱状图数值顶部显示
|
||||||
|
|
||||||
|
tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, |
||||||
|
{name:"黄埔支队",number:"144",zhanbi:"2.8%"}, |
||||||
|
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"静安支队",number:"120",zhanbi:"1.3%"}, |
||||||
|
{name:"普陀支队",number:"100",zhanbi:"1.1%"}, |
||||||
|
{name:"虹口支队",number:"95",zhanbi:"1%"}, |
||||||
|
{name:"杨浦支队",number:"90",zhanbi:"0.9%"}, |
||||||
|
{name:"闵行支队",number:"88",zhanbi:"0.8%"}, |
||||||
|
{name:"宝山支队",number:"83",zhanbi:"0.7%"}, |
||||||
|
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"嘉定支队",number:"78",zhanbi:"0.6%"}, |
||||||
|
{name:"松江支队",number:"75",zhanbi:"0.5%"}, |
||||||
|
{name:"金山支队",number:"65",zhanbi:"0.4%"}, |
||||||
|
{name:"崇明支队",number:"55",zhanbi:"0.3%"} ] |
||||||
|
tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, |
||||||
|
{name:"黄埔中队",number:"144",zhanbi:"2.8%"}, |
||||||
|
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"静安中队",number:"120",zhanbi:"1.3%"}, |
||||||
|
{name:"普陀中队",number:"100",zhanbi:"1.1%"}, |
||||||
|
{name:"虹口中队",number:"95",zhanbi:"1%"}, |
||||||
|
{name:"杨浦中队",number:"90",zhanbi:"0.9%"}, |
||||||
|
{name:"闵行中队",number:"88",zhanbi:"0.8%"}, |
||||||
|
{name:"宝山中队",number:"83",zhanbi:"0.7%"}, |
||||||
|
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"嘉定中队",number:"78",zhanbi:"0.6%"}, |
||||||
|
{name:"松江中队",number:"75",zhanbi:"0.5%"}, |
||||||
|
{name:"金山中队",number:"65",zhanbi:"0.4%"}, |
||||||
|
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ] |
||||||
|
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
||||||
|
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] |
||||||
|
forArr = [{id:'gaoceng',name:'高层'}, |
||||||
|
{id:'dixia',name:'地下'}, |
||||||
|
{id:'guidao',name:'轨道交通'}, |
||||||
|
{id:'huagong',name:'化工生产'}, |
||||||
|
{id:'chuguan',name:'储罐类'}, |
||||||
|
{id:'changfang',name:'厂房'}, |
||||||
|
{id:'gujianzhu',name:'古建筑'}, |
||||||
|
{id:'shichang',name:'商市场'}, |
||||||
|
{id:'yiyuan',name:'医院'}, |
||||||
|
{id:'xuexiao',name:'学校'}, |
||||||
|
{id:'binguan',name:'宾馆'}, |
||||||
|
{id:'yule',name:'娱乐场所'}, |
||||||
|
{id:'canyin',name:'餐饮业'}, |
||||||
|
{id:'yingyuan',name:'影剧院'}, |
||||||
|
{id:'zhanlan',name:'展览建筑'}, |
||||||
|
{id:'suidao',name:'隧道'}] |
||||||
|
|
||||||
|
/* 顶部饼状图 */ |
||||||
|
initCharts(){ |
||||||
|
let indexBzt = echarts.init(document.getElementById('pie')); |
||||||
|
let options={ |
||||||
|
title: { |
||||||
|
text: '新增单位统计（8900家）', |
||||||
|
left: 'center', |
||||||
|
top: "7%", |
||||||
|
textStyle: { |
||||||
|
fontSize:26 |
||||||
|
} |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(this.tableDataZhi,params.name) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0', |
||||||
|
position: function (point, params, dom, rect, size) { |
||||||
|
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||||||
|
// 提示框位置
|
||||||
|
var x = 0; // x坐标位置
|
||||||
|
var y = 0; // y坐标位置
|
||||||
|
|
||||||
|
// 当前鼠标位置
|
||||||
|
var pointX = point[0]; |
||||||
|
var pointY = point[1]; |
||||||
|
|
||||||
|
// 外层div大小
|
||||||
|
// var viewWidth = size.viewSize[0];
|
||||||
|
// var viewHeight = size.viewSize[1];
|
||||||
|
|
||||||
|
// 提示框大小
|
||||||
|
var boxWidth = size.contentSize[0]; |
||||||
|
var boxHeight = size.contentSize[1]; |
||||||
|
|
||||||
|
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||||||
|
if (boxWidth > pointX) { |
||||||
|
x = 35; |
||||||
|
} else { // 左边放的下
|
||||||
|
x = pointX + 80; |
||||||
|
} |
||||||
|
|
||||||
|
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||||||
|
if (boxHeight > pointY) { |
||||||
|
y = 65; |
||||||
|
} else { // 上边放得下
|
||||||
|
y = pointY - boxHeight; |
||||||
|
} |
||||||
|
|
||||||
|
return [pointX, pointY]; |
||||||
|
} |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
right: 150, |
||||||
|
top:80, |
||||||
|
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '访问来源', |
||||||
|
type: 'pie', |
||||||
|
radius: '60%', |
||||||
|
center: ['50%', '60%'], |
||||||
|
label:{ |
||||||
|
show:true, |
||||||
|
fontSize:13, |
||||||
|
formatter:'{b}{c}家\n{d|({d}%)}', |
||||||
|
rich: { |
||||||
|
d: { |
||||||
|
align: 'center', |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{value: 500, name: '高层'}, |
||||||
|
{value: 800, name: '地下'}, |
||||||
|
{value: 900, name: '轨道交通'}, |
||||||
|
{value: 800, name: '化工生产'}, |
||||||
|
{value: 1200, name: '储罐类'}, |
||||||
|
{value: 1500, name: '厂房'}, |
||||||
|
{value: 1400, name: '古建筑'}, |
||||||
|
{value: 600, name: '商市场'}, |
||||||
|
{value: 568, name: '医院'}, |
||||||
|
{value: 888, name: '学校'}, |
||||||
|
{value: 485, name: '宾馆'}, |
||||||
|
{value: 966, name: '娱乐场所'}, |
||||||
|
{value: 789, name: '餐饮业'}, |
||||||
|
{value: 500, name: '影剧院'}, |
||||||
|
{value: 1025, name: '展览建筑'}, |
||||||
|
{value: 600, name: '隧道'} |
||||||
|
], |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
indexBzt.on('click', (params) => { |
||||||
|
// this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
|
||||||
|
}); |
||||||
|
indexBzt.setOption(options); |
||||||
|
} |
||||||
|
//柱状图
|
||||||
|
barEcharts(){ |
||||||
|
this.forArr.forEach(item=>{ |
||||||
|
let _this = this |
||||||
|
let addEchart = echarts.init(document.getElementById(item.id)); |
||||||
|
let option = { |
||||||
|
title: { |
||||||
|
text: item.name, |
||||||
|
left: "center", |
||||||
|
top: "15", |
||||||
|
textStyle: { |
||||||
|
fontSize: 23 |
||||||
|
} |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.zhiNameData, |
||||||
|
axisLabel: this.axisLabel |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(this.tableDataZhong,params.name) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: this.zhiNumData, |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0.8)' |
||||||
|
}, |
||||||
|
barWidth :'28', |
||||||
|
label: this.topTextlabel |
||||||
|
}] |
||||||
|
}; |
||||||
|
addEchart.setOption(option); |
||||||
|
addEchart.on('click', (params) => { |
||||||
|
this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':params.name,'buildingTypeName':item.name}}) |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
//提示框表格
|
||||||
|
tableTooltip(dataArr,title:string){ |
||||||
|
let data = dataArr |
||||||
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:26px;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; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
|
res+='<thead><tr>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||||
|
res+='</tr></thead>' |
||||||
|
res+='<tbody>'; |
||||||
|
for(var i=0;i<data.length;i++){ |
||||||
|
res+='<tr>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>' |
||||||
|
} |
||||||
|
|
||||||
|
res+='</tbody>' |
||||||
|
res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
||||||
|
res+='</table></div></div>' |
||||||
|
return res |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -1 +1,4 @@ |
|||||||
<p>building-type-one works!</p> |
<body> |
||||||
|
<!--饼状图 --> |
||||||
|
<div id="indexBzt" style="width: 100%;height: 100%;"></div> |
||||||
|
</body> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.tishi{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
span{ |
||||||
|
font-size: 25px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="btnbox"> |
||||||
|
<button mat-stroked-button (click)="forward()">正向查询</button> |
||||||
|
<button mat-stroked-button (click)="reverse()">反向查询</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="echartsbox"> |
||||||
|
<div id="barEchart"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 92%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.topbox{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
border-bottom: 1px gray solid; |
||||||
|
.btnbox{ |
||||||
|
display: flex; |
||||||
|
flex-direction:column; |
||||||
|
float: right; |
||||||
|
justify-content: space-around; |
||||||
|
height: 100%; |
||||||
|
button{ |
||||||
|
width: 88px; |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
margin-right:4%; |
||||||
|
} |
||||||
|
} |
||||||
|
.echartsbox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
#barEchart{ |
||||||
|
width: 100%; |
||||||
|
height: 350px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { BuildingTypeThreeDetailsComponent } from './building-type-three-details.component'; |
||||||
|
|
||||||
|
describe('BuildingTypeThreeDetailsComponent', () => { |
||||||
|
let component: BuildingTypeThreeDetailsComponent; |
||||||
|
let fixture: ComponentFixture<BuildingTypeThreeDetailsComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ BuildingTypeThreeDetailsComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(BuildingTypeThreeDetailsComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,110 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
import { ActivatedRoute } from '@angular/router'; |
||||||
|
declare var echarts: any; |
||||||
|
@Component({ |
||||||
|
selector: 'app-building-type-three-details', |
||||||
|
templateUrl: './building-type-three-details.component.html', |
||||||
|
styleUrls: ['./building-type-three-details.component.scss'] |
||||||
|
}) |
||||||
|
export class BuildingTypeThreeDetailsComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(public route: ActivatedRoute,private router: Router) { } |
||||||
|
forward(){ |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) |
||||||
|
} |
||||||
|
reverse(){ |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) |
||||||
|
} |
||||||
|
|
||||||
|
organizationName:String |
||||||
|
buildingTypeName:String |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.route.queryParams.subscribe(params => { |
||||||
|
this.organizationName = params['organizationName']; |
||||||
|
this.buildingTypeName = params['buildingTypeName']; |
||||||
|
}); |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.detailEcharts() |
||||||
|
}) |
||||||
|
} |
||||||
|
topTextlabel = { |
||||||
|
show: true, // 开启显示
|
||||||
|
position: 'top', // 在上方显示
|
||||||
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
|
verticalAlign: 'middle', |
||||||
|
textStyle: { // 数值样式
|
||||||
|
color: 'black', |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
}//柱状图数值顶部显示
|
||||||
|
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] |
||||||
|
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] |
||||||
|
detailEcharts(){ |
||||||
|
var detailPlanEchart = echarts.init(document.getElementById('barEchart'));
|
||||||
|
var option = { |
||||||
|
title: { |
||||||
|
text: this.buildingTypeName + '(' +this.organizationName + ')', |
||||||
|
left: "center", |
||||||
|
textStyle: { |
||||||
|
fontSize: 28 |
||||||
|
} |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.zhongNameData, |
||||||
|
// axisLabel: this.axisLabel
|
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(params) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: this.zhongNumData, |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
barWidth :'58', |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0.8)' |
||||||
|
}, |
||||||
|
label: this.topTextlabel |
||||||
|
}] |
||||||
|
}; |
||||||
|
detailPlanEchart.setOption(option); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
tableTooltip(params:any){ |
||||||
|
var data = [ |
||||||
|
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} |
||||||
|
] |
||||||
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>' |
||||||
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
|
res+='<thead><tr>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||||
|
res+='</tr></thead>' |
||||||
|
res+='<tbody>'; |
||||||
|
for(var i=0;i<data.length;i++){ |
||||||
|
res+='<tr>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>' |
||||||
|
} |
||||||
|
|
||||||
|
res+='</tbody>' |
||||||
|
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
|
||||||
|
res+='</table></div></div>' |
||||||
|
return res |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="btnbox"> |
||||||
|
<button mat-stroked-button (click)="forward()">正向查询</button> |
||||||
|
<button mat-stroked-button (click)="reverse()">反向查询</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="echartsbox"> |
||||||
|
<div id="pie"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<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> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 92%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.topbox{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
border-bottom: 1px gray solid; |
||||||
|
.btnbox{ |
||||||
|
display: flex; |
||||||
|
flex-direction:column; |
||||||
|
float: right; |
||||||
|
justify-content: space-around; |
||||||
|
height: 100%; |
||||||
|
button{ |
||||||
|
width: 88px; |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
margin-right:4%; |
||||||
|
} |
||||||
|
} |
||||||
|
.echartsbox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
#pie{ |
||||||
|
width: 100%; |
||||||
|
height: 450px; |
||||||
|
} |
||||||
|
} |
||||||
|
.publicCss{ |
||||||
|
height: 350px; |
||||||
|
width: 50%; |
||||||
|
display: inline-block; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { BuildingTypeTwoForwardComponent } from './building-type-two-forward.component'; |
||||||
|
|
||||||
|
describe('BuildingTypeTwoForwardComponent', () => { |
||||||
|
let component: BuildingTypeTwoForwardComponent; |
||||||
|
let fixture: ComponentFixture<BuildingTypeTwoForwardComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ BuildingTypeTwoForwardComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(BuildingTypeTwoForwardComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,298 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
declare var echarts: any; |
||||||
|
@Component({ |
||||||
|
selector: 'app-building-type-two-forward', |
||||||
|
templateUrl: './building-type-two-forward.component.html', |
||||||
|
styleUrls: ['./building-type-two-forward.component.scss'] |
||||||
|
}) |
||||||
|
export class BuildingTypeTwoForwardComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router) { } |
||||||
|
forward(){ |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) |
||||||
|
} |
||||||
|
reverse(){ |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) |
||||||
|
} |
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.initCharts() |
||||||
|
this.barEcharts() |
||||||
|
},0) |
||||||
|
} |
||||||
|
axisLabel = { |
||||||
|
interval: 0,
|
||||||
|
formatter:function(value)
|
||||||
|
{
|
||||||
|
var ret = "";//拼接加\n返回的类目项
|
||||||
|
var maxLength = 2;//每项显示文字个数
|
||||||
|
var valLength = value.length;//X轴类目项的文字个数
|
||||||
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||||||
|
if (rowN > 1)//如果类目项的文字大于3,
|
||||||
|
{
|
||||||
|
for (var i = 0; i < rowN; i++) {
|
||||||
|
var temp = "";//每次截取的字符串
|
||||||
|
var start = i * maxLength;//开始截取的位置
|
||||||
|
var end = start + maxLength;//结束截取的位置
|
||||||
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||||
|
temp = value.substring(start, end) + "\n";
|
||||||
|
ret += temp; //凭借最终的字符串
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}//echarts两个字换行
|
||||||
|
|
||||||
|
topTextlabel = { |
||||||
|
show: true, // 开启显示
|
||||||
|
position: 'top', // 在上方显示
|
||||||
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
|
verticalAlign: 'middle', |
||||||
|
textStyle: { // 数值样式
|
||||||
|
color: 'black', |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
}//柱状图数值顶部显示
|
||||||
|
|
||||||
|
tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, |
||||||
|
{name:"黄埔支队",number:"144",zhanbi:"2.8%"}, |
||||||
|
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"静安支队",number:"120",zhanbi:"1.3%"}, |
||||||
|
{name:"普陀支队",number:"100",zhanbi:"1.1%"}, |
||||||
|
{name:"虹口支队",number:"95",zhanbi:"1%"}, |
||||||
|
{name:"杨浦支队",number:"90",zhanbi:"0.9%"}, |
||||||
|
{name:"闵行支队",number:"88",zhanbi:"0.8%"}, |
||||||
|
{name:"宝山支队",number:"83",zhanbi:"0.7%"}, |
||||||
|
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"嘉定支队",number:"78",zhanbi:"0.6%"}, |
||||||
|
{name:"松江支队",number:"75",zhanbi:"0.5%"}, |
||||||
|
{name:"金山支队",number:"65",zhanbi:"0.4%"}, |
||||||
|
{name:"崇明支队",number:"55",zhanbi:"0.3%"} ] |
||||||
|
tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, |
||||||
|
{name:"黄埔中队",number:"144",zhanbi:"2.8%"}, |
||||||
|
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"静安中队",number:"120",zhanbi:"1.3%"}, |
||||||
|
{name:"普陀中队",number:"100",zhanbi:"1.1%"}, |
||||||
|
{name:"虹口中队",number:"95",zhanbi:"1%"}, |
||||||
|
{name:"杨浦中队",number:"90",zhanbi:"0.9%"}, |
||||||
|
{name:"闵行中队",number:"88",zhanbi:"0.8%"}, |
||||||
|
{name:"宝山中队",number:"83",zhanbi:"0.7%"}, |
||||||
|
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"嘉定中队",number:"78",zhanbi:"0.6%"}, |
||||||
|
{name:"松江中队",number:"75",zhanbi:"0.5%"}, |
||||||
|
{name:"金山中队",number:"65",zhanbi:"0.4%"}, |
||||||
|
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ] |
||||||
|
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队",'青浦支队'] |
||||||
|
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60] |
||||||
|
pieData = [ |
||||||
|
{value: 500, name: '浦东支队'}, |
||||||
|
{value: 800, name: '黄埔支队'}, |
||||||
|
{value: 900, name: '徐汇支队'}, |
||||||
|
{value: 800, name: '长宁支队'}, |
||||||
|
{value: 1200, name: '静安支队'}, |
||||||
|
{value: 1500, name: '普陀支队'}, |
||||||
|
{value: 1400, name: '虹口支队'}, |
||||||
|
{value: 600, name: '杨浦支队'}, |
||||||
|
{value: 568, name: '闵行支队'}, |
||||||
|
{value: 888, name: '宝山支队'}, |
||||||
|
{value: 485, name: '嘉定支队'}, |
||||||
|
{value: 966, name: '松江支队'}, |
||||||
|
{value: 789, name: '金山支队'}, |
||||||
|
{value: 500, name: '崇明支队'}, |
||||||
|
{value: 1025, name: '展览建筑'}, |
||||||
|
{value: 600, name: '青浦支队'} |
||||||
|
] |
||||||
|
buildingTypeName = ['高层','地下','轨道交通','化工生产','储罐类','厂房','古建筑','商市场','医院','学校','宾馆','娱乐场所','餐饮业','影剧院','展览建筑','隧道'] |
||||||
|
buildingTypeNum = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50] |
||||||
|
forArr = [{id:'gaoceng',name:'浦东支队'}, |
||||||
|
{id:'dixia',name:'黄埔支队'}, |
||||||
|
{id:'guidao',name:'徐汇支队'}, |
||||||
|
{id:'huagong',name:'长宁支队'}, |
||||||
|
{id:'chuguan',name:'静安支队'}, |
||||||
|
{id:'changfang',name:'普陀支队'}, |
||||||
|
{id:'gujianzhu',name:'虹口支队'}, |
||||||
|
{id:'shichang',name:'杨浦支队'}, |
||||||
|
{id:'yiyuan',name:'闵行支队'}, |
||||||
|
{id:'xuexiao',name:'宝山支队'}, |
||||||
|
{id:'binguan',name:'嘉定支队'}, |
||||||
|
{id:'yule',name:'松江支队'}, |
||||||
|
{id:'canyin',name:'金山支队'}, |
||||||
|
{id:'yingyuan',name:'崇明支队'}, |
||||||
|
{id:'zhanlan',name:'青浦支队'}, |
||||||
|
] |
||||||
|
|
||||||
|
/* 顶部饼状图 */ |
||||||
|
initCharts(){ |
||||||
|
let indexBzt = echarts.init(document.getElementById('pie')); |
||||||
|
let options={ |
||||||
|
title: { |
||||||
|
text: '组织机构统计（5500家）', |
||||||
|
left: 'center', |
||||||
|
top: "7%", |
||||||
|
textStyle: { |
||||||
|
fontSize:26 |
||||||
|
} |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(this.tableDataZhi,params.name) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0', |
||||||
|
position: function (point, params, dom, rect, size) { |
||||||
|
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||||||
|
// 提示框位置
|
||||||
|
var x = 0; // x坐标位置
|
||||||
|
var y = 0; // y坐标位置
|
||||||
|
|
||||||
|
// 当前鼠标位置
|
||||||
|
var pointX = point[0]; |
||||||
|
var pointY = point[1]; |
||||||
|
|
||||||
|
// 外层div大小
|
||||||
|
// var viewWidth = size.viewSize[0];
|
||||||
|
// var viewHeight = size.viewSize[1];
|
||||||
|
|
||||||
|
// 提示框大小
|
||||||
|
var boxWidth = size.contentSize[0]; |
||||||
|
var boxHeight = size.contentSize[1]; |
||||||
|
|
||||||
|
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||||||
|
if (boxWidth > pointX) { |
||||||
|
x = 35; |
||||||
|
} else { // 左边放的下
|
||||||
|
x = pointX + 80; |
||||||
|
} |
||||||
|
|
||||||
|
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||||||
|
if (boxHeight > pointY) { |
||||||
|
y = 65; |
||||||
|
} else { // 上边放得下
|
||||||
|
y = pointY - boxHeight; |
||||||
|
} |
||||||
|
|
||||||
|
return [pointX, pointY]; |
||||||
|
} |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
right: 150, |
||||||
|
top:80, |
||||||
|
data:this.zhiNameData |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '访问来源', |
||||||
|
type: 'pie', |
||||||
|
radius: '60%', |
||||||
|
center: ['50%', '60%'], |
||||||
|
label:{ |
||||||
|
show:true, |
||||||
|
fontSize:13, |
||||||
|
formatter:'{b}{c}家\n{d|({d}%)}', |
||||||
|
rich: { |
||||||
|
d: { |
||||||
|
align: 'center', |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: this.pieData, |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
indexBzt.on('click', (params) => { |
||||||
|
// this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
|
||||||
|
}); |
||||||
|
indexBzt.setOption(options); |
||||||
|
} |
||||||
|
//柱状图
|
||||||
|
barEcharts(){ |
||||||
|
this.forArr.forEach(item=>{ |
||||||
|
let _this = this |
||||||
|
let Echart = echarts.init(document.getElementById(item.id)); |
||||||
|
let option = { |
||||||
|
color: ['#3398DB'], |
||||||
|
title: { |
||||||
|
text: item.name, |
||||||
|
left: "center", |
||||||
|
top: "15", |
||||||
|
textStyle: { |
||||||
|
fontSize: 23 |
||||||
|
} |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.buildingTypeName, |
||||||
|
axisLabel: this.axisLabel |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(this.tableDataZhong,params.name) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: this.buildingTypeNum, |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0.8)' |
||||||
|
}, |
||||||
|
barWidth :'28', |
||||||
|
label: this.topTextlabel |
||||||
|
}] |
||||||
|
}; |
||||||
|
Echart.setOption(option); |
||||||
|
Echart.on('click', (params) => { |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':item.name,'buildingTypeName':params.name}}) |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
//提示框表格
|
||||||
|
tableTooltip(dataArr,title:string){ |
||||||
|
let data = dataArr |
||||||
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:26px;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; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
|
res+='<thead><tr>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||||
|
res+='</tr></thead>' |
||||||
|
res+='<tbody>'; |
||||||
|
for(var i=0;i<data.length;i++){ |
||||||
|
res+='<tr>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>' |
||||||
|
} |
||||||
|
|
||||||
|
res+='</tbody>' |
||||||
|
res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
||||||
|
res+='</table></div></div>' |
||||||
|
return res |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="btnbox"> |
||||||
|
<button mat-stroked-button (click)="forward()">正向查询</button> |
||||||
|
<button mat-stroked-button (click)="reverse()">反向查询</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="echartsbox"> |
||||||
|
<div id="pie"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<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> |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.box{ |
||||||
|
width: 100%; |
||||||
|
height: 92%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.topbox{ |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
border-bottom: 1px gray solid; |
||||||
|
.btnbox{ |
||||||
|
display: flex; |
||||||
|
flex-direction:column; |
||||||
|
float: right; |
||||||
|
justify-content: space-around; |
||||||
|
height: 100%; |
||||||
|
button{ |
||||||
|
width: 88px; |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
margin-right:4%; |
||||||
|
} |
||||||
|
} |
||||||
|
.echartsbox{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
#pie{ |
||||||
|
width: 100%; |
||||||
|
height: 450px; |
||||||
|
} |
||||||
|
} |
||||||
|
.publicCss{ |
||||||
|
height: 350px; |
||||||
|
width: 50%; |
||||||
|
display: inline-block; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { BuildingTypeTwoReverseComponent } from './building-type-two-reverse.component'; |
||||||
|
|
||||||
|
describe('BuildingTypeTwoReverseComponent', () => { |
||||||
|
let component: BuildingTypeTwoReverseComponent; |
||||||
|
let fixture: ComponentFixture<BuildingTypeTwoReverseComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ BuildingTypeTwoReverseComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(BuildingTypeTwoReverseComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,296 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
declare var echarts: any; |
||||||
|
@Component({ |
||||||
|
selector: 'app-building-type-two-reverse', |
||||||
|
templateUrl: './building-type-two-reverse.component.html', |
||||||
|
styleUrls: ['./building-type-two-reverse.component.scss'] |
||||||
|
}) |
||||||
|
export class BuildingTypeTwoReverseComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router) { } |
||||||
|
|
||||||
|
forward(){ |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) |
||||||
|
} |
||||||
|
reverse(){ |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) |
||||||
|
} |
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.initCharts() |
||||||
|
this.barEcharts() |
||||||
|
},0) |
||||||
|
} |
||||||
|
|
||||||
|
axisLabel = { |
||||||
|
interval: 0,
|
||||||
|
formatter:function(value)
|
||||||
|
{
|
||||||
|
var ret = "";//拼接加\n返回的类目项
|
||||||
|
var maxLength = 2;//每项显示文字个数
|
||||||
|
var valLength = value.length;//X轴类目项的文字个数
|
||||||
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||||||
|
if (rowN > 1)//如果类目项的文字大于3,
|
||||||
|
{
|
||||||
|
for (var i = 0; i < rowN; i++) {
|
||||||
|
var temp = "";//每次截取的字符串
|
||||||
|
var start = i * maxLength;//开始截取的位置
|
||||||
|
var end = start + maxLength;//结束截取的位置
|
||||||
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||||
|
temp = value.substring(start, end) + "\n";
|
||||||
|
ret += temp; //凭借最终的字符串
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}//echarts两个字换行
|
||||||
|
|
||||||
|
topTextlabel = { |
||||||
|
show: true, // 开启显示
|
||||||
|
position: 'top', // 在上方显示
|
||||||
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
|
verticalAlign: 'middle', |
||||||
|
textStyle: { // 数值样式
|
||||||
|
color: 'black', |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
}//柱状图数值顶部显示
|
||||||
|
|
||||||
|
tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, |
||||||
|
{name:"黄埔支队",number:"144",zhanbi:"2.8%"}, |
||||||
|
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"静安支队",number:"120",zhanbi:"1.3%"}, |
||||||
|
{name:"普陀支队",number:"100",zhanbi:"1.1%"}, |
||||||
|
{name:"虹口支队",number:"95",zhanbi:"1%"}, |
||||||
|
{name:"杨浦支队",number:"90",zhanbi:"0.9%"}, |
||||||
|
{name:"闵行支队",number:"88",zhanbi:"0.8%"}, |
||||||
|
{name:"宝山支队",number:"83",zhanbi:"0.7%"}, |
||||||
|
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"嘉定支队",number:"78",zhanbi:"0.6%"}, |
||||||
|
{name:"松江支队",number:"75",zhanbi:"0.5%"}, |
||||||
|
{name:"金山支队",number:"65",zhanbi:"0.4%"}, |
||||||
|
{name:"崇明支队",number:"55",zhanbi:"0.3%"} ] |
||||||
|
tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, |
||||||
|
{name:"黄埔中队",number:"144",zhanbi:"2.8%"}, |
||||||
|
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"静安中队",number:"120",zhanbi:"1.3%"}, |
||||||
|
{name:"普陀中队",number:"100",zhanbi:"1.1%"}, |
||||||
|
{name:"虹口中队",number:"95",zhanbi:"1%"}, |
||||||
|
{name:"杨浦中队",number:"90",zhanbi:"0.9%"}, |
||||||
|
{name:"闵行中队",number:"88",zhanbi:"0.8%"}, |
||||||
|
{name:"宝山中队",number:"83",zhanbi:"0.7%"}, |
||||||
|
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
||||||
|
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
||||||
|
{name:"嘉定中队",number:"78",zhanbi:"0.6%"}, |
||||||
|
{name:"松江中队",number:"75",zhanbi:"0.5%"}, |
||||||
|
{name:"金山中队",number:"65",zhanbi:"0.4%"}, |
||||||
|
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ] |
||||||
|
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
||||||
|
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] |
||||||
|
forArr = [{id:'gaoceng',name:'高层'}, |
||||||
|
{id:'dixia',name:'地下'}, |
||||||
|
{id:'guidao',name:'轨道交通'}, |
||||||
|
{id:'huagong',name:'化工生产'}, |
||||||
|
{id:'chuguan',name:'储罐类'}, |
||||||
|
{id:'changfang',name:'厂房'}, |
||||||
|
{id:'gujianzhu',name:'古建筑'}, |
||||||
|
{id:'shichang',name:'商市场'}, |
||||||
|
{id:'yiyuan',name:'医院'}, |
||||||
|
{id:'xuexiao',name:'学校'}, |
||||||
|
{id:'binguan',name:'宾馆'}, |
||||||
|
{id:'yule',name:'娱乐场所'}, |
||||||
|
{id:'canyin',name:'餐饮业'}, |
||||||
|
{id:'yingyuan',name:'影剧院'}, |
||||||
|
{id:'zhanlan',name:'展览建筑'}, |
||||||
|
{id:'suidao',name:'隧道'}] |
||||||
|
|
||||||
|
/* 顶部饼状图 */ |
||||||
|
initCharts(){ |
||||||
|
let indexBzt = echarts.init(document.getElementById('pie')); |
||||||
|
let options={ |
||||||
|
title: { |
||||||
|
text: '建筑类型统计（8900家）', |
||||||
|
left: 'center', |
||||||
|
top: "7%", |
||||||
|
textStyle: { |
||||||
|
fontSize:26 |
||||||
|
} |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(this.tableDataZhi,params.name) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0', |
||||||
|
position: function (point, params, dom, rect, size) { |
||||||
|
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
||||||
|
// 提示框位置
|
||||||
|
var x = 0; // x坐标位置
|
||||||
|
var y = 0; // y坐标位置
|
||||||
|
|
||||||
|
// 当前鼠标位置
|
||||||
|
var pointX = point[0]; |
||||||
|
var pointY = point[1]; |
||||||
|
|
||||||
|
// 外层div大小
|
||||||
|
// var viewWidth = size.viewSize[0];
|
||||||
|
// var viewHeight = size.viewSize[1];
|
||||||
|
|
||||||
|
// 提示框大小
|
||||||
|
var boxWidth = size.contentSize[0]; |
||||||
|
var boxHeight = size.contentSize[1]; |
||||||
|
|
||||||
|
// boxWidth > pointX 说明鼠标左边放不下提示框
|
||||||
|
if (boxWidth > pointX) { |
||||||
|
x = 35; |
||||||
|
} else { // 左边放的下
|
||||||
|
x = pointX + 80; |
||||||
|
} |
||||||
|
|
||||||
|
// boxHeight > pointY 说明鼠标上边放不下提示框
|
||||||
|
if (boxHeight > pointY) { |
||||||
|
y = 65; |
||||||
|
} else { // 上边放得下
|
||||||
|
y = pointY - boxHeight; |
||||||
|
} |
||||||
|
|
||||||
|
return [pointX, pointY]; |
||||||
|
} |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
right: 150, |
||||||
|
top:80, |
||||||
|
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '访问来源', |
||||||
|
type: 'pie', |
||||||
|
radius: '60%', |
||||||
|
center: ['50%', '60%'], |
||||||
|
label:{ |
||||||
|
show:true, |
||||||
|
fontSize:13, |
||||||
|
formatter:'{b}{c}家\n{d|({d}%)}', |
||||||
|
rich: { |
||||||
|
d: { |
||||||
|
align: 'center', |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{value: 500, name: '高层'}, |
||||||
|
{value: 800, name: '地下'}, |
||||||
|
{value: 900, name: '轨道交通'}, |
||||||
|
{value: 800, name: '化工生产'}, |
||||||
|
{value: 1200, name: '储罐类'}, |
||||||
|
{value: 1500, name: '厂房'}, |
||||||
|
{value: 1400, name: '古建筑'}, |
||||||
|
{value: 600, name: '商市场'}, |
||||||
|
{value: 568, name: '医院'}, |
||||||
|
{value: 888, name: '学校'}, |
||||||
|
{value: 485, name: '宾馆'}, |
||||||
|
{value: 966, name: '娱乐场所'}, |
||||||
|
{value: 789, name: '餐饮业'}, |
||||||
|
{value: 500, name: '影剧院'}, |
||||||
|
{value: 1025, name: '展览建筑'}, |
||||||
|
{value: 600, name: '隧道'} |
||||||
|
], |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
indexBzt.on('click', (params) => { |
||||||
|
// this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
|
||||||
|
}); |
||||||
|
indexBzt.setOption(options); |
||||||
|
} |
||||||
|
//柱状图
|
||||||
|
barEcharts(){ |
||||||
|
this.forArr.forEach(item=>{ |
||||||
|
let _this = this |
||||||
|
let addEchart = echarts.init(document.getElementById(item.id)); |
||||||
|
let option = { |
||||||
|
title: { |
||||||
|
text: item.name, |
||||||
|
left: "center", |
||||||
|
top: "15", |
||||||
|
textStyle: { |
||||||
|
fontSize: 23 |
||||||
|
} |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.zhiNameData, |
||||||
|
axisLabel: this.axisLabel |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
return this.tableTooltip(this.tableDataZhong,params.name) |
||||||
|
}, |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: this.zhiNumData, |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0.8)' |
||||||
|
}, |
||||||
|
barWidth :'28', |
||||||
|
label: this.topTextlabel |
||||||
|
}] |
||||||
|
}; |
||||||
|
addEchart.setOption(option); |
||||||
|
addEchart.on('click', (params) => { |
||||||
|
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':params.name,'buildingTypeName':item.name}}) |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
//提示框表格
|
||||||
|
tableTooltip(dataArr,title:string){ |
||||||
|
let data = dataArr |
||||||
|
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:26px;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; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
|
res+='<thead><tr>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
||||||
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
||||||
|
res+='</tr></thead>' |
||||||
|
res+='<tbody>'; |
||||||
|
for(var i=0;i<data.length;i++){ |
||||||
|
res+='<tr>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>' |
||||||
|
res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>' |
||||||
|
} |
||||||
|
|
||||||
|
res+='</tbody>' |
||||||
|
res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
||||||
|
res+='</table></div></div>' |
||||||
|
return res |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
<div style="height: 90%;width: 90%;margin: 0 auto;" id="center"></div> |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
<div class="table"> |
||||||
|
<p class="tableHeader">公告</p> |
||||||
|
<table mat-table [dataSource]="dataSource"> |
||||||
|
|
||||||
|
<ng-container matColumnDef="team"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>支队</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.team}}</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="header"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>标题</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.content}}</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-container matColumnDef="time"> |
||||||
|
<th mat-header-cell *matHeaderCellDef>时间</th> |
||||||
|
<td mat-cell *matCellDef="let element">{{element.time}}</td> |
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
|
||||||
|
</table> |
||||||
|
</div> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
<app-detailedInformation *ngIf="!echartsData.scheduledUpdatesToggle"></app-detailedInformation> |
||||||
|
|
||||||
|
<div style="height: 90%;width: 90%;margin: 0 auto;" id="center" [hidden]="!echartsData.scheduledUpdatesToggle"></div> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
<div class="content"> |
||||||
|
|
||||||
|
<div class="header"> |
||||||
|
|
||||||
|
<div class="queryField" *ngIf="isToggle"> |
||||||
|
<h3 style="display: inline-block; font-size: 20px; font-weight: 550; color: red;">公告:</h3> |
||||||
|
<p style="display: inline-block; margin: 0 10px;">浦东支队1月份已核查案件高于平均值;黄浦支队1月份已核查案件高于平均值...</p> |
||||||
|
<button mat-raised-button (click)='moreOpen()'>更多</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="fixedCss"> |
||||||
|
<button mat-raised-button (click)='goBack()' *ngIf="!echartsData.scheduledUpdatesToggle">返回</button> |
||||||
|
<button mat-raised-button (click)='verified()' [ngClass]="{'selectButton': isToggle}" style="margin:0 10px;" >已核查</button> |
||||||
|
<button mat-raised-button (click)='notVerified()' [ngClass]="{'selectButton': !isToggle}">未核查</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="echarts"> |
||||||
|
<div class="center"> |
||||||
|
<app-verified *ngIf="isToggle"></app-verified> |
||||||
|
<app-notVerified *ngIf="!isToggle"></app-notVerified> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
<div class="content"> |
||||||
|
<div class="center" id="center"></div> |
||||||
|
</div> |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 93%; |
||||||
|
overflow: hidden; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 10px 10px 20px 10px; |
||||||
|
.center { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//table |
||||||
|
table { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
.cdk-header-cell { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.table { |
||||||
|
width: 1000px; |
||||||
|
height: 600px; |
||||||
|
overflow: auto; |
||||||
|
.tableHeader { |
||||||
|
font-size: 24px; |
||||||
|
text-align: center; |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//滚动条样式 |
||||||
|
::-webkit-scrollbar{ |
||||||
|
width: 5px; |
||||||
|
background-color: white; |
||||||
|
} |
||||||
|
::-webkit-scrollbar-thumb{ |
||||||
|
background-color: #999; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { ScheduledUpdatesComponent } from './scheduled-updates.component'; |
||||||
|
|
||||||
|
describe('ScheduledUpdatesComponent', () => { |
||||||
|
let component: ScheduledUpdatesComponent; |
||||||
|
let fixture: ComponentFixture<ScheduledUpdatesComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ ScheduledUpdatesComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(ScheduledUpdatesComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,677 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
import {EchartsDataService} from '../echarts-data.service' |
||||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||||
|
declare var echarts: any; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-scheduled-updates', |
||||||
|
templateUrl: './scheduled-updates.component.html', |
||||||
|
styleUrls: ['./scheduled-updates.component.scss'] |
||||||
|
}) |
||||||
|
export class ScheduledUpdatesComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.initCharts() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/* 首页饼状图 */ |
||||||
|
initCharts(){ |
||||||
|
var indexBzt = echarts.init(document.getElementById('center')); |
||||||
|
var options={ |
||||||
|
title: { |
||||||
|
text: '计划更新统计（7100家）', |
||||||
|
padding:[80,100], |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
fontSize:34 |
||||||
|
} |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: (params)=>{ |
||||||
|
// return this.biaogeTishi(params.name)
|
||||||
|
} , |
||||||
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
|
||||||
|
borderWidth:'1', |
||||||
|
borderRadius :'0' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
right: 150, |
||||||
|
top:80, |
||||||
|
itemWidth:60, |
||||||
|
itemHeight:25, |
||||||
|
textStyle:{ |
||||||
|
fontSize:28 |
||||||
|
}, |
||||||
|
data: ['已核查无需修改', '已核查修改中', '已核查提交审核', '未核查'] |
||||||
|
}, |
||||||
|
series: [{
|
||||||
|
name: '访问来源', |
||||||
|
type: 'pie', |
||||||
|
radius: '65%', |
||||||
|
center: ['50%', '60%'], |
||||||
|
label:{ |
||||||
|
normal:{ |
||||||
|
show:true, |
||||||
|
position: 'inner', |
||||||
|
fontSize:18, |
||||||
|
formatter:'{d}% ({c}家)' |
||||||
|
}}, |
||||||
|
data: [ |
||||||
|
{value: 2000, name: '已核查无需修改'}, |
||||||
|
{value: 2500, name: '已核查修改中',itemStyle:{color:'#02A7F0'}}, |
||||||
|
{value: 1900, name: '已核查提交审核',itemStyle:{color:'#87cebb'}}, |
||||||
|
{value: 700, name: '未核查'},], |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}] |
||||||
|
}; |
||||||
|
indexBzt.setOption(options); |
||||||
|
indexBzt.on('click', (params) => { |
||||||
|
this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-publicEcharts', |
||||||
|
templateUrl: './publicEcharts.html', |
||||||
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
||||||
|
}) |
||||||
|
export class publicEchartsComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router,public echartsData:EchartsDataService,public dialog: MatDialog,) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
isToggle:boolean = true; // 已核查/未核查
|
||||||
|
|
||||||
|
//已核查
|
||||||
|
verified () { |
||||||
|
this.isToggle = true |
||||||
|
this.echartsData.scheduledUpdatesToggle = true |
||||||
|
} |
||||||
|
|
||||||
|
//未核查
|
||||||
|
notVerified () { |
||||||
|
this.isToggle = false |
||||||
|
this.echartsData.scheduledUpdatesToggle = true |
||||||
|
} |
||||||
|
|
||||||
|
//返回
|
||||||
|
goBack () { |
||||||
|
this.echartsData.scheduledUpdatesToggle = true |
||||||
|
} |
||||||
|
|
||||||
|
//更多 窗口
|
||||||
|
moreOpen () { |
||||||
|
let dialogRef = this.dialog.open(moreTableComponent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//已核查组件
|
||||||
|
@Component({ |
||||||
|
selector: 'app-verified', |
||||||
|
templateUrl: './verified.html', |
||||||
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
||||||
|
}) |
||||||
|
export class verifiedComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.oneInit() |
||||||
|
this.twoInit() |
||||||
|
},0) |
||||||
|
} |
||||||
|
|
||||||
|
ngOnDestroy () { |
||||||
|
this.oneEcharts.clear() |
||||||
|
this.items.forEach((element,index) => { |
||||||
|
element.echart.clear() |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
oneEcharts:any; |
||||||
|
oneInit () { |
||||||
|
this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp'); |
||||||
|
var option = { |
||||||
|
grid: { |
||||||
|
top: 50, |
||||||
|
left:40, |
||||||
|
right: 20, |
||||||
|
bottom: 20, |
||||||
|
}, |
||||||
|
// 标题
|
||||||
|
title: { |
||||||
|
text: '已核查', |
||||||
|
top: -4, |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
//文字颜色
|
||||||
|
color:'#000', |
||||||
|
fontSize: 22, |
||||||
|
} |
||||||
|
}, |
||||||
|
//提示框
|
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
}, |
||||||
|
// x轴
|
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'], |
||||||
|
boundaryGap: false, |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: {//分割线配置
|
||||||
|
show:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#999', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// y轴
|
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
axisLabel: { |
||||||
|
color: "#000" //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#000", |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 数据
|
||||||
|
series: [{ |
||||||
|
name: '单位预案编制数量', |
||||||
|
type: 'line', |
||||||
|
data: [1170, 953, 1144, 799, 789, 773, 660, 998, 790, 1004, 1345, 1245], |
||||||
|
} |
||||||
|
], |
||||||
|
}; |
||||||
|
this.oneEcharts.setOption(option); |
||||||
|
} |
||||||
|
|
||||||
|
months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] |
||||||
|
echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'] |
||||||
|
items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}] |
||||||
|
|
||||||
|
twoInit () { |
||||||
|
this.months.forEach((element,index) => { |
||||||
|
this.items[index].echart = echarts.init(document.getElementById(this.echartIds[index]), 'skinUpp'); |
||||||
|
var option = { |
||||||
|
title: { |
||||||
|
text: element, |
||||||
|
top: -4, |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
color:'#000', |
||||||
|
fontSize: 18, |
||||||
|
} |
||||||
|
}, |
||||||
|
//提示框
|
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'], |
||||||
|
textStyle: { color: '#000' } |
||||||
|
}, |
||||||
|
xAxis: [{ |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000",} |
||||||
|
}, |
||||||
|
type: 'category', |
||||||
|
data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'], |
||||||
|
axisPointer: {type: 'shadow'} |
||||||
|
}], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000"}, |
||||||
|
}, |
||||||
|
type: 'value', |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
formatter: '{value}' |
||||||
|
} |
||||||
|
}, |
||||||
|
// {
|
||||||
|
// //设置坐标轴字体颜色和宽度
|
||||||
|
// axisLine: {
|
||||||
|
// lineStyle: {color: "#000"},
|
||||||
|
// },
|
||||||
|
// type: 'value',
|
||||||
|
// name: '个',
|
||||||
|
// axisLabel: {
|
||||||
|
// color: "#000", //刻度线标签颜色
|
||||||
|
// formatter: '{value}'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '已核查无需修改', |
||||||
|
type: 'bar', |
||||||
|
stack: '总数', |
||||||
|
data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已核查修改中', |
||||||
|
type: 'bar', |
||||||
|
stack: '总数', |
||||||
|
data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54], |
||||||
|
itemStyle:{color: '#DC143C'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已核查提交审核', |
||||||
|
type: 'bar', |
||||||
|
stack: '总数', |
||||||
|
data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14], |
||||||
|
itemStyle:{color:'#00BB00'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '平均值', |
||||||
|
type: 'line', |
||||||
|
// yAxisIndex: 1,
|
||||||
|
data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37], |
||||||
|
itemStyle:{color: '#FFDC35'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '平均值2倍', |
||||||
|
type: 'line', |
||||||
|
// yAxisIndex: 1,
|
||||||
|
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], |
||||||
|
itemStyle:{color: '#FF00FF'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '平均值3倍', |
||||||
|
type: 'line', |
||||||
|
// yAxisIndex: 1,
|
||||||
|
data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111], |
||||||
|
itemStyle:{color: '#999'} |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
|
this.items[index].echart.setOption(option); |
||||||
|
this.items[index].echart.on('click', (params) => { |
||||||
|
this.echartsData.scheduledUpdatesType = 0 |
||||||
|
this.echartsData.scheduledUpdatesName = this.months[index] |
||||||
|
this.echartsData.scheduledUpdatesToggle = false |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//未核查组件
|
||||||
|
@Component({ |
||||||
|
selector: 'app-notVerified', |
||||||
|
templateUrl: './notVerified.html', |
||||||
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
||||||
|
}) |
||||||
|
export class notVerifiedComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.oneInit() |
||||||
|
},0) |
||||||
|
} |
||||||
|
|
||||||
|
ngOnDestroy () { |
||||||
|
this.oneEcharts.clear() |
||||||
|
} |
||||||
|
|
||||||
|
oneEcharts:any; |
||||||
|
oneInit () { |
||||||
|
this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp'); |
||||||
|
var option = { |
||||||
|
title: { |
||||||
|
text: '未核查', |
||||||
|
subtext: '总数剩余 5850', |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
color:'#000', |
||||||
|
fontSize: 22, |
||||||
|
}, |
||||||
|
subtextStyle: {color:'#999',}
|
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
type: 'shadow' |
||||||
|
} |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ['剩余未核查','总数'], |
||||||
|
textStyle: { color: '#000' } |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'value', |
||||||
|
boundaryGap: [0, 0.01], |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000",} |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'category', |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000"}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
formatter: '{value}' |
||||||
|
}, |
||||||
|
data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'], |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '剩余未核查', |
||||||
|
type: 'bar', |
||||||
|
stack: '差值', |
||||||
|
data: [289, 307, 334, 356, 389, 413, 456, 477, 489, 503, 540, 570, 599], |
||||||
|
itemStyle:{color:'#C80000'}, |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
position: 'insideRight', |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '总数', |
||||||
|
type: 'bar', |
||||||
|
stack: '差值', |
||||||
|
data: [1520, 1430, 1170, 1441, 1094, 1147, 1098, 1142, 1274, 1400, 1265, 1341, 1200], |
||||||
|
itemStyle:{color:'#999'}, |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
position: 'insideRight', |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
|
this.oneEcharts.setOption(option); |
||||||
|
this.oneEcharts.on('click', (params) => { |
||||||
|
this.echartsData.scheduledUpdatesType = 1 |
||||||
|
this.echartsData.scheduledUpdatesName = params.name |
||||||
|
this.echartsData.scheduledUpdatesToggle = false |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//echarts详情组件
|
||||||
|
@Component({ |
||||||
|
selector: 'app-detailedInformation', |
||||||
|
templateUrl: './detailedInformation.html', |
||||||
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
||||||
|
}) |
||||||
|
export class detailedInformationComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
window.setTimeout(()=>{ |
||||||
|
this.oneInit() |
||||||
|
},0) |
||||||
|
} |
||||||
|
|
||||||
|
oneInit () { |
||||||
|
let echart = echarts.init(document.getElementById('center'), 'skinUpp'); |
||||||
|
if (this.echartsData.scheduledUpdatesType ===0) { //已核查
|
||||||
|
var option = { |
||||||
|
title: { |
||||||
|
text: this.echartsData.scheduledUpdatesName, |
||||||
|
top: -4, |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
color:'#000', |
||||||
|
fontSize: 18, |
||||||
|
} |
||||||
|
}, |
||||||
|
//提示框
|
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'], |
||||||
|
textStyle: { color: '#000' } |
||||||
|
}, |
||||||
|
xAxis: [{ |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000",} |
||||||
|
}, |
||||||
|
type: 'category', |
||||||
|
data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'], |
||||||
|
axisPointer: {type: 'shadow'} |
||||||
|
}], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000"}, |
||||||
|
}, |
||||||
|
type: 'value', |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
formatter: '{value}' |
||||||
|
} |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '已核查无需修改', |
||||||
|
type: 'bar', |
||||||
|
stack: '总数', |
||||||
|
data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已核查修改中', |
||||||
|
type: 'bar', |
||||||
|
stack: '总数', |
||||||
|
data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54], |
||||||
|
itemStyle:{color: '#DC143C'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已核查提交审核', |
||||||
|
type: 'bar', |
||||||
|
stack: '总数', |
||||||
|
data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14], |
||||||
|
itemStyle:{color:'#00BB00'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '平均值', |
||||||
|
type: 'line', |
||||||
|
// yAxisIndex: 1,
|
||||||
|
data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37], |
||||||
|
itemStyle:{color: '#FFDC35'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '平均值2倍', |
||||||
|
type: 'line', |
||||||
|
// yAxisIndex: 1,
|
||||||
|
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], |
||||||
|
itemStyle:{color: '#FF00FF'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '平均值3倍', |
||||||
|
type: 'line', |
||||||
|
// yAxisIndex: 1,
|
||||||
|
data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111], |
||||||
|
itemStyle:{color: '#999'} |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
|
echart.setOption(option); |
||||||
|
} else { //未核查
|
||||||
|
var options = { |
||||||
|
title: { |
||||||
|
text: this.echartsData.scheduledUpdatesName, |
||||||
|
left: 'center', |
||||||
|
textStyle:{ |
||||||
|
color:'#000', |
||||||
|
fontSize: 18, |
||||||
|
}, |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
type: 'shadow' |
||||||
|
} |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ['剩余未核查','总数'], |
||||||
|
textStyle: { color: '#000' } |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'value', |
||||||
|
boundaryGap: [0, 0.01], |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
}, |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000",} |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'category', |
||||||
|
//设置坐标轴字体颜色和宽度
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {color: "#000"}, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: "#000", //刻度线标签颜色
|
||||||
|
formatter: '{value}' |
||||||
|
}, |
||||||
|
data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '剩余未核查', |
||||||
|
type: 'bar', |
||||||
|
stack: '差值', |
||||||
|
data: [13, 19, 21, 27, 35, 39, 41, 43, 47, 47, 49, 50, 51], |
||||||
|
itemStyle:{color:'#C80000'}, |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
position: 'insideRight', |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '总数', |
||||||
|
type: 'bar', |
||||||
|
stack: '差值', |
||||||
|
data: [120, 130, 170, 141, 194, 147, 109, 142, 174, 100, 125, 131, 120], |
||||||
|
itemStyle:{color:'#999'}, |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
position: 'insideRight', |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
|
echart.setOption(options); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//更多资讯组件
|
||||||
|
@Component({ |
||||||
|
selector: 'app-moreTable', |
||||||
|
templateUrl: './moreTable.html', |
||||||
|
styleUrls: ['./scheduled-updates.component.scss'] |
||||||
|
}) |
||||||
|
export class moreTableComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
displayedColumns: string[]=['team','header','time']; |
||||||
|
dataSource:any = [ |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'}, |
||||||
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'}, |
||||||
|
] |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
<app-detailedInformation *ngIf="!echartsData.scheduledUpdatesToggle"></app-detailedInformation> |
||||||
|
<div [hidden]="!echartsData.scheduledUpdatesToggle"> |
||||||
|
<div style="height: 400px;width: 50%;margin: 0 auto;" id="center"></div> |
||||||
|
<div class="publicOneLineCss" id="one"></div> |
||||||
|
<div class="publicOneLineCss" id="two"></div> |
||||||
|
<div class="publicOneLineCss" id="three"></div> |
||||||
|
<div class="publicOneLineCss" id="four"></div> |
||||||
|
<div class="publicOneLineCss" id="five"></div> |
||||||
|
<div class="publicOneLineCss" id="six"></div> |
||||||
|
<div class="publicOneLineCss" id="seven"></div> |
||||||
|
<div class="publicOneLineCss" id="eight"></div> |
||||||
|
<div class="publicOneLineCss" id="nine"></div> |
||||||
|
<div class="publicOneLineCss" id="ten"></div> |
||||||
|
<div class="publicOneLineCss" id="eleven"></div> |
||||||
|
<div class="publicOneLineCss" id="twelve"></div> |
||||||
|
</div> |
||||||
Loading…
Reference in new issue