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