24 changed files with 7001 additions and 4733 deletions
File diff suppressed because it is too large
Load Diff
@ -1,187 +1,230 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from "@angular/core"; |
||||||
import { Router } from '@angular/router'; |
import { Router } from "@angular/router"; |
||||||
import { HttpClient } from '@angular/common/http' |
import { HttpClient } from "@angular/common/http"; |
||||||
import {EchartsDataService,} from '../../echarts-data.service' |
import { EchartsDataService } from "../../echarts-data.service"; |
||||||
import { map } from 'rxjs/operators'; |
import { map } from "rxjs/operators"; |
||||||
declare var echarts: any; |
declare var echarts: any; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-building-type-one', |
selector: "app-building-type-one", |
||||||
templateUrl: './building-type-one.component.html', |
templateUrl: "./building-type-one.component.html", |
||||||
styleUrls: ['./building-type-one.component.scss'] |
styleUrls: ["./building-type-one.component.scss"], |
||||||
}) |
}) |
||||||
export class BuildingTypeOneComponent implements OnInit { |
export class BuildingTypeOneComponent implements OnInit { |
||||||
|
constructor( |
||||||
constructor(private http:HttpClient,private router: Router,public echartsData:EchartsDataService) { } |
private http: HttpClient, |
||||||
|
private router: Router, |
||||||
|
public echartsData: EchartsDataService |
||||||
|
) {} |
||||||
|
|
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
if(window.matchMedia("(max-width: 1400px)").matches){ |
if (window.matchMedia("(max-width: 1400px)").matches) { |
||||||
this.padHw=true |
this.padHw = true; |
||||||
//this.padjt=
|
//this.padjt=
|
||||||
}else{ |
} else { |
||||||
this.padHw=false |
this.padHw = false; |
||||||
} |
} |
||||||
|
|
||||||
window.setTimeout(()=>{ |
window.setTimeout(() => { |
||||||
this.getechartsdata() |
this.getechartsdata(); |
||||||
}) |
}); |
||||||
} |
} |
||||||
ngOnDestroy(): void { |
ngOnDestroy(): void { |
||||||
this.indexBzt.clear() |
if (!this.indexBzt) { |
||||||
this.indexBzt.dispose() |
return; |
||||||
|
} |
||||||
|
this.indexBzt.clear(); |
||||||
|
this.indexBzt.dispose(); |
||||||
} |
} |
||||||
async getechartsdata(){ |
async getechartsdata() { |
||||||
await this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`) |
await this.echartsData.getData( |
||||||
this.initCharts() |
null, |
||||||
|
`/api/StatisticsAnalysis/BuildingTypes` |
||||||
|
); |
||||||
|
this.initCharts(); |
||||||
} |
} |
||||||
/* 首页饼状图 */ |
/* 首页饼状图 */ |
||||||
indexBzt |
indexBzt; |
||||||
padHw |
padHw; |
||||||
lengthdata=[]//提示数据
|
lengthdata = []; //提示数据
|
||||||
count=0//总数
|
count = 0; //总数
|
||||||
indexData=[]//所有数据
|
indexData = []; //所有数据
|
||||||
tabledata |
tabledata; |
||||||
initCharts(){ |
initCharts() { |
||||||
if(sessionStorage.getItem('refresh') === 'true') { |
if (sessionStorage.getItem("refresh") === "true") { |
||||||
sessionStorage.removeItem('refresh'); |
sessionStorage.removeItem("refresh"); |
||||||
location.reload(); |
location.reload(); |
||||||
} |
} |
||||||
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); |
||||||
// console.log(this.tabledata)
|
// console.log(this.tabledata)
|
||||||
//console.log(this.echartsData.orid)
|
//console.log(this.echartsData.orid)
|
||||||
for(var i=0;i<this.tabledata[0].buildingTypes.length;i++){ |
for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) { |
||||||
this.lengthdata.push(this.tabledata[0].buildingTypes[i].buildingTypeName) |
this.lengthdata.push(this.tabledata[0].buildingTypes[i].buildingTypeName); |
||||||
this.count=this.count+this.tabledata[0].buildingTypes[i].count |
this.count = this.count + this.tabledata[0].buildingTypes[i].count; |
||||||
this.indexData.push(this.tabledata[0].buildingTypes[i]) |
this.indexData.push(this.tabledata[0].buildingTypes[i]); |
||||||
} |
} |
||||||
//JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name'))
|
//JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name'))
|
||||||
this.indexData=this.indexData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}}) |
this.indexData = this.indexData.map((v) => { |
||||||
//console.log(this.indexData)
|
return { name: v.buildingTypeName, value: v.count, id: v.buildingTypeId }; |
||||||
this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden'); |
}); |
||||||
let options={ |
//console.log(this.indexData)
|
||||||
|
this.indexBzt = echarts.init(document.getElementById("indexBzt"), "walden"); |
||||||
|
let options = { |
||||||
title: { |
title: { |
||||||
text: `建筑类型统计（${this.count}家）`, |
text: `建筑类型统计（${this.count}家）`, |
||||||
left: 'center', |
left: "center", |
||||||
top: "7%", |
top: "7%", |
||||||
textStyle: { |
textStyle: { |
||||||
fontSize:31 |
fontSize: 31, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
tooltip: { |
tooltip: { |
||||||
trigger: 'item', |
trigger: "item", |
||||||
position: this.echartsData.tableTooltipNoShow2, |
position: this.echartsData.tableTooltipNoShow2, |
||||||
formatter: (params)=>{ |
formatter: (params) => { |
||||||
this.echartsData.biaogeTishiZhi(params.data) |
this.echartsData.biaogeTishiZhi(params.data); |
||||||
return this.echartsData.res |
return this.echartsData.res; |
||||||
} |
}, |
||||||
}, |
}, |
||||||
legend: { |
legend: { |
||||||
orient: 'vertical', |
orient: "vertical", |
||||||
//left:this.padHw?50:0,
|
//left:this.padHw?50:0,
|
||||||
right:this.padHw?20:250, |
right: this.padHw ? 20 : 250, |
||||||
top:60, |
top: 60, |
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize:18, |
fontSize: 18, |
||||||
color:"#000000" |
color: "#000000", |
||||||
},
|
}, |
||||||
data: this.lengthdata |
data: this.lengthdata, |
||||||
}, |
}, |
||||||
series: [ |
series: [ |
||||||
{ |
{ |
||||||
top:this.padHw?'15%':'0', |
top: this.padHw ? "15%" : "0", |
||||||
name: '访问来源', |
name: "访问来源", |
||||||
type: 'pie', |
type: "pie", |
||||||
radius: '60%', |
radius: "60%", |
||||||
center: ['50%', '53%'], |
center: ["50%", "53%"], |
||||||
label:{ |
label: { |
||||||
show:true, |
show: true, |
||||||
fontSize:18, |
fontSize: 18, |
||||||
formatter:'{b}{c}家\n{d|({d}%)}', |
formatter: "{b}{c}家\n{d|({d}%)}", |
||||||
rich: { |
rich: { |
||||||
d: { |
d: { |
||||||
align: 'center', |
align: "center", |
||||||
fontSize:18 |
fontSize: 18, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
data:this.indexData, |
data: this.indexData, |
||||||
emphasis: { |
emphasis: { |
||||||
itemStyle: { |
itemStyle: { |
||||||
shadowBlur: 10, |
shadowBlur: 10, |
||||||
shadowOffsetX: 0, |
shadowOffsetX: 0, |
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
shadowColor: "rgba(0, 0, 0, 0.5)", |
||||||
} |
}, |
||||||
} |
}, |
||||||
} |
}, |
||||||
] |
], |
||||||
}; |
}; |
||||||
this.indexBzt.on('click', (params) => { |
this.indexBzt.on("click", (params) => { |
||||||
var index=0 |
var index = 0; |
||||||
for(var i=0;i<this.tabledata[0].buildingTypes.length;i++){ |
for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) { |
||||||
if(this.tabledata[0].buildingTypes[i].buildingTypeName==params.name){ |
if ( |
||||||
if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].buildingTypes[i].organizations.length>0){ |
this.tabledata[0].buildingTypes[i].buildingTypeName == params.name |
||||||
|
) { |
||||||
|
if ( |
||||||
|
(this.echartsData.level == "0" || |
||||||
|
this.echartsData.level == "1" || |
||||||
|
this.echartsData.level == "2") && |
||||||
|
this.tabledata[0].buildingTypes[i].organizations.length > 0 |
||||||
|
) { |
||||||
//总队,支队，大队跳转
|
//总队,支队，大队跳转
|
||||||
this.tabledata[0].buildingTypes[i].organizations.forEach((value,index,array) => { |
this.tabledata[0].buildingTypes[i].organizations.forEach( |
||||||
if(array[index].organizationId==this.echartsData.orid){ |
(value, index, array) => { |
||||||
array.splice(index,1) |
if (array[index].organizationId == this.echartsData.orid) { |
||||||
|
array.splice(index, 1); |
||||||
|
} |
||||||
|
if (array.length > 0) { |
||||||
|
this.router.navigate( |
||||||
|
[ |
||||||
|
"/statisticanalysis/buildingType_one/buildingType_two_reverse", |
||||||
|
], |
||||||
|
{ queryParams: { level: params.name, id: params.data.id } } |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.router.navigate(["/statisticanalysis/CompangInfo"], { |
||||||
|
queryParams: { |
||||||
|
name: params.name, |
||||||
|
type: 1, |
||||||
|
buildid: params.data.id, |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
} |
} |
||||||
if(array.length>0){ |
); |
||||||
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'],{queryParams:{'level':params.name,'id':params.data.id}}); |
} else { |
||||||
}else{ |
|
||||||
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}}); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
}else { |
|
||||||
//中队跳转
|
//中队跳转
|
||||||
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}}); |
this.router.navigate(["/statisticanalysis/CompangInfo"], { |
||||||
|
queryParams: { |
||||||
|
name: params.name, |
||||||
|
type: 1, |
||||||
|
buildid: params.data.id, |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}); |
}); |
||||||
this.indexBzt.setOption(options); |
this.indexBzt.setOption(options); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
} |
||||||
tishiData |
tishiData; |
||||||
res:string |
res: string; |
||||||
biaogeTishiZhi(datas){ |
biaogeTishiZhi(datas) { |
||||||
for(var a in this.tabledata.buildingTypes){ |
for (var a in this.tabledata.buildingTypes) { |
||||||
if(this.tabledata.buildingTypes[a].buildingTypeId==datas.id){ |
if (this.tabledata.buildingTypes[a].buildingTypeId == datas.id) { |
||||||
this.tishiData=this.tabledata.buildingTypes[a].organizations |
this.tishiData = this.tabledata.buildingTypes[a].organizations; |
||||||
} |
} |
||||||
} |
} |
||||||
var countall=0//总计
|
var countall = 0; //总计
|
||||||
var countbi=0//站比
|
var countbi = 0; //站比
|
||||||
var allCountbi=0//总站比
|
var allCountbi = 0; //总站比
|
||||||
for(var i=0;i<this.tishiData.length;i++){ |
for (var i = 0; i < this.tishiData.length; i++) { |
||||||
countall+=this.tishiData[i].count |
countall += this.tishiData[i].count; |
||||||
} |
} |
||||||
this.res= '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>' |
this.res = |
||||||
this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
'<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' + |
||||||
this.res+='<thead style="font-size:18px;"><tr>'; |
datas.name + |
||||||
this.res+='<td style="text-align:center;width:30%;">名称</td>'; |
"</span></div>"; |
||||||
this.res+='<td style="text-align:center;width:30%;">数量</td>' |
this.res += |
||||||
this.res+='<td style="text-align:center;width:30%;">总占比</td>' |
'</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
this.res+='</tr></thead>' |
this.res += '<thead style="font-size:18px;"><tr>'; |
||||||
this.res+='<tbody>'; |
this.res += '<td style="text-align:center;width:30%;">名称</td>'; |
||||||
//var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
|
this.res += '<td style="text-align:center;width:30%;">数量</td>'; |
||||||
for(var i=0;i<this.tishiData.length;i++){ |
this.res += '<td style="text-align:center;width:30%;">总占比</td>'; |
||||||
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 |
this.res += "</tr></thead>"; |
||||||
allCountbi=allCountbi+countbi |
this.res += "<tbody>"; |
||||||
this.res+='<tr>' |
//var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
|
||||||
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>' |
for (var i = 0; i < this.tishiData.length; i++) { |
||||||
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>' |
countbi = |
||||||
this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>' |
Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; |
||||||
} |
allCountbi = allCountbi + countbi; |
||||||
|
this.res += "<tr>"; |
||||||
this.res+='</tbody>' |
this.res += |
||||||
this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">'+allCountbi.toFixed(2)+'%</td></tfoot>' |
'<td style="text-align:center;">' + |
||||||
this.res+='</table></div></div>' |
this.tishiData[i].organizationName + |
||||||
return this.res |
"</td>"; |
||||||
|
this.res += |
||||||
} |
'<td style="text-align:center;">' + this.tishiData[i].count + "</td>"; |
||||||
|
this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>"; |
||||||
|
} |
||||||
|
|
||||||
|
this.res += "</tbody>"; |
||||||
|
this.res += |
||||||
|
'<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' + |
||||||
|
countall + |
||||||
|
'</td><td style="text-align:center;">' + |
||||||
|
allCountbi.toFixed(2) + |
||||||
|
"%</td></tfoot>"; |
||||||
|
this.res += "</table></div></div>"; |
||||||
|
return this.res; |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,239 +1,316 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from "@angular/core"; |
||||||
import { Router } from '@angular/router'; |
import { Router } from "@angular/router"; |
||||||
import { ActivatedRoute } from '@angular/router'; |
import { ActivatedRoute } from "@angular/router"; |
||||||
import { Local } from 'protractor/built/driverProviders'; |
import { Local } from "protractor/built/driverProviders"; |
||||||
import {EchartsDataService} from '../../echarts-data.service'; |
import { EchartsDataService } from "../../echarts-data.service"; |
||||||
declare var echarts: any; |
declare var echarts: any; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-building-type-three-details', |
selector: "app-building-type-three-details", |
||||||
templateUrl: './building-type-three-details.component.html', |
templateUrl: "./building-type-three-details.component.html", |
||||||
styleUrls: ['./building-type-three-details.component.scss'] |
styleUrls: ["./building-type-three-details.component.scss"], |
||||||
}) |
}) |
||||||
export class BuildingTypeThreeDetailsComponent implements OnInit { |
export class BuildingTypeThreeDetailsComponent implements OnInit { |
||||||
|
constructor( |
||||||
constructor(public route: ActivatedRoute,private router: Router,public echartsData:EchartsDataService) { } |
public route: ActivatedRoute, |
||||||
forward(){ |
private router: Router, |
||||||
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) |
public echartsData: EchartsDataService |
||||||
|
) {} |
||||||
|
forward() { |
||||||
|
this.router.navigate([ |
||||||
|
"/statisticanalysis/buildingType_one/buildingType_two_forward", |
||||||
|
]); |
||||||
} |
} |
||||||
reverse(){ |
reverse() { |
||||||
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) |
this.router.navigate([ |
||||||
|
"/statisticanalysis/buildingType_one/buildingType_two_reverse", |
||||||
|
]); |
||||||
} |
} |
||||||
//返回
|
//返回
|
||||||
goBack () { |
goBack() { |
||||||
sessionStorage.setItem('refresh', 'true'); |
sessionStorage.setItem("refresh", "true"); |
||||||
history.go(-1); |
history.go(-1); |
||||||
this.echartsData.statefulInspectionToggle = true |
this.echartsData.statefulInspectionToggle = true; |
||||||
} |
} |
||||||
|
|
||||||
organizationName:String |
organizationName: String; |
||||||
listorganizationId//上个页面传过来的组织id
|
listorganizationId; //上个页面传过来的组织id
|
||||||
buildingTypeName:String |
buildingTypeName: String; |
||||||
buildingTypeId |
buildingTypeId; |
||||||
organizationId=[]//本层id
|
organizationId = []; //本层id
|
||||||
padHw |
padHw; |
||||||
|
|
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
if(window.matchMedia("(max-width: 1300px)").matches){ |
if (window.matchMedia("(max-width: 1300px)").matches) { |
||||||
this.padHw=true |
this.padHw = true; |
||||||
//this.padjt=
|
//this.padjt=
|
||||||
}else{ |
} else { |
||||||
this.padHw=false |
this.padHw = false; |
||||||
} |
} |
||||||
if(sessionStorage.getItem('refresh') === 'true') { |
if (sessionStorage.getItem("refresh") === "true") { |
||||||
sessionStorage.removeItem('refresh'); |
sessionStorage.removeItem("refresh"); |
||||||
location.reload(); |
location.reload(); |
||||||
} |
} |
||||||
this.route.queryParams.subscribe(params => { |
this.route.queryParams.subscribe((params) => { |
||||||
this.organizationName = params['organizationName']; |
this.organizationName = params["organizationName"]; |
||||||
this.buildingTypeName = params['buildingTypeName']; |
this.buildingTypeName = params["buildingTypeName"]; |
||||||
this.listorganizationId=params['organizationId']; |
this.listorganizationId = params["organizationId"]; |
||||||
this.buildingTypeId=params['buildId']; |
this.buildingTypeId = params["buildId"]; |
||||||
|
}); |
||||||
|
|
||||||
|
window.setTimeout(() => { |
||||||
|
this.getechartsdata(); |
||||||
}); |
}); |
||||||
|
|
||||||
|
|
||||||
window.setTimeout(()=>{ |
|
||||||
this.getechartsdata() |
|
||||||
}) |
|
||||||
} |
} |
||||||
|
|
||||||
ngOnDestroy(): void { |
ngOnDestroy(): void { |
||||||
this.detailPlanEchart.clear() |
if (!this.detailPlanEchart) { |
||||||
this.detailPlanEchart.dispose() |
return; |
||||||
|
} |
||||||
|
this.detailPlanEchart.clear(); |
||||||
|
this.detailPlanEchart.dispose(); |
||||||
} |
} |
||||||
async getechartsdata(){ |
async getechartsdata() { |
||||||
let paramsdata={ |
let paramsdata = { |
||||||
//id:this.buildingTypeId,
|
//id:this.buildingTypeId,
|
||||||
organizationId:this.listorganizationId |
organizationId: this.listorganizationId, |
||||||
|
}; |
||||||
|
await this.echartsData.getData( |
||||||
|
paramsdata, |
||||||
|
`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}` |
||||||
|
); |
||||||
|
this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); |
||||||
|
//console.log(this.tabledata)
|
||||||
|
for (var i = 0; i < this.tabledata[0].organizations.length; i++) { |
||||||
|
this.zhongNameData.push( |
||||||
|
this.tabledata[0].organizations[i].organizationName |
||||||
|
); |
||||||
|
this.zhongNumData.push(this.tabledata[0].organizations[i].count); |
||||||
|
this.organizationId.push( |
||||||
|
this.tabledata[0].organizations[i].organizationId |
||||||
|
); |
||||||
} |
} |
||||||
await this.echartsData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`) |
this.tiaoshiPao = this.echartsData.qipao( |
||||||
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
this.tiaoshiPao, |
||||||
//console.log(this.tabledata)
|
this.zhongNumData, |
||||||
for(var i=0;i<this.tabledata[0].organizations.length;i++){ |
this.zhongNameData |
||||||
this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName) |
); |
||||||
this.zhongNumData.push(this.tabledata[0].organizations[i].count) |
this.detailEcharts(); |
||||||
this.organizationId.push(this.tabledata[0].organizations[i].organizationId) |
|
||||||
} |
|
||||||
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData) |
|
||||||
this.detailEcharts() |
|
||||||
} |
} |
||||||
topTextlabel = { |
topTextlabel = { |
||||||
show: true, // 开启显示
|
show: true, // 开启显示
|
||||||
position: 'top', // 在上方显示
|
position: "top", // 在上方显示
|
||||||
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
verticalAlign: 'middle', |
verticalAlign: "middle", |
||||||
textStyle: { // 数值样式
|
textStyle: { |
||||||
color: 'black', |
// 数值样式
|
||||||
fontSize: 12 |
color: "black", |
||||||
} |
fontSize: 12, |
||||||
}//柱状图数值顶部显示
|
}, |
||||||
zhongNameData = [] |
}; //柱状图数值顶部显示
|
||||||
zhongNumData = [] |
zhongNameData = []; |
||||||
tiaoshiPao:any |
zhongNumData = []; |
||||||
detailPlanEchart |
tiaoshiPao: any; |
||||||
tabledata |
detailPlanEchart; |
||||||
detailEcharts(){ |
tabledata; |
||||||
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');
|
detailEcharts() { |
||||||
|
this.detailPlanEchart = echarts.init( |
||||||
|
document.getElementById("barEchart"), |
||||||
|
"walden" |
||||||
|
); |
||||||
var option = { |
var option = { |
||||||
title: { |
title: { |
||||||
top:this.padHw?10:0, |
top: this.padHw ? 10 : 0, |
||||||
text: this.buildingTypeName + '(' +this.organizationName + ')'+`：总数(${this.tabledata[0].totalCount})`, |
text: |
||||||
|
this.buildingTypeName + |
||||||
|
"(" + |
||||||
|
this.organizationName + |
||||||
|
")" + |
||||||
|
`：总数(${this.tabledata[0].totalCount})`, |
||||||
left: "center", |
left: "center", |
||||||
textStyle: { |
textStyle: { |
||||||
fontSize: 30 |
fontSize: 30, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
grid: { |
grid: { |
||||||
top:this.padHw?120:110, |
top: this.padHw ? 120 : 110, |
||||||
//bottom: 10
|
//bottom: 10
|
||||||
}, |
}, |
||||||
xAxis: { |
xAxis: { |
||||||
id:this.organizationId, |
id: this.organizationId, |
||||||
type: 'category', |
type: "category", |
||||||
data: this.zhongNameData, |
data: this.zhongNameData, |
||||||
// axisLabel: this.axisLabel
|
// axisLabel: this.axisLabel
|
||||||
axisLabel:{ |
axisLabel: { |
||||||
//this.axisLabel,
|
//this.axisLabel,
|
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize :18, |
fontSize: 18, |
||||||
color:'#000000' |
color: "#000000", |
||||||
} |
}, |
||||||
|
}, |
||||||
} |
|
||||||
}, |
}, |
||||||
yAxis: { |
yAxis: { |
||||||
type: 'value', |
type: "value", |
||||||
axisLabel:{ |
axisLabel: { |
||||||
//this.axisLabel,
|
//this.axisLabel,
|
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize :18, |
fontSize: 18, |
||||||
color:'#000000' |
color: "#000000", |
||||||
} |
}, |
||||||
|
}, |
||||||
} |
|
||||||
}, |
}, |
||||||
tooltip: { |
tooltip: { |
||||||
trigger: 'item', |
trigger: "item", |
||||||
formatter: (params)=>{ |
formatter: (params) => { |
||||||
return this.tableTooltip(params) |
return this.tableTooltip(params); |
||||||
} |
}, |
||||||
}, |
}, |
||||||
series: [{ |
series: [ |
||||||
id:this.organizationId, |
{ |
||||||
|
id: this.organizationId, |
||||||
data: this.zhongNumData, |
data: this.zhongNumData, |
||||||
type: 'bar', |
type: "bar", |
||||||
barWidth :'38', |
barWidth: "38", |
||||||
markPoint: { |
markPoint: { |
||||||
symbolSize:[65, 65], |
symbolSize: [65, 65], |
||||||
data: this.tiaoshiPao |
data: this.tiaoshiPao, |
||||||
}, |
}, |
||||||
backgroundStyle: { |
backgroundStyle: { |
||||||
color: 'rgba(220, 220, 220, 0.8)' |
color: "rgba(220, 220, 220, 0.8)", |
||||||
}, |
}, |
||||||
//label: this.topTextlabel
|
//label: this.topTextlabel
|
||||||
}] |
}, |
||||||
|
], |
||||||
}; |
}; |
||||||
this.detailPlanEchart.setOption(option); |
this.detailPlanEchart.setOption(option); |
||||||
this.detailPlanEchart.getZr().on('click', (params) => { |
this.detailPlanEchart.getZr().on("click", (params) => { |
||||||
const pointInPixel= [params.offsetX, params.offsetY]; |
const pointInPixel = [params.offsetX, params.offsetY]; |
||||||
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { |
if (this.detailPlanEchart.containPixel("grid", pointInPixel)) { |
||||||
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
let xIndex = this.detailPlanEchart.convertFromPixel( |
||||||
|
{ seriesIndex: 0 }, |
||||||
|
[params.offsetX, params.offsetY] |
||||||
|
)[0]; |
||||||
/*事件处理代码书写位置*/ |
/*事件处理代码书写位置*/ |
||||||
if(this.echartsData.level=="0"&&this.tiao==false&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ |
if ( |
||||||
|
this.echartsData.level == "0" && |
||||||
|
this.tiao == false && |
||||||
|
this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1 |
||||||
|
) { |
||||||
//总队不跳转
|
//总队不跳转
|
||||||
this.zhongNameData=[] |
this.zhongNameData = []; |
||||||
this.zhongNumData=[] |
this.zhongNumData = []; |
||||||
this.organizationId=[] |
this.organizationId = []; |
||||||
this.tiaoshiPao='' |
this.tiaoshiPao = ""; |
||||||
let paramsdatee={ |
let paramsdatee = { |
||||||
id:this.buildingTypeId, |
id: this.buildingTypeId, |
||||||
organizationId:option.xAxis.id[xIndex] |
organizationId: option.xAxis.id[xIndex], |
||||||
} |
}; |
||||||
this.echartsData.getData(paramsdatee,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`) |
this.echartsData.getData( |
||||||
window.setTimeout(()=>{ |
paramsdatee, |
||||||
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}` |
||||||
|
); |
||||||
|
window.setTimeout(() => { |
||||||
|
this.tabledata = JSON.parse( |
||||||
|
JSON.stringify(this.echartsData.allDate) |
||||||
|
); |
||||||
//console.log(this.tabledata)
|
//console.log(this.tabledata)
|
||||||
for(var i=0;i<this.tabledata[0].organizations.length;i++){ |
for (var i = 0; i < this.tabledata[0].organizations.length; i++) { |
||||||
this.zhongNameData.push(this.tabledata[0].organizations[i].organizationName) |
this.zhongNameData.push( |
||||||
this.zhongNumData.push(this.tabledata[0].organizations[i].count) |
this.tabledata[0].organizations[i].organizationName |
||||||
this.organizationId.push(this.tabledata[0].organizations[i].organizationId) |
); |
||||||
|
this.zhongNumData.push(this.tabledata[0].organizations[i].count); |
||||||
|
this.organizationId.push( |
||||||
|
this.tabledata[0].organizations[i].organizationId |
||||||
|
); |
||||||
} |
} |
||||||
option.title.text = this.buildingTypeName + '(' +option.xAxis.data[xIndex]+ ')'+`：总数(${this.tabledata[0].totalCount})` |
option.title.text = |
||||||
option.xAxis.data = this.zhongNameData |
this.buildingTypeName + |
||||||
option.series[0].data = this.zhongNumData |
"(" + |
||||||
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData) |
option.xAxis.data[xIndex] + |
||||||
option.series[0].markPoint.data=this.tiaoshiPao |
")" + |
||||||
|
`：总数(${this.tabledata[0].totalCount})`; |
||||||
|
option.xAxis.data = this.zhongNameData; |
||||||
|
option.series[0].data = this.zhongNumData; |
||||||
|
this.tiaoshiPao = this.echartsData.qipao( |
||||||
|
this.tiaoshiPao, |
||||||
|
this.zhongNumData, |
||||||
|
this.zhongNameData |
||||||
|
); |
||||||
|
option.series[0].markPoint.data = this.tiaoshiPao; |
||||||
//option.series[0].id=this.organizationId
|
//option.series[0].id=this.organizationId
|
||||||
option.xAxis.id=this.organizationId |
option.xAxis.id = this.organizationId; |
||||||
this.detailPlanEchart.clear() |
this.detailPlanEchart.clear(); |
||||||
this.detailPlanEchart.setOption(option) |
this.detailPlanEchart.setOption(option); |
||||||
|
|
||||||
//this.detailEcharts()
|
//this.detailEcharts()
|
||||||
},1000) |
}, 1000); |
||||||
this.tiao=true |
this.tiao = true; |
||||||
|
} else { |
||||||
|
this.router.navigate(["/statisticanalysis/CompangInfo"], { |
||||||
|
queryParams: { |
||||||
|
name: option.xAxis.data[xIndex], |
||||||
|
type: 1, |
||||||
|
jsid: option.xAxis.id[xIndex], |
||||||
|
buildid: this.buildingTypeId, |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
else{ |
|
||||||
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.buildingTypeId}}); |
|
||||||
} |
|
||||||
|
|
||||||
} |
} |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
tiao=false |
tiao = false; |
||||||
tishiData |
tishiData; |
||||||
res |
res; |
||||||
tableTooltip(datas:any){ |
tableTooltip(datas: any) { |
||||||
for(var a in this.echartsData.obdata[0].organizations){ |
for (var a in this.echartsData.obdata[0].organizations) { |
||||||
if(this.echartsData.obdata[0].organizations[a].organizationName==datas.name){ |
if ( |
||||||
this.tishiData=this.echartsData.obdata[0].organizations[a].subOrganizations |
this.echartsData.obdata[0].organizations[a].organizationName == |
||||||
|
datas.name |
||||||
|
) { |
||||||
|
this.tishiData = |
||||||
|
this.echartsData.obdata[0].organizations[a].subOrganizations; |
||||||
} |
} |
||||||
} |
} |
||||||
var countall=0//总计
|
var countall = 0; //总计
|
||||||
var countbi=0//站比
|
var countbi = 0; //站比
|
||||||
var allCountbi=0//总站比
|
var allCountbi = 0; //总站比
|
||||||
for(var i=0;i<this.tishiData.length;i++){ |
for (var i = 0; i < this.tishiData.length; i++) { |
||||||
countall+=this.tishiData[i].count |
countall += this.tishiData[i].count; |
||||||
} |
} |
||||||
this.res= '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>' |
this.res = |
||||||
this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
'<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' + |
||||||
this.res+='<thead style="font-size:18px;"><tr>'; |
datas.name + |
||||||
this.res+='<td style="text-align:center;width:30%;">名称</td>'; |
"</span></div>"; |
||||||
this.res+='<td style="text-align:center;width:30%;">数量</td>' |
this.res += |
||||||
this.res+='<td style="text-align:center;width:30%;">总占比</td>' |
'</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
this.res+='</tr></thead>' |
this.res += '<thead style="font-size:18px;"><tr>'; |
||||||
this.res+='<tbody>'; |
this.res += '<td style="text-align:center;width:30%;">名称</td>'; |
||||||
for(var i=0;i<this.tishiData.length;i++){ |
this.res += '<td style="text-align:center;width:30%;">数量</td>'; |
||||||
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 |
this.res += '<td style="text-align:center;width:30%;">总占比</td>'; |
||||||
allCountbi=allCountbi+countbi |
this.res += "</tr></thead>"; |
||||||
this.res+='<tr>' |
this.res += "<tbody>"; |
||||||
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>' |
for (var i = 0; i < this.tishiData.length; i++) { |
||||||
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>' |
countbi = |
||||||
this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>' |
Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; |
||||||
} |
allCountbi = allCountbi + countbi; |
||||||
|
this.res += "<tr>"; |
||||||
this.res+='</tbody>' |
this.res += |
||||||
this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">'+allCountbi.toFixed(2)+'%</td></tfoot>' |
'<td style="text-align:center;">' + |
||||||
this.res+='</table></div></div>' |
this.tishiData[i].organizationName + |
||||||
return this.res |
"</td>"; |
||||||
|
this.res += |
||||||
|
'<td style="text-align:center;">' + this.tishiData[i].count + "</td>"; |
||||||
|
this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>"; |
||||||
|
} |
||||||
|
|
||||||
|
this.res += "</tbody>"; |
||||||
|
this.res += |
||||||
|
'<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' + |
||||||
|
countall + |
||||||
|
'</td><td style="text-align:center;">' + |
||||||
|
allCountbi.toFixed(2) + |
||||||
|
"%</td></tfoot>"; |
||||||
|
this.res += "</table></div></div>"; |
||||||
|
return this.res; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,393 +1,478 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from "@angular/core"; |
||||||
import { ActivatedRoute, Router } from '@angular/router'; |
import { ActivatedRoute, Router } from "@angular/router"; |
||||||
import {EchartsDataService} from '../../echarts-data.service'; |
import { EchartsDataService } from "../../echarts-data.service"; |
||||||
import { HttpClient } from '@angular/common/http' |
import { HttpClient } from "@angular/common/http"; |
||||||
declare var echarts: any; |
declare var echarts: any; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-building-type-two-reverse', |
selector: "app-building-type-two-reverse", |
||||||
templateUrl: './building-type-two-reverse.component.html', |
templateUrl: "./building-type-two-reverse.component.html", |
||||||
styleUrls: ['./building-type-two-reverse.component.scss'] |
styleUrls: ["./building-type-two-reverse.component.scss"], |
||||||
}) |
}) |
||||||
export class BuildingTypeTwoReverseComponent implements OnInit { |
export class BuildingTypeTwoReverseComponent implements OnInit { |
||||||
|
constructor( |
||||||
|
private http: HttpClient, |
||||||
|
private router: Router, |
||||||
|
public data: EchartsDataService, |
||||||
|
private route: ActivatedRoute |
||||||
|
) {} |
||||||
|
|
||||||
constructor(private http:HttpClient,private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { } |
forward() { |
||||||
|
this.router.navigate([ |
||||||
forward(){ |
"/statisticanalysis/buildingType_one/buildingType_two_forward", |
||||||
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) |
]); |
||||||
} |
} |
||||||
reverse(){ |
reverse() { |
||||||
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) |
this.router.navigate([ |
||||||
|
"/statisticanalysis/buildingType_one/buildingType_two_reverse", |
||||||
|
]); |
||||||
} |
} |
||||||
headname//标题
|
headname; //标题
|
||||||
buildId//建筑id
|
buildId; //建筑id
|
||||||
padHw//是否是华为pad
|
padHw; //是否是华为pad
|
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
if(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches){ |
if ( |
||||||
this.padHw=true |
window.matchMedia("(max-width: 1300px)").matches && |
||||||
|
window.matchMedia("(max-height: 700px)").matches |
||||||
|
) { |
||||||
|
this.padHw = true; |
||||||
//this.padjt=
|
//this.padjt=
|
||||||
}else{ |
} else { |
||||||
this.padHw=false |
this.padHw = false; |
||||||
} |
} |
||||||
if(sessionStorage.getItem('refresh') === 'true') { |
if (sessionStorage.getItem("refresh") === "true") { |
||||||
sessionStorage.removeItem('refresh'); |
sessionStorage.removeItem("refresh"); |
||||||
location.reload(); |
location.reload(); |
||||||
} |
} |
||||||
this.route.queryParams.subscribe(param=>{ |
this.route.queryParams.subscribe((param) => { |
||||||
this.headname=param.level |
this.headname = param.level; |
||||||
this.buildId=param.id |
this.buildId = param.id; |
||||||
}); |
}); |
||||||
let paramsdata:any = { |
let paramsdata: any = { |
||||||
id:this.buildId, |
id: this.buildId, |
||||||
//organizationId:'1'
|
//organizationId:'1'
|
||||||
} |
}; |
||||||
|
|
||||||
window.setTimeout(()=>{ |
window.setTimeout(() => { |
||||||
this.getechartsdata() |
this.getechartsdata(); |
||||||
}); |
}); |
||||||
|
|
||||||
} |
} |
||||||
ngOnDestroy(): void { |
ngOnDestroy(): void { |
||||||
/* this.indexBzt.clear() |
if (this.forArr && this.forArr.length !== 0) { |
||||||
this.indexBzt.dispose() */ |
this.forArr.forEach((item) => { |
||||||
this.forArr.forEach(item => { |
item.echart.clear(); |
||||||
item.echart.clear() |
item.echart.dispose(); |
||||||
item.echart.dispose() |
}); |
||||||
}) |
} |
||||||
} |
} |
||||||
async getechartsdata(){ |
async getechartsdata() { |
||||||
await this.data.getData(null,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`) |
await this.data.getData( |
||||||
this.tabledata=JSON.parse(JSON.stringify(this.data.allDate)) |
null, |
||||||
for(var i=0;i<this.tabledata[0].organizations.length;i++){ |
`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}` |
||||||
this.zhiNameData.push(this.tabledata[0].organizations[i].organizationName) |
); |
||||||
this.zhiNumData.push(this.tabledata[0].organizations[i].count) |
this.tabledata = JSON.parse(JSON.stringify(this.data.allDate)); |
||||||
this.organizationId.push(this.tabledata[0].organizations[i].organizationId) |
for (var i = 0; i < this.tabledata[0].organizations.length; i++) { |
||||||
} |
this.zhiNameData.push( |
||||||
this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) |
this.tabledata[0].organizations[i].organizationName |
||||||
this.barEcharts() |
); |
||||||
|
this.zhiNumData.push(this.tabledata[0].organizations[i].count); |
||||||
|
this.organizationId.push( |
||||||
|
this.tabledata[0].organizations[i].organizationId |
||||||
|
); |
||||||
|
} |
||||||
|
this.tiaoshiPao = this.data.qipao( |
||||||
|
this.tiaoshiPao, |
||||||
|
this.zhiNumData, |
||||||
|
this.zhiNameData |
||||||
|
); |
||||||
|
this.barEcharts(); |
||||||
} |
} |
||||||
axisLabel = { |
axisLabel = { |
||||||
interval: 0, |
interval: 0, |
||||||
rotate:38, |
rotate: 38, |
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize :16, |
fontSize: 16, |
||||||
color:'#000000' |
color: "#000000", |
||||||
},
|
}, |
||||||
formatter:function(value)
|
formatter: function (value) { |
||||||
{
|
var ret = ""; //拼接加\n返回的类目项
|
||||||
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 2; //每项显示文字个数
|
||||||
var maxLength = 2;//每项显示文字个数
|
var valLength = value.length; //X轴类目项的文字个数
|
||||||
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||||||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1) { |
||||||
if (rowN > 1)//如果类目项的文字大于3,
|
//如果类目项的文字大于3,
|
||||||
{
|
for (var i = 0; i < rowN; i++) { |
||||||
for (var i = 0; i < rowN; i++) {
|
var temp = ""; //每次截取的字符串
|
||||||
var temp = "";//每次截取的字符串
|
var start = i * maxLength; //开始截取的位置
|
||||||
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength; //结束截取的位置
|
||||||
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + "\n"; |
||||||
temp = value.substring(start, end) + "\n";
|
ret += temp; //凭借最终的字符串
|
||||||
ret += temp; //凭借最终的字符串
|
} |
||||||
}
|
return ret; |
||||||
return ret;
|
} else { |
||||||
}
|
return value; |
||||||
else {
|
} |
||||||
return value;
|
}, |
||||||
}
|
}; //echarts两个字换行
|
||||||
}
|
|
||||||
}//echarts两个字换行
|
|
||||||
|
|
||||||
topTextlabel = { |
topTextlabel = { |
||||||
show: true, // 开启显示
|
show: true, // 开启显示
|
||||||
position: 'top', // 在上方显示
|
position: "top", // 在上方显示
|
||||||
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
verticalAlign: 'middle', |
verticalAlign: "middle", |
||||||
textStyle: { // 数值样式
|
textStyle: { |
||||||
color: 'black', |
// 数值样式
|
||||||
fontSize: 12 |
color: "black", |
||||||
} |
fontSize: 12, |
||||||
}//柱状图数值顶部显示
|
}, |
||||||
|
}; //柱状图数值顶部显示
|
||||||
|
|
||||||
tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, |
tableDataZhi = [ |
||||||
{name:"黄浦支队",number:"144",zhanbi:"2.8%"}, |
{ name: "浦东支队", number: "156", zhanbi: "3%" }, |
||||||
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
{ name: "黄浦支队", number: "144", zhanbi: "2.8%" }, |
||||||
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
{ name: "徐汇支队", number: "133", zhanbi: "2.1%" }, |
||||||
{name:"静安支队",number:"120",zhanbi:"1.3%"}, |
{ name: "长宁支队", number: "122", zhanbi: "1.6%" }, |
||||||
{name:"普陀支队",number:"100",zhanbi:"1.1%"}, |
{ name: "静安支队", number: "120", zhanbi: "1.3%" }, |
||||||
{name:"虹口支队",number:"95",zhanbi:"1%"}, |
{ name: "普陀支队", number: "100", zhanbi: "1.1%" }, |
||||||
{name:"杨浦支队",number:"90",zhanbi:"0.9%"}, |
{ name: "虹口支队", number: "95", zhanbi: "1%" }, |
||||||
{name:"闵行支队",number:"88",zhanbi:"0.8%"}, |
{ name: "杨浦支队", number: "90", zhanbi: "0.9%" }, |
||||||
{name:"宝山支队",number:"83",zhanbi:"0.7%"}, |
{ name: "闵行支队", number: "88", zhanbi: "0.8%" }, |
||||||
{name:"徐汇支队",number:"133",zhanbi:"2.1%"}, |
{ name: "宝山支队", number: "83", zhanbi: "0.7%" }, |
||||||
{name:"长宁支队",number:"122",zhanbi:"1.6%"}, |
{ name: "徐汇支队", number: "133", zhanbi: "2.1%" }, |
||||||
{name:"嘉定支队",number:"78",zhanbi:"0.6%"}, |
{ name: "长宁支队", number: "122", zhanbi: "1.6%" }, |
||||||
{name:"松江支队",number:"75",zhanbi:"0.5%"}, |
{ name: "嘉定支队", number: "78", zhanbi: "0.6%" }, |
||||||
{name:"金山支队",number:"65",zhanbi:"0.4%"}, |
{ name: "松江支队", number: "75", zhanbi: "0.5%" }, |
||||||
{name:"崇明支队",number:"55",zhanbi:"0.3%"} ] |
{ name: "金山支队", number: "65", zhanbi: "0.4%" }, |
||||||
tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, |
{ name: "崇明支队", number: "55", zhanbi: "0.3%" }, |
||||||
{name:"黄浦中队",number:"144",zhanbi:"2.8%"}, |
]; |
||||||
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
tableDataZhong = [ |
||||||
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
{ name: "浦东中队", number: "156", zhanbi: "3%" }, |
||||||
{name:"静安中队",number:"120",zhanbi:"1.3%"}, |
{ name: "黄浦中队", number: "144", zhanbi: "2.8%" }, |
||||||
{name:"普陀中队",number:"100",zhanbi:"1.1%"}, |
{ name: "徐汇中队", number: "133", zhanbi: "2.1%" }, |
||||||
{name:"虹口中队",number:"95",zhanbi:"1%"}, |
{ name: "长宁中队", number: "122", zhanbi: "1.6%" }, |
||||||
{name:"杨浦中队",number:"90",zhanbi:"0.9%"}, |
{ name: "静安中队", number: "120", zhanbi: "1.3%" }, |
||||||
{name:"闵行中队",number:"88",zhanbi:"0.8%"}, |
{ name: "普陀中队", number: "100", zhanbi: "1.1%" }, |
||||||
{name:"宝山中队",number:"83",zhanbi:"0.7%"}, |
{ name: "虹口中队", number: "95", zhanbi: "1%" }, |
||||||
{name:"徐汇中队",number:"133",zhanbi:"2.1%"}, |
{ name: "杨浦中队", number: "90", zhanbi: "0.9%" }, |
||||||
{name:"长宁中队",number:"122",zhanbi:"1.6%"}, |
{ name: "闵行中队", number: "88", zhanbi: "0.8%" }, |
||||||
{name:"嘉定中队",number:"78",zhanbi:"0.6%"}, |
{ name: "宝山中队", number: "83", zhanbi: "0.7%" }, |
||||||
{name:"松江中队",number:"75",zhanbi:"0.5%"}, |
{ name: "徐汇中队", number: "133", zhanbi: "2.1%" }, |
||||||
{name:"金山中队",number:"65",zhanbi:"0.4%"}, |
{ name: "长宁中队", number: "122", zhanbi: "1.6%" }, |
||||||
{name:"崇明中队",number:"55",zhanbi:"0.3%"} ] |
{ name: "嘉定中队", number: "78", zhanbi: "0.6%" }, |
||||||
zhiNameData = [] |
{ name: "松江中队", number: "75", zhanbi: "0.5%" }, |
||||||
zhiNumData = [] |
{ name: "金山中队", number: "65", zhanbi: "0.4%" }, |
||||||
tiaoshiPao:any |
{ name: "崇明中队", number: "55", zhanbi: "0.3%" }, |
||||||
|
]; |
||||||
|
zhiNameData = []; |
||||||
|
zhiNumData = []; |
||||||
|
tiaoshiPao: any; |
||||||
//气泡提示数据获取
|
//气泡提示数据获取
|
||||||
bianli(){ |
bianli() { |
||||||
if(this.zhiNumData.length>=1){ |
if (this.zhiNumData.length >= 1) { |
||||||
var arrshuzu='['; |
var arrshuzu = "["; |
||||||
for(var i=0;i<this.zhiNumData.length;i++){ |
for (var i = 0; i < this.zhiNumData.length; i++) { |
||||||
arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},' |
arrshuzu += |
||||||
} |
'{"value":' + |
||||||
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
this.zhiNumData[i] + |
||||||
arrshuzu+=']' |
',"coord":[' + |
||||||
this.tiaoshiPao=JSON.parse(arrshuzu) |
i + |
||||||
|
"," + |
||||||
|
this.zhiNumData[i] + |
||||||
|
'],"name":' + |
||||||
|
'"' + |
||||||
|
this.zhiNameData[i] + |
||||||
|
'"' + |
||||||
|
"},"; |
||||||
|
} |
||||||
|
arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1); |
||||||
|
arrshuzu += "]"; |
||||||
|
this.tiaoshiPao = JSON.parse(arrshuzu); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
forArr = [{id:'gaoceng',name:'高层',echart:null}, |
forArr = [ |
||||||
{id:'dixia',name:'地下',echart:null}, |
{ id: "gaoceng", name: "高层", echart: null }, |
||||||
{id:'guidao',name:'轨道交通',echart:null}, |
{ id: "dixia", name: "地下", echart: null }, |
||||||
{id:'huagong',name:'化工生产',echart:null}, |
{ id: "guidao", name: "轨道交通", echart: null }, |
||||||
{id:'chuguan',name:'储罐类',echart:null}, |
{ id: "huagong", name: "化工生产", echart: null }, |
||||||
{id:'changfang',name:'厂房',echart:null}, |
{ id: "chuguan", name: "储罐类", echart: null }, |
||||||
{id:'gujianzhu',name:'古建筑',echart:null}, |
{ id: "changfang", name: "厂房", echart: null }, |
||||||
{id:'shichang',name:'商市场',echart:null}, |
{ id: "gujianzhu", name: "古建筑", echart: null }, |
||||||
{id:'yiyuan',name:'医院',echart:null}, |
{ id: "shichang", name: "商市场", echart: null }, |
||||||
{id:'xuexiao',name:'学校',echart:null}, |
{ id: "yiyuan", name: "医院", echart: null }, |
||||||
{id:'binguan',name:'宾馆',echart:null}, |
{ id: "xuexiao", name: "学校", echart: null }, |
||||||
{id:'yule',name:'娱乐场所',echart:null}, |
{ id: "binguan", name: "宾馆", echart: null }, |
||||||
{id:'canyin',name:'餐饮业',echart:null}, |
{ id: "yule", name: "娱乐场所", echart: null }, |
||||||
{id:'yingyuan',name:'影剧院',echart:null}, |
{ id: "canyin", name: "餐饮业", echart: null }, |
||||||
{id:'zhanlan',name:'展览建筑',echart:null}, |
{ id: "yingyuan", name: "影剧院", echart: null }, |
||||||
{id:'suidao',name:'隧道',echart:null}] |
{ id: "zhanlan", name: "展览建筑", echart: null }, |
||||||
|
{ id: "suidao", name: "隧道", echart: null }, |
||||||
|
]; |
||||||
|
|
||||||
//返回
|
//返回
|
||||||
goback(){ |
goback() { |
||||||
sessionStorage.setItem('refresh', 'true'); |
sessionStorage.setItem("refresh", "true"); |
||||||
history.go(-1); |
history.go(-1); |
||||||
} |
} |
||||||
/* 顶部饼状图 */ |
/* 顶部饼状图 */ |
||||||
indexBzt |
indexBzt; |
||||||
initCharts(){ |
initCharts() { |
||||||
|
this.indexBzt = echarts.init(document.getElementById("pie"), "walden"); |
||||||
this.indexBzt = echarts.init(document.getElementById('pie'),'walden'); |
let options = { |
||||||
let options={ |
|
||||||
title: { |
title: { |
||||||
text: '建筑类型统计（8900家）', |
text: "建筑类型统计（8900家）", |
||||||
left: 'center', |
left: "center", |
||||||
top: "7%", |
top: "7%", |
||||||
textStyle: { |
textStyle: { |
||||||
fontSize:26 |
fontSize: 26, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
tooltip: { |
tooltip: { |
||||||
trigger: 'item', |
trigger: "item", |
||||||
formatter: (params)=>{ |
formatter: (params) => { |
||||||
return this.data.tableTooltip(this.tableDataZhi,params.name) |
return this.data.tableTooltip(this.tableDataZhi, params.name); |
||||||
}, |
}, |
||||||
position: this.data.tableTooltipNoShow2 |
position: this.data.tableTooltipNoShow2, |
||||||
}, |
}, |
||||||
legend: { |
legend: { |
||||||
orient: 'vertical', |
orient: "vertical", |
||||||
right: 150, |
right: 150, |
||||||
top:80, |
top: 80, |
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize:18, |
fontSize: 18, |
||||||
color:"#000000" |
color: "#000000", |
||||||
}, |
}, |
||||||
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] |
data: [ |
||||||
|
"高层", |
||||||
|
"地下", |
||||||
|
"轨道交通", |
||||||
|
"化工生产", |
||||||
|
"储罐类", |
||||||
|
"厂房", |
||||||
|
"古建筑", |
||||||
|
"商市场", |
||||||
|
"医院", |
||||||
|
"学校", |
||||||
|
"宾馆", |
||||||
|
"娱乐场所", |
||||||
|
"餐饮业", |
||||||
|
"影剧院", |
||||||
|
"展览建筑", |
||||||
|
"隧道", |
||||||
|
], |
||||||
}, |
}, |
||||||
series: [ |
series: [ |
||||||
{ |
{ |
||||||
name: '访问来源', |
name: "访问来源", |
||||||
type: 'pie', |
type: "pie", |
||||||
radius: '70%', |
radius: "70%", |
||||||
center: ['50%', '60%'], |
center: ["50%", "60%"], |
||||||
label:{ |
label: { |
||||||
show:true, |
show: true, |
||||||
fontSize:16, |
fontSize: 16, |
||||||
formatter:'{b}{c}家\n{d|({d}%)}', |
formatter: "{b}{c}家\n{d|({d}%)}", |
||||||
rich: { |
rich: { |
||||||
d: { |
d: { |
||||||
align: 'center', |
align: "center", |
||||||
fontSize:16 |
fontSize: 16, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
data: [ |
data: [ |
||||||
{value: 500, name: '高层'}, |
{ value: 500, name: "高层" }, |
||||||
{value: 800, name: '地下'}, |
{ value: 800, name: "地下" }, |
||||||
{value: 900, name: '轨道交通'}, |
{ value: 900, name: "轨道交通" }, |
||||||
{value: 800, name: '化工生产'}, |
{ value: 800, name: "化工生产" }, |
||||||
{value: 1200, name: '储罐类'}, |
{ value: 1200, name: "储罐类" }, |
||||||
{value: 1500, name: '厂房'}, |
{ value: 1500, name: "厂房" }, |
||||||
{value: 1400, name: '古建筑'}, |
{ value: 1400, name: "古建筑" }, |
||||||
{value: 600, name: '商市场'}, |
{ value: 600, name: "商市场" }, |
||||||
{value: 568, name: '医院'}, |
{ value: 568, name: "医院" }, |
||||||
{value: 888, name: '学校'}, |
{ value: 888, name: "学校" }, |
||||||
{value: 485, name: '宾馆'}, |
{ value: 485, name: "宾馆" }, |
||||||
{value: 966, name: '娱乐场所'}, |
{ value: 966, name: "娱乐场所" }, |
||||||
{value: 789, name: '餐饮业'}, |
{ value: 789, name: "餐饮业" }, |
||||||
{value: 500, name: '影剧院'}, |
{ value: 500, name: "影剧院" }, |
||||||
{value: 1025, name: '展览建筑'}, |
{ value: 1025, name: "展览建筑" }, |
||||||
{value: 600, name: '隧道'} |
{ value: 600, name: "隧道" }, |
||||||
], |
], |
||||||
emphasis: { |
emphasis: { |
||||||
itemStyle: { |
itemStyle: { |
||||||
shadowBlur: 10, |
shadowBlur: 10, |
||||||
shadowOffsetX: 0, |
shadowOffsetX: 0, |
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
shadowColor: "rgba(0, 0, 0, 0.5)", |
||||||
} |
}, |
||||||
} |
}, |
||||||
} |
}, |
||||||
] |
], |
||||||
}; |
}; |
||||||
this.indexBzt.on('click', (params) => { |
this.indexBzt.on("click", (params) => { |
||||||
// this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
|
// this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
|
||||||
}); |
}); |
||||||
this.indexBzt.setOption(options); |
this.indexBzt.setOption(options); |
||||||
} |
} |
||||||
//柱状图
|
//柱状图
|
||||||
lengthdata=[]//提示数据
|
lengthdata = []; //提示数据
|
||||||
count=0//总数
|
count = 0; //总数
|
||||||
indexData=[]//所有数据
|
indexData = []; //所有数据
|
||||||
organizationId=[] |
organizationId = []; |
||||||
tabledata |
tabledata; |
||||||
barEcharts(){ |
barEcharts() { |
||||||
this.forArr.forEach(item=>{ |
this.forArr.forEach((item) => { |
||||||
let _this = this |
let _this = this; |
||||||
item.echart = echarts.init(document.getElementById('gaoceng'),'walden'); |
item.echart = echarts.init(document.getElementById("gaoceng"), "walden"); |
||||||
let option = { |
let option = { |
||||||
title: { |
title: { |
||||||
text: this.headname+this.tabledata[0].totalCount, |
text: this.headname + this.tabledata[0].totalCount, |
||||||
left: "center", |
left: "center", |
||||||
top:this.padHw?"18":"0", |
top: this.padHw ? "18" : "0", |
||||||
bottom:this.padHw?"0":'510', |
bottom: this.padHw ? "0" : "510", |
||||||
|
textStyle: { |
||||||
|
fontSize: 30, |
||||||
|
}, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
//top: 90,
|
||||||
|
bottom: "18%", |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
id: this.organizationId, |
||||||
|
type: "category", |
||||||
|
data: this.zhiNameData, |
||||||
|
axisLabel: { |
||||||
|
//this.axisLabel,
|
||||||
|
interval: 0, |
||||||
|
rotate: 28, |
||||||
textStyle: { |
textStyle: { |
||||||
fontSize: 30 |
fontSize: 16, |
||||||
} |
color: "#000000", |
||||||
|
}, |
||||||
}, |
}, |
||||||
grid: { |
|
||||||
//top: 90,
|
|
||||||
bottom: '18%', |
|
||||||
}, |
}, |
||||||
xAxis: { |
yAxis: { |
||||||
id:this.organizationId, |
type: "value", |
||||||
type: 'category', |
axisLabel: { |
||||||
data: this.zhiNameData, |
//this.axisLabel,
|
||||||
axisLabel:{ |
textStyle: { |
||||||
//this.axisLabel,
|
fontSize: 16, |
||||||
interval: 0, |
color: "#000000", |
||||||
rotate:28, |
}, |
||||||
textStyle:{ |
|
||||||
fontSize :16, |
|
||||||
color:'#000000' |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}, |
}, |
||||||
yAxis: { |
}, |
||||||
type: 'value', |
tooltip: { |
||||||
axisLabel:{ |
trigger: "item", |
||||||
//this.axisLabel,
|
formatter: (params) => { |
||||||
textStyle:{ |
return this.tableTooltip(params); |
||||||
fontSize :16, |
|
||||||
color:'#000000' |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}, |
}, |
||||||
tooltip: { |
position: this.data.tableTooltipNoShow2, |
||||||
trigger: 'item', |
}, |
||||||
formatter: (params)=>{ |
series: [ |
||||||
return this.tableTooltip(params) |
{ |
||||||
|
data: this.zhiNumData, |
||||||
|
type: "bar", |
||||||
|
markPoint: { |
||||||
|
data: this.tiaoshiPao, |
||||||
}, |
}, |
||||||
position: this.data.tableTooltipNoShow2 |
//showBackground: true,
|
||||||
}, |
backgroundStyle: { |
||||||
series: [{ |
color: "rgba(220, 220, 220, 0.8)", |
||||||
data: this.zhiNumData, |
|
||||||
type: 'bar', |
|
||||||
markPoint: { |
|
||||||
data:this.tiaoshiPao |
|
||||||
}, |
}, |
||||||
//showBackground: true,
|
barWidth: "38", |
||||||
backgroundStyle: { |
//label: this.topTextlabel
|
||||||
color: 'rgba(220, 220, 220, 0.8)' |
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
item.echart.setOption(option); |
||||||
|
item.echart.getZr().on("click", (params) => { |
||||||
|
const pointInPixel = [params.offsetX, params.offsetY]; |
||||||
|
if (item.echart.containPixel("grid", pointInPixel)) { |
||||||
|
let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [ |
||||||
|
params.offsetX, |
||||||
|
params.offsetY, |
||||||
|
])[0]; |
||||||
|
/*事件处理代码书写位置*/ |
||||||
|
if ( |
||||||
|
(this.data.level == "0" || this.data.level == "1") && |
||||||
|
this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1 |
||||||
|
) { |
||||||
|
//总队，支队跳转
|
||||||
|
this.router.navigate( |
||||||
|
[ |
||||||
|
"/statisticanalysis/buildingType_one/buildingType_three_details", |
||||||
|
], |
||||||
|
{ |
||||||
|
queryParams: { |
||||||
|
organizationName: option.xAxis.data[xIndex], |
||||||
|
buildingTypeName: this.headname, |
||||||
|
buildId: this.buildId, |
||||||
|
organizationId: option.xAxis.id[xIndex], |
||||||
|
}, |
||||||
|
} |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.router.navigate(["/statisticanalysis/CompangInfo"], { |
||||||
|
queryParams: { |
||||||
|
name: option.xAxis.data[xIndex], |
||||||
|
type: 1, |
||||||
|
jsid: option.xAxis.id[xIndex], |
||||||
|
buildid: this.buildId, |
||||||
}, |
}, |
||||||
barWidth :'38', |
}); |
||||||
//label: this.topTextlabel
|
} |
||||||
}] |
//this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}});
|
||||||
}; |
|
||||||
item.echart.setOption(option); |
|
||||||
item.echart.getZr().on('click', (params) => { |
|
||||||
const pointInPixel= [params.offsetX, params.offsetY]; |
|
||||||
if (item.echart.containPixel('grid',pointInPixel)) { |
|
||||||
let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
||||||
/*事件处理代码书写位置*/ |
|
||||||
if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ |
|
||||||
//总队，支队跳转
|
|
||||||
this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'buildId':this.buildId,'organizationId':option.xAxis.id[xIndex]}}) |
|
||||||
} |
|
||||||
else{ |
|
||||||
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.buildId}}); |
|
||||||
} |
} |
||||||
//this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}});
|
}); |
||||||
} |
}); |
||||||
|
|
||||||
}); |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
//提示框表格
|
//提示框表格
|
||||||
res |
res; |
||||||
tishiData |
tishiData; |
||||||
tableTooltip(datas){ |
tableTooltip(datas) { |
||||||
for(var a in this.data.obdata[0].organizations){ |
for (var a in this.data.obdata[0].organizations) { |
||||||
if(this.data.obdata[0].organizations[a].organizationName==datas.name){ |
if (this.data.obdata[0].organizations[a].organizationName == datas.name) { |
||||||
this.tishiData=this.data.obdata[0].organizations[a].subOrganizations |
this.tishiData = this.data.obdata[0].organizations[a].subOrganizations; |
||||||
} |
} |
||||||
} |
} |
||||||
var countall=0//总计
|
var countall = 0; //总计
|
||||||
var countbi=0//站比
|
var countbi = 0; //站比
|
||||||
var allCountbi=0//总站比
|
var allCountbi = 0; //总站比
|
||||||
for(var i=0;i<this.tishiData.length;i++){ |
for (var i = 0; i < this.tishiData.length; i++) { |
||||||
countall+=this.tishiData[i].count |
countall += this.tishiData[i].count; |
||||||
} |
} |
||||||
this.res= '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+datas.name+'</span></div>' |
this.res = |
||||||
this.res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
'<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' + |
||||||
this.res+='<thead style="font-size:18px;"><tr>'; |
datas.name + |
||||||
this.res+='<td style="text-align:center;width:30%;">名称</td>'; |
"</span></div>"; |
||||||
this.res+='<td style="text-align:center;width:30%;">数量</td>' |
this.res += |
||||||
this.res+='<td style="text-align:center;width:30%;">总占比</td>' |
'</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
this.res+='</tr></thead>' |
this.res += '<thead style="font-size:18px;"><tr>'; |
||||||
this.res+='<tbody>'; |
this.res += '<td style="text-align:center;width:30%;">名称</td>'; |
||||||
for(var i=0;i<this.tishiData.length;i++){ |
this.res += '<td style="text-align:center;width:30%;">数量</td>'; |
||||||
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 |
this.res += '<td style="text-align:center;width:30%;">总占比</td>'; |
||||||
allCountbi=allCountbi+countbi |
this.res += "</tr></thead>"; |
||||||
this.res+='<tr>' |
this.res += "<tbody>"; |
||||||
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</td>' |
for (var i = 0; i < this.tishiData.length; i++) { |
||||||
this.res+='<td style="text-align:center;">'+this.tishiData[i].count+'</td>' |
countbi = |
||||||
this.res+='<td style="text-align:center;">'+countbi+'%</td></tr>' |
Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; |
||||||
} |
allCountbi = allCountbi + countbi; |
||||||
|
this.res += "<tr>"; |
||||||
this.res+='</tbody>' |
this.res += |
||||||
this.res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">'+countall+'</td><td style="text-align:center;">'+allCountbi.toFixed(2)+'%</td></tfoot>' |
'<td style="text-align:center;">' + |
||||||
this.res+='</table></div></div>' |
this.tishiData[i].organizationName + |
||||||
return this.res |
"</td>"; |
||||||
|
this.res += |
||||||
|
'<td style="text-align:center;">' + this.tishiData[i].count + "</td>"; |
||||||
|
this.res += '<td style="text-align:center;">' + countbi + "%</td></tr>"; |
||||||
|
} |
||||||
|
|
||||||
|
this.res += "</tbody>"; |
||||||
|
this.res += |
||||||
|
'<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">' + |
||||||
|
countall + |
||||||
|
'</td><td style="text-align:center;">' + |
||||||
|
allCountbi.toFixed(2) + |
||||||
|
"%</td></tfoot>"; |
||||||
|
this.res += "</table></div></div>"; |
||||||
|
return this.res; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,153 +1,195 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from "@angular/core"; |
||||||
import { Router } from '@angular/router'; |
import { Router } from "@angular/router"; |
||||||
import {EchartsDataService,} from '../../echarts-data.service' |
import { EchartsDataService } from "../../echarts-data.service"; |
||||||
declare var echarts: any; |
declare var echarts: any; |
||||||
|
|
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-delete-one', |
selector: "app-delete-one", |
||||||
templateUrl: './delete-one.component.html', |
templateUrl: "./delete-one.component.html", |
||||||
styleUrls: ['./delete-one.component.scss'] |
styleUrls: ["./delete-one.component.scss"], |
||||||
}) |
}) |
||||||
export class DeleteOneComponent implements OnInit { |
export class DeleteOneComponent implements OnInit { |
||||||
options:any; |
options: any; |
||||||
|
|
||||||
indexBzt//echarts实例
|
indexBzt; //echarts实例
|
||||||
|
|
||||||
constructor(private router: Router,public echartsData:EchartsDataService) { } |
constructor(private router: Router, public echartsData: EchartsDataService) {} |
||||||
|
|
||||||
ngOnInit() { |
ngOnInit() { |
||||||
window.setTimeout(()=>{ |
window.setTimeout(() => { |
||||||
this.initCharts() |
this.initCharts(); |
||||||
},0) |
}, 0); |
||||||
} |
} |
||||||
ngOnDestroy():void{ |
ngOnDestroy(): void { |
||||||
this.indexBzt.clear() |
if (this.indexBzt) { |
||||||
this.indexBzt.dispose() |
this.indexBzt.clear(); |
||||||
|
this.indexBzt.dispose(); |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
/* 首页饼状图 */ |
/* 首页饼状图 */ |
||||||
initCharts(){ |
initCharts() { |
||||||
//console.log(document.getElementById('indexBzt'))
|
//console.log(document.getElementById('indexBzt'))
|
||||||
|
|
||||||
var ec = echarts as any; |
var ec = echarts as any; |
||||||
this.indexBzt = ec.init(document.getElementById('indexBzt'),'walden'); |
this.indexBzt = ec.init(document.getElementById("indexBzt"), "walden"); |
||||||
var options={ |
var options = { |
||||||
title: { |
title: { |
||||||
text: '删除单位统计（8900家）', |
text: "删除单位统计（8900家）", |
||||||
left: 'center', |
left: "center", |
||||||
top: "7%", |
top: "7%", |
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize:31 |
fontSize: 31, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
tooltip: { |
tooltip: { |
||||||
trigger: 'item', |
trigger: "item", |
||||||
//position: this.echartsData.tableTooltipNoShow2,
|
//position: this.echartsData.tableTooltipNoShow2,
|
||||||
formatter: (params)=>{ |
formatter: (params) => { |
||||||
//return this.biaogeTishi(params.name)
|
//return this.biaogeTishi(params.name)
|
||||||
return this.echartsData.biaogeTishiZhi(params.name) |
return this.echartsData.biaogeTishiZhi(params.name); |
||||||
}
|
}, |
||||||
}, |
}, |
||||||
legend: { |
legend: { |
||||||
orient: 'vertical', |
orient: "vertical", |
||||||
right: 150, |
right: 150, |
||||||
top:80, |
top: 80, |
||||||
//padding:20,
|
//padding:20,
|
||||||
// itemWidth:60,
|
// itemWidth:60,
|
||||||
// itemHeight:25,
|
// itemHeight:25,
|
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize:18, |
fontSize: 18, |
||||||
color:"#000000" |
color: "#000000", |
||||||
},
|
}, |
||||||
data: ['高层', '地下', '轨道交通', '化工生产', '储罐类', '厂房', '古建筑', '商市场', '医院', '学校', '宾馆', '娱乐场所', '餐饮业', '影剧院', '展览建筑', '隧道'] |
data: [ |
||||||
|
"高层", |
||||||
|
"地下", |
||||||
|
"轨道交通", |
||||||
|
"化工生产", |
||||||
|
"储罐类", |
||||||
|
"厂房", |
||||||
|
"古建筑", |
||||||
|
"商市场", |
||||||
|
"医院", |
||||||
|
"学校", |
||||||
|
"宾馆", |
||||||
|
"娱乐场所", |
||||||
|
"餐饮业", |
||||||
|
"影剧院", |
||||||
|
"展览建筑", |
||||||
|
"隧道", |
||||||
|
], |
||||||
}, |
}, |
||||||
series: [ |
series: [ |
||||||
{ |
{ |
||||||
name: '访问来源', |
name: "访问来源", |
||||||
type: 'pie', |
type: "pie", |
||||||
radius: '65%', |
radius: "65%", |
||||||
center: ['50%', '60%'], |
center: ["50%", "60%"], |
||||||
label:{ |
label: { |
||||||
show:true, |
show: true, |
||||||
fontSize:18, |
fontSize: 18, |
||||||
formatter:'{b}{c}家\n{d|({d}%)}', |
formatter: "{b}{c}家\n{d|({d}%)}", |
||||||
rich: { |
rich: { |
||||||
d: { |
d: { |
||||||
align: 'center', |
align: "center", |
||||||
fontSize:18 |
fontSize: 18, |
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
}, |
}, |
||||||
data: [ |
}, |
||||||
{value: 500, name: '高层'}, |
}, |
||||||
{value: 1300, name: '地下',itemStyle:{color:'#02A7F0'}}, |
data: [ |
||||||
{value: 1500, name: '轨道交通'}, |
{ value: 500, name: "高层" }, |
||||||
{value: 1500, name: '化工生产'}, |
{ value: 1300, name: "地下", itemStyle: { color: "#02A7F0" } }, |
||||||
{value: 1700, name: '储罐类'}, |
{ value: 1500, name: "轨道交通" }, |
||||||
{value: 800, name: '厂房'}, |
{ value: 1500, name: "化工生产" }, |
||||||
{value: 1500, name: '古建筑'}, |
{ value: 1700, name: "储罐类" }, |
||||||
{value: 1500, name: '商市场'}, |
{ value: 800, name: "厂房" }, |
||||||
{value: 1700, name: '医院'}, |
{ value: 1500, name: "古建筑" }, |
||||||
{value: 1700, name: '学校'}, |
{ value: 1500, name: "商市场" }, |
||||||
{value: 1700, name: '宾馆'}, |
{ value: 1700, name: "医院" }, |
||||||
{value: 1700, name: '娱乐场所'}, |
{ value: 1700, name: "学校" }, |
||||||
{value: 1700, name: '餐饮业'}, |
{ value: 1700, name: "宾馆" }, |
||||||
{value: 1700, name: '影剧院'}, |
{ value: 1700, name: "娱乐场所" }, |
||||||
{value: 1700, name: '展览建筑'}, |
{ value: 1700, name: "餐饮业" }, |
||||||
{value: 1700, name: '隧道'} |
{ value: 1700, name: "影剧院" }, |
||||||
], |
{ value: 1700, name: "展览建筑" }, |
||||||
emphasis: { |
{ value: 1700, name: "隧道" }, |
||||||
itemStyle: { |
], |
||||||
shadowBlur: 10, |
emphasis: { |
||||||
shadowOffsetX: 0, |
itemStyle: { |
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
shadowBlur: 10, |
||||||
} |
shadowOffsetX: 0, |
||||||
} |
shadowColor: "rgba(0, 0, 0, 0.5)", |
||||||
} |
}, |
||||||
] |
}, |
||||||
|
}, |
||||||
|
], |
||||||
}; |
}; |
||||||
this.indexBzt.on('click', (params) => { |
this.indexBzt.on("click", (params) => { |
||||||
this.router.navigateByUrl('/statisticanalysis/delete_one/delete_two'); |
this.router.navigateByUrl("/statisticanalysis/delete_one/delete_two"); |
||||||
}); |
}); |
||||||
this.indexBzt.setOption(options); |
this.indexBzt.setOption(options); |
||||||
} |
} |
||||||
/** |
/** |
||||||
* @name: 表格提示框封装 |
* @name: 表格提示框封装 |
||||||
* @test: test font |
* @test: test font |
||||||
* @msg:
|
* @msg: |
||||||
* @param {string(表头)} |
* @param {string(表头)} |
||||||
* @return {type}
|
* @return {type} |
||||||
*/ |
*/ |
||||||
biaogeTishi(biaotou:string){ |
biaogeTishi(biaotou: string) { |
||||||
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' |
var shuju = |
||||||
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
'[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'; |
||||||
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' |
shuju += |
||||||
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' |
'{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; |
||||||
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' |
shuju += |
||||||
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
'{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'; |
||||||
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' |
shuju += |
||||||
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' |
'{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'; |
||||||
var jsonObj = JSON.parse(shuju); |
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>' |
'{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'; |
||||||
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"; >'; |
shuju += |
||||||
res+='<thead><tr>'; |
'{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; |
||||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
shuju += |
||||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
'{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'; |
||||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
shuju += |
||||||
res+='</tr></thead>' |
'{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'; |
||||||
res+='<tbody>'; |
var jsonObj = JSON.parse(shuju); |
||||||
for(var i=0;i<jsonObj.length;i++){ |
var res = |
||||||
res+='<tr>' |
'<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;">' + |
||||||
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
biaotou + |
||||||
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
"</span></div>"; |
||||||
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>' |
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+='</tbody>' |
res += |
||||||
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>' |
'<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
res+='</table></div></div>' |
res += |
||||||
return 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; |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,227 +1,311 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from "@angular/core"; |
||||||
import { Router } from '@angular/router'; |
import { Router } from "@angular/router"; |
||||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
import { |
||||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
MatDialog, |
||||||
import { ActivatedRoute } from '@angular/router'; |
MatDialogRef, |
||||||
import { EchartsDataService } from '../../echarts-data.service'; |
MAT_DIALOG_DATA, |
||||||
|
} from "@angular/material/dialog"; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; |
||||||
|
import { ActivatedRoute } from "@angular/router"; |
||||||
|
import { EchartsDataService } from "../../echarts-data.service"; |
||||||
declare var echarts: any; |
declare var echarts: any; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-delete-two-newadd', |
selector: "app-delete-two-newadd", |
||||||
templateUrl: './delete-two-newadd.component.html', |
templateUrl: "./delete-two-newadd.component.html", |
||||||
styleUrls: ['./delete-two-newadd.component.scss'] |
styleUrls: ["./delete-two-newadd.component.scss"], |
||||||
}) |
}) |
||||||
export class DeleteTwoNewaddComponent implements OnInit { |
export class DeleteTwoNewaddComponent implements OnInit { |
||||||
|
constructor( |
||||||
|
private router: Router, |
||||||
|
public dialog: MatDialog, |
||||||
|
public snackBar: MatSnackBar, |
||||||
|
private serviceData: EchartsDataService, |
||||||
|
public route: ActivatedRoute |
||||||
|
) {} |
||||||
|
|
||||||
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } |
year: String; |
||||||
|
buildingTypeName: String; |
||||||
year:String |
level: String; |
||||||
buildingTypeName:String |
setTimeoutObj; //延时器需要清除
|
||||||
level:String |
|
||||||
setTimeoutObj//延时器需要清除
|
|
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
this.dateInit () |
this.dateInit(); |
||||||
this.bianli() |
this.bianli(); |
||||||
this.route.queryParams.subscribe(params => { |
this.route.queryParams.subscribe((params) => { |
||||||
this.year = params['level']; |
this.year = params["level"]; |
||||||
this.buildingTypeName = params['headtext']; |
this.buildingTypeName = params["headtext"]; |
||||||
|
}); |
||||||
|
this.setTimeoutObj = window.setTimeout(() => { |
||||||
|
this.detailEcharts(); |
||||||
}); |
}); |
||||||
this.setTimeoutObj = window.setTimeout(()=>{ |
|
||||||
this.detailEcharts() |
|
||||||
}) |
|
||||||
} |
} |
||||||
ngOnDestroy(){ |
ngOnDestroy() { |
||||||
window.clearTimeout(this.setTimeoutObj); |
window.clearTimeout(this.setTimeoutObj); |
||||||
this.detailPlanEchart.clear() |
if (this.detailPlanEchart) { |
||||||
this.detailPlanEchart.dispose() |
this.detailPlanEchart.clear(); |
||||||
|
this.detailPlanEchart.dispose(); |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
selectType:string = 'month'; //选择当前的 查询类型 按月/年
|
selectType: string = "month"; //选择当前的 查询类型 按月/年
|
||||||
|
|
||||||
//查询数据
|
//查询数据
|
||||||
years:any = [] |
years: any = []; |
||||||
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; |
||||||
|
|
||||||
//日期初始化
|
//日期初始化
|
||||||
dateInit () { |
dateInit() { |
||||||
let date = (new Date()).getFullYear() |
let date = new Date().getFullYear(); |
||||||
for (let i=date; i>=date-10;i--) { |
for (let i = date; i >= date - 10; i--) { |
||||||
this.years.unshift(i) |
this.years.unshift(i); |
||||||
} |
} |
||||||
} |
} |
||||||
selectOneYear:any = (new Date()).getFullYear() //开始年份
|
selectOneYear: any = new Date().getFullYear(); //开始年份
|
||||||
selectStartMonth:any = 1 //开始月份
|
selectStartMonth: any = 1; //开始月份
|
||||||
Submit (e) { |
Submit(e) {} |
||||||
|
selectStartYear: any = new Date().getFullYear(); //开始年份
|
||||||
} |
|
||||||
selectStartYear:any = (new Date()).getFullYear() //开始年份
|
|
||||||
|
|
||||||
topTextlabel = { |
topTextlabel = { |
||||||
show: true, // 开启显示
|
show: true, // 开启显示
|
||||||
position: 'top', // 在上方显示
|
position: "top", // 在上方显示
|
||||||
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
|
||||||
verticalAlign: 'middle', |
verticalAlign: "middle", |
||||||
textStyle: { // 数值样式
|
textStyle: { |
||||||
color: 'black', |
// 数值样式
|
||||||
fontSize: 12 |
color: "black", |
||||||
} |
fontSize: 12, |
||||||
}//柱状图数值顶部显示
|
}, |
||||||
zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] |
}; //柱状图数值顶部显示
|
||||||
zhongNumData = [0,0,0,0,0,0,0,0,0,0,0] |
zhongNameData = [ |
||||||
|
"浦东中队", |
||||||
|
"黄浦中队", |
||||||
|
"徐汇中队", |
||||||
|
"长宁中队", |
||||||
|
"静安中队", |
||||||
|
"普陀中队", |
||||||
|
"虹口中队", |
||||||
|
"杨浦中队", |
||||||
|
"闵行中队", |
||||||
|
"宝山中队", |
||||||
|
"嘉定中队", |
||||||
|
]; |
||||||
|
zhongNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
||||||
|
|
||||||
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] |
zhiNameData = [ |
||||||
zhiNumData = [0,0,0,0,0,0,0,0,0,0,0] |
"浦东支队", |
||||||
tiaoshiPao:any |
"黄浦支队", |
||||||
|
"徐汇支队", |
||||||
|
"长宁支队", |
||||||
|
"静安支队", |
||||||
|
"普陀支队", |
||||||
|
"虹口支队", |
||||||
|
"杨浦支队", |
||||||
|
"闵行支队", |
||||||
|
"宝山支队", |
||||||
|
"嘉定支队", |
||||||
|
]; |
||||||
|
zhiNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
||||||
|
tiaoshiPao: any; |
||||||
//气泡提示数据获取
|
//气泡提示数据获取
|
||||||
bianli(){ |
bianli() { |
||||||
var arrshuzu='['; |
var arrshuzu = "["; |
||||||
for(var i=0;i<this.dateNum.length;i++){ |
for (var i = 0; i < this.dateNum.length; i++) { |
||||||
arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},' |
arrshuzu += |
||||||
|
'{"value":' + |
||||||
|
this.dateNum[i] + |
||||||
|
',"coord":[' + |
||||||
|
i + |
||||||
|
"," + |
||||||
|
this.dateNum[i] + |
||||||
|
'],"name":' + |
||||||
|
'"' + |
||||||
|
this.date[i] + |
||||||
|
'"' + |
||||||
|
"},"; |
||||||
} |
} |
||||||
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1); |
||||||
arrshuzu+=']' |
arrshuzu += "]"; |
||||||
this.tiaoshiPao=JSON.parse(arrshuzu) |
this.tiaoshiPao = JSON.parse(arrshuzu); |
||||||
//return tishiPao
|
//return tishiPao
|
||||||
} |
} |
||||||
//返回
|
//返回
|
||||||
goBack () { |
goBack() { |
||||||
history.go(-1) |
history.go(-1); |
||||||
//this.echartsData.statefulInspectionToggle = true
|
//this.echartsData.statefulInspectionToggle = true
|
||||||
} |
} |
||||||
|
|
||||||
detailPlanEchart |
detailPlanEchart; |
||||||
option |
option; |
||||||
date = ['高层', '轨道交通', '储罐类', '古建筑', '地下', '化工生产', '厂房', '商市场'] |
date = [ |
||||||
dateNum = [0, 0, 0, 0, 0, 0, 0, 0] |
"高层", |
||||||
|
"轨道交通", |
||||||
|
"储罐类", |
||||||
|
"古建筑", |
||||||
|
"地下", |
||||||
|
"化工生产", |
||||||
|
"厂房", |
||||||
|
"商市场", |
||||||
|
]; |
||||||
|
dateNum = [0, 0, 0, 0, 0, 0, 0, 0]; |
||||||
|
|
||||||
detailEcharts(){ |
detailEcharts() { |
||||||
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');
|
this.detailPlanEchart = echarts.init( |
||||||
|
document.getElementById("barEchart"), |
||||||
|
"skinUpp" |
||||||
|
); |
||||||
this.option = { |
this.option = { |
||||||
grid: { |
grid: { |
||||||
top: 90, |
top: 90, |
||||||
left:40, |
left: 40, |
||||||
right: 20, |
right: 20, |
||||||
//bottom: 20,
|
//bottom: 20,
|
||||||
}, |
}, |
||||||
// 标题
|
// 标题
|
||||||
title: { |
title: { |
||||||
text: this.buildingTypeName + '(' + this.year + ')', |
text: this.buildingTypeName + "(" + this.year + ")", |
||||||
top: -4, |
top: -4, |
||||||
left: 'center', |
left: "center", |
||||||
textStyle:{ |
textStyle: { |
||||||
//文字颜色
|
//文字颜色
|
||||||
color:'#000', |
color: "#000", |
||||||
fontSize: 30 |
fontSize: 30, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
//提示框
|
//提示框
|
||||||
tooltip: { |
tooltip: { |
||||||
trigger: 'axis', |
trigger: "axis", |
||||||
formatter: (params)=>{ |
formatter: (params) => { |
||||||
if(params[0].seriesName == "year"){ |
if (params[0].seriesName == "year") { |
||||||
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) |
return this.serviceData.tableTooltip( |
||||||
}else{ |
this.serviceData.monthTooltip, |
||||||
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) |
params[0].name |
||||||
|
); |
||||||
|
} else { |
||||||
|
return this.serviceData.tableTooltip( |
||||||
|
this.serviceData.tableDataZhi, |
||||||
|
params[0].name |
||||||
|
); |
||||||
} |
} |
||||||
}, |
}, |
||||||
position:this.serviceData.tableTooltipNoShow2 |
position: this.serviceData.tableTooltipNoShow2, |
||||||
}, |
}, |
||||||
// x轴
|
// x轴
|
||||||
xAxis: { |
xAxis: { |
||||||
type: 'category', |
type: "category", |
||||||
data: this.date, |
data: this.date, |
||||||
axisLabel: { |
axisLabel: { |
||||||
color: "#000", //刻度线标签颜色
|
color: "#000", //刻度线标签颜色
|
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize :18, |
fontSize: 18, |
||||||
color:'#000000' |
color: "#000000", |
||||||
} |
}, |
||||||
}, |
}, |
||||||
//设置坐标轴字体颜色和宽度
|
//设置坐标轴字体颜色和宽度
|
||||||
axisLine: {
|
axisLine: { |
||||||
lineStyle: { |
lineStyle: { |
||||||
color: "#000", |
color: "#000", |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
splitLine: {//分割线配置
|
splitLine: { |
||||||
show:true, |
//分割线配置
|
||||||
|
show: true, |
||||||
lineStyle: { |
lineStyle: { |
||||||
color: '#999', |
color: "#999", |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
// y轴
|
// y轴
|
||||||
yAxis: { |
yAxis: { |
||||||
type: 'value', |
type: "value", |
||||||
name: '个', |
name: "个", |
||||||
axisLabel: { |
axisLabel: { |
||||||
//color: "#000", //刻度线标签颜色
|
//color: "#000", //刻度线标签颜色
|
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize :18, |
fontSize: 18, |
||||||
color:'#000000' |
color: "#000000", |
||||||
} |
}, |
||||||
}, |
}, |
||||||
//设置坐标轴字体颜色和宽度
|
//设置坐标轴字体颜色和宽度
|
||||||
axisLine: { |
axisLine: { |
||||||
lineStyle: { |
lineStyle: { |
||||||
color: "#000", |
color: "#000", |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
// 数据
|
// 数据
|
||||||
series: [{ |
series: [ |
||||||
name: 'xxx', |
{ |
||||||
type: 'line', |
name: "xxx", |
||||||
|
type: "line", |
||||||
markPoint: { |
markPoint: { |
||||||
symbolSize:[65, 65], |
symbolSize: [65, 65], |
||||||
data: this.tiaoshiPao |
data: this.tiaoshiPao, |
||||||
}, |
}, |
||||||
data: this.dateNum, |
data: this.dateNum, |
||||||
} |
}, |
||||||
], |
], |
||||||
}; |
}; |
||||||
this.detailPlanEchart.setOption(this.option); |
this.detailPlanEchart.setOption(this.option); |
||||||
this.detailPlanEchart.getZr().on('click',params=>{ |
this.detailPlanEchart.getZr().on("click", (params) => { |
||||||
const pointInPixel= [params.offsetX, params.offsetY]; |
const pointInPixel = [params.offsetX, params.offsetY]; |
||||||
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { |
if (this.detailPlanEchart.containPixel("grid", pointInPixel)) { |
||||||
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
let xIndex = this.detailPlanEchart.convertFromPixel( |
||||||
|
{ seriesIndex: 0 }, |
||||||
|
[params.offsetX, params.offsetY] |
||||||
|
)[0]; |
||||||
/*事件处理代码书写位置*/ |
/*事件处理代码书写位置*/ |
||||||
if(this.serviceData.level=='0'){ |
if (this.serviceData.level == "0") { |
||||||
this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1'}}); |
this.router.navigate(["/statisticanalysis/delete_one/delete_there"], { |
||||||
}else if(this.serviceData.level=='1'){ |
queryParams: { |
||||||
this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+this.buildingTypeName}}); |
level: this.option.xAxis.data[xIndex], |
||||||
|
headtext: this.buildingTypeName, |
||||||
|
zhong: "1", |
||||||
|
}, |
||||||
|
}); |
||||||
|
} else if (this.serviceData.level == "1") { |
||||||
|
this.router.navigate(["/statisticanalysis/delete_one/delete_four"], { |
||||||
|
queryParams: { |
||||||
|
level: this.option.xAxis.data[xIndex] + this.buildingTypeName, |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
}); |
}); |
||||||
} |
} |
||||||
//返回按钮
|
//返回按钮
|
||||||
backBtn(){ |
backBtn() { |
||||||
window.history.go(-1) |
window.history.go(-1); |
||||||
}
|
|
||||||
|
|
||||||
tableTooltip(params:any){ |
|
||||||
var data = [ |
|
||||||
{name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} |
|
||||||
] |
|
||||||
var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>' |
|
||||||
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
|
||||||
res+='<thead style="font-size:18px;"><tr>'; |
|
||||||
res+='<td style="text-align:center;width:30%;">名称</td>'; |
|
||||||
res+='<td style="text-align:center;width:30%;">数量</td>' |
|
||||||
res+='<td style="text-align:center;width:30%;">总占比</td>' |
|
||||||
res+='</tr></thead>' |
|
||||||
res+='<tbody>'; |
|
||||||
for(var i=0;i<data.length;i++){ |
|
||||||
res+='<tr>' |
|
||||||
res+='<td style="text-align:center;">'+data[i].name+'</td>' |
|
||||||
res+='<td style="text-align:center;">'+data[i].number+'</td>' |
|
||||||
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>' |
|
||||||
} |
|
||||||
|
|
||||||
res+='</tbody>' |
|
||||||
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
|
|
||||||
res+='</table></div></div>' |
|
||||||
return res |
|
||||||
} |
} |
||||||
|
|
||||||
|
tableTooltip(params: any) { |
||||||
|
var data = [ |
||||||
|
{ |
||||||
|
name: params.name, |
||||||
|
number: params.value, |
||||||
|
zhanbi: ((params.value / 1340) * 100).toFixed(2) + "%", |
||||||
|
}, |
||||||
|
]; |
||||||
|
var res = |
||||||
|
'<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">' + |
||||||
|
params.name + |
||||||
|
"</span></div>"; |
||||||
|
res += |
||||||
|
'</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
||||||
|
res += '<thead style="font-size:18px;"><tr>'; |
||||||
|
res += '<td style="text-align:center;width:30%;">名称</td>'; |
||||||
|
res += '<td style="text-align:center;width:30%;">数量</td>'; |
||||||
|
res += '<td style="text-align:center;width:30%;">总占比</td>'; |
||||||
|
res += "</tr></thead>"; |
||||||
|
res += "<tbody>"; |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
res += "<tr>"; |
||||||
|
res += '<td style="text-align:center;">' + data[i].name + "</td>"; |
||||||
|
res += '<td style="text-align:center;">' + data[i].number + "</td>"; |
||||||
|
res += '<td style="text-align:center;">' + data[i].zhanbi + "</td></tr>"; |
||||||
|
} |
||||||
|
|
||||||
|
res += "</tbody>"; |
||||||
|
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
|
||||||
|
res += "</table></div></div>"; |
||||||
|
return res; |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,310 +1,543 @@ |
|||||||
/* |
/* |
||||||
* @Descripttion:
|
* @Descripttion: |
||||||
* @version:
|
* @version: |
||||||
* @Author: sueRimn |
* @Author: sueRimn |
||||||
* @Date: 2020-09-01 15:24:39 |
* @Date: 2020-09-01 15:24:39 |
||||||
* @LastEditors: sueRimn |
* @LastEditors: sueRimn |
||||||
* @LastEditTime: 2021-07-21 08:54:04 |
* @LastEditTime: 2021-07-21 08:54:04 |
||||||
*/ |
*/ |
||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from "@angular/core"; |
||||||
import { Router } from '@angular/router'; |
import { Router } from "@angular/router"; |
||||||
import {EchartsDataService,} from '../../echarts-data.service' |
import { EchartsDataService } from "../../echarts-data.service"; |
||||||
declare var echarts: any; |
declare var echarts: any; |
||||||
declare var CryptoJS |
declare var CryptoJS; |
||||||
|
|
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-page-one', |
selector: "app-page-one", |
||||||
templateUrl: './page-one.component.html', |
templateUrl: "./page-one.component.html", |
||||||
styleUrls: ['./page-one.component.scss'] |
styleUrls: ["./page-one.component.scss"], |
||||||
}) |
}) |
||||||
export class PageOneComponent implements OnInit { |
export class PageOneComponent implements OnInit { |
||||||
options:any; |
options: any; |
||||||
|
|
||||||
constructor(private router: Router,public echartsData:EchartsDataService) { } |
|
||||||
|
|
||||||
padHw |
constructor(private router: Router, public echartsData: EchartsDataService) {} |
||||||
orid |
|
||||||
|
padHw; |
||||||
|
orid; |
||||||
ngOnInit() { |
ngOnInit() { |
||||||
if(window.matchMedia("(max-width: 1400px)").matches){ |
if (window.matchMedia("(max-width: 1400px)").matches) { |
||||||
this.padHw=true |
this.padHw = true; |
||||||
//this.padjt=
|
//this.padjt=
|
||||||
}else{ |
} else { |
||||||
this.padHw=false |
this.padHw = false; |
||||||
} |
} |
||||||
if(sessionStorage.getItem('refresh') === 'true') { |
if (sessionStorage.getItem("refresh") === "true") { |
||||||
sessionStorage.removeItem('refresh'); |
sessionStorage.removeItem("refresh"); |
||||||
location.reload(); |
location.reload(); |
||||||
} |
} |
||||||
|
|
||||||
window.setTimeout(()=>{ |
window.setTimeout(() => { |
||||||
this.getechartsdata() |
this.getechartsdata(); |
||||||
}) |
}); |
||||||
let jwt = sessionStorage.getItem("token"); |
let jwt = sessionStorage.getItem("token"); |
||||||
let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]); |
let rawJwt = CryptoJS.enc.Base64.parse(jwt.split(".")[1]); |
||||||
let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt); |
let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt); |
||||||
let identityJsonparse=JSON.parse(identityJson) |
let identityJsonparse = JSON.parse(identityJson); |
||||||
this.orid=identityJsonparse.oid |
this.orid = identityJsonparse.oid; |
||||||
//console.log(identityJsonparse)
|
//console.log(identityJsonparse)
|
||||||
} |
} |
||||||
ngOnDestroy(): void { |
ngOnDestroy(): void { |
||||||
this.indexBzt.clear() |
if (!this.indexBzt) { |
||||||
this.indexBzt.dispose() |
return; |
||||||
|
} |
||||||
|
this.indexBzt.clear(); |
||||||
|
this.indexBzt.dispose(); |
||||||
} |
} |
||||||
async getechartsdata(){ |
async getechartsdata() { |
||||||
await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans`) |
await this.echartsData.getData(null, `/api/StatisticsAnalysis/Plans`); |
||||||
this.initCharts("pieone") |
this.initCharts("pieone"); |
||||||
this.initCharts("pietwo") |
this.initCharts("pietwo"); |
||||||
} |
} |
||||||
//级别和类型转换
|
//级别和类型转换
|
||||||
pieonetype=true//级别
|
pieonetype = true; //级别
|
||||||
clickhuan(){ |
clickhuan() { |
||||||
this.pieonetype=!this.pieonetype |
this.pieonetype = !this.pieonetype; |
||||||
this.initCharts("pieone") |
this.initCharts("pieone"); |
||||||
} |
} |
||||||
|
|
||||||
/* 首页饼状图 */ |
/* 首页饼状图 */ |
||||||
indexBzt |
indexBzt; |
||||||
tabledata |
tabledata; |
||||||
count |
count; |
||||||
indexData |
indexData; |
||||||
planCategoriesData=[]//预案级别
|
planCategoriesData = []; //预案级别
|
||||||
planStatusesData=[]//预案状态
|
planStatusesData = []; //预案状态
|
||||||
planTypeStatisticsdata=[]//预案类型
|
planTypeStatisticsdata = []; //预案类型
|
||||||
initCharts(tid){ |
initCharts(tid) { |
||||||
this.planTypeStatisticsdata=[] |
this.planTypeStatisticsdata = []; |
||||||
this.planCategoriesData=[] |
this.planCategoriesData = []; |
||||||
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); |
||||||
if(tid=='pieone') |
if (tid == "pieone") { |
||||||
{ |
if (this.pieonetype) { |
||||||
if(this.pieonetype){ |
this.tabledata[0].planCategoryStatistics.planCategories.forEach( |
||||||
this.tabledata[0].planCategoryStatistics.planCategories.forEach((value,index,array) => { |
(value, index, array) => { |
||||||
if(array[index].planCategoryName=='LevelOne'){ |
if (array[index].planCategoryName == "LevelOne") { |
||||||
this.planCategoriesData.push({name:'Ⅰ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:1}) |
this.planCategoriesData.push({ |
||||||
}else if(array[index].planCategoryName=='LevelTwo'){ |
name: "Ⅰ级预案", |
||||||
this.planCategoriesData.push({name:'Ⅱ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:2}) |
value: array[index].count, |
||||||
}else if(array[index].planCategoryName=='LevelThree'){ |
planStatusName: array[index].planCategoryName, |
||||||
this.planCategoriesData.push({name:'Ⅲ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:3}) |
type: 1, |
||||||
}else if(array[index].planCategoryName=='LevelFour'){ |
}); |
||||||
this.planCategoriesData.push({name:'Ⅳ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:4}) |
} else if (array[index].planCategoryName == "LevelTwo") { |
||||||
}else if(array[index].planCategoryName=='LevelFive'){ |
this.planCategoriesData.push({ |
||||||
this.planCategoriesData.push({name:'Ⅴ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:5}) |
name: "Ⅱ级预案", |
||||||
|
value: array[index].count, |
||||||
|
planStatusName: array[index].planCategoryName, |
||||||
|
type: 2, |
||||||
|
}); |
||||||
|
} else if (array[index].planCategoryName == "LevelThree") { |
||||||
|
this.planCategoriesData.push({ |
||||||
|
name: "Ⅲ级预案", |
||||||
|
value: array[index].count, |
||||||
|
planStatusName: array[index].planCategoryName, |
||||||
|
type: 3, |
||||||
|
}); |
||||||
|
} else if (array[index].planCategoryName == "LevelFour") { |
||||||
|
this.planCategoriesData.push({ |
||||||
|
name: "Ⅳ级预案", |
||||||
|
value: array[index].count, |
||||||
|
planStatusName: array[index].planCategoryName, |
||||||
|
type: 4, |
||||||
|
}); |
||||||
|
} else if (array[index].planCategoryName == "LevelFive") { |
||||||
|
this.planCategoriesData.push({ |
||||||
|
name: "Ⅴ级预案", |
||||||
|
value: array[index].count, |
||||||
|
planStatusName: array[index].planCategoryName, |
||||||
|
type: 5, |
||||||
|
}); |
||||||
|
} |
||||||
} |
} |
||||||
}); |
); |
||||||
}else{ |
} else { |
||||||
this.tabledata[0].planTypeStatistics.planTypes.forEach((value,index,array) => { |
this.tabledata[0].planTypeStatistics.planTypes.forEach( |
||||||
if(array[index].planTypeName=='Plan2D'){ |
(value, index, array) => { |
||||||
this.planTypeStatisticsdata.push({name:'二维预案',value:array[index].count,planStatusName:array[index].planTypeName,type:1}) |
if (array[index].planTypeName == "Plan2D") { |
||||||
}else if(array[index].planTypeName=='Plan3D'){ |
this.planTypeStatisticsdata.push({ |
||||||
this.planTypeStatisticsdata.push({name:'三维预案',value:array[index].count,planStatusName:array[index].planTypeName,type:2}) |
name: "二维预案", |
||||||
}else if(array[index].planTypeName=='Other'){ |
value: array[index].count, |
||||||
this.planTypeStatisticsdata.push({name:'其它预案',value:array[index].count,planStatusName:array[index].planTypeName,type:3}) |
planStatusName: array[index].planTypeName, |
||||||
}else if(array[index].planTypeName=='PlanText'){ |
type: 1, |
||||||
this.planTypeStatisticsdata.push({name:'文本预案',value:array[index].count,planStatusName:array[index].planTypeName,type:4}) |
}); |
||||||
|
} else if (array[index].planTypeName == "Plan3D") { |
||||||
|
this.planTypeStatisticsdata.push({ |
||||||
|
name: "三维预案", |
||||||
|
value: array[index].count, |
||||||
|
planStatusName: array[index].planTypeName, |
||||||
|
type: 2, |
||||||
|
}); |
||||||
|
} else if (array[index].planTypeName == "Other") { |
||||||
|
this.planTypeStatisticsdata.push({ |
||||||
|
name: "其它预案", |
||||||
|
value: array[index].count, |
||||||
|
planStatusName: array[index].planTypeName, |
||||||
|
type: 3, |
||||||
|
}); |
||||||
|
} else if (array[index].planTypeName == "PlanText") { |
||||||
|
this.planTypeStatisticsdata.push({ |
||||||
|
name: "文本预案", |
||||||
|
value: array[index].count, |
||||||
|
planStatusName: array[index].planTypeName, |
||||||
|
type: 4, |
||||||
|
}); |
||||||
|
} |
||||||
} |
} |
||||||
}); |
); |
||||||
} |
} |
||||||
|
} else { |
||||||
}else{ |
this.tabledata[0].planStatusStatistics.planStatuses.forEach( |
||||||
this.tabledata[0].planStatusStatistics.planStatuses.forEach((value,index,array) => { |
(value, index, array) => { |
||||||
if(array[index].planStatusName=='New'){ |
if (array[index].planStatusName == "New") { |
||||||
this.planStatusesData.push({name:'预案新增',value:array[index].count,type:1,planStatusName:array[index].planStatusName}) |
this.planStatusesData.push({ |
||||||
}else if(array[index].planStatusName=='Auditing'){ |
name: "预案新增", |
||||||
this.planStatusesData.push({name:'预案审核中',value:array[index].count,type:2,planStatusName:array[index].planStatusName}) |
value: array[index].count, |
||||||
}else if(array[index].planStatusName=='Approved'){ |
type: 1, |
||||||
this.planStatusesData.push({name:'预案审核通过',value:array[index].count,type:3,planStatusName:array[index].planStatusName}) |
planStatusName: array[index].planStatusName, |
||||||
}else if(array[index].planStatusName=='Rejected'){ |
}); |
||||||
this.planStatusesData.push({name:'预案审核退回',value:array[index].count,type:4,planStatusName:array[index].planStatusName}) |
} else if (array[index].planStatusName == "Auditing") { |
||||||
}else if(array[index].planStatusName=='Editing'){ |
this.planStatusesData.push({ |
||||||
this.planStatusesData.push({name:'预案编制',value:array[index].count,type:5,planStatusName:array[index].planStatusName}) |
name: "预案审核中", |
||||||
|
value: array[index].count, |
||||||
|
type: 2, |
||||||
|
planStatusName: array[index].planStatusName, |
||||||
|
}); |
||||||
|
} else if (array[index].planStatusName == "Approved") { |
||||||
|
this.planStatusesData.push({ |
||||||
|
name: "预案审核通过", |
||||||
|
value: array[index].count, |
||||||
|
type: 3, |
||||||
|
planStatusName: array[index].planStatusName, |
||||||
|
}); |
||||||
|
} else if (array[index].planStatusName == "Rejected") { |
||||||
|
this.planStatusesData.push({ |
||||||
|
name: "预案审核退回", |
||||||
|
value: array[index].count, |
||||||
|
type: 4, |
||||||
|
planStatusName: array[index].planStatusName, |
||||||
|
}); |
||||||
|
} else if (array[index].planStatusName == "Editing") { |
||||||
|
this.planStatusesData.push({ |
||||||
|
name: "预案编制", |
||||||
|
value: array[index].count, |
||||||
|
type: 5, |
||||||
|
planStatusName: array[index].planStatusName, |
||||||
|
}); |
||||||
|
} |
||||||
} |
} |
||||||
}); |
); |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
var ec = echarts as any; |
var ec = echarts as any; |
||||||
this.indexBzt = ec.init(document.getElementById(tid),'walden'); |
this.indexBzt = ec.init(document.getElementById(tid), "walden"); |
||||||
var options={ |
var options = { |
||||||
title: { |
title: { |
||||||
text:tid=='pieone'&&this.pieonetype?`预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）` :tid=='pieone'&&!this.pieonetype?`预案类型统计（${this.tabledata[0].planTypeStatistics.totalCount}份）`:`预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`, |
text: |
||||||
top: "7%", |
tid == "pieone" && this.pieonetype |
||||||
left: 'center', |
? `预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）` |
||||||
textStyle:{ |
: tid == "pieone" && !this.pieonetype |
||||||
fontSize:this.padHw?25: 31 |
? `预案类型统计（${this.tabledata[0].planTypeStatistics.totalCount}份）` |
||||||
} |
: `预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`, |
||||||
|
top: "7%", |
||||||
|
left: "center", |
||||||
|
textStyle: { |
||||||
|
fontSize: this.padHw ? 25 : 31, |
||||||
|
}, |
||||||
}, |
}, |
||||||
tooltip: { |
tooltip: { |
||||||
trigger: 'item', |
trigger: "item", |
||||||
formatter: (params)=>{ |
formatter: (params) => { |
||||||
this.echartsData.biaogeTishiyuan(params.data,tid,this.pieonetype) |
this.echartsData.biaogeTishiyuan(params.data, tid, this.pieonetype); |
||||||
return this.echartsData.res |
return this.echartsData.res; |
||||||
} |
}, |
||||||
}, |
}, |
||||||
legend: { |
legend: { |
||||||
bottom: 50, |
bottom: 50, |
||||||
left: 'center', |
left: "center", |
||||||
//padding:20,
|
//padding:20,
|
||||||
// itemWidth:60,
|
// itemWidth:60,
|
||||||
// itemHeight:25,
|
// itemHeight:25,
|
||||||
textStyle:{ |
textStyle: { |
||||||
fontSize:this.padHw?15: 18, |
fontSize: this.padHw ? 15 : 18, |
||||||
color:"#000000" |
color: "#000000", |
||||||
}, |
}, |
||||||
data:tid=='pieone'&&this.pieonetype?['Ⅰ级预案', 'Ⅱ级预案', 'Ⅲ级预案', 'Ⅳ级预案', 'Ⅴ级预案']:tid=='pieone'&&!this.pieonetype?['二维预案', '三维预案', '其它预案', '文本预案'] :['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] |
data: |
||||||
|
tid == "pieone" && this.pieonetype |
||||||
|
? ["Ⅰ级预案", "Ⅱ级预案", "Ⅲ级预案", "Ⅳ级预案", "Ⅴ级预案"] |
||||||
|
: tid == "pieone" && !this.pieonetype |
||||||
|
? ["二维预案", "三维预案", "其它预案", "文本预案"] |
||||||
|
: [ |
||||||
|
"预案新增", |
||||||
|
"预案审核通过", |
||||||
|
"预案编制", |
||||||
|
"预案审核退回", |
||||||
|
"预案审核中", |
||||||
|
], |
||||||
}, |
}, |
||||||
series: [ |
series: [ |
||||||
{ |
{ |
||||||
name: '访问来源', |
name: "访问来源", |
||||||
type: 'pie', |
type: "pie", |
||||||
radius: '50%', |
radius: "50%", |
||||||
center: ['50%', '45%'], |
center: ["50%", "45%"], |
||||||
label:{ |
label: { |
||||||
normal:{ |
normal: { |
||||||
show:true, |
show: true, |
||||||
// position: 'inner',
|
// position: 'inner',
|
||||||
fontSize:this.padHw?14: 18, |
fontSize: this.padHw ? 14 : 18, |
||||||
formatter:this.padHw?'{b} \n{c}份({d}%)' :'{b} {c}份\n({d}%)', |
formatter: this.padHw ? "{b} \n{c}份({d}%)" : "{b} {c}份\n({d}%)", |
||||||
}, |
}, |
||||||
rich: { |
rich: { |
||||||
d: { |
d: { |
||||||
align: 'center', |
align: "center", |
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
}, |
}, |
||||||
data:tid=='pieone'&&this.pieonetype?this.planCategoriesData:tid=='pieone'&&!this.pieonetype?this.planTypeStatisticsdata:this.planStatusesData, |
}, |
||||||
emphasis: { |
}, |
||||||
itemStyle: { |
data: |
||||||
shadowBlur: 10, |
tid == "pieone" && this.pieonetype |
||||||
shadowOffsetX: 0, |
? this.planCategoriesData |
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
: tid == "pieone" && !this.pieonetype |
||||||
} |
? this.planTypeStatisticsdata |
||||||
} |
: this.planStatusesData, |
||||||
} |
emphasis: { |
||||||
] |
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: "rgba(0, 0, 0, 0.5)", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
}; |
}; |
||||||
this.indexBzt.on('click', (params) => { |
this.indexBzt.on("click", (params) => { |
||||||
// console.log(params)
|
// console.log(params)
|
||||||
if(tid=='pieone'){ |
if (tid == "pieone") { |
||||||
if(this.pieonetype){ |
if (this.pieonetype) { |
||||||
for(var i=0;i<this.tabledata[0].planCategoryStatistics.planCategories.length;i++){ |
for ( |
||||||
if(this.tabledata[0].planCategoryStatistics.planCategories[i].planCategoryName==params.data.planStatusName){ |
var i = 0; |
||||||
if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.length>0){ |
i < this.tabledata[0].planCategoryStatistics.planCategories.length; |
||||||
this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.forEach((element,index,array) => { |
i++ |
||||||
if(array[index].organizationId==this.orid){ |
) { |
||||||
array.splice(index,1) |
if ( |
||||||
|
this.tabledata[0].planCategoryStatistics.planCategories[i] |
||||||
|
.planCategoryName == params.data.planStatusName |
||||||
|
) { |
||||||
|
if ( |
||||||
|
(this.echartsData.level == "0" || |
||||||
|
this.echartsData.level == "1" || |
||||||
|
this.echartsData.level == "2") && |
||||||
|
this.tabledata[0].planCategoryStatistics.planCategories[i] |
||||||
|
.organizations.length > 0 |
||||||
|
) { |
||||||
|
this.tabledata[0].planCategoryStatistics.planCategories[ |
||||||
|
i |
||||||
|
].organizations.forEach((element, index, array) => { |
||||||
|
if (array[index].organizationId == this.orid) { |
||||||
|
array.splice(index, 1); |
||||||
} |
} |
||||||
window.setTimeout(()=>{ |
window.setTimeout(() => { |
||||||
if(array.length>0){ |
if (array.length > 0) { |
||||||
this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); |
this.router.navigate( |
||||||
} |
["/statisticanalysis/statePageOne/time"], |
||||||
else{ |
{ |
||||||
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); |
queryParams: { |
||||||
|
level: params.name, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pieone", |
||||||
|
pieonetype: this.pieonetype, |
||||||
|
}, |
||||||
|
} |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.router.navigate(["/statisticanalysis/AllPlan"], { |
||||||
|
queryParams: { |
||||||
|
xname: params.name, |
||||||
|
name: params.name, |
||||||
|
id: null, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pieone", |
||||||
|
pieonetype: this.pieonetype, |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
}) |
}); |
||||||
}); |
}); |
||||||
|
} else if (this.echartsData.level == "3") { |
||||||
} |
|
||||||
else if(this.echartsData.level=='3'){ |
|
||||||
//中队跳转
|
//中队跳转
|
||||||
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); |
this.router.navigate(["/statisticanalysis/AllPlan"], { |
||||||
|
queryParams: { |
||||||
|
xname: params.name, |
||||||
|
name: params.name, |
||||||
|
id: null, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pieone", |
||||||
|
pieonetype: this.pieonetype, |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
}else{ |
} else { |
||||||
for(var i=0;i<this.tabledata[0].planTypeStatistics.planTypes.length;i++){ |
for ( |
||||||
if(this.tabledata[0].planTypeStatistics.planTypes[i].planTypeName==params.data.planStatusName){ |
var i = 0; |
||||||
if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.length>0){ |
i < this.tabledata[0].planTypeStatistics.planTypes.length; |
||||||
this.tabledata[0].planTypeStatistics.planTypes[i].organizations.forEach((element,index,array) => { |
i++ |
||||||
if(array[index].organizationId==this.orid){ |
) { |
||||||
array.splice(index,1) |
if ( |
||||||
|
this.tabledata[0].planTypeStatistics.planTypes[i].planTypeName == |
||||||
|
params.data.planStatusName |
||||||
|
) { |
||||||
|
if ( |
||||||
|
(this.echartsData.level == "0" || |
||||||
|
this.echartsData.level == "1" || |
||||||
|
this.echartsData.level == "2") && |
||||||
|
this.tabledata[0].planCategoryStatistics.planCategories[i] |
||||||
|
.organizations.length > 0 |
||||||
|
) { |
||||||
|
this.tabledata[0].planTypeStatistics.planTypes[ |
||||||
|
i |
||||||
|
].organizations.forEach((element, index, array) => { |
||||||
|
if (array[index].organizationId == this.orid) { |
||||||
|
array.splice(index, 1); |
||||||
} |
} |
||||||
window.setTimeout(()=>{ |
window.setTimeout(() => { |
||||||
if(array.length>0){ |
if (array.length > 0) { |
||||||
this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); |
this.router.navigate( |
||||||
} |
["/statisticanalysis/statePageOne/time"], |
||||||
else{ |
{ |
||||||
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); |
queryParams: { |
||||||
|
level: params.name, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pieone", |
||||||
|
pieonetype: this.pieonetype, |
||||||
|
}, |
||||||
|
} |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.router.navigate(["/statisticanalysis/AllPlan"], { |
||||||
|
queryParams: { |
||||||
|
xname: params.name, |
||||||
|
name: params.name, |
||||||
|
id: null, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pieone", |
||||||
|
pieonetype: this.pieonetype, |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
}) |
}); |
||||||
}); |
}); |
||||||
|
} else if (this.echartsData.level == "3") { |
||||||
} |
|
||||||
else if(this.echartsData.level=='3'){ |
|
||||||
//中队跳转
|
//中队跳转
|
||||||
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); |
this.router.navigate(["/statisticanalysis/AllPlan"], { |
||||||
|
queryParams: { |
||||||
|
xname: params.name, |
||||||
|
name: params.name, |
||||||
|
id: null, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pieone", |
||||||
|
pieonetype: this.pieonetype, |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
} else { |
||||||
}else{ |
for ( |
||||||
for(var i=0;i<this.tabledata[0].planStatusStatistics.planStatuses.length;i++){ |
var i = 0; |
||||||
if(this.tabledata[0].planStatusStatistics.planStatuses[i].planStatusName==params.data.planStatusName){ |
i < this.tabledata[0].planStatusStatistics.planStatuses.length; |
||||||
if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.length>0){ |
i++ |
||||||
this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.forEach((element,index,array) => { |
) { |
||||||
if(array[index].organizationId==this.orid){ |
if ( |
||||||
array.splice(index,1) |
this.tabledata[0].planStatusStatistics.planStatuses[i] |
||||||
|
.planStatusName == params.data.planStatusName |
||||||
|
) { |
||||||
|
if ( |
||||||
|
(this.echartsData.level == "0" || |
||||||
|
this.echartsData.level == "1" || |
||||||
|
this.echartsData.level == "2") && |
||||||
|
this.tabledata[0].planStatusStatistics.planStatuses[i] |
||||||
|
.organizations.length > 0 |
||||||
|
) { |
||||||
|
this.tabledata[0].planStatusStatistics.planStatuses[ |
||||||
|
i |
||||||
|
].organizations.forEach((element, index, array) => { |
||||||
|
if (array[index].organizationId == this.orid) { |
||||||
|
array.splice(index, 1); |
||||||
} |
} |
||||||
window.setTimeout(()=>{ |
window.setTimeout(() => { |
||||||
if(array.length>0){ |
if (array.length > 0) { |
||||||
this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pietwo'}}); |
this.router.navigate( |
||||||
} |
["/statisticanalysis/statePageOne/time"], |
||||||
else{ |
{ |
||||||
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}}); |
queryParams: { |
||||||
|
level: params.name, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pietwo", |
||||||
|
}, |
||||||
|
} |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.router.navigate(["/statisticanalysis/AllPlan"], { |
||||||
|
queryParams: { |
||||||
|
xname: params.name, |
||||||
|
name: params.name, |
||||||
|
id: null, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pietwo", |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
}) |
}); |
||||||
}); |
}); |
||||||
|
} else if (this.echartsData.level == "3") { |
||||||
} |
|
||||||
else if(this.echartsData.level=='3'){ |
|
||||||
//中队跳转
|
//中队跳转
|
||||||
this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}}); |
this.router.navigate(["/statisticanalysis/AllPlan"], { |
||||||
|
queryParams: { |
||||||
|
xname: params.name, |
||||||
|
name: params.name, |
||||||
|
id: null, |
||||||
|
type: params.data.type, |
||||||
|
tid: "pietwo", |
||||||
|
}, |
||||||
|
}); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}); |
}); |
||||||
this.indexBzt.setOption(options); |
this.indexBzt.setOption(options); |
||||||
} |
} |
||||||
/** |
/** |
||||||
* @name: 表格提示框封装 |
* @name: 表格提示框封装 |
||||||
* @test: test font |
* @test: test font |
||||||
* @msg:
|
* @msg: |
||||||
* @param {string(表头)} |
* @param {string(表头)} |
||||||
* @return {type}
|
* @return {type} |
||||||
*/ |
*/ |
||||||
biaogeTishi(biaotou:string){ |
biaogeTishi(biaotou: string) { |
||||||
var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' |
var shuju = |
||||||
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
'[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'; |
||||||
shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' |
shuju += |
||||||
shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' |
'{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; |
||||||
shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' |
shuju += |
||||||
shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' |
'{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'; |
||||||
shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' |
shuju += |
||||||
shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' |
'{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'; |
||||||
var jsonObj = JSON.parse(shuju); |
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>' |
'{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'; |
||||||
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"; >'; |
shuju += |
||||||
res+='<thead><tr>'; |
'{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; |
||||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
shuju += |
||||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
'{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'; |
||||||
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
shuju += |
||||||
res+='</tr></thead>' |
'{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'; |
||||||
res+='<tbody>'; |
var jsonObj = JSON.parse(shuju); |
||||||
for(var i=0;i<jsonObj.length;i++){ |
var res = |
||||||
res+='<tr>' |
'<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;">' + |
||||||
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
biaotou + |
||||||
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
"</span></div>"; |
||||||
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>' |
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+='</tbody>' |
res += |
||||||
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>' |
'<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
||||||
res+='</table></div></div>' |
res += |
||||||
return 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; |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue