You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
556 lines
20 KiB
556 lines
20 KiB
import { Component, OnInit, Renderer2, ElementRef } from '@angular/core'; |
|
import { HttpClient } from '@angular/common/http' |
|
import { Router } from '@angular/router'; |
|
import { EchartsDataService } from '../echarts-data.service'; |
|
import { MapFactory } from '@src/modules/map/declare/factory'; |
|
import { IMap } from '@src/modules/map/declare/map'; |
|
declare var echarts: any; |
|
|
|
@Component({ |
|
selector: 'app-home', |
|
templateUrl: './home.component.html', |
|
styleUrls: ['./home.component.scss'] |
|
}) |
|
export class HomeComponent implements OnInit { |
|
|
|
constructor(private http: HttpClient, private render2: Renderer2, public element: ElementRef, private router: Router, public emitService: EchartsDataService) { } |
|
|
|
map: IMap; //地图 |
|
yuandata |
|
ngOnInit() { |
|
this.getechartsdata() |
|
this.getYearlyCompleteProgress() |
|
window.setTimeout(() => { |
|
/* this.unitType() |
|
this.unitData() |
|
this.keyUnit() */ |
|
this.mapInit() //初始化地图 |
|
}, 0) |
|
} |
|
|
|
|
|
|
|
//获得年度完成情况 |
|
completeProgress: any = { |
|
monthlyCompleteProgress: '', |
|
yearlyCompleteProgress: '' |
|
} |
|
getYearlyCompleteProgress() { |
|
this.http.get('/api/StatisticsAnalysis/Companies/YearlyCompleteProgress').subscribe((data) => { |
|
// console.log('获得年度完成情况', data) |
|
this.completeProgress = data |
|
}) |
|
} |
|
integrity(width) { |
|
let style: any = {} |
|
style.width = width + '%'; |
|
return style |
|
} |
|
|
|
//更新echarts视图 |
|
/* updateEcharts(){ |
|
this.planState.resize() |
|
this.chartDwsjcj.resize() |
|
this.chartZdgzqy.resize() |
|
} */ |
|
//获取数据 |
|
ordata |
|
buildtableData |
|
lengthdata = []//建筑提示数据 |
|
buildcount = 0//建筑总数 |
|
indexData = []//建筑所有数据 |
|
async getechartsdata() { |
|
let paramsdata: any = { |
|
OrganizationId: this.orid || '', |
|
//organizationId:'1' |
|
} |
|
//获取组织机构数据 |
|
await this.emitService.getData(paramsdata, `/api/StatisticsAnalysis/Companies`) |
|
this.ordata = JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
console.log(this.ordata) |
|
this.keyUnitNum = this.ordata[0].organizationStatistics.totalCount |
|
this.unitData() |
|
//获取预案状态统计数据 |
|
await this.emitService.getData(paramsdata, `/api/StatisticsAnalysis/Plans`) |
|
this.unitType() |
|
//获取建筑类型统计数据 |
|
await this.emitService.getData(paramsdata, `/api/StatisticsAnalysis/BuildingTypes`) |
|
this.keyUnit() |
|
} |
|
//获取年度完成情况数据 |
|
getYearData() { |
|
|
|
} |
|
|
|
|
|
threePlan() { |
|
// this.router.navigate(['/planManagement/entryPlan']) |
|
} |
|
twoPlan() { |
|
// this.router.navigate(['/planManagement/entryPlan']) |
|
} |
|
cardPlan() { |
|
// this.router.navigate(['/planManagement/entryPlan']) |
|
} |
|
otherPlan() { |
|
// this.router.navigate(['/planManagement/entryPlan']) |
|
} |
|
|
|
//计划更新页面跳转 |
|
scheduled() { |
|
this.router.navigate(['/statisticanalysis/scheduledUpdates']) |
|
} |
|
|
|
ngOnDestroy(): void { |
|
/* this.planState.clear() |
|
this.planState.dispose() |
|
this.chartDwsjcj.clear() |
|
this.chartDwsjcj.dispose() |
|
this.chartZdgzqy.clear() |
|
this.chartZdgzqy.dispose() */ |
|
|
|
} |
|
//初始化地图 |
|
adcode: any //行政编码 |
|
level = sessionStorage.getItem("level")//组织级别 |
|
orid |
|
|
|
//封装Gaode |
|
getEchartsData(data) { |
|
return new Promise((resolve, reject) => { |
|
let paramsdata: any = { |
|
name: data.properties.name, |
|
level: Number(this.level) + 1 |
|
} |
|
this.http.get("/api/Organizations/GetIdByName", { params: paramsdata }).subscribe((data: any) => { |
|
this.orid = data[0] |
|
this.getechartsdata() |
|
resolve('success') |
|
}) |
|
}) |
|
} |
|
setEchartsData() { |
|
this.orid = '' |
|
this.getechartsdata() |
|
} |
|
//封装Gaode |
|
|
|
mapInit() { |
|
//创建地图 |
|
this.map = MapFactory.MapInstance('chartMap', { |
|
cursor: 'default', |
|
zooms: [8, 16], |
|
mapStyle: "amap://styles/grey", |
|
}); |
|
this.map.setAdministrativeAreaStyle(this, this.getEchartsData, this.setEchartsData) |
|
} |
|
planNum = [] |
|
keyUnitNum |
|
dataGetNum = 6578 |
|
|
|
threePlanNum = "0" |
|
twoPlanNum = "0" |
|
cardPlanNum = "0" |
|
otherPlanNum = "0" |
|
|
|
aPlan = '0' |
|
bPlan = '0' |
|
cPlan = '0' |
|
dPlan = '0' |
|
ePlan = '0' |
|
ngAfterViewInit(): void { |
|
} |
|
|
|
planState |
|
|
|
|
|
//预案状态统计 |
|
pagedata |
|
pagedataCount |
|
unitType() { |
|
this.planNum = [] |
|
this.pagedata = JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
console.log(this.pagedata) |
|
this.pagedataCount = String(this.pagedata[0].planStatusStatistics.totalCount) |
|
for (var i = 0; i < this.pagedataCount.length; i++) { |
|
this.planNum.push(this.pagedataCount[i]) |
|
} |
|
//this.planNum.push(this.pagedataCount.split(',')) |
|
if (this.pagedata[0].planTypeStatistics.planTypes.length <= 0) { |
|
this.threePlanNum = '0' |
|
this.twoPlanNum = '0' |
|
this.cardPlanNum = '0' |
|
this.otherPlanNum = '0' |
|
} else { |
|
this.pagedata[0].planTypeStatistics.planTypes.forEach((value, index, array) => { |
|
if (array[index].planTypeName == 'Plan2D') { |
|
this.twoPlanNum = array[index].count |
|
} else if (array[index].planTypeName == 'Plan3D') { |
|
this.threePlanNum = array[index].count |
|
} else if (array[index].planTypeName == 'Other') { |
|
this.otherPlanNum = array[index].count |
|
} else if (array[index].planTypeName == 'PlanText') { |
|
this.cardPlanNum = array[index].count |
|
} |
|
}); |
|
} |
|
if (this.pagedata[0].planCategoryStatistics.planCategories.length <= 0) { |
|
this.aPlan = '0' |
|
this.bPlan = '0' |
|
this.cPlan = '0' |
|
this.dPlan = '0' |
|
this.ePlan = '0' |
|
} else { |
|
this.pagedata[0].planCategoryStatistics.planCategories.forEach((value, index, array) => { |
|
if (array[index].planCategoryName == 'LevelOne') { |
|
this.aPlan = array[index].count |
|
} else if (array[index].planCategoryName == 'LevelTwo') { |
|
this.bPlan = array[index].count |
|
} else if (array[index].planCategoryName == 'LevelThree') { |
|
this.cPlan = array[index].count |
|
} else if (array[index].planCategoryName == 'LevelFour') { |
|
this.dPlan = array[index].count |
|
} else if (array[index].planCategoryName == 'LevelFive') { |
|
this.ePlan = array[index].count |
|
} |
|
}); |
|
} |
|
|
|
|
|
/* */ |
|
let planStateOptionsZhi = { |
|
title: { |
|
text: `预案状态统计（${this.pagedata[0].planStatusStatistics.totalCount}份）`, |
|
left: 'left', |
|
textStyle: { |
|
color: '#fff', |
|
fontWeight: 'normal' |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{b} : {c} ({d}%)' |
|
}, |
|
series: [ |
|
{ |
|
name: '访问来源', |
|
type: 'pie', |
|
radius: '60%', |
|
center: ['50%', '58%'], |
|
label: { |
|
show: true, |
|
//fontSize:10, |
|
formatter: '{b}\n{d|{c}份}', |
|
rich: { |
|
d: { |
|
align: 'center', |
|
} |
|
}, |
|
|
|
}, |
|
data: [ |
|
{ value: this.pagedata[0].planStatusStatistics.planStatuses[0] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[0].count : 0, name: '预案新增', type: 1, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[0] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[0].planStatusName : '' }, |
|
{ value: this.pagedata[0].planStatusStatistics.planStatuses[2] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[2].count : 0, name: '预案审核通过', type: 3, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[2] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[2].planStatusName : '' }, |
|
{ value: this.pagedata[0].planStatusStatistics.planStatuses[4] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[4].count : 0, name: '预案编制', type: 5, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[4] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[4].planStatusName : '' }, |
|
{ value: this.pagedata[0].planStatusStatistics.planStatuses[3] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[3].count : 0, name: '预案审核退回', type: 4, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[3] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[3].planStatusName : '' }, |
|
{ value: this.pagedata[0].planStatusStatistics.planStatuses[1] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[1].count : 0, name: '预案审核中', type: 2, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[1] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[1].planStatusName : '' } |
|
], |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden'); |
|
this.planState.setOption(planStateOptionsZhi); |
|
this.planState.on("click", (params) => { |
|
this.router.navigate(['/statisticanalysis/statePageOne']) |
|
}) |
|
} |
|
|
|
//新增、删除单位统计 |
|
chartDwsjcj |
|
addtable |
|
addxdata = [] |
|
addydata = [] |
|
chartDwsjcjOptionsZhong = { |
|
// color: ['#FB33C2', '#00CFF0', '#2C3DE0'], |
|
// 标题 |
|
title: { |
|
text: '新增、删除单位统计', |
|
left: 0, |
|
top: 0, |
|
textStyle: { |
|
color: '#fff', |
|
fontWeight: 'normal' |
|
}, |
|
}, |
|
grid: { |
|
left: 30, |
|
right: 0, |
|
}, |
|
//图例 |
|
legend: { |
|
top: 0, |
|
data: ['新增单位', '删除单位',], |
|
icon: 'circle', |
|
itemGap: 20, |
|
}, |
|
//提示框 |
|
tooltip: { |
|
trigger: 'axis', |
|
}, |
|
// x轴 |
|
xAxis: { |
|
type: 'category', |
|
data: ["浦东中队", "黄浦中队", "徐汇中队", "长宁中队", "静安中队", "普陀中队", "虹口中队", "杨浦中队", "闵行中队", "宝山中队", "嘉定中队", "松江中队", "金山中队", "崇明中队"], |
|
axisLabel: { |
|
interval: 0, |
|
|
|
formatter: function (value) { |
|
var ret = "";//拼接加\n返回的类目项 |
|
var maxLength = 5;//每项显示文字个数 |
|
var valLength = value.length;//X轴类目项的文字个数 |
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|
if (rowN > 1) { //如果类目项的文字大于3, |
|
for (var i = 0; i < rowN; i++) { |
|
var temp = "";//每次截取的字符串 |
|
var start = i * maxLength;//开始截取的位置 |
|
var end = start + maxLength;//结束截取的位置 |
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|
temp = value.substring(start, end) + "\n"; |
|
ret += temp; |
|
} //凭借最终的字符串 |
|
return ret; |
|
} else { |
|
return value; |
|
} |
|
} //function |
|
|
|
} |
|
}, |
|
// y轴 |
|
yAxis: { |
|
type: 'value', |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: 'rgba(255,255,255,.4)' |
|
} |
|
}, |
|
}, |
|
// 数据 |
|
series: [ |
|
{ |
|
name: '新增单位', |
|
type: 'bar', |
|
data: [88, 45, 95, 105, 75, 89, 69, 110, 96, 90, 80, 78, 94, 102], |
|
label: { |
|
show: false, |
|
position: "top", |
|
formatter: '{c}', |
|
color: "#fff", |
|
} |
|
}, { |
|
name: '删除单位', |
|
type: 'bar', |
|
data: [35, 33, 27, 30, 35, 36, 28, 32, 36, 22, 19, 28, 34, 36], |
|
label: { |
|
show: false, |
|
position: "top", |
|
formatter: '{c}', |
|
color: "#fff", |
|
} |
|
} |
|
], |
|
}; |
|
unitData() { |
|
this.addxdata = [] |
|
this.addydata = [] |
|
this.addtable = JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
this.addtable[0].organizationStatistics.organizations.forEach((value, index, array) => { |
|
if (array[index].organizationId != '5687316efa75479d96c0091a167a3b84' && array[index].organizationName != '上海总队') { |
|
this.addxdata.push(array[index].organizationName) |
|
this.addydata.push(array[index].count) |
|
} |
|
|
|
}); |
|
let chartDwsjcjOptionsZhi = { |
|
// 标题 |
|
title: { |
|
text: `新增单位统计(${this.addtable[0].totalCount}家)`, |
|
left: 0, |
|
top: 0, |
|
textStyle: { |
|
color: '#fff', |
|
fontWeight: 'normal' |
|
}, |
|
}, |
|
grid: { |
|
//containLabel:true, |
|
left: 30, |
|
right: 0, |
|
bottom: 30 |
|
}, |
|
//图例 |
|
/* legend: { |
|
top: 0, |
|
data: ['新增单位' ], |
|
icon: 'circle', |
|
itemGap: 20, |
|
}, */ |
|
//提示框 |
|
tooltip: { |
|
trigger: 'axis', |
|
}, |
|
// x轴 |
|
xAxis: { |
|
type: 'category', |
|
data: this.addxdata, |
|
axisLabel: { |
|
interval: 0, |
|
|
|
formatter: function (value) { |
|
var ret = "";//拼接加\n返回的类目项 |
|
var maxLength = 5;//每项显示文字个数 |
|
var valLength = value.length;//X轴类目项的文字个数 |
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|
if (rowN > 1) { //如果类目项的文字大于3, |
|
for (var i = 0; i < rowN; i++) { |
|
var temp = "";//每次截取的字符串 |
|
var start = i * maxLength;//开始截取的位置 |
|
var end = start + maxLength;//结束截取的位置 |
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|
temp = value.substring(start, end) + "\n"; |
|
ret += temp; |
|
} //凭借最终的字符串 |
|
return ret; |
|
} else { |
|
return value; |
|
} |
|
} //function |
|
|
|
} |
|
}, |
|
// y轴 |
|
yAxis: { |
|
type: 'value', |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: 'rgba(255,255,255,.4)' |
|
} |
|
}, |
|
}, |
|
// 数据 |
|
series: [ |
|
{ |
|
name: '新增单位', |
|
type: 'bar', |
|
data: this.addydata, |
|
label: { |
|
show: false, |
|
position: "top", |
|
formatter: '{c}', |
|
color: "#fff", |
|
}, |
|
barMaxWidth: '20%' |
|
} |
|
/* , { |
|
name: '删除单位', |
|
type: 'bar', |
|
data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134 ], |
|
label: { |
|
show: false, |
|
position: "top", |
|
formatter: '{c}', |
|
color: "#fff", |
|
} |
|
} */ |
|
], |
|
}; |
|
this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'walden'); |
|
this.chartDwsjcj.setOption(chartDwsjcjOptionsZhi); |
|
this.chartDwsjcj.on("click", (params) => { |
|
this.router.navigate(['/statisticanalysis/addUnit_one']) |
|
}) |
|
} |
|
|
|
chartZdgzqy |
|
|
|
|
|
//建筑类型统计 |
|
keyUnit() { |
|
this.buildcount = 0 |
|
this.buildtableData = JSON.parse(JSON.stringify(this.emitService.allDate)) |
|
//console.log(this.buildtableData) |
|
for (var i = 0; i < this.buildtableData[0].buildingTypes.length; i++) { |
|
this.lengthdata.push(this.buildtableData[0].buildingTypes[i].buildingTypeName) |
|
this.buildcount = this.buildcount + this.buildtableData[0].buildingTypes[i].count |
|
this.indexData.push(this.buildtableData[0].buildingTypes[i]) |
|
} |
|
//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 } }) |
|
let chartZdgzqyOptionsZhi = { |
|
title: { |
|
text: `建筑类型统计（${this.buildcount}家）`, |
|
top: -5, |
|
left: 'left', |
|
textStyle: { |
|
color: '#fff', |
|
fontWeight: 'normal' |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{b} : {c}家 ({d}%)' |
|
}, |
|
// legend: { |
|
// orient: 'vertical', |
|
// right: 150, |
|
// top:80, |
|
// data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] |
|
// }, |
|
series: [ |
|
{ |
|
name: '访问来源', |
|
type: 'pie', |
|
radius: '70%', |
|
center: ['50%', '61%'], |
|
label: { |
|
show: true, |
|
// fontSize:13, |
|
formatter: '{b}{c}家', |
|
rich: { |
|
d: { |
|
align: 'center', |
|
} |
|
}, |
|
}, |
|
data: this.indexData, |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
} |
|
] |
|
}; |
|
this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden'); |
|
this.chartZdgzqy.setOption(chartZdgzqyOptionsZhi); |
|
this.chartZdgzqy.on("click", (params) => { |
|
this.router.navigate(['/statisticanalysis/buildingType_one']) |
|
}) |
|
} |
|
|
|
isNumList: boolean = true |
|
changeNumList() { |
|
this.isNumList = !this.isNumList |
|
} |
|
}
|
|
|