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.
1584 lines
56 KiB
1584 lines
56 KiB
import { Component, OnInit,ViewChild } from '@angular/core'; |
|
import { Router } from '@angular/router'; |
|
import { ActivatedRoute } from '@angular/router'; |
|
import {EchartsDataService} from '../echarts-data.service' |
|
import { MatDialog } from '@angular/material/dialog'; |
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
declare var echarts: any; |
|
|
|
//首页图形查询 |
|
@Component({ |
|
selector: 'app-scheduled-updates', |
|
templateUrl: './scheduled-updates.component.html', |
|
styleUrls: ['./scheduled-updates.component.scss'] |
|
}) |
|
export class ScheduledUpdatesComponent implements OnInit { |
|
|
|
constructor(private router: Router,public snackBar: MatSnackBar,public echartsData:EchartsDataService) { } |
|
|
|
ngOnInit(): void { |
|
window.setTimeout(()=>{ |
|
this.getechartsdata() |
|
|
|
}) |
|
} |
|
|
|
ngOnDestroy () { |
|
this.example.clear() |
|
this.example.dispose() |
|
} |
|
|
|
example:any; |
|
buildingShow:boolean=false //控制查询条件的显隐 |
|
selectedBtn="tu" //两个查询按钮颜色控制 |
|
chaxun:string="" |
|
//图形查询点击事件 |
|
tuClick(){ |
|
this.buildingShow=false |
|
this.selectedBtn="tu" |
|
} |
|
//条件查询 |
|
tiaojianClick(){ |
|
this.buildingShow=true |
|
this.selectedBtn="tiaojian" |
|
} |
|
//查询按钮点击事件 |
|
findClick(){ |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
if(this.chaxun==""){this.snackBar.open('未选择单位','确定',config)} |
|
else{ |
|
this.echartsData.buildingName=this.chaxun |
|
this.echartsData.tableShow=true |
|
} |
|
} |
|
//获取后端数据 |
|
async getechartsdata(){ |
|
if(this.dwOryuan=='danwei'){ |
|
await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies/Maintained`) |
|
this.tabledata1=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata1) |
|
this.initCharts("pie") |
|
await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies/Maintenance`) |
|
this.tabledata2=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata2) |
|
this.initCharts("pieTwo") |
|
}else{ |
|
await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans/Maintained`) |
|
this.tabledata1=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata1) |
|
this.initCharts("pie") |
|
await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans/Maintenance`) |
|
this.tabledata2=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata2) |
|
this.initCharts("pieTwo") |
|
} |
|
|
|
|
|
|
|
} |
|
/* 首页饼状图 */ |
|
tabledata1 |
|
tabledata2 |
|
initCharts(pieid){ |
|
this.example= echarts.init(document.getElementById(pieid),'walden'); |
|
var options={ |
|
title: { |
|
text: pieid=="pie"?`已维护统计（${this.tabledata1[0].totalCount}家）`:`计划维护统计（${this.tabledata2[0].totalCount}家）`, |
|
top: "3%", |
|
left: 'center', |
|
textStyle:{ |
|
fontSize:28 |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return this.weihu(params.data) |
|
//return this.echartsData.tableTooltip(this.selectedBtn=="tu"?this.echartsData.tableDataZhi:this.echartsData.buildingType,params.name) |
|
}, |
|
position:this.echartsData.tableTooltipNoShow2 |
|
}, |
|
legend: { |
|
orient: 'vertical', |
|
right: 150, |
|
top:80, |
|
// itemWidth:60, |
|
// itemHeight:25, |
|
textStyle:{ |
|
fontSize:18, |
|
color:"#000000" |
|
}, |
|
data:pieid=="pie"? ['维护无需修改', '维护修改', '维护删除']:['未维护', '维护通过审核', '维护中'] |
|
}, |
|
series: [{ |
|
name: '访问来源', |
|
type: 'pie', |
|
radius: '60%', |
|
center: ['50%', '60%'], |
|
label:{ |
|
normal:{ |
|
show:true, |
|
// position: 'inner', |
|
fontSize:16, |
|
formatter:'{b} {c}家\n{d|({d}%)}', |
|
rich: { |
|
d: { |
|
align: 'center', |
|
fontSize:18 |
|
} |
|
}, |
|
}}, |
|
data:pieid=="pie"? [ |
|
{value: this.tabledata1[0].preservedCount.totalCount, name: '维护无需修改'}, |
|
{value: this.tabledata1[0].updatedCount.totalCount, name: '维护修改',itemStyle:{color:'#02A7F0'}}, |
|
{value: this.tabledata1[0].deletedCount.totalCount, name: '维护删除',itemStyle:{color:'#87cebb'}}, |
|
]:[ |
|
{value: this.tabledata2[0].unMaintainCount.totalCount, name: '未维护'}, |
|
{value: this.tabledata2[0].maintainedCount.totalCount, name: '维护通过审核',itemStyle:{color:'#02A7F0'}}, |
|
{value: this.tabledata2[0].maintainingCount.totalCount, name: '维护中',itemStyle:{color:'#87cebb'}}, |
|
], |
|
emphasis: { |
|
itemStyle: { |
|
shadowBlur: 10, |
|
shadowOffsetX: 0, |
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
} |
|
} |
|
|
|
}] |
|
}; |
|
this.example.setOption(options); |
|
this.example.on('click', (params) => { |
|
this.echartsData.findShow=true |
|
//if(params.name=="维护删除"){this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_two?dwOryuan=${this.dwOryuan}&type=3`);} |
|
|
|
if(pieid=="pie"){ |
|
this.echartsData.scheduledUpdatesToggle = 1 |
|
//this.echartsData.zhuXname=["平均值","维护无需修改","维护修改","维护删除"] |
|
this.router.navigateByUrl(`/statisticanalysis/scheduledUpdates/PublicEcharts?type=${params.data.name=='维护修改'?2:params.data.name=='维护无需修改'?1:3}&dwOryuan=${this.dwOryuan}&pieid=pie`); |
|
|
|
}else{ |
|
//this.echartsData.zhuXname=["平均值","维护中","维护通过审核","未维护"] |
|
//this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); |
|
/* if(this.echartsData.level=='0'){ |
|
this.echartsData.scheduledUpdatesToggle = 2 |
|
this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); |
|
this.echartsData.findShow=false |
|
}else if(this.echartsData.level=='1'){ |
|
this.echartsData.scheduledUpdatesToggle = 3 |
|
this.echartsData.findShow=false |
|
this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); |
|
} */ |
|
this.echartsData.zhiorBuinding='zhi' |
|
this.echartsData.scheduledUpdatesToggle = 2 |
|
this.router.navigateByUrl(`/statisticanalysis/scheduledUpdates/PublicEcharts?pieid=pieTwo&type=${params.data.name=='维护通过审核'?2:params.data.name=='未维护'?1:3}&dwOryuan=${this.dwOryuan}`); |
|
this.echartsData.findShow=false |
|
|
|
} |
|
|
|
|
|
//console.log(this.echartsData.scheduledUpdatesToggle) |
|
}); |
|
} |
|
dwOryuan='danwei' |
|
//点击单位按钮 |
|
danweiClick(){ |
|
this.dwOryuan='danwei' |
|
this.example.clear() |
|
this.example.dispose() |
|
this.getechartsdata() |
|
} |
|
//点击预案按钮 |
|
yuanClick(){ |
|
this.dwOryuan='yuan' |
|
this.example.clear() |
|
this.example.dispose() |
|
this.getechartsdata() |
|
} |
|
//维护更新提示框 |
|
tishiData |
|
res |
|
weihu(datas){ |
|
if(datas.name=='维护删除'){ |
|
this.tishiData=this.tabledata1[0].deletedCount.organizationCounts |
|
}else if(datas.name=='维护无需修改'){ |
|
this.tishiData=this.tabledata1[0].preservedCount.organizationCounts |
|
}else if(datas.name=='维护修改'){ |
|
this.tishiData=this.tabledata1[0].updatedCount.organizationCounts |
|
}else if(datas.name=='维护中'){ |
|
this.tishiData=this.tabledata2[0].maintainingCount.organizationCounts |
|
}else if(datas.name=='未维护'){ |
|
this.tishiData=this.tabledata2[0].unMaintainCount.organizationCounts |
|
}else if(datas.name=='维护通过审核'){ |
|
this.tishiData=this.tabledata2[0].maintainedCount.organizationCounts |
|
} |
|
|
|
var countall=0//总计 |
|
var countbi=0//站比 |
|
var allCountbi=0//总站比 |
|
for(var i=0;i<this.tishiData.length;i++){ |
|
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+='</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+='<thead style="font-size:18px;"><tr>'; |
|
this.res+='<td style="text-align:center;width:30%;">名称</td>'; |
|
this.res+='<td style="text-align:center;width:30%;">数量</td>' |
|
this.res+='<td style="text-align:center;width:30%;">总占比</td>' |
|
this.res+='</tr></thead>' |
|
this.res+='<tbody>'; |
|
for(var i=0;i<this.tishiData.length;i++){ |
|
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 |
|
allCountbi=allCountbi+countbi |
|
this.res+='<tr>' |
|
this.res+='<td style="text-align:center;">'+this.tishiData[i].organizationName+'</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;">100%</td></tfoot>' |
|
this.res+='</table></div></div>' |
|
return this.res |
|
|
|
} |
|
|
|
} |
|
//首页条件查询 |
|
@Component({ |
|
selector: 'app-indexCondition', |
|
templateUrl: './indexCondition.html', |
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
|
}) |
|
export class indexConditionComponent implements OnInit { |
|
|
|
constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { } |
|
|
|
ngOnInit(): void { |
|
window.setTimeout(()=>{ |
|
|
|
},0) |
|
} |
|
|
|
ngOnDestroy () { |
|
/* this.oneEcharts.dispose() |
|
this.oneEcharts.clear() */ |
|
} |
|
|
|
oneEcharts:any; |
|
displayedColumns: string[] = ['name', 'weight', 'symbol']; |
|
//点击支队名称跳转事件 |
|
zhiClick(item){ |
|
this.route.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':item+this.echartsData.buildingName}}); |
|
} |
|
|
|
} |
|
|
|
//所有页面头部 |
|
@Component({ |
|
selector: 'app-publicEcharts', |
|
templateUrl: './publicEcharts.html', |
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
|
}) |
|
export class publicEchartsComponent implements OnInit { |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
|
|
|
@ViewChild('verified')verifieds :verifiedComponent; //父组件中获得子组件的引用 |
|
ngOnInit(): void { |
|
//this.echartsData.scheduledUpdatesToggle = 1 |
|
this.dateInit() |
|
} |
|
|
|
isToggle:boolean = true; // 已核查/未核查 |
|
selectType:string = 'month'; //选择当前的 查询类型 按月/年 |
|
//查询数据 |
|
years:any = [] |
|
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
|
|
|
//日期初始化 |
|
dateInit () { |
|
let date = (new Date()).getFullYear() |
|
for (let i=date; i>=date-10;i--) { |
|
this.years.unshift(i) |
|
} |
|
} |
|
|
|
selectOneYear:any = (new Date()).getFullYear() //开始年份 |
|
selectTwoYear:any = (new Date()).getFullYear() //结束年份 |
|
selectStartMonth:any = 1 //开始月份 |
|
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份 |
|
//点击月或年 |
|
changeTime(e){ |
|
console.log(e) |
|
//this.echartsData.selectType=0 |
|
this.verifieds.changeTime(e.value,this.selectOneYear,this.selectStartMonth,this.selectTwoYear,this.selectEndMonth) |
|
} |
|
//按月查询 |
|
monthSubmit (e) { |
|
console.log(this.echartsData.dateYear) |
|
if (e.selectTwoYear > e.selectOneYear) { |
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
this.verifieds.getechartsdata(this.echartsData.dateYear,e.selectStartMonth,this.echartsData.dateYear,e.selectEndMonth) |
|
} else if (e.selectTwoYear === e.selectOneYear) { |
|
if(e.selectEndMonth >= e.selectStartMonth) { |
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
// console.log(startTime) |
|
// console.log(endTime) |
|
this.verifieds.getechartsdata(this.echartsData.dateYear,e.selectStartMonth,this.echartsData.dateYear,e.selectEndMonth) |
|
} else { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
} |
|
}else { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
} |
|
} |
|
selectStartYear:any = (new Date()).getFullYear() //开始年份 |
|
selectEndYear:any = (new Date()).getFullYear() //结束年份 |
|
|
|
//按年查询 |
|
yearSubmit (e) { |
|
if (e.selectEndYear >= e.selectStartYear) { |
|
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
e.selectStartYear+='-01' |
|
e.selectEndYear+='-12' |
|
this.verifieds.getechartsdata(e.selectStartYear,e.selectStartMonth,e.selectEndYear,e.selectEndMonth) |
|
} else { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
} |
|
} |
|
|
|
//已核查 |
|
verified () { |
|
this.isToggle = true |
|
this.echartsData.level=='1'? this.echartsData.findShow=true:this.echartsData.findShow=false |
|
this.echartsData.scheduledUpdatesToggle =1 |
|
//this.echartsData.scheduledUpdatesToggle ="one" |
|
//this.echartsData.level=='0'? this.echartsData.scheduledUpdatesToggle =1:this.echartsData.level=='1'?this.echartsData.scheduledUpdatesToggle =3:'' |
|
} |
|
|
|
//未核查 |
|
notVerified () { |
|
this.isToggle = false |
|
//this.echartsData.scheduledUpdatesToggle = "three" |
|
this.echartsData.scheduledUpdatesToggle =1 |
|
this.echartsData.findShow=false |
|
} |
|
|
|
//返回 |
|
goBack () { |
|
/* if(this.echartsData.scheduledUpdatesToggle==1||this.echartsData.scheduledUpdatesToggle==-3){ |
|
this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); |
|
}else{ |
|
this.echartsData.scheduledUpdatesToggle-- |
|
if(this.echartsData.scheduledUpdatesToggle==1||this.echartsData.scheduledUpdatesToggle==-3){ |
|
this.echartsData.findShow=true |
|
//this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); |
|
} |
|
} */ |
|
if(this.verifieds.pieid=='pie'&& this.echartsData.scheduledUpdatesToggle>1){ |
|
this.echartsData.scheduledUpdatesToggle-- |
|
}else{ |
|
this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); |
|
//window.history.go(-1) |
|
} |
|
|
|
} |
|
|
|
//更多 窗口 |
|
moreOpen () { |
|
let dialogRef = this.dialog.open(moreTableComponent); |
|
} |
|
|
|
//支队查询 |
|
zhiFind(){ |
|
this.verifieds.oneEcharts.clear() |
|
this.verifieds.oneEcharts.dispose() |
|
this.echartsData.zhiorBuinding="zhi" |
|
this.verifieds.getechartsdata(this.echartsData.dateYear,'1',this.echartsData.dateYear,'12') |
|
} |
|
//建筑类型查询 |
|
buildingFind(){ |
|
this.verifieds.oneEcharts.clear() |
|
this.verifieds.oneEcharts.dispose() |
|
this.echartsData.zhiorBuinding="building" |
|
this.verifieds.getechartsdata(this.echartsData.dateYear,'1',this.echartsData.dateYear,'12') |
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
//已核查组件 |
|
@Component({ |
|
selector: 'app-verified', |
|
templateUrl: './verified.html', |
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
|
}) |
|
export class verifiedComponent implements OnInit { |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService,public snackBar: MatSnackBar, private route: ActivatedRoute) { } |
|
|
|
ngOnInit(): void { |
|
window.setTimeout(()=>{ |
|
if(this.echartsData.scheduledUpdatesToggle==1){ |
|
this.getechartsdata(this.echartsData.dateYear,'1',this.echartsData.dateYear,'12') |
|
} |
|
|
|
},0) |
|
console.log(this.echartsData.scheduledUpdatesToggle) |
|
this.pieid=this.route.snapshot.queryParams.pieid |
|
} |
|
|
|
ngOnDestroy () { |
|
//this.oneEcharts.dispose() |
|
//this.oneEcharts.clear() |
|
} |
|
pieid=this.route.snapshot.queryParams.pieid |
|
//TimeType=0//按月查询还是按年查询 |
|
async changeTime (e,selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth){ |
|
console.log(e) |
|
this.oneEcharts.clear() |
|
this.oneEcharts.dispose() |
|
this.qipaotishi='' |
|
if(e=='year'){ |
|
this.echartsData.TimeType=1 |
|
this.qipaotishi=this.echartsData.qipao(this.qipaotishi,this.ydatayue,this.xdatayue) |
|
selectOneYear=selectOneYear+'-01' |
|
selectTwoYear+='-12' |
|
this.getechartsdata(selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth) |
|
}else{ |
|
this.echartsData.TimeType=0 |
|
this.qipaotishi=this.echartsData.qipao(this.qipaotishi,this.ydatayue,this.xdatayue) |
|
this.getechartsdata(selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth) |
|
} |
|
} |
|
|
|
oneEcharts:any; |
|
qipaotishi |
|
xdatayue=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'] |
|
ydatayue=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] |
|
xdataYear=['2020','2021'] |
|
ydataYear=['0','0'] |
|
//获取后端数据 |
|
tabledata |
|
async getechartsdata(selectStartYear,selectStartMonth,selectEndYear,selectEndMonth){ |
|
let Parameters={ |
|
MaintainedState:this.route.snapshot.queryParams.type, |
|
TimeType:this.echartsData.TimeType, |
|
TimeStart:this.echartsData.TimeType==0?selectStartYear+'-'+selectStartMonth:this.echartsData.dateYear+'-'+selectStartMonth, |
|
TimeEnd:this.echartsData.TimeType==0?selectEndYear+'-'+selectEndMonth:this.echartsData.dateYear+'-'+selectEndMonth, |
|
//OrganizationId |
|
} |
|
console.log(this.echartsData.zhiorBuinding) |
|
if(this.echartsData.zhiorBuinding=="zhi"){ |
|
await this.echartsData.getData(Parameters,this.route.snapshot.queryParams.dwOryuan=='danwei'? |
|
`/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`:`/api/StatisticsAnalysis/Plans/Maintained/OrganizationTrend`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
this.xdatayue=[] |
|
this.ydatayue=[] |
|
this.tabledata[0].items.forEach(element => { |
|
this.xdatayue.push(element.date) |
|
this.ydatayue.push(element.count) |
|
}); |
|
}else{ |
|
await this.echartsData.getData(Parameters,this.route.snapshot.queryParams.dwOryuan=='danwei'? |
|
`/api/StatisticsAnalysis/Companies/Maintained/BuildingTypeTrend`:`/api/StatisticsAnalysis/Plans/Maintained/BuildingTypeTrend`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
this.xdatayue=[] |
|
this.ydatayue=[] |
|
this.tabledata[0].items.forEach(element => { |
|
this.xdatayue.push(element.date) |
|
this.ydatayue.push(element.count) |
|
}); |
|
} |
|
|
|
this.oneInit(this.xdatayue,this.ydatayue) |
|
} |
|
//提示框表格 |
|
tishiData |
|
res |
|
tableTooltip(datas){ |
|
this.tishiData=this.tabledata[0].items[0].organizations |
|
var countall=0//总计 |
|
var countbi=0//站比 |
|
var allCountbi=0//总站比 |
|
for(var i=0;i<this.tishiData.length;i++){ |
|
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[0].axisValue+'</span></div>' |
|
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"; >'; |
|
this.res+='<thead style="font-size:18px;"><tr>'; |
|
this.res+='<td style="text-align:center;width:30%;">名称</td>'; |
|
this.res+='<td style="text-align:center;width:30%;">数量</td>' |
|
this.res+='<td style="text-align:center;width:30%;">总占比</td>' |
|
this.res+='</tr></thead>' |
|
this.res+='<tbody>'; |
|
for(var i=0;i<this.tishiData.length;i++){ |
|
countbi=Math.round(this.tishiData[i].count/countall* 10000)/ 100.00 |
|
allCountbi=allCountbi+countbi |
|
this.res+='<tr>' |
|
if(this.echartsData.zhiorBuinding=='zhi'){ |
|
this.res+='<td style="text-align:center;">'+ this.tishiData[i].organizationName+'</td>' |
|
}else{ |
|
this.res+='<td style="text-align:center;">'+ this.tishiData[i].buildingTypeName+'</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;">100%</td></tfoot>' |
|
this.res+='</table></div></div>' |
|
return this.res |
|
} |
|
//图形数据 |
|
oneInit (xdata,ydata) { |
|
this.oneEcharts = echarts.init(document.getElementById('center'),'walden'); |
|
var option = { |
|
grid: { |
|
top: 100, |
|
left:40, |
|
right: 20, |
|
//bottom: 20, |
|
}, |
|
// 标题 |
|
title: { |
|
text: `已核查 总数：(${this.tabledata[0].totalCount})`, |
|
top: -4, |
|
left: 'center', |
|
textStyle:{ |
|
//文字颜色 |
|
color:'#000', |
|
fontSize: 32, |
|
} |
|
}, |
|
//提示框 |
|
tooltip: { |
|
trigger: 'axis', |
|
/* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 |
|
borderWidth:'1', |
|
borderRadius :'0', */ |
|
formatter: (params)=>{ |
|
return this.tableTooltip(params) |
|
//return this.echartsData.zhiorBuinding=="zhi"?this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name):this.echartsData.tableTooltip(this.echartsData.buildingType,params[0].name) |
|
}, |
|
position:this.echartsData.tableTooltipNoShow2 |
|
}, |
|
// x轴 |
|
xAxis: { |
|
type: 'category', |
|
boundaryGap:true, |
|
data:xdata, |
|
axisLabel:{ |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
|
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: { |
|
color: "#000", |
|
}, |
|
}, |
|
splitLine: {//分割线配置 |
|
show:true, |
|
lineStyle: { |
|
color: '#999', |
|
} |
|
} |
|
}, |
|
// y轴 |
|
yAxis: { |
|
type: 'value', |
|
axisLabel: { |
|
fontSize :18, |
|
color: "#000" //刻度线标签颜色 |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: { |
|
color: "#000", |
|
} |
|
} |
|
}, |
|
// 数据 |
|
series: [{ |
|
name: '单位预案编制数量', |
|
type: 'line', |
|
markPoint: { |
|
|
|
symbolSize:[65, 65], |
|
data: this.qipaotishi |
|
}, |
|
data:ydata, |
|
clickable:false, |
|
} |
|
], |
|
}; |
|
this.oneEcharts.getZr().on('click', (params) => { |
|
if(this.echartsData.scheduledUpdatesToggle == 1){ |
|
/* const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.oneEcharts.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
this.router.navigate(['/statisticanalysis/scheduledUpdates/yueDate'],{queryParams:{'level':option.xAxis.data[xIndex]}}); |
|
} */ |
|
//let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.oneEcharts.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
/*事件处理代码书写位置*/ |
|
this.echartsData.scheduledUpdatesType = 0 |
|
this.echartsData.scheduledUpdatesToggle = 2 |
|
//this.echartsData.scheduledUpdatesName = "ff" |
|
//this.echartsData.zhiorBuinding!="zhi"?this.echartsData.scheduledUpdatesToggle = -2:this.echartsData.level=='0'? this.echartsData.scheduledUpdatesToggle = 2:this.echartsData.level=='1'?this.echartsData.scheduledUpdatesToggle = 3:'' |
|
if(this.echartsData.zhiorBuinding!="zhi"){ |
|
this.echartsData.findShow=false |
|
//this.echartsData.scheduledUpdatesToggle = -2 |
|
|
|
if(this.echartsData.level=='0'&&this.tabledata[0].items[xIndex].organizations.length>=1){ |
|
this.echartsData.scheduledUpdatesToggle = 2 |
|
//this.echartsData.time=xIndex |
|
//this.router.navigateByUrl(`/statisticanalysis/scheduledUpdates/PublicEcharts?type=${this.route.snapshot.queryParams.type}&TimeType=${this.TimeType}`); |
|
}else if(this.echartsData.level=='1' &&this.tabledata[0].items[xIndex].organizations.length>=1){ |
|
this.echartsData.scheduledUpdatesToggle = 2//原来是3 |
|
} |
|
}else{ |
|
this.echartsData.findShow=true |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
if(this.echartsData.level=='2'){ |
|
this.snackBar.open('已经是最后一层!','确定',config); |
|
} |
|
|
|
} |
|
//this.echartsData.scheduledUpdatesToggle = 2 |
|
this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex] |
|
|
|
} |
|
} |
|
|
|
|
|
}); |
|
this.oneEcharts.setOption(option); |
|
|
|
} |
|
|
|
months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] |
|
echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'] |
|
items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}] |
|
|
|
|
|
} |
|
|
|
|
|
|
|
//未核查组件 |
|
@Component({ |
|
selector: 'app-notVerified', |
|
templateUrl: './notVerified.html', |
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
|
}) |
|
export class notVerifiedComponent implements OnInit { |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
|
|
|
ngOnInit(): void { |
|
window.setTimeout(()=>{ |
|
this.oneInit() |
|
},0) |
|
} |
|
|
|
ngOnDestroy () { |
|
this.oneEcharts.dispose() |
|
this.oneEcharts.clear() |
|
} |
|
|
|
oneEcharts:any; |
|
oneInit () { |
|
this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp'); |
|
var option = { |
|
grid: { |
|
left:70 |
|
}, |
|
title: { |
|
text: '未核查', |
|
subtext: '总数剩余 0', |
|
left: 'center', |
|
textStyle:{ |
|
color:'#000', |
|
fontSize: 30, |
|
}, |
|
subtextStyle: {color:'#999',fontSize: 15} |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
formatter: (params)=>{ |
|
return this.echartsData.tableTooltip(this.echartsData.tableDataZhong,'未核查') |
|
}, |
|
position:this.echartsData.tableTooltipNoShow2 |
|
}, |
|
legend: { |
|
data: ['剩余未核查','总数'], |
|
textStyle: { color: '#000',fontSize: 18} |
|
}, |
|
xAxis: { |
|
type: 'value', |
|
boundaryGap: [0, 0.01], |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :15, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000",} |
|
}, |
|
}, |
|
yAxis: { |
|
type: 'category', |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000"}, |
|
}, |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :15, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
formatter: '{value}' |
|
}, |
|
data: this.echartsData.level=='0'? ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'] |
|
:['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], |
|
}, |
|
series: [ |
|
{ |
|
name: '剩余未核查', |
|
type: 'bar', |
|
stack: '差值', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
itemStyle:{color:'#C80000'}, |
|
label: { |
|
show: true, |
|
position: 'insideRight', |
|
color: '#fff' |
|
}, |
|
}, |
|
{ |
|
name: '总数', |
|
type: 'bar', |
|
stack: '差值', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
itemStyle:{color:'#999'}, |
|
label: { |
|
show: true, |
|
position: 'insideRight', |
|
color: '#fff' |
|
}, |
|
}, |
|
] |
|
}; |
|
this.oneEcharts.setOption(option); |
|
this.oneEcharts.on('click', (params) => { |
|
/* this.echartsData.scheduledUpdatesType = 1 |
|
this.echartsData.scheduledUpdatesName = params.name |
|
this.echartsData.scheduledUpdatesToggle = 3 */ |
|
/* option.yAxis.data=['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'] |
|
this.oneEcharts.setOption(option); */ |
|
}); |
|
} |
|
|
|
|
|
|
|
} |
|
//支队核查具体月份组件 |
|
@Component({ |
|
selector: 'app-yueDate', |
|
templateUrl: './yueDate.html', |
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
|
}) |
|
export class yueDateComponent implements OnInit { |
|
|
|
constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { } |
|
|
|
level:string; |
|
ngOnInit(): void { |
|
//console.log(this.echartsData.scheduledUpdatesToggle) |
|
this.router.queryParams.subscribe(param=>{ |
|
this.level=param.level |
|
}); |
|
|
|
window.setTimeout(()=>{ |
|
this.getechartsdata() |
|
|
|
},0) |
|
} |
|
|
|
ngOnDestroy () { |
|
this.oneEcharts.dispose() |
|
this.oneEcharts.clear() |
|
} |
|
zhiNameData = [] |
|
//buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] |
|
|
|
//获取后端数据 |
|
tabledata |
|
organizationId=[] |
|
ynum=[] |
|
OrganizationIds=''//点击的组织 |
|
async getechartsdata(){ |
|
if(this.router.snapshot.queryParams.pieid!='pieTwo'){ |
|
let Parameters={ |
|
MaintainedState:this.router.snapshot.queryParams.type, |
|
TimeType:this.echartsData.TimeType, |
|
TimeStart:this.echartsData.scheduledUpdatesXName+'-01', |
|
TimeEnd:this.echartsData.scheduledUpdatesXName+'-12', |
|
OrganizationId:this.OrganizationIds |
|
} |
|
//console.log(this.echartsData.zhiorBuinding) |
|
await this.echartsData.getData(Parameters,this.echartsData.zhiorBuinding=='zhi'? `/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`:`/api/StatisticsAnalysis/Companies/Maintained/BuildingTypeTrend`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
this.zhiNameData=[] |
|
this.ynum=[] |
|
this.organizationId=[] |
|
this.tabledata[0].items[0].organizations.forEach(element => { |
|
this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) |
|
this.ynum.push(element.count) |
|
this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) |
|
//this.ydatayue.push(element.count) |
|
}); |
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.ynum,this.zhiNameData) |
|
this.twoInit() |
|
}else{ |
|
let Parameters={ |
|
MaintenanceState:this.router.snapshot.queryParams.type, |
|
//TimeEnd:this.echartsData.TimeType==0?selectEndYear+'-'+selectEndMonth:selectEndYear, |
|
OrganizationId:this.OrganizationIds |
|
} |
|
await this.echartsData.getData(Parameters,this.echartsData.zhiorBuinding=='zhi'? `/api/StatisticsAnalysis/Companies/Maintenance`:`/api/StatisticsAnalysis/Plans/Maintenance`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
this.zhiNameData=[] |
|
this.ynum=[] |
|
this.organizationId=[] |
|
if(this.router.snapshot.queryParams.type=='1'){ |
|
this.tabledata[0].unMaintainCount.organizationCounts.forEach(element => { |
|
this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) |
|
this.ynum.push(element.count) |
|
this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) |
|
//this.ydatayue.push(element.count) |
|
}); |
|
}else if(this.router.snapshot.queryParams.type=='2'){ |
|
this.tabledata[0].maintainedCount.organizationCounts.forEach(element => { |
|
this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) |
|
this.ynum.push(element.count) |
|
this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) |
|
//this.ydatayue.push(element.count) |
|
}); |
|
}else if(this.router.snapshot.queryParams.type=='3'){ |
|
this.tabledata[0].maintainingCount.organizationCounts.forEach(element => { |
|
this.zhiNameData.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationName:element.buildingTypeName) |
|
this.ynum.push(element.count) |
|
this.organizationId.push(this.echartsData.zhiorBuinding=='zhi'? element.organizationId:element.buildingTypeId) |
|
//this.ydatayue.push(element.count) |
|
}); |
|
} |
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.ynum,this.zhiNameData) |
|
this.twoInit() |
|
} |
|
|
|
} |
|
tiaoshiPao:any |
|
//气泡提示数据获取 |
|
bianli(){ |
|
var arrshuzu='['; |
|
for(var i=0;i<this.ynum.length;i++){ |
|
arrshuzu+='{"value":'+this.ynum[i]+',"coord":['+i+','+this.ynum[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},' |
|
} |
|
|
|
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1) |
|
arrshuzu+=']' |
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
|
//return tishiPao |
|
} |
|
|
|
oneEcharts:any; |
|
twoInit () { |
|
this.oneEcharts = echarts.init(document.getElementById("center"), 'skinUpp'); |
|
var option = { |
|
title: { |
|
text:this.router.snapshot.queryParams.pieid=='pieTwo'?'': this.echartsData.scheduledUpdatesXName+`已核查总数:(${this.tabledata[0].totalCount})`, |
|
top: -4, |
|
left: '35%', |
|
textStyle:{ |
|
color:'#000', |
|
fontSize: 30, |
|
} |
|
}, |
|
grid: { |
|
containLabel:true, |
|
top:80, |
|
// top: 10 |
|
}, |
|
//提示框 |
|
tooltip: { |
|
trigger: 'axis', |
|
textStyle:{ |
|
fontSize :18 |
|
}, |
|
formatter: (params)=>{ |
|
if(this.router.snapshot.queryParams.pieid=='pieTwo'){ |
|
return this.echartsData.zhiorBuinding=='zhi'? this.echartsData.weihuTooltipRight(params,this.router.snapshot.queryParams.type):'' |
|
}else{ |
|
return this.echartsData.zhiorBuinding=='zhi'? this.echartsData.weihuTooltip(params):'' |
|
} |
|
|
|
//return this.echartsData.zhiorBuinding=="zhi"?this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name):this.echartsData.tableTooltip(this.echartsData.buildingType,params[0].name) |
|
}, |
|
position:this.echartsData.tableTooltipNoShow2 |
|
}, |
|
legend: { |
|
right:10, |
|
data: this.echartsData.zhuXname, |
|
textStyle: { fontSize :16,color: '#000' } |
|
}, |
|
xAxis: { |
|
id:this.organizationId, |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
interval: 0 |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000",} |
|
}, |
|
type: 'category', |
|
data:this.zhiNameData, |
|
axisPointer: {type: 'shadow'} |
|
}, |
|
yAxis: |
|
{ |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle:{ |
|
color:'#000000' |
|
} |
|
}, |
|
type: 'value', |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
formatter: '{value}' |
|
} |
|
}, |
|
// { |
|
// //设置坐标轴字体颜色和宽度 |
|
// axisLine: { |
|
// lineStyle: {color: "#000"}, |
|
// }, |
|
// type: 'value', |
|
// name: '个', |
|
// axisLabel: { |
|
// color: "#000", //刻度线标签颜色 |
|
// formatter: '{value}' |
|
// } |
|
// } |
|
|
|
series: [ |
|
{ |
|
//name: this.echartsData.zhuXname[1], |
|
type: 'bar', |
|
//stack: '总数', |
|
data: this.ynum, |
|
barWidth :'38', |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
markPoint: { |
|
data: this.tiaoshiPao |
|
}, |
|
}, |
|
|
|
|
|
] |
|
}; |
|
this.oneEcharts.setOption(option); |
|
/* this.items[index].echart.on('click', (params) => { |
|
let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
this.echartsData.scheduledUpdatesType = 0 |
|
this.echartsData.scheduledUpdatesName = this.months[index] |
|
this.echartsData.scheduledUpdatesToggle = false |
|
this.echartsData.scheduledUpdatesXName=params.name |
|
console.log(this.echartsData.scheduledUpdatesXName) |
|
}); */ |
|
this.oneEcharts.getZr().on('click', (params) => { |
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.oneEcharts.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
/*事件处理代码书写位置*/ |
|
if(this.echartsData.zhiorBuinding=='zhi'&&this.router.snapshot.queryParams.pieid=='pie'){ |
|
this.OrganizationIds=option.xAxis.id[xIndex] |
|
this.getechartsdata() |
|
if(this.tabledata[0].items.length>=1){ |
|
this.oneEcharts.dispose() |
|
this.oneEcharts.clear() |
|
//this.getechartsdata() |
|
} |
|
|
|
/* this.echartsData.scheduledUpdatesType = 0 |
|
this.echartsData.scheduledUpdatesName = option.xAxis.data[xIndex] |
|
this.echartsData.scheduledUpdatesToggle = 3 |
|
console.log(option.xAxis.id[xIndex]) */ |
|
}else if(this.echartsData.zhiorBuinding=='zhi'&&this.router.snapshot.queryParams.pieid=='pieTwo'){ |
|
this.OrganizationIds=option.xAxis.id[xIndex] |
|
//console.log(xIndex,option.xAxis.id[xIndex],this.organizationId) |
|
this.getechartsdata() |
|
if((this.router.snapshot.queryParams.type=='1'&&this.tabledata[0].unMaintainCount.organizationCounts.length>=1) |
|
||(this.router.snapshot.queryParams.type=='2'&&this.tabledata[0].maintainedCount.organizationCounts.length>=1) |
|
||(this.router.snapshot.queryParams.type=='3'&&this.tabledata[0].maintainingCount.organizationCounts.length>=1)){ |
|
this.oneEcharts.dispose() |
|
this.oneEcharts.clear() |
|
//this.getechartsdata() |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
//建筑类型核查具体月份组件 |
|
@Component({ |
|
selector: 'app-yuebuildingDate', |
|
templateUrl: './yuebuildingDate.html', |
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
|
}) |
|
export class yuebuildingDateComponent implements OnInit { |
|
|
|
constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { } |
|
|
|
level:string; |
|
ngOnInit(): void { |
|
this.router.queryParams.subscribe(param=>{ |
|
this.level=param.level |
|
}); |
|
|
|
window.setTimeout(()=>{ |
|
this.twoInit() |
|
},0) |
|
} |
|
|
|
ngOnDestroy () { |
|
this.oneEcharts.dispose() |
|
this.oneEcharts.clear() |
|
} |
|
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
|
buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] |
|
|
|
//获取后端数据 |
|
tabledata |
|
async getechartsdata(selectStartYear,selectStartMonth,selectEndYear,selectEndMonth){ |
|
let Parameters={ |
|
MaintainedState:this.router.snapshot.queryParams.type, |
|
TimeType:this.echartsData.TimeType, |
|
TimeStart:this.echartsData.scheduledUpdatesXName, |
|
//TimeEnd:this.echartsData.TimeType==0?selectEndYear+'-'+selectEndMonth:selectEndYear, |
|
//OrganizationId |
|
} |
|
console.log(this.echartsData.zhiorBuinding) |
|
if(this.echartsData.zhiorBuinding=="zhi"){ |
|
await this.echartsData.getData(Parameters,`/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
this.zhiNameData=[] |
|
/* this.ydatayue=[] |
|
this.tabledata[0].items.forEach(element => { |
|
this.zhiNameData.push(element.date) |
|
this.ydatayue.push(element.count) |
|
}); */ |
|
}else{ |
|
await this.echartsData.getData(Parameters,`/api/StatisticsAnalysis/Companies/Maintained/BuildingTypeTrend`) |
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
console.log(this.tabledata) |
|
/* this.xdatayue=[] |
|
this.ydatayue=[] |
|
this.tabledata[0].items.forEach(element => { |
|
this.xdatayue.push(element.date) |
|
this.ydatayue.push(element.count) |
|
}); */ |
|
} |
|
|
|
//this.oneInit(this.xdatayue,this.ydatayue) |
|
} |
|
oneEcharts:any; |
|
twoInit () { |
|
this.oneEcharts = echarts.init(document.getElementById("center"), 'skinUpp'); |
|
var option = { |
|
title: { |
|
text: this.echartsData.scheduledUpdatesXName+'已核查总数:(0)', |
|
top: -4, |
|
left: '35%', |
|
textStyle:{ |
|
color:'#000', |
|
fontSize: 30, |
|
} |
|
}, |
|
//提示框 |
|
tooltip: { |
|
trigger: 'axis', |
|
textStyle:{ |
|
fontSize :18 |
|
} |
|
}, |
|
legend: { |
|
data: this.echartsData.zhuXname, |
|
textStyle: { fontSize :16,color: '#000' } |
|
}, |
|
xAxis: [{ |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
interval: 0 |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000",} |
|
}, |
|
type: 'category', |
|
data:this.buildingData, |
|
axisPointer: {type: 'shadow'} |
|
}], |
|
yAxis: [ |
|
{ |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle:{ |
|
color:'#000000' |
|
} |
|
}, |
|
type: 'value', |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
formatter: '{value}' |
|
} |
|
}, |
|
// { |
|
// //设置坐标轴字体颜色和宽度 |
|
// axisLine: { |
|
// lineStyle: {color: "#000"}, |
|
// }, |
|
// type: 'value', |
|
// name: '个', |
|
// axisLabel: { |
|
// color: "#000", //刻度线标签颜色 |
|
// formatter: '{value}' |
|
// } |
|
// } |
|
], |
|
series: [ |
|
{ |
|
name: this.echartsData.zhuXname[1], |
|
type: 'bar', |
|
stack: '总数', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
barWidth :'38', |
|
}, |
|
{ |
|
name: this.echartsData.zhuXname[2], |
|
type: 'bar', |
|
stack: '总数', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0], |
|
itemStyle:{color: '#626c91'} |
|
}, |
|
{ |
|
name: this.echartsData.zhuXname[3], |
|
type: 'bar', |
|
stack: '总数', |
|
data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0], |
|
itemStyle:{color:'#c4ebad'} |
|
}, |
|
{ |
|
name: this.echartsData.zhuXname[0], |
|
type: 'line', |
|
// yAxisIndex: 1, |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0], |
|
itemStyle:{color: '#FFDC35'} |
|
}, |
|
/* { |
|
name: '平均值2倍', |
|
type: 'line', |
|
// yAxisIndex: 1, |
|
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], |
|
itemStyle:{color: '#6be6c1'} |
|
}, |
|
{ |
|
name: '平均值3倍', |
|
type: 'line', |
|
// yAxisIndex: 1, |
|
data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111], |
|
itemStyle:{color: '#999'} |
|
}, */ |
|
] |
|
}; |
|
this.oneEcharts.setOption(option); |
|
/* this.items[index].echart.on('click', (params) => { |
|
let xIndex=this.items[index].echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
this.echartsData.scheduledUpdatesType = 0 |
|
this.echartsData.scheduledUpdatesName = this.months[index] |
|
this.echartsData.scheduledUpdatesToggle = false |
|
this.echartsData.scheduledUpdatesXName=params.name |
|
console.log(this.echartsData.scheduledUpdatesXName) |
|
}); */ |
|
this.oneEcharts.getZr().on('click', (params) => { |
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
if (this.oneEcharts.containPixel('grid',pointInPixel)) { |
|
let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
/*事件处理代码书写位置*/ |
|
this.echartsData.scheduledUpdatesType = 0 |
|
//console.log(option.xAxis[0].data[xIndex]) |
|
this.echartsData.scheduledUpdatesXName+= option.xAxis[0].data[xIndex] |
|
|
|
if(this.echartsData.level=='0'){ |
|
this.echartsData.scheduledUpdatesToggle = 2 |
|
}else if(this.echartsData.level=='1'){ |
|
this.echartsData.scheduledUpdatesToggle = 3 |
|
} |
|
//this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex] |
|
} |
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
//echarts详情组件 |
|
@Component({ |
|
selector: 'app-detailedInformation', |
|
templateUrl: './detailedInformation.html', |
|
styleUrls: ['../state/page-two-time/page-two-time.component.scss'] |
|
}) |
|
export class detailedInformationComponent implements OnInit { |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
|
|
|
ngOnInit(): void { |
|
window.setTimeout(()=>{ |
|
this.oneInit() |
|
},0) |
|
} |
|
|
|
ngOnDestroy () { |
|
this.example.dispose() |
|
this.example.clear() |
|
} |
|
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] |
|
buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] |
|
|
|
example:any; |
|
oneInit () { |
|
this.example = echarts.init(document.getElementById('center'), 'skinUpp'); |
|
if (this.echartsData.scheduledUpdatesType ===0) { //已核查 |
|
var option = { |
|
title: { |
|
text: `总数（0）`,//${this.echartsData.scheduledUpdatesName}${this.echartsData.scheduledUpdatesXName} |
|
top: -2, |
|
right: 655, |
|
textStyle:{ |
|
color:'#000', |
|
fontSize: 30, |
|
} |
|
}, |
|
//提示框 |
|
tooltip: { |
|
trigger: 'axis', |
|
textStyle:{ |
|
fontSize :18 |
|
} |
|
}, |
|
legend: { |
|
//data: ['平均值','维护无需修改', '维护修改', '维护通过审核'], |
|
data:this.echartsData.zhuXname, |
|
textStyle: { color: '#000',fontSize: 16 }, |
|
right:20 |
|
}, |
|
xAxis: [{ |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000",} |
|
}, |
|
type: 'category', |
|
data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], |
|
axisPointer: {type: 'shadow'} |
|
}], |
|
yAxis: [ |
|
{ |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000"}, |
|
}, |
|
type: 'value', |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
formatter: '{value}' |
|
} |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: this.echartsData.zhuXname[1], |
|
type: 'bar', |
|
stack: '总数', |
|
barWidth :'38', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
}, |
|
{ |
|
name: this.echartsData.zhuXname[2], |
|
type: 'bar', |
|
stack: '总数', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
itemStyle:{color: '#626c91'} |
|
}, |
|
{ |
|
name: this.echartsData.zhuXname[3], |
|
type: 'bar', |
|
stack: '总数', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
itemStyle:{color:'#c4ebad'} |
|
}, |
|
{ |
|
name: this.echartsData.zhuXname[0], |
|
type: 'line', |
|
// yAxisIndex: 1, |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
itemStyle:{color: '#FFDC35'} |
|
}, |
|
{ |
|
//name: '与上个月环比', |
|
type: 'line', |
|
// yAxisIndex: 1, |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0], |
|
//itemStyle:{color: '#6be6c1'}, |
|
|
|
}, |
|
/* { |
|
//name: '警报', |
|
type: 'effectScatter', |
|
//coordinateSystem: 'cartesian2d', |
|
data: [[0,0],[0,0],[0,0]], //2d坐标系 |
|
symbolSize:30, |
|
itemStyle: { |
|
normal: { |
|
color: 'red', |
|
shadowBlur: 10, |
|
shadowColor: '#333' |
|
} |
|
}, |
|
|
|
}, */ |
|
/* { |
|
name: '平均值2倍', |
|
type: 'line', |
|
// yAxisIndex: 1, |
|
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], |
|
itemStyle:{color: '#6be6c1'} |
|
}, |
|
{ |
|
name: '平均值3倍', |
|
type: 'line', |
|
// yAxisIndex: 1, |
|
data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111], |
|
itemStyle:{color: '#999'} |
|
}, */ |
|
] |
|
}; |
|
this.example.setOption(option); |
|
} else { //未核查 |
|
var options = { |
|
grid: { |
|
left:90 |
|
}, |
|
title: { |
|
text: this.echartsData.scheduledUpdatesName, |
|
left: 'center', |
|
textStyle:{ |
|
color:'#000', |
|
fontSize: 30, |
|
}, |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
textStyle:{ |
|
fontSize: 18 |
|
}, |
|
axisPointer: { |
|
type: 'shadow' |
|
} |
|
}, |
|
legend: { |
|
data: ['剩余未核查','总数'], |
|
textStyle: { color: '#000',fontSize: 16 } |
|
}, |
|
xAxis: { |
|
type: 'value', |
|
boundaryGap: [0, 0.01], |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
}, |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000",} |
|
}, |
|
}, |
|
yAxis: { |
|
type: 'category', |
|
//设置坐标轴字体颜色和宽度 |
|
axisLine: { |
|
lineStyle: {color: "#000"}, |
|
}, |
|
axisLabel: { |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
}, |
|
color: "#000", //刻度线标签颜色 |
|
formatter: '{value}' |
|
}, |
|
data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], |
|
}, |
|
series: [ |
|
{ |
|
name: '剩余未核查', |
|
type: 'bar', |
|
stack: '差值', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
itemStyle:{color:'#C80000'}, |
|
label: { |
|
show: true, |
|
position: 'insideRight', |
|
color: '#fff' |
|
}, |
|
}, |
|
{ |
|
name: '总数', |
|
type: 'bar', |
|
stack: '差值', |
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
itemStyle:{color:'#999'}, |
|
label: { |
|
show: true, |
|
position: 'insideRight', |
|
color: '#fff' |
|
}, |
|
}, |
|
] |
|
}; |
|
this.example.setOption(options); |
|
} |
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
//更多资讯组件 |
|
@Component({ |
|
selector: 'app-moreTable', |
|
templateUrl: './moreTable.html', |
|
styleUrls: ['./scheduled-updates.component.scss'] |
|
}) |
|
export class moreTableComponent implements OnInit { |
|
|
|
constructor(private router: Router,public echartsData:EchartsDataService) { } |
|
|
|
ngOnInit(): void { |
|
|
|
} |
|
|
|
displayedColumns: string[]=['team','header','time']; |
|
dataSource:any = [ |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'}, |
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'}, |
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'}, |
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'}, |
|
{content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'}, |
|
{content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'} |
|
] |
|
|
|
|
|
|
|
} |