Browse Source

[新增]维护更新统计左侧单位建筑类型下钻完成

tangshan
陈敬瑜 3 years ago
parent
commit
d1652a3579
  1. 2
      src/app/key-unit/key-unit-management/key-unit-management.component.scss
  2. 2
      src/app/plan-management/entry-plan/entry-plan.component.scss
  3. 73
      src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts
  4. 81
      src/app/statistic-analysis/echarts-data.service.ts
  5. 557
      src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts
  6. 8
      src/index.html

2
src/app/key-unit/key-unit-management/key-unit-management.component.scss

@ -100,7 +100,7 @@
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
margin-left: 40px;
margin-left: 50px;
}
.weihu{
//display: block;

2
src/app/plan-management/entry-plan/entry-plan.component.scss

@ -108,7 +108,7 @@
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
margin-left: 40px;
margin-left: 50px;
}
.weihu{
//display: block;

73
src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts

@ -7,7 +7,7 @@
* @LastEditTime: 2021-06-24 15:27:13
*/
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
import { DateAdapter } from '@angular/material/core';
@ -27,7 +27,7 @@ export class DeleteTwoComponent implements OnInit {
dataniany=[0,0]
tiaoshiPao:any//气泡
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService, private route: ActivatedRoute) { }
/* @ViewChild('appEcharts')appEcharts :echartsComponent; //
@ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 */
@ -37,29 +37,7 @@ export class DeleteTwoComponent implements OnInit {
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
//this.bianli()
window.setTimeout(()=>{
this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
/* this.headZhexian('leftOne','',this.datayuex,this.datayuey)
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) */
/* else if(this.selectType=='year'){
this.headZhexian('heads','删除数量总统计',this.datanianx,this.dataniany)
this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey)
} */
this.getechartsdata()
},0)
}
ngOnDestroy():void{
@ -85,36 +63,21 @@ export class DeleteTwoComponent implements OnInit {
this.years.unshift(i)
}
}
TimeType=0//按月查询还是按年查询
selectOneYear:any = (new Date()).getFullYear() //开始年份
selectTwoYear:any = (new Date()).getFullYear() //结束年份
selectStartMonth:any = 1 //开始月份
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
//点击月
monthClick(){
this.TimeType=0
this.tiaoshiPao=null
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
/* this.headZhexian('leftOne','',this.datayuex,this.datayuey)
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) */
}
//按月查询
monthSubmit (e) {
this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
/* this.headZhexian('leftOne','',this.datayuex,this.datayuey)
this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) */
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
@ -146,17 +109,10 @@ export class DeleteTwoComponent implements OnInit {
selectEndYear:any = (new Date()).getFullYear() //结束年份
//点击年
yearClick(){
this.TimeType=1
this.tiaoshiPao=null
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataniany,this.datanianx)
this.headZhexian('Line','删除数量总统计',this.datanianx,this.dataniany)
/* this.headZhexian('leftOne','',this.datanianx,this.dataniany)
this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany)
this.headZhexian('rightOne','地下',this.datanianx,this.dataniany)
this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany)
this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany)
this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) */
}
//按年查询
yearSubmit (e) {
@ -193,6 +149,21 @@ export class DeleteTwoComponent implements OnInit {
goBack(){
history.go(-1)
}
//获取数据
tabledata
async getechartsdata(){
let Parameters={
MaintainedState:this.route.snapshot.queryParams.type,
TimeType:this.TimeType,
TimeStart:this.TimeType==0?this.selectStartYear+'-'+this.selectStartMonth:this.selectStartYear,
TimeEnd:this.TimeType==0?this.selectEndYear+'-'+this.selectEndMonth:this.selectEndYear,
//OrganizationId
}
await this.echartsData.getData(Parameters,`/api/StatisticsAnalysis/Companies/Maintained/OrganizationTrend`)
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
console.log(this.tabledata)
this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey)
}
/**
* @name: 线
@ -223,7 +194,7 @@ export class DeleteTwoComponent implements OnInit {
},
// 标题
title: {
text: `${headtext}`+':总数(0)',
text: `${headtext}`+`:总数(${this.tabledata[0].totalCount}`,
left:'center',
top: -4,
//副标题文本样式

81
src/app/statistic-analysis/echarts-data.service.ts

@ -27,13 +27,16 @@ export class EchartsDataService {
//维护删除
dezhiorBuinding="zhi" //维护删除页面判断是支队查询还是建筑类型查询
dateYear=new Date().getFullYear()
//计划更新统计
scheduledUpdatesType:number = 0; //已核查/未核查
scheduledUpdatesName:string;
scheduledUpdatesXName:string;
//scheduledUpdatesToggle:string ="one"; // 显示 当前点击 已核查/未核查
scheduledUpdatesToggle:number=1
TimeType=0//按月查询还是按年查询
time//点击的年份或者月份
eventEmit = new EventEmitter();
zhiorBuinding="zhi"//维护更新页面判断是支队查询还是建筑类型查询
@ -548,7 +551,81 @@ export class EchartsDataService {
this.res+='</table></div></div>'
return this.res
}
//维护更新提示框第一层
weihu(datas){
if(datas.name=='维护删除'){
for(var a in this.obdata[0].deletedCount){
this.tishiData=this.obdata[0].deletedCount.organizationCounts
}
}else if(datas.name=='维护无需修改'){
this.tishiData=this.obdata[0].preservedCount.organizationCounts
}else if(datas.name=='维护修改'){
this.tishiData=this.obdata[0].updatedCount.organizationCounts
}
console.log(this.tishiData)
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
}
//维护更新内部提示框
weihuTooltip(datas){
this.tishiData=this.obdata[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.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
}
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]

557
src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts

@ -53,15 +53,30 @@ export class ScheduledUpdatesComponent implements OnInit {
this.echartsData.tableShow=true
}
}
//获取后端数据
async getechartsdata(){
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/Maintaining`)
this.tabledata2=JSON.parse(JSON.stringify(this.echartsData.allDate))
console.log(this.tabledata2)
this.initCharts("pieTwo")
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
@ -80,7 +95,8 @@ export class ScheduledUpdatesComponent implements OnInit {
tooltip: {
trigger: 'item',
formatter: (params)=>{
return this.echartsData.tableTooltip(this.selectedBtn=="tu"?this.echartsData.tableDataZhi:this.echartsData.buildingType,params.name)
return this.weihu(params.data)
//return this.echartsData.tableTooltip(this.selectedBtn=="tu"?this.echartsData.tableDataZhi:this.echartsData.buildingType,params.name)
},
position:this.echartsData.tableTooltipNoShow2
},
@ -136,12 +152,12 @@ export class ScheduledUpdatesComponent implements OnInit {
this.example.setOption(options);
this.example.on('click', (params) => {
this.echartsData.findShow=true
if(params.name=="维护删除"){this.router.navigateByUrl('/statisticanalysis/delete_one/delete_two');}
if(params.name=="维护删除"){this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_two?dwOryuan=${this.dwOryuan}&type=3`);}
else{
if(pieid=="pie"){
this.echartsData.scheduledUpdatesToggle = 1
this.echartsData.zhuXname=["平均值","维护无需修改","维护修改","维护删除"]
this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts');
this.router.navigateByUrl(`/statisticanalysis/scheduledUpdates/PublicEcharts?type=${params.data.name=='维护修改'?2:1}&dwOryuan=${this.dwOryuan}`);
}else{
this.echartsData.zhuXname=["平均值","维护中","维护通过审核","未维护"]
@ -166,10 +182,62 @@ export class ScheduledUpdatesComponent implements OnInit {
//点击单位按钮
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
}
}
@ -241,22 +309,22 @@ export class publicEchartsComponent implements OnInit {
changeTime(e){
console.log(e)
//this.echartsData.selectType=0
this.verifieds.changeTime(e.value)
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
// console.log(startTime)
// console.log(endTime)
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';
@ -270,9 +338,6 @@ export class publicEchartsComponent implements OnInit {
this.snackBar.open('请选择正确时间区段','确定',config);
}
}
selectStartYear:any = (new Date()).getFullYear() //开始年份
selectEndYear:any = (new Date()).getFullYear() //结束年份
@ -281,6 +346,9 @@ export class publicEchartsComponent implements OnInit {
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-01'
e.selectEndYear+='-12-31'
this.verifieds.getechartsdata(e.selectStartYear,e.selectStartMonth,e.selectEndYear,e.selectEndMonth)
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
@ -327,11 +395,17 @@ export class publicEchartsComponent implements OnInit {
//支队查询
zhiFind(){
this.verifieds.oneEcharts.clear()
this.verifieds.oneEcharts.dispose()
this.echartsData.zhiorBuinding="zhi"
this.verifieds.getechartsdata('2021','1','2022','12')
}
//建筑类型查询
buildingFind(){
this.verifieds.oneEcharts.clear()
this.verifieds.oneEcharts.dispose()
this.echartsData.zhiorBuinding="building"
this.verifieds.getechartsdata('2021','1','2022','12')
}
@ -348,13 +422,11 @@ export class publicEchartsComponent implements OnInit {
})
export class verifiedComponent implements OnInit {
constructor(private router: Router,public echartsData:EchartsDataService,public snackBar: MatSnackBar) { }
constructor(private router: Router,public echartsData:EchartsDataService,public snackBar: MatSnackBar, private route: ActivatedRoute) { }
ngOnInit(): void {
window.setTimeout(()=>{
this.qipaotishi=this.echartsData.qipao(this.qipaotishi,this.ydatayue,this.xdatayue)
this.oneInit(this.xdatayue,this.ydatayue)
//this.twoInit()
this.getechartsdata('2021','1','2022','12')
},0)
}
@ -366,16 +438,22 @@ export class verifiedComponent implements OnInit {
element.echart.clear()
});
} */
async changeTime (e){
//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.ydataYear,this.xdataYear)
this.oneInit(this.xdataYear,this.ydataYear)
selectOneYear=selectOneYear+'-01-01'
selectTwoYear+='-12-31'
this.getechartsdata(selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth)
}else{
this.echartsData.TimeType=0
this.qipaotishi=this.echartsData.qipao(this.qipaotishi,this.ydatayue,this.xdatayue)
this.oneInit(this.xdatayue,this.ydatayue)
this.getechartsdata(selectOneYear,nselectStartMoth,selectTwoYear,selectEndMonth)
}
}
@ -385,34 +463,80 @@ export class verifiedComponent implements OnInit {
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:selectStartYear,
TimeEnd:this.echartsData.TimeType==0?selectEndYear+'-'+selectEndMonth:selectEndYear,
//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,`/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)
}
//提示框表格
tableTooltip(dataArr,title:string){
let data = dataArr
//console.log(data)
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:26px;text-align: center;display:block;">'+title+'</span></div>'
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
res+='<thead><tr>';
res+='<td style="text-align:center;width:25%;">名称</td>';
res+='<td style="text-align:center;width:25%;">数量</td>'
res+='<td style="text-align:center;width:25%;">环比</td>'
res+='<td style="text-align:center;width:25%;">总占比</td>'
res+='</tr></thead>'
res+='<tbody>';
for(var i=0;i<data.length;i++){
res+='<tr>'
res+='<td style="text-align:center;">'+data[i].name+'</td>'
res+='<td style="text-align:center;">'+data[i].number+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td>'
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
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
}
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><td style="text-align:center;">19%</td></tfoot>'
res+='</table></div></div>'
return res
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: {
@ -423,7 +547,7 @@ export class verifiedComponent implements OnInit {
},
// 标题
title: {
text: '已核查'+'总数:(0)',
text: `已核查 总数:(${this.tabledata[0].totalCount})`,
top: -4,
left: 'center',
textStyle:{
@ -439,7 +563,8 @@ export class verifiedComponent implements OnInit {
borderWidth:'1',
borderRadius :'0', */
formatter: (params)=>{
return this.echartsData.zhiorBuinding=="zhi"?this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name):this.echartsData.tableTooltip(this.echartsData.buildingType,params[0].name)
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
},
@ -514,9 +639,11 @@ export class verifiedComponent implements OnInit {
if(this.echartsData.zhiorBuinding!="zhi"){
this.echartsData.findShow=false
this.echartsData.scheduledUpdatesToggle = -2
if(this.echartsData.level=='0'){
if(this.echartsData.level=='0'&&this.tabledata[0].items[xIndex].organizations.length>=1){
this.echartsData.scheduledUpdatesToggle = 2
}else if(this.echartsData.level=='1'){
//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 = 3
}
}else{
@ -538,141 +665,13 @@ export class verifiedComponent implements OnInit {
});
this.oneEcharts.setOption(option);
}
months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve']
items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}]
twoInit () {
this.months.forEach((element,index) => {
this.items[index].echart = echarts.init(document.getElementById(this.echartIds[index]), 'skinUpp');
var option = {
title: {
text: element+'总数:(500)',
top: -4,
left: '35%',
textStyle:{
color:'#000',
fontSize: 30,
}
},
//提示框
tooltip: {
trigger: 'axis',
textStyle:{
fontSize :18
}
},
legend: {
data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'],
textStyle: { fontSize :16,color: '#000' }
},
xAxis: [{
axisLabel: {
textStyle:{
fontSize :18,
color:'#000000'
},
color: "#000", //刻度线标签颜色
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {color: "#000",}
},
type: 'category',
data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
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: '已核查无需修改',
type: 'bar',
stack: '总数',
data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
barWidth :'38',
},
{
name: '已核查修改中',
type: 'bar',
stack: '总数',
data: [39, 3, 4, 7, 3, 2, 3, 4, 29, 40, 40, 2, 4],
itemStyle:{color: '#626c91'}
},
{
name: '已核查提交审核',
type: 'bar',
stack: '总数',
data: [48, 2, 3, 3, 4, 3, 2, 26, 4, 3, 3, 24, 14],
itemStyle:{color:'#c4ebad'}
},
{
name: '平均值',
type: 'line',
// yAxisIndex: 1,
data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37],
itemStyle:{color: '#FFDC35'}
},
{
name: '平均值2倍',
type: 'line',
// yAxisIndex: 1,
data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
itemStyle:{color: '#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.items[index].echart.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)
});
});
}
}
@ -816,7 +815,8 @@ export class yueDateComponent implements OnInit {
});
window.setTimeout(()=>{
this.twoInit()
this.getechartsdata()
},0)
}
@ -824,15 +824,62 @@ export class yueDateComponent implements OnInit {
this.oneEcharts.dispose()
this.oneEcharts.clear()
}
zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]
zhiNameData = []
//buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]
//获取后端数据
tabledata
organizationId=[]
ynum=[]
OrganizationIds=''//点击的组织
async getechartsdata(){
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: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.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.ydatayue=[]
this.tabledata[0].items.forEach(element => {
this.zhiNameData.push(element.date)
this.ydatayue.push(element.count)
}); */
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.ynum,this.zhiNameData)
this.twoInit()
//this.oneInit(this.xdatayue,this.ydatayue)
}
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.echartsData.scheduledUpdatesXName+'已核查总数:(0)',
text: this.echartsData.scheduledUpdatesXName+`已核查总数:(${this.tabledata[0].totalCount})`,
top: -4,
left: '35%',
textStyle:{
@ -840,19 +887,30 @@ export class yueDateComponent implements OnInit {
fontSize: 30,
}
},
grid: {
containLabel:true,
top:80,
// top: 10
},
//提示框
tooltip: {
trigger: 'axis',
textStyle:{
fontSize :18
}
},
formatter: (params)=>{
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: [{
xAxis: {
id:this.organizationId,
axisLabel: {
textStyle:{
fontSize :18,
@ -868,8 +926,8 @@ export class yueDateComponent implements OnInit {
type: 'category',
data:this.zhiNameData,
axisPointer: {type: 'shadow'}
}],
yAxis: [
},
yAxis:
{
//设置坐标轴字体颜色和宽度
axisLine: {
@ -899,74 +957,23 @@ export class yueDateComponent implements OnInit {
// formatter: '{value}'
// }
// }
],
series: [
{
name: this.echartsData.zhuXname[1],
//name: this.echartsData.zhuXname[1],
type: 'bar',
stack: '总数',
data: this.echartsData.zhiorBuinding=="zhi"?[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0]:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//stack: '总数',
data: this.ynum,
barWidth :'38',
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
{
name: this.echartsData.zhuXname[2],
type: 'bar',
stack: '总数',
data: this.echartsData.zhiorBuinding=="zhi"?[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0]:[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: this.echartsData.zhiorBuinding=="zhi"?[0, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0]:[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],
itemStyle:{color: '#FFDC35'}
},
{
//name: '与上个月环比',
type: 'line',
// yAxisIndex: 1,
data: [0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0,0],
//itemStyle:{color: '#6be6c1'},
markPoint: {
data: this.tiaoshiPao
},
},
/* {
//name: '警报',
type: 'effectScatter',
//coordinateSystem: 'cartesian2d',
data: [[0,0]],
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.oneEcharts.setOption(option);
@ -984,11 +991,18 @@ export class yueDateComponent implements OnInit {
if (this.oneEcharts.containPixel('grid',pointInPixel)) {
let xIndex=this.oneEcharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/
if(this.echartsData.zhiorBuinding=='zhi'){
this.OrganizationIds=option.xAxis.id[xIndex]
this.getechartsdata()
this.echartsData.scheduledUpdatesType = 0
//console.log(option.xAxis)
this.echartsData.scheduledUpdatesName = option.xAxis[0].data[xIndex]
this.echartsData.scheduledUpdatesName = option.xAxis.data[xIndex]
this.echartsData.scheduledUpdatesToggle = 3
//this.echartsData.scheduledUpdatesXName=option.xAxis.data[xIndex]
console.log(option.xAxis.id[xIndex])
}
}
});
@ -1028,6 +1042,41 @@ export class yuebuildingDateComponent implements OnInit {
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');

8
src/index.html

@ -23,10 +23,10 @@
</body>
<!-- <script type="text/javascript" src="./assets/kmap/kmap-service-main-kd.js"></script> -->
<script src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script>
<!-- <script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script> -->
<!-- <script src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script> -->
<script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<script src="/assets/html2canvas.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.js"></script>
<script type="text/javascript" src="/assets/wordexport/FileSaver.js"></script>

Loading…
Cancel
Save