From 8fe4e0a87508a064d18277dffff331f1e6237166 Mon Sep 17 00:00:00 2001 From: Sjh <55341701@qq.com> Date: Tue, 28 Nov 2023 08:51:30 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E7=BB=9F=E8=AE=A1=E5=88=86?= =?UTF-8?q?=E6=9E=90bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- proxy.config.json | 2 +- .../add-unit-one/add-unit-one.component.ts | 443 ++- .../add-unit-three-bar-details.component.ts | 3 + .../add-unit-three-line-details.component.ts | 403 ++- .../add-unit-two-time.component.ts | 733 +++-- .../add-unit-two-type-details.component.ts | 3 + .../add-unit-two-type-statistics.component.ts | 899 +++--- .../building-type-one.component.ts | 325 +- .../building-type-three-details.component.ts | 435 +-- .../building-type-two-forward.component.ts | 547 ++-- .../building-type-two-reverse.component.ts | 719 +++-- .../delete-one/delete-one.component.ts | 276 +- .../delete-there/delete-there.component.ts | 413 ++- .../delete-two-newadd.component.ts | 372 ++- .../delete-two/delete-two.component.ts | 585 ++-- .../statistic-analysis/home/home.component.ts | 7 +- .../real-monitoring.component.ts | 513 ++-- .../scheduled-updates.component.ts | 2713 ++++++++++------- .../state/page-one/page-one.component.ts | 699 +++-- .../page-there-year.component.ts | 394 ++- .../state/page-there/page-there.component.ts | 496 +-- .../page-two-time/page-two-time.component.ts | 743 +++-- .../page-zhong-dui-details.component.ts | 7 +- src/index.html | 4 +- 24 files changed, 7001 insertions(+), 4733 deletions(-) diff --git a/proxy.config.json b/proxy.config.json index e61e510..8129e12 100644 --- a/proxy.config.json +++ b/proxy.config.json @@ -1,6 +1,6 @@ { "/api": { - "target": "http://10.81.73.39:8000/", + "target": "http://121.36.37.70:8201/", "生产": "http://10.81.73.39:8000/", "测试": "http://121.36.37.70:8201/", "生产2": "http://183.194.244.232:8088/", diff --git a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts index 0003d87..19404f0 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts @@ -1,111 +1,183 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import {EchartsDataService,} from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; -declare var CryptoJS +declare var CryptoJS; @Component({ - selector: 'app-add-unit-one', - templateUrl: './add-unit-one.component.html', - styleUrls: ['./add-unit-one.component.scss'] + selector: "app-add-unit-one", + templateUrl: "./add-unit-one.component.html", + styleUrls: ["./add-unit-one.component.scss"], }) export class AddUnitOneComponent implements OnInit { + constructor(private router: Router, public echartsData: EchartsDataService) {} - constructor(private router: Router,public echartsData:EchartsDataService) { } - - setTimeoutObj//延时器需要清除 - tabledata - padHw - orid//获取本组织id + setTimeoutObj; //延时器需要清除 + tabledata; + padHw; + orid; //获取本组织id ngOnInit(): void { - if(window.matchMedia("(max-width: 1400px)").matches){ - this.padHw=true + if (window.matchMedia("(max-width: 1400px)").matches) { + this.padHw = true; //this.padjt= - }else{ - this.padHw=false + } else { + this.padHw = false; } - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } + } /* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`)) this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */ let jwt = sessionStorage.getItem("token"); - let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]); + let rawJwt = CryptoJS.enc.Base64.parse(jwt.split(".")[1]); let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt); - let identityJsonparse=JSON.parse(identityJson) - this.orid=identityJsonparse.oid - this.setTimeoutObj = window.setTimeout(()=>{ - this.getechartsdata() - }) + let identityJsonparse = JSON.parse(identityJson); + this.orid = identityJsonparse.oid; + this.setTimeoutObj = window.setTimeout(() => { + this.getechartsdata(); + }); this.echartsData.eventEmit.subscribe((value: any) => { - if (value == 'echarts') { + if (value == "echarts") { setTimeout(() => { - this.indexBzt.resize() + this.indexBzt.resize(); }, 500); - } }); } //更新echarts视图 - updateEcharts(){ - this.indexBzt.resize() + updateEcharts() { + this.indexBzt.resize(); } //获取服务层数据 - async getechartsdata(){ - await this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) + async getechartsdata() { + await this.echartsData.getData(null, `/api/StatisticsAnalysis/Companies`); + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); //console.log(this.tabledata) - this.initCharts("pieone") - this.initCharts("pietwo") + this.initCharts("pieone"); + this.initCharts("pietwo"); } //组件销毁时 - ngOnDestroy(){ + ngOnDestroy() { window.clearTimeout(this.setTimeoutObj); - this.indexBzt.clear() - this.indexBzt.dispose() + if (!this.indexBzt) { + return; + } + this.indexBzt.clear(); + this.indexBzt.dispose(); } - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] - buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] - indexBzt//首页饼状图实例 + zhiNameData = [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + "松江支队", + "金山支队", + "崇明支队", + ]; + buildingData = [ + "高层", + "地下", + "轨道交通", + "化工生产", + "储罐类", + "厂房", + "古建筑", + "商市场", + "医院", + "学校", + "宾馆", + "娱乐场所", + "餐饮业", + "影剧院", + "展览建筑", + "隧道", + ]; + indexBzt; //首页饼状图实例 /* 首页饼状图 */ - lengthBuildData=[] - lengthOrData=[] - buildData=[] - orData=[] - initCharts(tid){ - for(var i=0;i5&&this.padHw){ - this.tabledata[0].organizationStatistics.organizations[i].organizationName=this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(0, 5) - +'\n'+this.tabledata[0].organizationStatistics.organizations[i].organizationName.slice(5) + for ( + var i = 0; + i < this.tabledata[0].organizationStatistics.organizations.length; + i++ + ) { + this.orData.push( + this.tabledata[0].organizationStatistics.organizations[i] + ); + if ( + this.tabledata[0].organizationStatistics.organizations[i] + .organizationName.length > 5 && + this.padHw + ) { + this.tabledata[0].organizationStatistics.organizations[ + i + ].organizationName = + this.tabledata[0].organizationStatistics.organizations[ + i + ].organizationName.slice(0, 5) + + "\n" + + this.tabledata[0].organizationStatistics.organizations[ + i + ].organizationName.slice(5); } - this.lengthOrData.push(this.tabledata[0].organizationStatistics.organizations[i].organizationName) + this.lengthOrData.push( + this.tabledata[0].organizationStatistics.organizations[i] + .organizationName + ); } - this.buildData=this.buildData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}}) - this.orData=this.orData.map(v=>{return {name: v.organizationName,value:v.count,id:v.organizationId}}) - this.indexBzt = echarts.init(document.getElementById(tid),'walden'); - let options={ + this.buildData = this.buildData.map((v) => { + return { name: v.buildingTypeName, value: v.count, id: v.buildingTypeId }; + }); + this.orData = this.orData.map((v) => { + return { name: v.organizationName, value: v.count, id: v.organizationId }; + }); + this.indexBzt = echarts.init(document.getElementById(tid), "walden"); + let options = { title: { - text:tid=="pieone"? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）`:`建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`, - left: 'center', + text: + tid == "pieone" + ? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）` + : `建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`, + left: "center", //top: "5%", //bottom:800, textStyle: { - fontSize:28 - } + fontSize: 28, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - return tid=="pieone"?this.biaogeTishi(params.data,'one'):this.biaogeTishi(params.data,'two') + trigger: "item", + formatter: (params) => { + return tid == "pieone" + ? this.biaogeTishi(params.data, "one") + : this.biaogeTishi(params.data, "two"); //return this.echartsData.tableTooltip(tid=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name) }, - position:this.echartsData.tableTooltipNoShow2 + position: this.echartsData.tableTooltipNoShow2, }, legend: { //type: tid=="pieone"?'scroll':'', @@ -115,127 +187,178 @@ export class AddUnitOneComponent implements OnInit { //top:100, //bottom:tid=="pieone"?600:500, bottom: 90, - left: 'center', - textStyle:{ - fontSize:14, - color:"#000000" - }, - data: tid=="pieone"?this.lengthOrData:this.lengthBuildData + left: "center", + textStyle: { + fontSize: 14, + color: "#000000", + }, + data: tid == "pieone" ? this.lengthOrData : this.lengthBuildData, }, series: [ { - name: '访问来源', - type: 'pie', - radius:this.padHw?'42%':'50%', - center: ['48%', '53%'], - bottom:130, - left:30, - label:{ - show:true, - fontSize:16, - formatter:'{b}\n{c}家{d|({d}%)}', + name: "访问来源", + type: "pie", + radius: this.padHw ? "42%" : "50%", + center: ["48%", "53%"], + bottom: 130, + left: 30, + label: { + show: true, + fontSize: 16, + formatter: "{b}\n{c}家{d|({d}%)}", rich: { d: { - align: 'center', - fontSize:16 - } + align: "center", + fontSize: 16, + }, }, }, - data:tid=="pieone"?this.orData:this.buildData, + data: tid == "pieone" ? this.orData : this.buildData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.indexBzt.on('click', (params) => { - tid=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building" - if((this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2')&&this.tishiData.length>0){ + this.indexBzt.on("click", (params) => { + tid == "pieone" + ? (this.echartsData.zuzhiorBuilding = "zhi") + : (this.echartsData.zuzhiorBuilding = "building"); + if ( + (this.echartsData.level == "0" || + this.echartsData.level == "1" || + this.echartsData.level == "2") && + this.tishiData.length > 0 + ) { //总队,支队，大队跳转 - this.tishiData.forEach((value,index,array) => { - if(array[index].organizationId==this.orid){ - array.splice(index,1) + this.tishiData.forEach((value, index, array) => { + if (array[index].organizationId == this.orid) { + array.splice(index, 1); } - if(array.length>0){ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name,'id':params.data.id,'type':tid=="pieone"?'zhi':'build'}}); - } - else{ - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}}); + if (array.length > 0) { + this.router.navigate( + ["/statisticanalysis/addUnit_one/addUnit_two_type"], + { + queryParams: { + level: params.name, + id: params.data.id, + type: tid == "pieone" ? "zhi" : "build", + }, + } + ); + } else { + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { + name: params.name, + type: 1, + buildid: tid != "pieone" ? params.data.id : "", + jsid: tid == "pieone" ? params.data.id : "", + }, + }); } }); - - }else{ + } else { //中队跳转 - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':tid!="pieone"?params.data.id:'','jsid':tid=="pieone"?params.data.id:''}}); + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { + name: params.name, + type: 1, + buildid: tid != "pieone" ? params.data.id : "", + jsid: tid == "pieone" ? params.data.id : "", + }, + }); } - - }); this.indexBzt.setOption(options); } - res - tishiData - biaogeTishi(datas,type){ + res; + tishiData; + biaogeTishi(datas, type) { //console.log(datas) - this.res='' - this.tishiData='' - if(type=='two'){ - for(var a in this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes){ - if(this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].buildingTypeName==datas.name){ - this.tishiData=this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a].organizations + this.res = ""; + this.tishiData = ""; + if (type == "two") { + for (var a in this.echartsData.obdata[0].buildingTypeStatistics + .buildingTypes) { + if ( + this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[a] + .buildingTypeName == datas.name + ) { + this.tishiData = + this.echartsData.obdata[0].buildingTypeStatistics.buildingTypes[ + a + ].organizations; } } - }else{ - for(var a in this.echartsData.obdata[0].organizationStatistics.organizations){ - if(this.echartsData.obdata[0].organizationStatistics.organizations[a].organizationId==datas.id){ - this.tishiData=this.echartsData.obdata[0].organizationStatistics.organizations[a].buildingTypes + } else { + for (var a in this.echartsData.obdata[0].organizationStatistics + .organizations) { + if ( + this.echartsData.obdata[0].organizationStatistics.organizations[a] + .organizationId == datas.id + ) { + this.tishiData = + this.echartsData.obdata[0].organizationStatistics.organizations[ + a + ].buildingTypes; } } } - + //console.log(this.tishiData) - var countall=0//总计 - var countbi=0//站比 - var allCountbi=0//总站比 - for(var i=0;i
' + + datas.name + + "
"; + this.res += + '
'; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ""; + this.res += ""; + for (var i = 0; i < this.tishiData.length; i++) { + countbi = + Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; + allCountbi = allCountbi + countbi; + this.res += ""; + if (type == "two") { + this.res += + '"; + } else { + this.res += + '"; } - this.res= '
'+datas.name+'
' - this.res+='
名称数量总占比
' + + this.tishiData[i].organizationName + + "' + + this.tishiData[i].buildingTypeName + + "
'; - this.res+=''; - this.res+=''; - this.res+='' - this.res+='' - this.res+='' - this.res+=''; - for(var i=0;i' - } - else{ - this.res+='' - } - - this.res+='' - if(countall==0){ - this.res+='' - }else{ - this.res+='' - } - + + this.res += + '"; + if (countall == 0) { + this.res += ''; + } else { + this.res += '"; } - this.res+='' - this.res+='' - this.res+='
名称数量总占比
'+this.tishiData[i].buildingTypeName+''+this.tishiData[i].count+'0%
'+countbi+'%
' + this.tishiData[i].count + "0%
' + countbi + "%
总计'+countall+'100%
' - return this.res + } + this.res += ""; + this.res += + '总计' + + countall + + '100%'; + this.res += ""; + return this.res; } - - } diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts index e7780f1..02976d6 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts @@ -42,6 +42,9 @@ export class AddUnitThreeBarDetailsComponent implements OnInit { } ngOnDestroy(){ window.clearTimeout(this.setTimeoutObj); + if (!this.detailPlanEchart) { + return; + } this.detailPlanEchart.clear() this.detailPlanEchart.dispose() } diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts index ace4002..60ecbd1 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts @@ -1,146 +1,193 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import { ActivatedRoute } from '@angular/router'; -import { EchartsDataService } from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from "@angular/material/dialog"; +import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; +import { ActivatedRoute } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-add-unit-three-line-details', - templateUrl: './add-unit-three-line-details.component.html', - styleUrls: ['./add-unit-three-line-details.component.scss'] + selector: "app-add-unit-three-line-details", + templateUrl: "./add-unit-three-line-details.component.html", + styleUrls: ["./add-unit-three-line-details.component.scss"], }) export class AddUnitThreeLineDetailsComponent implements OnInit { - - constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } - year:String - buildingTypeName:String - level:String - setTimeoutObj//延时器需要清除 - qopao - lastId - zhiorbuild + constructor( + private router: Router, + public dialog: MatDialog, + public snackBar: MatSnackBar, + private serviceData: EchartsDataService, + public route: ActivatedRoute + ) {} + year: String; + buildingTypeName: String; + level: String; + setTimeoutObj; //延时器需要清除 + qopao; + lastId; + zhiorbuild; ngOnInit(): void { - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } - this.serviceData.selectType=0 - this.dateInit () - this.route.queryParams.subscribe(params => { - this.year = params['year']; - this.buildingTypeName = params['buildingType']; - this.lastId=params['id'] - this.zhiorbuild=params['type'] + } + this.serviceData.selectType = 0; + this.dateInit(); + this.route.queryParams.subscribe((params) => { + this.year = params["year"]; + this.buildingTypeName = params["buildingType"]; + this.lastId = params["id"]; + this.zhiorbuild = params["type"]; + }); + this.setTimeoutObj = window.setTimeout(() => { + this.getdata(); }); - this.setTimeoutObj = window.setTimeout(()=>{ - this.getdata() - }) } - ngOnDestroy(){ + ngOnDestroy() { window.clearTimeout(this.setTimeoutObj); - this.detailPlanEchart.clear() - this.detailPlanEchart.dispose() - } - tabledata - zongcount=0 - async getdata(){ - let parzhi={ - objectType:0, - BuildingTypeId:this.lastId, - TrendType:this.serviceData.selectType, - TrendYear:this.year||'' + if (!this.detailPlanEchart) { + return; } - let parbuild={ - objectType:0, - OrganizationId:this.lastId, - TrendType:this.serviceData.selectType, - TrendYear:this.year||'' - } - await this.serviceData.getData(this.zhiorbuild=='zhi'?parbuild:parzhi,`/api/StatisticsAnalysis/Trends`) + this.detailPlanEchart.clear(); + this.detailPlanEchart.dispose(); + } + tabledata; + zongcount = 0; + async getdata() { + let parzhi = { + objectType: 0, + BuildingTypeId: this.lastId, + TrendType: this.serviceData.selectType, + TrendYear: this.year || "", + }; + let parbuild = { + objectType: 0, + OrganizationId: this.lastId, + TrendType: this.serviceData.selectType, + TrendYear: this.year || "", + }; + await this.serviceData.getData( + this.zhiorbuild == "zhi" ? parbuild : parzhi, + `/api/StatisticsAnalysis/Trends` + ); this.setTimeoutObj = window.setTimeout(() => { - this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate)) + this.tabledata = JSON.parse(JSON.stringify(this.serviceData.allDate)); //console.log(this.tabledata) - for(var i=0;i=this.serviceData.selectStartMonth||this.tabledata[0][i].month<=this.serviceData.selectEndMonth){ - this.date.push(this.tabledata[0][i].month) - this.dateNum.push(this.tabledata[0][i].count) - this.zongcount=this.zongcount+this.tabledata[0][i].count - } + for (var i = 0; i < this.tabledata[0].length; i++) { + if ( + this.tabledata[0][i].month >= this.serviceData.selectStartMonth || + this.tabledata[0][i].month <= this.serviceData.selectEndMonth + ) { + this.date.push(this.tabledata[0][i].month); + this.dateNum.push(this.tabledata[0][i].count); + this.zongcount = this.zongcount + this.tabledata[0][i].count; } - this.date.forEach((value,index,array)=>{ - this.date[index]=this.date[index]+'月' - }) - + } + this.date.forEach((value, index, array) => { + this.date[index] = this.date[index] + "月"; + }); + //this.oneInit (this.date,this.dateNum) - this.qopao=this.serviceData.qipao(this.qopao,this.dateNum,this.zhiNameData) - this.detailEcharts() + this.qopao = this.serviceData.qipao( + this.qopao, + this.dateNum, + this.zhiNameData + ); + this.detailEcharts(); }); } - selectType:string = 'month'; //选择当前的 查询类型 按月/年 + selectType: string = "month"; //选择当前的 查询类型 按月/年 //查询数据 - years:any = [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + 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) + dateInit() { + let date = new Date().getFullYear(); + for (let i = date; i >= date - 10; i--) { + this.years.unshift(i); } } - selectOneYear:any = (new Date()).getFullYear() //开始年份 - selectStartMonth:any = 1 //开始月份 - Submit (e) { - - } - selectStartYear:any = (new Date()).getFullYear() //开始年份 + selectOneYear: any = new Date().getFullYear(); //开始年份 + selectStartMonth: any = 1; //开始月份 + Submit(e) {} + selectStartYear: any = new Date().getFullYear(); //开始年份 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 - zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] - zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 + zhongNameData = [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + ]; + zhongNumData = [200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100]; - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] - zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] + zhiNameData = [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + ]; + zhiNumData = [300, 290, 280, 270, 260, 250, 240, 230, 220, 210, 200]; + detailPlanEchart; + option; + date = []; + dateNum = []; - detailPlanEchart - option - date = [] - dateNum = [] - - detailEcharts(){ - this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp'); + detailEcharts() { + this.detailPlanEchart = echarts.init( + document.getElementById("barEchart"), + "skinUpp" + ); this.option = { grid: { top: 90, }, // 标题 title: { - text: this.buildingTypeName , + text: this.buildingTypeName, top: -4, - left: 'center', - textStyle:{ + left: "center", + textStyle: { //文字颜色 - color:'#000', - fontSize: 30 - } + color: "#000", + fontSize: 30, + }, }, //提示框 tooltip: { - trigger: 'axis', + trigger: "axis", /* formatter: (params)=>{ if(params[0].seriesName == "year"){ return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) @@ -148,102 +195,138 @@ export class AddUnitThreeLineDetailsComponent implements OnInit { return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) } }, */ - position:this.serviceData.tableTooltipNoShow2 + position: this.serviceData.tableTooltipNoShow2, }, // x轴 xAxis: { - type: 'category', + type: "category", data: this.date, axisLabel: { - textStyle:{ - fontSize :18, - color:'#000000' + textStyle: { + fontSize: 18, + color: "#000000", }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 - axisLine: { + axisLine: { lineStyle: { color: "#000", }, }, - splitLine: {//分割线配置 - show:true, + splitLine: { + //分割线配置 + show: true, lineStyle: { - color: '#999', - } - } + color: "#999", + }, + }, }, // y轴 yAxis: { - type: 'value', - name: '个', + type: "value", + name: "个", axisLabel: { - textStyle:{ - fontSize :18, - color:'#000000' + textStyle: { + fontSize: 18, + color: "#000000", }, - color: "#000" //刻度线标签颜色 + color: "#000", //刻度线标签颜色 }, - //设置坐标轴字体颜色和宽度 - axisLine: { + //设置坐标轴字体颜色和宽度 + axisLine: { lineStyle: { color: "#000", - } - } + }, + }, }, // 数据 - series: [{ - name: 'xxx', - type: 'line', + series: [ + { + name: "xxx", + type: "line", data: this.dateNum, - barWidth :'38', + barWidth: "38", markPoint: { - symbolSize:[65, 65], - data: this.qopao + symbolSize: [65, 65], + data: this.qopao, + }, }, - } ], }; this.detailPlanEchart.setOption(this.option); - this.detailPlanEchart.getZr().on('click',params=>{ - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { - let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + this.detailPlanEchart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel("grid", pointInPixel)) { + let xIndex = this.detailPlanEchart.convertFromPixel( + { seriesIndex: 0 }, + [params.offsetX, params.offsetY] + )[0]; /*事件处理代码书写位置*/ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.buildingTypeName,'id':this.lastId,'type':this.zhiorbuild,'year':this.year,month:this.option.xAxis.data[xIndex]}}) + this.router.navigate( + ["/statisticanalysis/addUnit_one/addUnit_two_type"], + { + queryParams: { + level: this.buildingTypeName, + id: this.lastId, + type: this.zhiorbuild, + year: this.year, + month: this.option.xAxis.data[xIndex], + }, + } + ); //this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}}); } }); } //返回按钮 - backBtn(){ - sessionStorage.setItem('refresh', 'true'); + backBtn() { + sessionStorage.setItem("refresh", "true"); history.go(-1); - } - - tableTooltip(params:any){ + } + + tableTooltip(params: any) { var data = [ - {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} - ] - var res = '
'+params.name+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - // res+='' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' - return res + { + name: params.name, + number: params.value, + zhanbi: ((params.value / 1340) * 100).toFixed(2) + "%", + }, + ]; + var res = + '
' + + params.name + + "
"; + res += + '
'; + res += ""; + res += + ''; + res += + ''; + res += + ''; + res += ""; + res += ""; + for (var i = 0; i < data.length; i++) { + res += ""; + res += + '"; + res += + '"; + res += + '"; + } + + res += ""; + // res+='' + res += "
名称数量总占比
' + + data[i].name + + "' + + data[i].number + + "' + + data[i].zhanbi + + "
总计135619%
"; + return res; } } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts index 73e40ab..176cc82 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts @@ -1,381 +1,484 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import { EchartsDataService } from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from "@angular/material/dialog"; +import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-add-unit-two-time', - templateUrl: './add-unit-two-time.component.html', - styleUrls: ['./add-unit-two-time.component.scss'] + selector: "app-add-unit-two-time", + templateUrl: "./add-unit-two-time.component.html", + styleUrls: ["./add-unit-two-time.component.scss"], }) export class AddUnitTwoTimeComponent implements OnInit { - - constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,private route:ActivatedRoute) { } - setTimeoutObj//延时器需要清除 - headname - type=1 - lastId - tabledata - zongcount=0 - zhiorbuild + constructor( + private router: Router, + public dialog: MatDialog, + public snackBar: MatSnackBar, + private serviceData: EchartsDataService, + private route: ActivatedRoute + ) {} + setTimeoutObj; //延时器需要清除 + headname; + type = 1; + lastId; + tabledata; + zongcount = 0; + zhiorbuild; ngOnInit(): void { - this.serviceData.selectType=0 - this.dateInit () - this.route.queryParams.subscribe(param=>{ - this.headname=param.level - this.zhiorbuild=param.type - this.lastId=param.id + this.serviceData.selectType = 0; + this.dateInit(); + this.route.queryParams.subscribe((param) => { + this.headname = param.level; + this.zhiorbuild = param.type; + this.lastId = param.id; }); - this.getdata() + this.getdata(); } - ngOnDestroy(){ + ngOnDestroy() { window.clearTimeout(this.setTimeoutObj); - this.forArr.forEach(item => { - item.echart.clear() - item.echart.dispose() - }) - + if (this.forArr && this.forArr.length !== 0) { + this.forArr.forEach((item) => { + item.echart.clear(); + item.echart.dispose(); + }); + } } //获取数据 - yeardatee=new Date().getFullYear() - async getdata(){ - this.date=[] - this.dateNum=[] - this.zongcount=0 - let parzhi={ - objectType:0, - BuildingTypeId:this.lastId, - TrendType:this.serviceData.selectType, - TrendYear:this.yeardatee||'' - } - let parbuild={ - objectType:0, - OrganizationId:this.lastId, - TrendType:this.serviceData.selectType, - TrendYear:this.yeardatee||'' - } - await this.serviceData.getData(this.zhiorbuild=="zhi"?parbuild:parzhi,`/api/StatisticsAnalysis/Trends`) + yeardatee = new Date().getFullYear(); + async getdata() { + this.date = []; + this.dateNum = []; + this.zongcount = 0; + let parzhi = { + objectType: 0, + BuildingTypeId: this.lastId, + TrendType: this.serviceData.selectType, + TrendYear: this.yeardatee || "", + }; + let parbuild = { + objectType: 0, + OrganizationId: this.lastId, + TrendType: this.serviceData.selectType, + TrendYear: this.yeardatee || "", + }; + await this.serviceData.getData( + this.zhiorbuild == "zhi" ? parbuild : parzhi, + `/api/StatisticsAnalysis/Trends` + ); this.setTimeoutObj = window.setTimeout(() => { - this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate)) + this.tabledata = JSON.parse(JSON.stringify(this.serviceData.allDate)); //console.log(this.tabledata[0]) - for(var i=0;i=this.serviceData.selectStartMonth||this.tabledata[0][i].month<=this.serviceData.selectEndMonth){ - this.date.push(this.tabledata[0][i].month) - this.dateNum.push(this.tabledata[0][i].count) - this.zongcount=this.zongcount+this.tabledata[0][i].count - } + for (var i = 0; i < this.tabledata[0].length; i++) { + if ( + this.tabledata[0][i].month >= this.serviceData.selectStartMonth || + this.tabledata[0][i].month <= this.serviceData.selectEndMonth + ) { + this.date.push(this.tabledata[0][i].month); + this.dateNum.push(this.tabledata[0][i].count); + this.zongcount = this.zongcount + this.tabledata[0][i].count; } - this.date.forEach((value,index,array)=>{ - this.date[index]=this.date[index]+'月' - }) - + } + this.date.forEach((value, index, array) => { + this.date[index] = this.date[index] + "月"; + }); + //this.oneInit (this.date,this.dateNum) - this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) - this.twoInit (this.date,this.dateNum,'month') + this.tiaoshiPao = this.serviceData.qipao( + this.tiaoshiPao, + this.dateNum, + this.date + ); + this.twoInit(this.date, this.dateNum, "month"); }); } - forward(){ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) + forward() { + this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_type"], { + queryParams: { + level: this.headname, + id: this.lastId, + type: this.zhiorbuild == "zhi" ? "zhi" : "build", + }, + }); } - reverse(){ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) + reverse() { + this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_time"], { + queryParams: { + level: this.headname, + id: this.lastId, + type: this.zhiorbuild == "zhi" ? "zhi" : "build", + }, + }); } - selectType:string = 'month'; //选择当前的 查询类型 按月/年 + selectType: string = "month"; //选择当前的 查询类型 按月/年 //查询数据 - years= [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + years = []; + 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--) { + 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 //结束月份 + selectOneYear: any = new Date().getFullYear(); //开始年份 + selectTwoYear: any = new Date().getFullYear(); //结束年份 + selectStartMonth: any = 1; //开始月份 + selectEndMonth: any = new Date().getMonth() + 1; //结束月份 //按月查询 - monthSubmit (e) { - this.serviceData.selectStartMonth=this.selectStartMonth - this.serviceData.selectEndMonth=this.selectEndMonth + monthSubmit(e) { + this.serviceData.selectStartMonth = this.selectStartMonth; + this.serviceData.selectEndMonth = this.selectEndMonth; //console.log(this.selectStartMonth,this.selectEndMonth) - this.date=[] - this.dateNum=[] - this.zongcount=0 - 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 - for(var i=0;i=this.serviceData.selectStartMonth&&this.tabledata[0][i].month<=this.serviceData.selectEndMonth){ - this.date.push(this.tabledata[0][i].month) - this.dateNum.push(this.tabledata[0][i].count) - this.zongcount=this.zongcount+this.tabledata[0][i].count + this.date = []; + this.dateNum = []; + this.zongcount = 0; + 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; + for (var i = 0; i < this.tabledata[0].length; i++) { + if ( + this.tabledata[0][i].month >= this.serviceData.selectStartMonth && + this.tabledata[0][i].month <= this.serviceData.selectEndMonth + ) { + this.date.push(this.tabledata[0][i].month); + this.dateNum.push(this.tabledata[0][i].count); + this.zongcount = this.zongcount + this.tabledata[0][i].count; } } //this.oneInit (this.date,this.dateNum) - this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) - this.twoInit (this.date,this.dateNum,'month') + this.tiaoshiPao = this.serviceData.qipao( + this.tiaoshiPao, + this.dateNum, + this.date + ); + this.twoInit(this.date, this.dateNum, "month"); } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请选择正确时间区段','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请选择正确时间区段", "确定", config); } } - selectStartYear:any = (new Date()).getFullYear()-1 //开始年份 - selectEndYear:any = (new Date()).getFullYear() //结束年份 + selectStartYear: any = new Date().getFullYear() - 1; //开始年份 + selectEndYear: any = new Date().getFullYear(); //结束年份 //按年查询 - yearSubmit (e) { - this.zongcount=0 - this.date2=[] - this.dateNum2=[] + yearSubmit(e) { + this.zongcount = 0; + this.date2 = []; + this.dateNum2 = []; if (e.selectEndYear >= e.selectStartYear) { - let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 - let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 - for(var i=0;i=e.selectStartYear&&this.tabledata[0][i].year<=e.selectEndYear){ - this.date2.push(this.tabledata[0][i].year) - this.dateNum2.push(this.tabledata[0][i].count) - this.zongcount=this.zongcount+this.tabledata[0][i].count + let startTime = + e.selectStartYear + "-" + 1 + "-" + 1 + " " + 0 + ":" + 0 + ":" + 0; + let endTime = + e.selectEndYear + "-" + 12 + "-" + 31 + " " + 23 + ":" + 59 + ":" + 59; + for (var i = 0; i < this.tabledata[0].length; i++) { + if ( + this.tabledata[0][i].year >= e.selectStartYear && + this.tabledata[0][i].year <= e.selectEndYear + ) { + this.date2.push(this.tabledata[0][i].year); + this.dateNum2.push(this.tabledata[0][i].count); + this.zongcount = this.zongcount + this.tabledata[0][i].count; } } - + //this.oneInit (this.date,this.dateNum) - this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum2,this.date2) - this.twoInit (this.date2,this.dateNum2,'year') + this.tiaoshiPao = this.serviceData.qipao( + this.tiaoshiPao, + this.dateNum2, + this.date2 + ); + this.twoInit(this.date2, this.dateNum2, "year"); } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('结束年份必须大于开始年份','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("结束年份必须大于开始年份", "确定", config); } } //年或月点击 - async dateChange(){ - this.tiaoshiPao=null - this.forArr.forEach(item => { - item.echart.dispose() - }) - - if(this.selectType == "year"){ - this.zongcount=0 - this.date2=[] - this.dateNum2=[] - this.years=[] - this.serviceData.selectType=2 - let parzhi={ - objectType:0, - BuildingTypeId:this.lastId, - TrendType:this.serviceData.selectType, - } - let parbuild={ - objectType:0, - OrganizationId:this.lastId, - TrendType:this.serviceData.selectType, - } + async dateChange() { + this.tiaoshiPao = null; + this.forArr.forEach((item) => { + item.echart.dispose(); + }); + + if (this.selectType == "year") { + this.zongcount = 0; + this.date2 = []; + this.dateNum2 = []; + this.years = []; + this.serviceData.selectType = 2; + let parzhi = { + objectType: 0, + BuildingTypeId: this.lastId, + TrendType: this.serviceData.selectType, + }; + let parbuild = { + objectType: 0, + OrganizationId: this.lastId, + TrendType: this.serviceData.selectType, + }; /* let paramdata={ BuildingTypeId:this.lastId, TrendType:this.serviceData.selectType } */ - await this.serviceData.getData(this.zhiorbuild=="zhi"?parbuild:parzhi,`/api/StatisticsAnalysis/Trends`) + await this.serviceData.getData( + this.zhiorbuild == "zhi" ? parbuild : parzhi, + `/api/StatisticsAnalysis/Trends` + ); this.setTimeoutObj = window.setTimeout(() => { - this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate)) - console.log(this.tabledata) - for(var i=0;i{ - return this.serviceData.tableTooltip(this.serviceData.zuzhiorBuilding=="zhi"?this.serviceData.tableDataZhi :this.serviceData.buildingType,params[0].name) + trigger: "axis", + formatter: (params) => { + return this.serviceData.tableTooltip( + this.serviceData.zuzhiorBuilding == "zhi" + ? this.serviceData.tableDataZhi + : this.serviceData.buildingType, + params[0].name + ); }, - position:this.serviceData.tableTooltipNoShowt + position: this.serviceData.tableTooltipNoShowt, }, // x轴 xAxis: { - type: 'category', + type: "category", data: date, axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' + textStyle: { + fontSize: 15, + color: "#000000", }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 - axisLine: { + axisLine: { lineStyle: { color: "#000", }, }, - splitLine: {//分割线配置 - show:true, + splitLine: { + //分割线配置 + show: true, lineStyle: { - color: '#999', - } - } + color: "#999", + }, + }, }, // y轴 yAxis: { - type: 'value', - name: '个', + type: "value", + name: "个", axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' + textStyle: { + fontSize: 15, + color: "#000000", }, - color: "#000" //刻度线标签颜色 + color: "#000", //刻度线标签颜色 }, - //设置坐标轴字体颜色和宽度 - axisLine: { + //设置坐标轴字体颜色和宽度 + axisLine: { lineStyle: { color: "#000", - } - } + }, + }, }, // 数据 - series: [{ - name: '新增数量', - type: 'line', + series: [ + { + name: "新增数量", + type: "line", markPoint: { - - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, data: dateNum, - } + }, ], - } + }; this.chartQusj.setOption(option); } //剩余折线图 - twoInit (date,dateNum,typeName) { - this.forArr.forEach((item,key) => { - let that = this - item.echart = echarts.init(document.getElementById('gaoceng'), 'skinUpp'); + twoInit(date, dateNum, typeName) { + this.forArr.forEach((item, key) => { + let that = this; + item.echart = echarts.init(document.getElementById("gaoceng"), "skinUpp"); var option = { grid: { top: 90, }, // 标题 title: { - text: this.headname+`：总数（${this.zongcount}）`, - top:-4, - left: 'center', - textStyle:{ + text: this.headname + `：总数（${this.zongcount}）`, + top: -4, + left: "center", + textStyle: { //文字颜色 - color:'#000', - fontSize:30 - } + color: "#000", + fontSize: 30, + }, }, //提示框 tooltip: { - trigger: 'axis', + trigger: "axis", formatter: function (params) { //console.log(params) - return '时间:' + params[0].axisValueLabel + '
数量: ' + params[0].data; - }, + return ( + "时间:" + params[0].axisValueLabel + "
数量: " + params[0].data + ); + }, /* formatter: (params)=>{ if(params[0].seriesName == "year"){ return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) @@ -383,92 +486,120 @@ export class AddUnitTwoTimeComponent implements OnInit { return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) } }, */ - position: this.serviceData.tableTooltipNoShow + position: this.serviceData.tableTooltipNoShow, }, // x轴 xAxis: { - type: 'category', + type: "category", data: date, axisLabel: { - textStyle:{ - fontSize :16, - color:'#000000' + textStyle: { + fontSize: 16, + color: "#000000", }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 - axisLine: { + axisLine: { lineStyle: { color: "#000", }, }, - splitLine: {//分割线配置 - show:true, + splitLine: { + //分割线配置 + show: true, lineStyle: { - color: '#999', - } - } + color: "#999", + }, + }, }, // y轴 yAxis: { //min:10, - type: 'value', - name: '个', + type: "value", + name: "个", axisLabel: { - textStyle:{ - fontSize :16, - color:'#000000' + textStyle: { + fontSize: 16, + color: "#000000", }, - color: "#000" //刻度线标签颜色 + color: "#000", //刻度线标签颜色 }, - //设置坐标轴字体颜色和宽度 - axisLine: { + //设置坐标轴字体颜色和宽度 + axisLine: { lineStyle: { color: "#000", - } - } + }, + }, }, // 数据 - series: [{ + series: [ + { name: typeName, - type: 'line', + type: "line", markPoint: { - - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, data: dateNum, - } + }, ], }; - item.echart.setOption(option,true); - item.echart.getZr().on('click',params=>{ - const pointInPixel= [params.offsetX, params.offsetY]; - if (item.echart.containPixel('grid',pointInPixel)) { - let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; - /*事件处理代码书写位置*/ - // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name) - if(option.series[0].name == "year"){ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':this.headname,'id':this.lastId,'type':this.zhiorbuild}}); + item.echart.setOption(option, true); + item.echart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + if (item.echart.containPixel("grid", pointInPixel)) { + let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; + /*事件处理代码书写位置*/ + // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name) + if (option.series[0].name == "year") { + this.router.navigate( + [ + "/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails", + ], + { + queryParams: { + year: this.date2[xIndex], + buildingType: this.headname, + id: this.lastId, + type: this.zhiorbuild, + }, + } + ); - /* this.selectType="month" + /* this.selectType="month" this.yeardatee=option.xAxis.data[xIndex] this.getdata() */ - - }else{ - if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){ - //this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}}); - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild,'year':this.thisYear,'month':option.xAxis.data[xIndex]}}) - } - + } else { + if ( + this.serviceData.level == "0" || + this.serviceData.level == "1" || + this.serviceData.level == "2" + ) { + //this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':this.headname}}); + this.router.navigate( + ["/statisticanalysis/addUnit_one/addUnit_two_type"], + { + queryParams: { + level: this.headname, + id: this.lastId, + type: this.zhiorbuild, + year: this.thisYear, + month: option.xAxis.data[xIndex], + }, + } + ); } - + } } }); - }) + }); } //返回 - backClick(){ - this.router.navigateByUrl('/statisticanalysis/addUnit_one') + backClick() { + this.router.navigateByUrl("/statisticanalysis/addUnit_one"); } } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts index 995792c..78b5b26 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts @@ -93,6 +93,9 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit { } ngOnDestroy(){ window.clearTimeout(this.setTimeoutObj); + if (!this.detailPlanEchart) { + return; + } this.detailPlanEchart.clear() this.detailPlanEchart.dispose() } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts index 15815ea..28cdbbf 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts @@ -1,365 +1,437 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { threadId } from 'worker_threads'; -import {EchartsDataService} from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import { threadId } from "worker_threads"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-add-unit-two-type-statistics', - templateUrl: './add-unit-two-type-statistics.component.html', - styleUrls: ['./add-unit-two-type-statistics.component.scss'] + selector: "app-add-unit-two-type-statistics", + templateUrl: "./add-unit-two-type-statistics.component.html", + styleUrls: ["./add-unit-two-type-statistics.component.scss"], }) export class AddUnitTwoTypeStatisticsComponent implements OnInit { + constructor( + private router: Router, + public data: EchartsDataService, + private route: ActivatedRoute + ) {} - constructor(private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { } - - forward(){ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) + forward() { + this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_type"], { + queryParams: { + level: this.headname, + id: this.lastId, + type: this.zhiorbuild == "zhi" ? "zhi" : "build", + }, + }); } - reverse(){ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'],{queryParams:{'level':this.headname,'id':this.lastId,'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) + reverse() { + this.router.navigate(["/statisticanalysis/addUnit_one/addUnit_two_time"], { + queryParams: { + level: this.headname, + id: this.lastId, + type: this.zhiorbuild == "zhi" ? "zhi" : "build", + }, + }); } - url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址 - setTimeoutObj//延时器需要清除 - headname - lastId - organizationId=[] - buildingTypeId=[] - zhiorbuild - padHw - year - month + url = "/statisticanalysis/addUnit_one/addUnit_two_type"; //当前路由地址 + setTimeoutObj; //延时器需要清除 + headname; + lastId; + organizationId = []; + buildingTypeId = []; + zhiorbuild; + padHw; + year; + month; ngOnInit(): void { - if(window.matchMedia("(max-width: 1400px)").matches){ - this.padHw=true + if (window.matchMedia("(max-width: 1400px)").matches) { + this.padHw = true; //this.padjt= - }else{ - this.padHw=false + } else { + this.padHw = false; } - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } - this.route.queryParams.subscribe(param=>{ - this.headname=param.level - this.lastId=param.id - this.zhiorbuild=param.type - this.year=param.year||null - this.month=param.month.substring(0,1)||null - }); - console.log(this.month) - this.setTimeoutObj = window.setTimeout(()=>{ - this.getechartsData() - }) + } + this.route.queryParams.subscribe((param) => { + this.headname = param.level; + this.lastId = param.id; + this.zhiorbuild = param.type; + this.year = param.year || null; + this.month = param.month.substring(0, 1) || null; + }); + console.log(this.month); + this.setTimeoutObj = window.setTimeout(() => { + this.getechartsData(); + }); } - ngOnDestroy(){ + ngOnDestroy() { window.clearTimeout(this.setTimeoutObj); - - this.forArr.forEach(item => { - item.echart.clear() - item.echart.dispose() - }) + + this.forArr.forEach((item) => { + if (!item.echart) { + return; + } + item.echart.clear(); + item.echart.dispose(); + }); } //获取服务层数据 - async getechartsData(){ - let paramsdata - if(this.year==null){ + async getechartsData() { + let paramsdata; + if (this.year == null) { + paramsdata = { + id: this.lastId, + //organizationId:'1' + }; + } else { paramsdata = { - id:this.lastId, + id: this.lastId, + TimeIntervalStart: this.year + "-" + this.month || "", + TimeIntervalEnd: this.year + "-" + this.month || "", //organizationId:'1' + }; + this.data.addYear = this.year; + this.data.addMonth = this.month; + } + + await this.data.getData( + this.zhiorbuild == "zhi" ? paramsdata : paramsdata, + this.zhiorbuild == "zhi" + ? `/api/StatisticsAnalysis/Companies/Organizations/${this.lastId}` + : `/api/StatisticsAnalysis/Companies/BuildingTypes/${this.lastId}` + ); + this.tabledata = JSON.parse(JSON.stringify(this.data.allDate)); + //console.log(this.tabledata) + if (this.zhiorbuild == "zhi") { + for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) { + this.buildingData.push( + this.tabledata[0].buildingTypes[i].buildingTypeName + ); + this.buildnumData.push(this.tabledata[0].buildingTypes[i].count); + this.buildingTypeId.push( + this.tabledata[0].buildingTypes[i].buildingTypeId + ); } - }else{ - paramsdata={ - id:this.lastId, - TimeIntervalStart:this.year+'-'+this.month||'', - TimeIntervalEnd:this.year+'-'+this.month||'' - //organizationId:'1' + } else { + for (var i = 0; i < this.tabledata[0].organizations.length; i++) { + this.zhiNameData.push( + this.tabledata[0].organizations[i].organizationName + ); + this.zhiNumData.push(this.tabledata[0].organizations[i].count); + this.organizationId.push( + this.tabledata[0].organizations[i].organizationId + ); } - this.data.addYear=this.year - this.data.addMonth=this.month } - - await this.data.getData(this.zhiorbuild=="zhi"?paramsdata:paramsdata,this.zhiorbuild=="zhi"?`/api/StatisticsAnalysis/Companies/Organizations/${this.lastId}`:`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.lastId}`) - this.tabledata=JSON.parse(JSON.stringify(this.data.allDate)) - //console.log(this.tabledata) - if(this.zhiorbuild=="zhi"){ - for(var i=0;i 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; - } - } - }//echarts两个字换行 + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 2; //每项显示文字个数 + 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; + } + }, + }; //echarts两个字换行 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 - tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, - {name:"黄浦支队",number:"144",zhanbi:"2.8%"}, - {name:"徐汇支队",number:"133",zhanbi:"2.1%"}, - {name:"长宁支队",number:"122",zhanbi:"1.6%"}, - {name:"静安支队",number:"120",zhanbi:"1.3%"}, - {name:"普陀支队",number:"100",zhanbi:"1.1%"}, - {name:"虹口支队",number:"95",zhanbi:"1%"}, - {name:"杨浦支队",number:"90",zhanbi:"0.9%"}, - {name:"闵行支队",number:"88",zhanbi:"0.8%"}, - {name:"宝山支队",number:"83",zhanbi:"0.7%"}, - {name:"徐汇支队",number:"133",zhanbi:"2.1%"}, - {name:"长宁支队",number:"122",zhanbi:"1.6%"}, - {name:"嘉定支队",number:"78",zhanbi:"0.6%"}, - {name:"松江支队",number:"75",zhanbi:"0.5%"}, - {name:"金山支队",number:"65",zhanbi:"0.4%"}, - {name:"崇明支队",number:"55",zhanbi:"0.3%"} ] - tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, - {name:"黄浦中队",number:"144",zhanbi:"2.8%"}, - {name:"徐汇中队",number:"133",zhanbi:"2.1%"}, - {name:"长宁中队",number:"122",zhanbi:"1.6%"}, - {name:"静安中队",number:"120",zhanbi:"1.3%"}, - {name:"普陀中队",number:"100",zhanbi:"1.1%"}, - {name:"虹口中队",number:"95",zhanbi:"1%"}, - {name:"杨浦中队",number:"90",zhanbi:"0.9%"}, - {name:"闵行中队",number:"88",zhanbi:"0.8%"}, - {name:"宝山中队",number:"83",zhanbi:"0.7%"}, - {name:"徐汇中队",number:"133",zhanbi:"2.1%"}, - {name:"长宁中队",number:"122",zhanbi:"1.6%"}, - {name:"嘉定中队",number:"78",zhanbi:"0.6%"}, - {name:"松江中队",number:"75",zhanbi:"0.5%"}, - {name:"金山中队",number:"65",zhanbi:"0.4%"}, - {name:"崇明中队",number:"55",zhanbi:"0.3%"} ] - zhiNameData = [] - zhiNumData = [] - tiaoshiPao:any + tableDataZhi = [ + { name: "浦东支队", number: "156", zhanbi: "3%" }, + { name: "黄浦支队", number: "144", zhanbi: "2.8%" }, + { name: "徐汇支队", number: "133", zhanbi: "2.1%" }, + { name: "长宁支队", number: "122", zhanbi: "1.6%" }, + { name: "静安支队", number: "120", zhanbi: "1.3%" }, + { name: "普陀支队", number: "100", zhanbi: "1.1%" }, + { name: "虹口支队", number: "95", zhanbi: "1%" }, + { name: "杨浦支队", number: "90", zhanbi: "0.9%" }, + { name: "闵行支队", number: "88", zhanbi: "0.8%" }, + { name: "宝山支队", number: "83", zhanbi: "0.7%" }, + { name: "徐汇支队", number: "133", zhanbi: "2.1%" }, + { name: "长宁支队", number: "122", zhanbi: "1.6%" }, + { name: "嘉定支队", number: "78", zhanbi: "0.6%" }, + { name: "松江支队", number: "75", zhanbi: "0.5%" }, + { name: "金山支队", number: "65", zhanbi: "0.4%" }, + { name: "崇明支队", number: "55", zhanbi: "0.3%" }, + ]; + tableDataZhong = [ + { name: "浦东中队", number: "156", zhanbi: "3%" }, + { name: "黄浦中队", number: "144", zhanbi: "2.8%" }, + { name: "徐汇中队", number: "133", zhanbi: "2.1%" }, + { name: "长宁中队", number: "122", zhanbi: "1.6%" }, + { name: "静安中队", number: "120", zhanbi: "1.3%" }, + { name: "普陀中队", number: "100", zhanbi: "1.1%" }, + { name: "虹口中队", number: "95", zhanbi: "1%" }, + { name: "杨浦中队", number: "90", zhanbi: "0.9%" }, + { name: "闵行中队", number: "88", zhanbi: "0.8%" }, + { name: "宝山中队", number: "83", zhanbi: "0.7%" }, + { name: "徐汇中队", number: "133", zhanbi: "2.1%" }, + { name: "长宁中队", number: "122", zhanbi: "1.6%" }, + { name: "嘉定中队", number: "78", zhanbi: "0.6%" }, + { name: "松江中队", number: "75", zhanbi: "0.5%" }, + { name: "金山中队", number: "65", zhanbi: "0.4%" }, + { name: "崇明中队", number: "55", zhanbi: "0.3%" }, + ]; + zhiNameData = []; + zhiNumData = []; + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - if(this.zhiorbuild=="zhi"){ - for(var i=0;i{ - return this.data.tableTooltip(this.zhiorbuild=="zhi"?this.data.buildingType:this.data.tableDataZhi,params.name) + trigger: "item", + formatter: (params) => { + return this.data.tableTooltip( + this.zhiorbuild == "zhi" + ? this.data.buildingType + : this.data.tableDataZhi, + params.name + ); }, - position: this.data.tableTooltipNoShow2 + position: this.data.tableTooltipNoShow2, }, legend: { - orient: 'vertical', + orient: "vertical", right: 150, - top:80, - textStyle:{ - fontSize:18, - color:"#000000" + top: 80, + textStyle: { + fontSize: 18, + color: "#000000", }, - data:this.zhiorbuild=="zhi"? this.zhiNameData:this.buildingData + data: this.zhiorbuild == "zhi" ? this.zhiNameData : this.buildingData, }, series: [ { - name: '访问来源', - type: 'pie', - radius: '70%', - center: ['50%', '60%'], - label:{ - show:true, - fontSize:16, - formatter:'{b}{c}家\n{d|({d}%)}', + name: "访问来源", + type: "pie", + radius: "70%", + center: ["50%", "60%"], + label: { + show: true, + fontSize: 16, + formatter: "{b}{c}家\n{d|({d}%)}", rich: { d: { - align: 'center', - fontSize:16 - } + align: "center", + fontSize: 16, + }, }, }, - data:this.zhiorbuild=="zhi"? [ - {value: 500, name: this.zhiNameData[0]}, - {value: 800, name: this.zhiNameData[1]}, - {value: 900, name: this.zhiNameData[2]}, - {value: 800, name: this.zhiNameData[3]}, - {value: 1200, name: this.zhiNameData[4]}, - {value: 1500, name: this.zhiNameData[5]}, - {value: 1400, name: this.zhiNameData[6]}, - {value: 600, name: this.zhiNameData[7]}, - {value: 568, name: this.zhiNameData[8]}, - {value: 888, name: this.zhiNameData[9]}, - {value: 485, name: this.zhiNameData[10]}, - {value: 966, name: this.zhiNameData[11]}, - {value: 789, name: this.zhiNameData[12]}, - {value: 500, name: this.zhiNameData[13]}, - ]:[ - {value: 500, name: '高层'}, - {value: 800, name: '地下'}, - {value: 900, name: '轨道交通'}, - {value: 800, name: '化工生产'}, - {value: 1200, name: '储罐类'}, - {value: 1500, name: '厂房'}, - {value: 1400, name: '古建筑'}, - {value: 600, name: '商市场'}, - {value: 568, name: '医院'}, - {value: 888, name: '学校'}, - {value: 485, name: '宾馆'}, - {value: 966, name: '娱乐场所'}, - {value: 789, name: '餐饮业'}, - {value: 500, name: '影剧院'}, - {value: 1025, name: '展览建筑'}, - {value: 600, name: '隧道'} - ], + data: + this.zhiorbuild == "zhi" + ? [ + { value: 500, name: this.zhiNameData[0] }, + { value: 800, name: this.zhiNameData[1] }, + { value: 900, name: this.zhiNameData[2] }, + { value: 800, name: this.zhiNameData[3] }, + { value: 1200, name: this.zhiNameData[4] }, + { value: 1500, name: this.zhiNameData[5] }, + { value: 1400, name: this.zhiNameData[6] }, + { value: 600, name: this.zhiNameData[7] }, + { value: 568, name: this.zhiNameData[8] }, + { value: 888, name: this.zhiNameData[9] }, + { value: 485, name: this.zhiNameData[10] }, + { value: 966, name: this.zhiNameData[11] }, + { value: 789, name: this.zhiNameData[12] }, + { value: 500, name: this.zhiNameData[13] }, + ] + : [ + { value: 500, name: "高层" }, + { value: 800, name: "地下" }, + { value: 900, name: "轨道交通" }, + { value: 800, name: "化工生产" }, + { value: 1200, name: "储罐类" }, + { value: 1500, name: "厂房" }, + { value: 1400, name: "古建筑" }, + { value: 600, name: "商市场" }, + { value: 568, name: "医院" }, + { value: 888, name: "学校" }, + { value: 485, name: "宾馆" }, + { value: 966, name: "娱乐场所" }, + { value: 789, name: "餐饮业" }, + { value: 500, name: "影剧院" }, + { value: 1025, name: "展览建筑" }, + { value: 600, name: "隧道" }, + ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.indexBzt.on('click', (params) => { + this.indexBzt.on("click", (params) => { // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward'); }); this.indexBzt.setOption(options); } //柱状图 - tabledata - asixLablehw={ + tabledata; + asixLablehw = { interval: 0, - textStyle:{ - fontSize :18, - color:'#000000' - }, - formatter:function(value) - { - var ret = "";//拼接加\n返回的类目项 - var maxLength =2;//每项显示文字个数 - 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; - } + textStyle: { + fontSize: 18, + color: "#000000", + }, + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 2; //每项显示文字个数 + 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; } - } - asixLable={ + }, + }; + asixLable = { interval: 0, - rotate:38, - textStyle:{ - fontSize :15, - color:'#000000' - }, - /* formatter:function(value) + rotate: 38, + textStyle: { + fontSize: 15, + color: "#000000", + }, + /* formatter:function(value) { var ret = "";//拼接加\n返回的类目项 var maxLength =4;//每项显示文字个数 @@ -381,122 +453,181 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { return value; } } */ - } - barEcharts(){ - - this.forArr.forEach(item=>{ - let _this = this - item.echart = echarts.init(document.getElementById('gaoceng'),'walden'); + }; + barEcharts() { + this.forArr.forEach((item) => { + let _this = this; + item.echart = echarts.init(document.getElementById("gaoceng"), "walden"); let option = { title: { - text: this.headname+`：总数（${this.tabledata[0].totalCount}）`, + text: this.headname + `：总数（${this.tabledata[0].totalCount}）`, left: "center", top: -4, //bottom: '80%', textStyle: { - fontSize: 30 - } + fontSize: 30, + }, }, grid: { - containLabel:true, - top:80, - // top: 10 - }, + containLabel: true, + top: 80, + // top: 10 + }, xAxis: { - id:this.zhiorbuild=="zhi"?this.buildingTypeId:this.organizationId, - type: 'category', - data:this.zhiorbuild=="zhi"?this.buildingData: this.zhiNameData, - axisLabel:this.padHw?this.asixLablehw:this.asixLable, + id: + this.zhiorbuild == "zhi" + ? this.buildingTypeId + : this.organizationId, + type: "category", + data: this.zhiorbuild == "zhi" ? this.buildingData : this.zhiNameData, + axisLabel: this.padHw ? this.asixLablehw : this.asixLable, }, yAxis: { - type: 'value', - axisLabel:{ - //this.axisLabel, - textStyle:{ - fontSize :16, - color:'#000000' - } - - } + type: "value", + axisLabel: { + //this.axisLabel, + textStyle: { + fontSize: 16, + color: "#000000", + }, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.zhiorbuild=="zhi"?this.data.biaogeTishiZhi(params): this.data.biaogeTishida(params) + trigger: "item", + formatter: (params) => { + return this.zhiorbuild == "zhi" + ? this.data.biaogeTishiZhi(params) + : this.data.biaogeTishida(params); }, - position: this.data.tableTooltipNoShow2 + position: this.data.tableTooltipNoShow2, }, - series: [{ - data: this.zhiorbuild=="zhi"?this.buildnumData: this.zhiNumData, - type: 'bar', + series: [ + { + data: + this.zhiorbuild == "zhi" ? this.buildnumData : this.zhiNumData, + type: "bar", markPoint: { - data: this.tiaoshiPao - }, + data: this.tiaoshiPao, + }, backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + color: "rgba(220, 220, 220, 0.8)", }, - barWidth :'38', + barWidth: "38", //label: this.topTextlabel - }] + }, + ], }; item.echart.setOption(option); - item.echart.getZr().on('click', (params) => { - const pointInPixel= [params.offsetX, params.offsetY]; - console.log(this.data.level) - if (item.echart.containPixel('grid',pointInPixel)){ - let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; - if(this.zhiorbuild=='zhi'){ - if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].buildingTypes[xIndex].organizations.length>=1){ + item.echart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + console.log(this.data.level); + if (item.echart.containPixel("grid", pointInPixel)) { + let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; + if (this.zhiorbuild == "zhi") { + if ( + (this.data.level == "0" || this.data.level == "1") && + this.tabledata[0].buildingTypes[xIndex].organizations.length >= 1 + ) { //总队，支队跳转 - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'id':this.lastId,'zhuId':option.xAxis.id[xIndex],'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) + this.router.navigate( + ["/statisticanalysis/addUnit_one/addUnit_two_typeDetails"], + { + queryParams: { + organizationName: option.xAxis.data[xIndex], + buildingTypeName: this.headname, + id: this.lastId, + zhuId: option.xAxis.id[xIndex], + type: this.zhiorbuild == "zhi" ? "zhi" : "build", + }, + } + ); + } else { + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { + name: option.xAxis.data[xIndex], + type: 1, + jsid: this.lastId, + buildid: option.xAxis.id[xIndex], + }, + }); } - else{ - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':this.lastId,'buildid':option.xAxis.id[xIndex]}}); - } - }else{ - if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ + } else { + if ( + (this.data.level == "0" || this.data.level == "1") && + this.tabledata[0].organizations[xIndex].subOrganizations.length >= + 1 + ) { //总队，支队跳转 - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'id':this.lastId,'zhuId':option.xAxis.id[xIndex],'type':this.zhiorbuild=='zhi'?'zhi':'build'}}) - } - else{ - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.lastId}}); + this.router.navigate( + ["/statisticanalysis/addUnit_one/addUnit_two_typeDetails"], + { + queryParams: { + organizationName: option.xAxis.data[xIndex], + buildingTypeName: this.headname, + id: this.lastId, + zhuId: option.xAxis.id[xIndex], + type: this.zhiorbuild == "zhi" ? "zhi" : "build", + }, + } + ); + } else { + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { + name: option.xAxis.data[xIndex], + type: 1, + jsid: option.xAxis.id[xIndex], + buildid: this.lastId, + }, + }); } } - } - - }); - }) - + }); } //提示框表格 - tableTooltip(dataArr,title:string){ - let data = dataArr - var res = '
'+title+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - //var res='
'+biaotou+'
' - for(var i=0;i' - res+='
' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+this.tableDataZhong[i].number+''+this.tableDataZhong[i].zhanbi+'
总计135619%
' - return res + tableTooltip(dataArr, title: string) { + let data = dataArr; + var res = + '
' + + title + + "
"; + res += + '
'; + res += ''; + res += ''; + res += ''; + res += ''; + res += ""; + res += ""; + //var res='
'+biaotou+'
' + for (var i = 0; i < this.tableDataZhong.length; i++) { + res += "
"; + res += + '"; + res += + '"; + res += + '"; + } + + res += ""; + res += + ''; + res += "
名称数量总占比
' + + this.tableDataZhong[i].name + + "' + + this.tableDataZhong[i].number + + "' + + this.tableDataZhong[i].zhanbi + + "
总计135619%
"; + return res; } //返回 - backClick(){ - this.router.navigateByUrl('/statisticanalysis/addUnit_one') + backClick() { + this.router.navigateByUrl("/statisticanalysis/addUnit_one"); } - } diff --git a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts b/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts index 6c5037e..7f976b0 100644 --- a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts @@ -1,187 +1,230 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { HttpClient } from '@angular/common/http' -import {EchartsDataService,} from '../../echarts-data.service' -import { map } from 'rxjs/operators'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { HttpClient } from "@angular/common/http"; +import { EchartsDataService } from "../../echarts-data.service"; +import { map } from "rxjs/operators"; declare var echarts: any; @Component({ - selector: 'app-building-type-one', - templateUrl: './building-type-one.component.html', - styleUrls: ['./building-type-one.component.scss'] + selector: "app-building-type-one", + templateUrl: "./building-type-one.component.html", + styleUrls: ["./building-type-one.component.scss"], }) export class BuildingTypeOneComponent implements OnInit { - - constructor(private http:HttpClient,private router: Router,public echartsData:EchartsDataService) { } + constructor( + private http: HttpClient, + private router: Router, + public echartsData: EchartsDataService + ) {} ngOnInit(): void { - if(window.matchMedia("(max-width: 1400px)").matches){ - this.padHw=true + if (window.matchMedia("(max-width: 1400px)").matches) { + this.padHw = true; //this.padjt= - }else{ - this.padHw=false + } else { + this.padHw = false; } - - window.setTimeout(()=>{ - this.getechartsdata() - }) + + window.setTimeout(() => { + this.getechartsdata(); + }); } ngOnDestroy(): void { - this.indexBzt.clear() - this.indexBzt.dispose() + if (!this.indexBzt) { + return; + } + this.indexBzt.clear(); + this.indexBzt.dispose(); } - async getechartsdata(){ - await this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`) - this.initCharts() + async getechartsdata() { + await this.echartsData.getData( + null, + `/api/StatisticsAnalysis/BuildingTypes` + ); + this.initCharts(); } /* 首页饼状图 */ - indexBzt - padHw - lengthdata=[]//提示数据 - count=0//总数 - indexData=[]//所有数据 - tabledata - initCharts(){ - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + indexBzt; + padHw; + lengthdata = []; //提示数据 + count = 0; //总数 + indexData = []; //所有数据 + tabledata; + initCharts() { + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) - // console.log(this.tabledata) - //console.log(this.echartsData.orid) - for(var i=0;i{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}}) - //console.log(this.indexData) - this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden'); - let options={ + } + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); + // console.log(this.tabledata) + //console.log(this.echartsData.orid) + for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) { + this.lengthdata.push(this.tabledata[0].buildingTypes[i].buildingTypeName); + this.count = this.count + this.tabledata[0].buildingTypes[i].count; + this.indexData.push(this.tabledata[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 }; + }); + //console.log(this.indexData) + this.indexBzt = echarts.init(document.getElementById("indexBzt"), "walden"); + let options = { title: { text: `建筑类型统计（${this.count}家）`, - left: 'center', - top: "7%", - textStyle: { - fontSize:31 - } + left: "center", + top: "7%", + textStyle: { + fontSize: 31, + }, }, tooltip: { - trigger: 'item', + trigger: "item", position: this.echartsData.tableTooltipNoShow2, - formatter: (params)=>{ - this.echartsData.biaogeTishiZhi(params.data) - return this.echartsData.res - } + formatter: (params) => { + this.echartsData.biaogeTishiZhi(params.data); + return this.echartsData.res; + }, }, legend: { - orient: 'vertical', + orient: "vertical", //left:this.padHw?50:0, - right:this.padHw?20:250, - top:60, - textStyle:{ - fontSize:18, - color:"#000000" - }, - data: this.lengthdata + right: this.padHw ? 20 : 250, + top: 60, + textStyle: { + fontSize: 18, + color: "#000000", + }, + data: this.lengthdata, }, series: [ { - top:this.padHw?'15%':'0', - name: '访问来源', - type: 'pie', - radius: '60%', - center: ['50%', '53%'], - label:{ - show:true, - fontSize:18, - formatter:'{b}{c}家\n{d|({d}%)}', + top: this.padHw ? "15%" : "0", + name: "访问来源", + type: "pie", + radius: "60%", + center: ["50%", "53%"], + label: { + show: true, + fontSize: 18, + formatter: "{b}{c}家\n{d|({d}%)}", rich: { d: { - align: 'center', - fontSize:18 - } + align: "center", + fontSize: 18, + }, }, }, - data:this.indexData, + data: this.indexData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.indexBzt.on('click', (params) => { - var index=0 - for(var i=0;i0){ + this.indexBzt.on("click", (params) => { + var index = 0; + for (var i = 0; i < this.tabledata[0].buildingTypes.length; i++) { + if ( + this.tabledata[0].buildingTypes[i].buildingTypeName == params.name + ) { + if ( + (this.echartsData.level == "0" || + this.echartsData.level == "1" || + this.echartsData.level == "2") && + this.tabledata[0].buildingTypes[i].organizations.length > 0 + ) { //总队,支队，大队跳转 - this.tabledata[0].buildingTypes[i].organizations.forEach((value,index,array) => { - if(array[index].organizationId==this.echartsData.orid){ - array.splice(index,1) + this.tabledata[0].buildingTypes[i].organizations.forEach( + (value, index, array) => { + if (array[index].organizationId == this.echartsData.orid) { + array.splice(index, 1); + } + if (array.length > 0) { + this.router.navigate( + [ + "/statisticanalysis/buildingType_one/buildingType_two_reverse", + ], + { queryParams: { level: params.name, id: params.data.id } } + ); + } else { + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { + name: params.name, + type: 1, + buildid: params.data.id, + }, + }); + } } - if(array.length>0){ - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse'],{queryParams:{'level':params.name,'id':params.data.id}}); - }else{ - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}}); - } - }); - - }else { + ); + } else { //中队跳转 - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1,'buildid':params.data.id}}); + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { + name: params.name, + type: 1, + buildid: params.data.id, + }, + }); } } } - - - }); this.indexBzt.setOption(options); - - - } - tishiData - res:string - biaogeTishiZhi(datas){ - for(var a in this.tabledata.buildingTypes){ - if(this.tabledata.buildingTypes[a].buildingTypeId==datas.id){ - this.tishiData=this.tabledata.buildingTypes[a].organizations + tishiData; + res: string; + biaogeTishiZhi(datas) { + for (var a in this.tabledata.buildingTypes) { + if (this.tabledata.buildingTypes[a].buildingTypeId == datas.id) { + this.tishiData = this.tabledata.buildingTypes[a].organizations; } } - var countall=0//总计 - var countbi=0//站比 - var allCountbi=0//总站比 - for(var i=0;i' - this.res+='
'; - this.res+=''; - this.res+=''; - this.res+='' - this.res+='' - this.res+='' - this.res+=''; - //var res='
'+biaotou+'
' - for(var i=0;i' - this.res+='
' - this.res+='' - } - - this.res+='' - this.res+='' - this.res+='
名称数量总占比
'+this.tishiData[i].count+''+countbi+'%
总计'+countall+''+allCountbi.toFixed(2)+'%
' - return this.res - - } + 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 = + '
' + + datas.name + + "
"; + this.res += + '
'; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ""; + this.res += ""; + //var res='
'+biaotou+'
' + for (var i = 0; i < this.tishiData.length; i++) { + countbi = + Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; + allCountbi = allCountbi + countbi; + this.res += "
"; + this.res += + '"; + this.res += + '"; + this.res += '"; + } + + this.res += ""; + this.res += + '"; + this.res += "
名称数量总占比
' + + this.tishiData[i].organizationName + + "' + this.tishiData[i].count + "' + countbi + "%
总计' + + countall + + '' + + allCountbi.toFixed(2) + + "%
"; + return this.res; + } } diff --git a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts index d310e3c..d923f18 100644 --- a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts @@ -1,239 +1,316 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { ActivatedRoute } from '@angular/router'; -import { Local } from 'protractor/built/driverProviders'; -import {EchartsDataService} from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { ActivatedRoute } from "@angular/router"; +import { Local } from "protractor/built/driverProviders"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-building-type-three-details', - templateUrl: './building-type-three-details.component.html', - styleUrls: ['./building-type-three-details.component.scss'] + selector: "app-building-type-three-details", + templateUrl: "./building-type-three-details.component.html", + styleUrls: ["./building-type-three-details.component.scss"], }) export class BuildingTypeThreeDetailsComponent implements OnInit { - - constructor(public route: ActivatedRoute,private router: Router,public echartsData:EchartsDataService) { } - forward(){ - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) + constructor( + public route: ActivatedRoute, + private router: Router, + public echartsData: EchartsDataService + ) {} + forward() { + this.router.navigate([ + "/statisticanalysis/buildingType_one/buildingType_two_forward", + ]); } - reverse(){ - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) + reverse() { + this.router.navigate([ + "/statisticanalysis/buildingType_one/buildingType_two_reverse", + ]); } //返回 - goBack () { - sessionStorage.setItem('refresh', 'true'); + goBack() { + sessionStorage.setItem("refresh", "true"); history.go(-1); - this.echartsData.statefulInspectionToggle = true + this.echartsData.statefulInspectionToggle = true; } - organizationName:String - listorganizationId//上个页面传过来的组织id - buildingTypeName:String - buildingTypeId - organizationId=[]//本层id - padHw + organizationName: String; + listorganizationId; //上个页面传过来的组织id + buildingTypeName: String; + buildingTypeId; + organizationId = []; //本层id + padHw; ngOnInit(): void { - if(window.matchMedia("(max-width: 1300px)").matches){ - this.padHw=true + if (window.matchMedia("(max-width: 1300px)").matches) { + this.padHw = true; //this.padjt= - }else{ - this.padHw=false + } else { + this.padHw = false; } - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } - this.route.queryParams.subscribe(params => { - this.organizationName = params['organizationName']; - this.buildingTypeName = params['buildingTypeName']; - this.listorganizationId=params['organizationId']; - this.buildingTypeId=params['buildId']; + } + this.route.queryParams.subscribe((params) => { + this.organizationName = params["organizationName"]; + this.buildingTypeName = params["buildingTypeName"]; + this.listorganizationId = params["organizationId"]; + this.buildingTypeId = params["buildId"]; + }); + + window.setTimeout(() => { + this.getechartsdata(); }); - - - window.setTimeout(()=>{ - this.getechartsdata() - }) } - + ngOnDestroy(): void { - this.detailPlanEchart.clear() - this.detailPlanEchart.dispose() + if (!this.detailPlanEchart) { + return; + } + this.detailPlanEchart.clear(); + this.detailPlanEchart.dispose(); } - async getechartsdata(){ - let paramsdata={ + async getechartsdata() { + let paramsdata = { //id:this.buildingTypeId, - organizationId:this.listorganizationId + organizationId: this.listorganizationId, + }; + await this.echartsData.getData( + paramsdata, + `/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}` + ); + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); + //console.log(this.tabledata) + for (var i = 0; i < this.tabledata[0].organizations.length; i++) { + this.zhongNameData.push( + this.tabledata[0].organizations[i].organizationName + ); + this.zhongNumData.push(this.tabledata[0].organizations[i].count); + this.organizationId.push( + this.tabledata[0].organizations[i].organizationId + ); } - await this.echartsData.getData(paramsdata,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`) - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) - //console.log(this.tabledata) - for(var i=0;i{ - return this.tableTooltip(params) - } + trigger: "item", + formatter: (params) => { + return this.tableTooltip(params); + }, }, - series: [{ - id:this.organizationId, + series: [ + { + id: this.organizationId, data: this.zhongNumData, - type: 'bar', - barWidth :'38', + type: "bar", + barWidth: "38", markPoint: { - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + color: "rgba(220, 220, 220, 0.8)", }, //label: this.topTextlabel - }] + }, + ], }; this.detailPlanEchart.setOption(option); - this.detailPlanEchart.getZr().on('click', (params) => { - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { - let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + this.detailPlanEchart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel("grid", pointInPixel)) { + let xIndex = this.detailPlanEchart.convertFromPixel( + { seriesIndex: 0 }, + [params.offsetX, params.offsetY] + )[0]; /*事件处理代码书写位置*/ - if(this.echartsData.level=="0"&&this.tiao==false&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ + if ( + this.echartsData.level == "0" && + this.tiao == false && + this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1 + ) { //总队不跳转 - this.zhongNameData=[] - this.zhongNumData=[] - this.organizationId=[] - this.tiaoshiPao='' - let paramsdatee={ - id:this.buildingTypeId, - organizationId:option.xAxis.id[xIndex] - } - this.echartsData.getData(paramsdatee,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}`) - window.setTimeout(()=>{ - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) + this.zhongNameData = []; + this.zhongNumData = []; + this.organizationId = []; + this.tiaoshiPao = ""; + let paramsdatee = { + id: this.buildingTypeId, + organizationId: option.xAxis.id[xIndex], + }; + this.echartsData.getData( + paramsdatee, + `/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildingTypeId}` + ); + window.setTimeout(() => { + this.tabledata = JSON.parse( + JSON.stringify(this.echartsData.allDate) + ); //console.log(this.tabledata) - for(var i=0;i' - this.res+='
'; - this.res+=''; - this.res+=''; - this.res+='' - this.res+='' - this.res+='' - this.res+=''; - for(var i=0;i' - this.res+='' - this.res+='' - } - - this.res+='' - this.res+='' - this.res+='
名称数量总占比
'+this.tishiData[i].count+''+countbi+'%
总计'+countall+''+allCountbi.toFixed(2)+'%
' - return this.res + 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 = + '
' + + datas.name + + "
"; + this.res += + '
'; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ""; + this.res += ""; + for (var i = 0; i < this.tishiData.length; i++) { + countbi = + Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; + allCountbi = allCountbi + countbi; + this.res += ""; + this.res += + '"; + this.res += + '"; + this.res += '"; + } + + this.res += ""; + this.res += + '"; + this.res += "
名称数量总占比
' + + this.tishiData[i].organizationName + + "' + this.tishiData[i].count + "' + countbi + "%
总计' + + countall + + '' + + allCountbi.toFixed(2) + + "%
"; + return this.res; } } diff --git a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts index 15509a6..5e3c8ca 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts @@ -1,213 +1,278 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import {EchartsDataService} from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-building-type-two-forward', - templateUrl: './building-type-two-forward.component.html', - styleUrls: ['./building-type-two-forward.component.scss'] + selector: "app-building-type-two-forward", + templateUrl: "./building-type-two-forward.component.html", + styleUrls: ["./building-type-two-forward.component.scss"], }) export class BuildingTypeTwoForwardComponent implements OnInit { - - constructor(private router: Router,public data:EchartsDataService) { } - forward(){ - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) + constructor(private router: Router, public data: EchartsDataService) {} + forward() { + this.router.navigate([ + "/statisticanalysis/buildingType_one/buildingType_two_forward", + ]); } - reverse(){ - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) + reverse() { + this.router.navigate([ + "/statisticanalysis/buildingType_one/buildingType_two_reverse", + ]); } ngOnInit(): void { - window.setTimeout(()=>{ - this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) - this.initCharts() - this.barEcharts() - },0) + window.setTimeout(() => { + this.tiaoshiPao = this.data.qipao( + this.tiaoshiPao, + this.zhiNumData, + this.zhiNameData + ); + this.initCharts(); + this.barEcharts(); + }, 0); } ngOnDestroy(): void { - this.indexBzt.clear() - this.indexBzt.dispose() - this.forArr.forEach(item => { - item.echart.clear() - item.echart.dispose() - }) + this.forArr.forEach((item) => { + if (!item.echart) { + return; + } + item.echart.clear(); + item.echart.dispose(); + }); + if (!this.indexBzt) { + return; + } + this.indexBzt.clear(); + this.indexBzt.dispose(); } //返回 - goBack () { - sessionStorage.setItem('refresh', 'true'); + goBack() { + sessionStorage.setItem("refresh", "true"); history.go(-1); - this.data.statefulInspectionToggle = true + this.data.statefulInspectionToggle = true; } axisLabel = { - interval: 0, - textStyle:{ - fontSize :16, - color:'#000000' - }, - formatter:function(value) - { - var ret = "";//拼接加\n返回的类目项 - var maxLength = 2;//每项显示文字个数 - 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; - } - } - }//echarts两个字换行 + interval: 0, + textStyle: { + fontSize: 16, + color: "#000000", + }, + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 2; //每项显示文字个数 + 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; + } + }, + }; //echarts两个字换行 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 - tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, - {name:"黄浦支队",number:"144",zhanbi:"2.8%"}, - {name:"徐汇支队",number:"133",zhanbi:"2.1%"}, - {name:"长宁支队",number:"122",zhanbi:"1.6%"}, - {name:"静安支队",number:"120",zhanbi:"1.3%"}, - {name:"普陀支队",number:"100",zhanbi:"1.1%"}, - {name:"虹口支队",number:"95",zhanbi:"1%"}, - {name:"杨浦支队",number:"90",zhanbi:"0.9%"}, - {name:"闵行支队",number:"88",zhanbi:"0.8%"}, - {name:"宝山支队",number:"83",zhanbi:"0.7%"}, - {name:"徐汇支队",number:"133",zhanbi:"2.1%"}, - {name:"长宁支队",number:"122",zhanbi:"1.6%"}, - {name:"嘉定支队",number:"78",zhanbi:"0.6%"}, - {name:"松江支队",number:"75",zhanbi:"0.5%"}, - {name:"金山支队",number:"65",zhanbi:"0.4%"}, - {name:"崇明支队",number:"55",zhanbi:"0.3%"} ] - tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, - {name:"黄浦中队",number:"144",zhanbi:"2.8%"}, - {name:"徐汇中队",number:"133",zhanbi:"2.1%"}, - {name:"长宁中队",number:"122",zhanbi:"1.6%"}, - {name:"静安中队",number:"120",zhanbi:"1.3%"}, - {name:"普陀中队",number:"100",zhanbi:"1.1%"}, - {name:"虹口中队",number:"95",zhanbi:"1%"}, - {name:"杨浦中队",number:"90",zhanbi:"0.9%"}, - {name:"闵行中队",number:"88",zhanbi:"0.8%"}, - {name:"宝山中队",number:"83",zhanbi:"0.7%"}, - {name:"徐汇中队",number:"133",zhanbi:"2.1%"}, - {name:"长宁中队",number:"122",zhanbi:"1.6%"}, - {name:"嘉定中队",number:"78",zhanbi:"0.6%"}, - {name:"松江中队",number:"75",zhanbi:"0.5%"}, - {name:"金山中队",number:"65",zhanbi:"0.4%"}, - {name:"崇明中队",number:"55",zhanbi:"0.3%"} ] - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队",'青浦支队'] - zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50] - tiaoshiPao:any + tableDataZhi = [ + { name: "浦东支队", number: "156", zhanbi: "3%" }, + { name: "黄浦支队", number: "144", zhanbi: "2.8%" }, + { name: "徐汇支队", number: "133", zhanbi: "2.1%" }, + { name: "长宁支队", number: "122", zhanbi: "1.6%" }, + { name: "静安支队", number: "120", zhanbi: "1.3%" }, + { name: "普陀支队", number: "100", zhanbi: "1.1%" }, + { name: "虹口支队", number: "95", zhanbi: "1%" }, + { name: "杨浦支队", number: "90", zhanbi: "0.9%" }, + { name: "闵行支队", number: "88", zhanbi: "0.8%" }, + { name: "宝山支队", number: "83", zhanbi: "0.7%" }, + { name: "徐汇支队", number: "133", zhanbi: "2.1%" }, + { name: "长宁支队", number: "122", zhanbi: "1.6%" }, + { name: "嘉定支队", number: "78", zhanbi: "0.6%" }, + { name: "松江支队", number: "75", zhanbi: "0.5%" }, + { name: "金山支队", number: "65", zhanbi: "0.4%" }, + { name: "崇明支队", number: "55", zhanbi: "0.3%" }, + ]; + tableDataZhong = [ + { name: "浦东中队", number: "156", zhanbi: "3%" }, + { name: "黄浦中队", number: "144", zhanbi: "2.8%" }, + { name: "徐汇中队", number: "133", zhanbi: "2.1%" }, + { name: "长宁中队", number: "122", zhanbi: "1.6%" }, + { name: "静安中队", number: "120", zhanbi: "1.3%" }, + { name: "普陀中队", number: "100", zhanbi: "1.1%" }, + { name: "虹口中队", number: "95", zhanbi: "1%" }, + { name: "杨浦中队", number: "90", zhanbi: "0.9%" }, + { name: "闵行中队", number: "88", zhanbi: "0.8%" }, + { name: "宝山中队", number: "83", zhanbi: "0.7%" }, + { name: "徐汇中队", number: "133", zhanbi: "2.1%" }, + { name: "长宁中队", number: "122", zhanbi: "1.6%" }, + { name: "嘉定中队", number: "78", zhanbi: "0.6%" }, + { name: "松江中队", number: "75", zhanbi: "0.5%" }, + { name: "金山中队", number: "65", zhanbi: "0.4%" }, + { name: "崇明中队", number: "55", zhanbi: "0.3%" }, + ]; + zhiNameData = [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + "松江支队", + "金山支队", + "崇明支队", + "青浦支队", + ]; + zhiNumData = [ + 200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90, 80, 70, 60, 50, + ]; + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i{ - return this.data.biaogeTishi(params.name) + trigger: "item", + formatter: (params) => { + return this.data.biaogeTishi(params.name); }, /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', borderRadius :'0', */ - position: this.data.tableTooltipNoShow2 + position: this.data.tableTooltipNoShow2, }, legend: { - orient: 'vertical', + orient: "vertical", right: 150, - top:80, - textStyle:{ - fontSize:18, - color:"#000000" + top: 80, + textStyle: { + fontSize: 18, + color: "#000000", }, - data:this.zhiNameData + data: this.zhiNameData, }, series: [ { - name: '访问来源', - type: 'pie', - radius: '70%', - center: ['50%', '60%'], - label:{ - show:true, - fontSize:16, - formatter:'{b}{c}家\n{d|({d}%)}', + name: "访问来源", + type: "pie", + radius: "70%", + center: ["50%", "60%"], + label: { + show: true, + fontSize: 16, + formatter: "{b}{c}家\n{d|({d}%)}", rich: { d: { - align: 'center', - fontSize:16 - } + align: "center", + fontSize: 16, + }, }, }, data: this.pieData, @@ -215,97 +280,117 @@ export class BuildingTypeTwoForwardComponent implements OnInit { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.indexBzt.on('click', (params) => { + this.indexBzt.on("click", (params) => { // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward'); }); this.indexBzt.setOption(options); } //柱状图 - barEcharts(){ - this.forArr.forEach(item=>{ - let _this = this - item.echart = echarts.init(document.getElementById(item.id),'walden'); + barEcharts() { + this.forArr.forEach((item) => { + let _this = this; + item.echart = echarts.init(document.getElementById(item.id), "walden"); let option = { - color: ['#3398DB'], + color: ["#3398DB"], title: { - text: item.name+'：总数（1024）', + text: item.name + "：总数（1024）", left: "center", top: "0", //bottom: '80', textStyle: { - fontSize: 23 - } + fontSize: 23, + }, }, xAxis: { - type: 'category', - data: this.buildingTypeName, - axisLabel: this.axisLabel + type: "category", + data: this.buildingTypeName, + axisLabel: this.axisLabel, }, yAxis: { - type: 'value', - axisLabel:{ - //this.axisLabel, - textStyle:{ - fontSize :16, - color:'#000000' - } - - } + type: "value", + axisLabel: { + //this.axisLabel, + textStyle: { + fontSize: 16, + color: "#000000", + }, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.data.tableTooltip(this.tableDataZhong,params.name) - } + trigger: "item", + formatter: (params) => { + return this.data.tableTooltip(this.tableDataZhong, params.name); + }, }, - series: [{ + series: [ + { data: this.buildingTypeNum, - type: 'bar', + type: "bar", markPoint: { - data: this.tiaoshiPao - }, + data: this.tiaoshiPao, + }, backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + color: "rgba(220, 220, 220, 0.8)", }, - barWidth :'28', + barWidth: "28", //label: this.topTextlabel - }] + }, + ], }; item.echart.setOption(option); - item.echart.on('click', (params) => { - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':item.name,'buildingTypeName':params.name}}) + item.echart.on("click", (params) => { + this.router.navigate( + ["/statisticanalysis/buildingType_one/buildingType_three_details"], + { + queryParams: { + organizationName: item.name, + buildingTypeName: params.name, + }, + } + ); }); - }) - + }); } //提示框表格 - tableTooltip(dataArr,title:string){ - let data = dataArr - var res = '
'+title+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - //var res='
'+biaotou+'
' - for(var i=0;i' - res+='
' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+this.tableDataZhi[i].number+''+this.tableDataZhi[i].zhanbi+'
总计135619%
' - return res + tableTooltip(dataArr, title: string) { + let data = dataArr; + var res = + '
' + + title + + "
"; + res += + '
'; + res += ''; + res += ''; + res += ''; + res += ''; + res += ""; + res += ""; + //var res='
'+biaotou+'
' + for (var i = 0; i < this.tableDataZhi.length; i++) { + res += "
"; + res += + '"; + res += + '"; + res += + '"; + } + + res += ""; + res += + ''; + res += "
名称数量总占比
' + this.tableDataZhi[i].name + "' + + this.tableDataZhi[i].number + + "' + + this.tableDataZhi[i].zhanbi + + "
总计135619%
"; + return res; } } diff --git a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts index 67e5529..d3ff97d 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts @@ -1,393 +1,478 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import {EchartsDataService} from '../../echarts-data.service'; -import { HttpClient } from '@angular/common/http' +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; +import { HttpClient } from "@angular/common/http"; declare var echarts: any; @Component({ - selector: 'app-building-type-two-reverse', - templateUrl: './building-type-two-reverse.component.html', - styleUrls: ['./building-type-two-reverse.component.scss'] + selector: "app-building-type-two-reverse", + templateUrl: "./building-type-two-reverse.component.html", + styleUrls: ["./building-type-two-reverse.component.scss"], }) export class BuildingTypeTwoReverseComponent implements OnInit { + constructor( + private http: HttpClient, + private router: Router, + public data: EchartsDataService, + private route: ActivatedRoute + ) {} - constructor(private http:HttpClient,private router: Router,public data:EchartsDataService,private route:ActivatedRoute) { } - - forward(){ - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) + forward() { + this.router.navigate([ + "/statisticanalysis/buildingType_one/buildingType_two_forward", + ]); } - reverse(){ - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) + reverse() { + this.router.navigate([ + "/statisticanalysis/buildingType_one/buildingType_two_reverse", + ]); } - headname//标题 - buildId//建筑id - padHw//是否是华为pad + headname; //标题 + buildId; //建筑id + padHw; //是否是华为pad ngOnInit(): void { - if(window.matchMedia("(max-width: 1300px)").matches&&window.matchMedia("(max-height: 700px)").matches){ - this.padHw=true + if ( + window.matchMedia("(max-width: 1300px)").matches && + window.matchMedia("(max-height: 700px)").matches + ) { + this.padHw = true; //this.padjt= - }else{ - this.padHw=false + } else { + this.padHw = false; } - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } - this.route.queryParams.subscribe(param=>{ - this.headname=param.level - this.buildId=param.id + } + this.route.queryParams.subscribe((param) => { + this.headname = param.level; + this.buildId = param.id; }); - let paramsdata:any = { - id:this.buildId, + let paramsdata: any = { + id: this.buildId, //organizationId:'1' - } - - window.setTimeout(()=>{ - this.getechartsdata() + }; + + window.setTimeout(() => { + this.getechartsdata(); }); - } ngOnDestroy(): void { - /* this.indexBzt.clear() - this.indexBzt.dispose() */ - this.forArr.forEach(item => { - item.echart.clear() - item.echart.dispose() - }) + if (this.forArr && this.forArr.length !== 0) { + this.forArr.forEach((item) => { + item.echart.clear(); + item.echart.dispose(); + }); + } } - async getechartsdata(){ - await this.data.getData(null,`/api/StatisticsAnalysis/Companies/BuildingTypes/${this.buildId}`) - this.tabledata=JSON.parse(JSON.stringify(this.data.allDate)) - for(var i=0;i 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; - } - } - }//echarts两个字换行 + rotate: 38, + textStyle: { + fontSize: 16, + color: "#000000", + }, + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 2; //每项显示文字个数 + 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; + } + }, + }; //echarts两个字换行 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 - tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, - {name:"黄浦支队",number:"144",zhanbi:"2.8%"}, - {name:"徐汇支队",number:"133",zhanbi:"2.1%"}, - {name:"长宁支队",number:"122",zhanbi:"1.6%"}, - {name:"静安支队",number:"120",zhanbi:"1.3%"}, - {name:"普陀支队",number:"100",zhanbi:"1.1%"}, - {name:"虹口支队",number:"95",zhanbi:"1%"}, - {name:"杨浦支队",number:"90",zhanbi:"0.9%"}, - {name:"闵行支队",number:"88",zhanbi:"0.8%"}, - {name:"宝山支队",number:"83",zhanbi:"0.7%"}, - {name:"徐汇支队",number:"133",zhanbi:"2.1%"}, - {name:"长宁支队",number:"122",zhanbi:"1.6%"}, - {name:"嘉定支队",number:"78",zhanbi:"0.6%"}, - {name:"松江支队",number:"75",zhanbi:"0.5%"}, - {name:"金山支队",number:"65",zhanbi:"0.4%"}, - {name:"崇明支队",number:"55",zhanbi:"0.3%"} ] - tableDataZhong = [ {name:"浦东中队",number:"156",zhanbi:"3%"}, - {name:"黄浦中队",number:"144",zhanbi:"2.8%"}, - {name:"徐汇中队",number:"133",zhanbi:"2.1%"}, - {name:"长宁中队",number:"122",zhanbi:"1.6%"}, - {name:"静安中队",number:"120",zhanbi:"1.3%"}, - {name:"普陀中队",number:"100",zhanbi:"1.1%"}, - {name:"虹口中队",number:"95",zhanbi:"1%"}, - {name:"杨浦中队",number:"90",zhanbi:"0.9%"}, - {name:"闵行中队",number:"88",zhanbi:"0.8%"}, - {name:"宝山中队",number:"83",zhanbi:"0.7%"}, - {name:"徐汇中队",number:"133",zhanbi:"2.1%"}, - {name:"长宁中队",number:"122",zhanbi:"1.6%"}, - {name:"嘉定中队",number:"78",zhanbi:"0.6%"}, - {name:"松江中队",number:"75",zhanbi:"0.5%"}, - {name:"金山中队",number:"65",zhanbi:"0.4%"}, - {name:"崇明中队",number:"55",zhanbi:"0.3%"} ] - zhiNameData = [] - zhiNumData = [] - tiaoshiPao:any + tableDataZhi = [ + { name: "浦东支队", number: "156", zhanbi: "3%" }, + { name: "黄浦支队", number: "144", zhanbi: "2.8%" }, + { name: "徐汇支队", number: "133", zhanbi: "2.1%" }, + { name: "长宁支队", number: "122", zhanbi: "1.6%" }, + { name: "静安支队", number: "120", zhanbi: "1.3%" }, + { name: "普陀支队", number: "100", zhanbi: "1.1%" }, + { name: "虹口支队", number: "95", zhanbi: "1%" }, + { name: "杨浦支队", number: "90", zhanbi: "0.9%" }, + { name: "闵行支队", number: "88", zhanbi: "0.8%" }, + { name: "宝山支队", number: "83", zhanbi: "0.7%" }, + { name: "徐汇支队", number: "133", zhanbi: "2.1%" }, + { name: "长宁支队", number: "122", zhanbi: "1.6%" }, + { name: "嘉定支队", number: "78", zhanbi: "0.6%" }, + { name: "松江支队", number: "75", zhanbi: "0.5%" }, + { name: "金山支队", number: "65", zhanbi: "0.4%" }, + { name: "崇明支队", number: "55", zhanbi: "0.3%" }, + ]; + tableDataZhong = [ + { name: "浦东中队", number: "156", zhanbi: "3%" }, + { name: "黄浦中队", number: "144", zhanbi: "2.8%" }, + { name: "徐汇中队", number: "133", zhanbi: "2.1%" }, + { name: "长宁中队", number: "122", zhanbi: "1.6%" }, + { name: "静安中队", number: "120", zhanbi: "1.3%" }, + { name: "普陀中队", number: "100", zhanbi: "1.1%" }, + { name: "虹口中队", number: "95", zhanbi: "1%" }, + { name: "杨浦中队", number: "90", zhanbi: "0.9%" }, + { name: "闵行中队", number: "88", zhanbi: "0.8%" }, + { name: "宝山中队", number: "83", zhanbi: "0.7%" }, + { name: "徐汇中队", number: "133", zhanbi: "2.1%" }, + { name: "长宁中队", number: "122", zhanbi: "1.6%" }, + { name: "嘉定中队", number: "78", zhanbi: "0.6%" }, + { name: "松江中队", number: "75", zhanbi: "0.5%" }, + { name: "金山中队", number: "65", zhanbi: "0.4%" }, + { name: "崇明中队", number: "55", zhanbi: "0.3%" }, + ]; + zhiNameData = []; + zhiNumData = []; + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - if(this.zhiNumData.length>=1){ - var arrshuzu='['; - for(var i=0;i= 1) { + var arrshuzu = "["; + for (var i = 0; i < this.zhiNumData.length; i++) { + arrshuzu += + '{"value":' + + this.zhiNumData[i] + + ',"coord":[' + + i + + "," + + this.zhiNumData[i] + + '],"name":' + + '"' + + this.zhiNameData[i] + + '"' + + "},"; + } + arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1); + arrshuzu += "]"; + this.tiaoshiPao = JSON.parse(arrshuzu); } - } - forArr = [{id:'gaoceng',name:'高层',echart:null}, - {id:'dixia',name:'地下',echart:null}, - {id:'guidao',name:'轨道交通',echart:null}, - {id:'huagong',name:'化工生产',echart:null}, - {id:'chuguan',name:'储罐类',echart:null}, - {id:'changfang',name:'厂房',echart:null}, - {id:'gujianzhu',name:'古建筑',echart:null}, - {id:'shichang',name:'商市场',echart:null}, - {id:'yiyuan',name:'医院',echart:null}, - {id:'xuexiao',name:'学校',echart:null}, - {id:'binguan',name:'宾馆',echart:null}, - {id:'yule',name:'娱乐场所',echart:null}, - {id:'canyin',name:'餐饮业',echart:null}, - {id:'yingyuan',name:'影剧院',echart:null}, - {id:'zhanlan',name:'展览建筑',echart:null}, - {id:'suidao',name:'隧道',echart:null}] - - + forArr = [ + { id: "gaoceng", name: "高层", echart: null }, + { id: "dixia", name: "地下", echart: null }, + { id: "guidao", name: "轨道交通", echart: null }, + { id: "huagong", name: "化工生产", echart: null }, + { id: "chuguan", name: "储罐类", echart: null }, + { id: "changfang", name: "厂房", echart: null }, + { id: "gujianzhu", name: "古建筑", echart: null }, + { id: "shichang", name: "商市场", echart: null }, + { id: "yiyuan", name: "医院", echart: null }, + { id: "xuexiao", name: "学校", echart: null }, + { id: "binguan", name: "宾馆", echart: null }, + { id: "yule", name: "娱乐场所", echart: null }, + { id: "canyin", name: "餐饮业", echart: null }, + { id: "yingyuan", name: "影剧院", echart: null }, + { id: "zhanlan", name: "展览建筑", echart: null }, + { id: "suidao", name: "隧道", echart: null }, + ]; //返回 - goback(){ - sessionStorage.setItem('refresh', 'true'); + goback() { + sessionStorage.setItem("refresh", "true"); history.go(-1); } /* 顶部饼状图 */ - indexBzt - initCharts(){ - - this.indexBzt = echarts.init(document.getElementById('pie'),'walden'); - let options={ + indexBzt; + initCharts() { + this.indexBzt = echarts.init(document.getElementById("pie"), "walden"); + let options = { title: { - text: '建筑类型统计（8900家）', - left: 'center', - top: "7%", - textStyle: { - fontSize:26 - } + text: "建筑类型统计（8900家）", + left: "center", + top: "7%", + textStyle: { + fontSize: 26, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.data.tableTooltip(this.tableDataZhi,params.name) + trigger: "item", + formatter: (params) => { + return this.data.tableTooltip(this.tableDataZhi, params.name); }, - position: this.data.tableTooltipNoShow2 + position: this.data.tableTooltipNoShow2, }, legend: { - orient: 'vertical', + orient: "vertical", right: 150, - top:80, - textStyle:{ - fontSize:18, - color:"#000000" + top: 80, + textStyle: { + fontSize: 18, + color: "#000000", }, - data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] + data: [ + "高层", + "地下", + "轨道交通", + "化工生产", + "储罐类", + "厂房", + "古建筑", + "商市场", + "医院", + "学校", + "宾馆", + "娱乐场所", + "餐饮业", + "影剧院", + "展览建筑", + "隧道", + ], }, series: [ { - name: '访问来源', - type: 'pie', - radius: '70%', - center: ['50%', '60%'], - label:{ - show:true, - fontSize:16, - formatter:'{b}{c}家\n{d|({d}%)}', + name: "访问来源", + type: "pie", + radius: "70%", + center: ["50%", "60%"], + label: { + show: true, + fontSize: 16, + formatter: "{b}{c}家\n{d|({d}%)}", rich: { d: { - align: 'center', - fontSize:16 - } + align: "center", + fontSize: 16, + }, }, }, data: [ - {value: 500, name: '高层'}, - {value: 800, name: '地下'}, - {value: 900, name: '轨道交通'}, - {value: 800, name: '化工生产'}, - {value: 1200, name: '储罐类'}, - {value: 1500, name: '厂房'}, - {value: 1400, name: '古建筑'}, - {value: 600, name: '商市场'}, - {value: 568, name: '医院'}, - {value: 888, name: '学校'}, - {value: 485, name: '宾馆'}, - {value: 966, name: '娱乐场所'}, - {value: 789, name: '餐饮业'}, - {value: 500, name: '影剧院'}, - {value: 1025, name: '展览建筑'}, - {value: 600, name: '隧道'} + { value: 500, name: "高层" }, + { value: 800, name: "地下" }, + { value: 900, name: "轨道交通" }, + { value: 800, name: "化工生产" }, + { value: 1200, name: "储罐类" }, + { value: 1500, name: "厂房" }, + { value: 1400, name: "古建筑" }, + { value: 600, name: "商市场" }, + { value: 568, name: "医院" }, + { value: 888, name: "学校" }, + { value: 485, name: "宾馆" }, + { value: 966, name: "娱乐场所" }, + { value: 789, name: "餐饮业" }, + { value: 500, name: "影剧院" }, + { value: 1025, name: "展览建筑" }, + { value: 600, name: "隧道" }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.indexBzt.on('click', (params) => { + this.indexBzt.on("click", (params) => { // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward'); }); this.indexBzt.setOption(options); } //柱状图 - lengthdata=[]//提示数据 - count=0//总数 - indexData=[]//所有数据 - organizationId=[] - tabledata - barEcharts(){ - this.forArr.forEach(item=>{ - let _this = this - item.echart = echarts.init(document.getElementById('gaoceng'),'walden'); - let option = { - title: { - text: this.headname+this.tabledata[0].totalCount, - left: "center", - top:this.padHw?"18":"0", - bottom:this.padHw?"0":'510', + lengthdata = []; //提示数据 + count = 0; //总数 + indexData = []; //所有数据 + organizationId = []; + tabledata; + barEcharts() { + this.forArr.forEach((item) => { + let _this = this; + item.echart = echarts.init(document.getElementById("gaoceng"), "walden"); + let option = { + title: { + text: this.headname + this.tabledata[0].totalCount, + left: "center", + top: this.padHw ? "18" : "0", + bottom: this.padHw ? "0" : "510", + textStyle: { + fontSize: 30, + }, + }, + grid: { + //top: 90, + bottom: "18%", + }, + xAxis: { + id: this.organizationId, + type: "category", + data: this.zhiNameData, + axisLabel: { + //this.axisLabel, + interval: 0, + rotate: 28, textStyle: { - fontSize: 30 - } + fontSize: 16, + color: "#000000", + }, }, - grid: { - //top: 90, - bottom: '18%', }, - xAxis: { - id:this.organizationId, - type: 'category', - data: this.zhiNameData, - axisLabel:{ - //this.axisLabel, - interval: 0, - rotate:28, - textStyle:{ - fontSize :16, - color:'#000000' - } - - } + yAxis: { + type: "value", + axisLabel: { + //this.axisLabel, + textStyle: { + fontSize: 16, + color: "#000000", + }, }, - yAxis: { - type: 'value', - axisLabel:{ - //this.axisLabel, - textStyle:{ - fontSize :16, - color:'#000000' - } - - } + }, + tooltip: { + trigger: "item", + formatter: (params) => { + return this.tableTooltip(params); }, - tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.tableTooltip(params) + position: this.data.tableTooltipNoShow2, + }, + series: [ + { + data: this.zhiNumData, + type: "bar", + markPoint: { + data: this.tiaoshiPao, }, - position: this.data.tableTooltipNoShow2 - }, - series: [{ - data: this.zhiNumData, - type: 'bar', - markPoint: { - data:this.tiaoshiPao + //showBackground: true, + backgroundStyle: { + color: "rgba(220, 220, 220, 0.8)", }, - //showBackground: true, - backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + barWidth: "38", + //label: this.topTextlabel + }, + ], + }; + item.echart.setOption(option); + item.echart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + if (item.echart.containPixel("grid", pointInPixel)) { + let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; + /*事件处理代码书写位置*/ + if ( + (this.data.level == "0" || this.data.level == "1") && + this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1 + ) { + //总队，支队跳转 + this.router.navigate( + [ + "/statisticanalysis/buildingType_one/buildingType_three_details", + ], + { + queryParams: { + organizationName: option.xAxis.data[xIndex], + buildingTypeName: this.headname, + buildId: this.buildId, + organizationId: option.xAxis.id[xIndex], + }, + } + ); + } else { + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { + name: option.xAxis.data[xIndex], + type: 1, + jsid: option.xAxis.id[xIndex], + buildid: this.buildId, }, - barWidth :'38', - //label: this.topTextlabel - }] - }; - item.echart.setOption(option); - item.echart.getZr().on('click', (params) => { - const pointInPixel= [params.offsetX, params.offsetY]; - if (item.echart.containPixel('grid',pointInPixel)) { - let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; - /*事件处理代码书写位置*/ - if((this.data.level=='0'||this.data.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ - //总队，支队跳转 - this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':option.xAxis.data[xIndex],'buildingTypeName':this.headname,'buildId':this.buildId,'organizationId':option.xAxis.id[xIndex]}}) - } - else{ - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':option.xAxis.data[xIndex],'type':1,'jsid':option.xAxis.id[xIndex],'buildid':this.buildId}}); + }); + } + //this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}}); } - //this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}}); - } - - }); - }) - - + }); + }); } //提示框表格 - res - tishiData - tableTooltip(datas){ - for(var a in this.data.obdata[0].organizations){ - if(this.data.obdata[0].organizations[a].organizationName==datas.name){ - this.tishiData=this.data.obdata[0].organizations[a].subOrganizations + res; + tishiData; + tableTooltip(datas) { + for (var a in this.data.obdata[0].organizations) { + if (this.data.obdata[0].organizations[a].organizationName == datas.name) { + this.tishiData = this.data.obdata[0].organizations[a].subOrganizations; } } - var countall=0//总计 - var countbi=0//站比 - var allCountbi=0//总站比 - for(var i=0;i' - this.res+='
'; - this.res+=''; - this.res+=''; - this.res+='' - this.res+='' - this.res+='' - this.res+=''; - for(var i=0;i' - this.res+='' - this.res+='' - } - - this.res+='' - this.res+='' - this.res+='
名称数量总占比
'+this.tishiData[i].count+''+countbi+'%
总计'+countall+''+allCountbi.toFixed(2)+'%
' - return this.res + 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 = + '
' + + datas.name + + "
"; + this.res += + '
'; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ""; + this.res += ""; + for (var i = 0; i < this.tishiData.length; i++) { + countbi = + Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; + allCountbi = allCountbi + countbi; + this.res += ""; + this.res += + '"; + this.res += + '"; + this.res += '"; + } + + this.res += ""; + this.res += + '"; + this.res += "
名称数量总占比
' + + this.tishiData[i].organizationName + + "' + this.tishiData[i].count + "' + countbi + "%
总计' + + countall + + '' + + allCountbi.toFixed(2) + + "%
"; + return this.res; } } diff --git a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts index 8a30056..cd5901d 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts @@ -1,153 +1,195 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import {EchartsDataService,} from '../../echarts-data.service' +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-delete-one', - templateUrl: './delete-one.component.html', - styleUrls: ['./delete-one.component.scss'] + selector: "app-delete-one", + templateUrl: "./delete-one.component.html", + styleUrls: ["./delete-one.component.scss"], }) export class DeleteOneComponent implements OnInit { - options:any; + options: any; - indexBzt//echarts实例 + indexBzt; //echarts实例 - constructor(private router: Router,public echartsData:EchartsDataService) { } + constructor(private router: Router, public echartsData: EchartsDataService) {} ngOnInit() { - window.setTimeout(()=>{ - this.initCharts() - },0) + window.setTimeout(() => { + this.initCharts(); + }, 0); } - ngOnDestroy():void{ - this.indexBzt.clear() - this.indexBzt.dispose() + ngOnDestroy(): void { + if (this.indexBzt) { + this.indexBzt.clear(); + this.indexBzt.dispose(); + } } /* 首页饼状图 */ - initCharts(){ + initCharts() { //console.log(document.getElementById('indexBzt')) - + var ec = echarts as any; - this.indexBzt = ec.init(document.getElementById('indexBzt'),'walden'); - var options={ + this.indexBzt = ec.init(document.getElementById("indexBzt"), "walden"); + var options = { title: { - text: '删除单位统计（8900家）', - left: 'center', - top: "7%", - textStyle:{ - fontSize:31 - } + text: "删除单位统计（8900家）", + left: "center", + top: "7%", + textStyle: { + fontSize: 31, + }, }, tooltip: { - trigger: 'item', - //position: this.echartsData.tableTooltipNoShow2, - formatter: (params)=>{ - //return this.biaogeTishi(params.name) - return this.echartsData.biaogeTishiZhi(params.name) - } + trigger: "item", + //position: this.echartsData.tableTooltipNoShow2, + formatter: (params) => { + //return this.biaogeTishi(params.name) + return this.echartsData.biaogeTishiZhi(params.name); + }, }, legend: { - orient: 'vertical', - right: 150, - top:80, - //padding:20, - // itemWidth:60, - // itemHeight:25, - textStyle:{ - fontSize:18, - color:"#000000" - }, - data: ['高层', '地下', '轨道交通', '化工生产', '储罐类', '厂房', '古建筑', '商市场', '医院', '学校', '宾馆', '娱乐场所', '餐饮业', '影剧院', '展览建筑', '隧道'] + orient: "vertical", + right: 150, + top: 80, + //padding:20, + // itemWidth:60, + // itemHeight:25, + textStyle: { + fontSize: 18, + color: "#000000", + }, + data: [ + "高层", + "地下", + "轨道交通", + "化工生产", + "储罐类", + "厂房", + "古建筑", + "商市场", + "医院", + "学校", + "宾馆", + "娱乐场所", + "餐饮业", + "影剧院", + "展览建筑", + "隧道", + ], }, series: [ - { - name: '访问来源', - type: 'pie', - radius: '65%', - center: ['50%', '60%'], - label:{ - show:true, - fontSize:18, - formatter:'{b}{c}家\n{d|({d}%)}', + { + name: "访问来源", + type: "pie", + radius: "65%", + center: ["50%", "60%"], + label: { + show: true, + fontSize: 18, + formatter: "{b}{c}家\n{d|({d}%)}", rich: { d: { - align: 'center', - fontSize:18 - } - }, - + align: "center", + fontSize: 18, }, - data: [ - {value: 500, name: '高层'}, - {value: 1300, name: '地下',itemStyle:{color:'#02A7F0'}}, - {value: 1500, name: '轨道交通'}, - {value: 1500, name: '化工生产'}, - {value: 1700, name: '储罐类'}, - {value: 800, name: '厂房'}, - {value: 1500, name: '古建筑'}, - {value: 1500, name: '商市场'}, - {value: 1700, name: '医院'}, - {value: 1700, name: '学校'}, - {value: 1700, name: '宾馆'}, - {value: 1700, name: '娱乐场所'}, - {value: 1700, name: '餐饮业'}, - {value: 1700, name: '影剧院'}, - {value: 1700, name: '展览建筑'}, - {value: 1700, name: '隧道'} - ], - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + }, + }, + data: [ + { value: 500, name: "高层" }, + { value: 1300, name: "地下", itemStyle: { color: "#02A7F0" } }, + { value: 1500, name: "轨道交通" }, + { value: 1500, name: "化工生产" }, + { value: 1700, name: "储罐类" }, + { value: 800, name: "厂房" }, + { value: 1500, name: "古建筑" }, + { value: 1500, name: "商市场" }, + { value: 1700, name: "医院" }, + { value: 1700, name: "学校" }, + { value: 1700, name: "宾馆" }, + { value: 1700, name: "娱乐场所" }, + { value: 1700, name: "餐饮业" }, + { value: 1700, name: "影剧院" }, + { value: 1700, name: "展览建筑" }, + { value: 1700, name: "隧道" }, + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.indexBzt.on('click', (params) => { - this.router.navigateByUrl('/statisticanalysis/delete_one/delete_two'); + this.indexBzt.on("click", (params) => { + this.router.navigateByUrl("/statisticanalysis/delete_one/delete_two"); }); this.indexBzt.setOption(options); } /** * @name: 表格提示框封装 * @test: test font - * @msg: + * @msg: * @param {string(表头)} - * @return {type} + * @return {type} */ - biaogeTishi(biaotou:string){ - var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' - shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' - shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' - shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' - shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' - shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' - var jsonObj = JSON.parse(shuju); - var res = '
'+biaotou+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
' - return res - } + biaogeTishi(biaotou: string) { + var shuju = + '[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'; + shuju += + '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'; + shuju += + '{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'; + shuju += + '{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'; + shuju += + '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'; + shuju += + '{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'; + var jsonObj = JSON.parse(shuju); + var res = + '
' + + biaotou + + "
"; + res += + '
'; + res += ""; + res += + ''; + res += + ''; + res += + ''; + res += ""; + res += ""; + for (var i = 0; i < jsonObj.length; i++) { + res += ""; + res += + '"; + res += + '"; + res += + '"; + } + res += ""; + res += + ''; + res += "
名称数量总占比
' + + jsonObj[i].name + + "' + + jsonObj[i].number + + "' + + jsonObj[i].zhanbi + + "
总计135619%
"; + return res; + } } diff --git a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts index f3d67a9..8beb5ce 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts @@ -1,210 +1,272 @@ /* - * @Descripttion: - * @version: + * @Descripttion: + * @version: * @Author: sueRimn * @Date: 2020-09-02 16:22:35 * @LastEditors: sueRimn * @LastEditTime: 2020-11-16 09:40:04 */ -import { Component, OnInit } from '@angular/core'; -import { Router,ActivatedRoute } from '@angular/router'; -import {EchartsDataService} from '../../echarts-data.service'; -import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; -import { DateAdapter } from '@angular/material/core'; +import { Component, OnInit } from "@angular/core"; +import { Router, ActivatedRoute } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; +import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar"; +import { DateAdapter } from "@angular/material/core"; declare var echarts: any; @Component({ - selector: 'app-delete-there', - templateUrl: './delete-there.component.html', - styleUrls: ['./delete-there.component.scss'] + selector: "app-delete-there", + templateUrl: "./delete-there.component.html", + styleUrls: ["./delete-there.component.scss"], }) export class DeleteThereComponent implements OnInit { - - constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter) { } - zhutu//echarts实例 - option - time:String - buildingTypeName:String - setTimeoutObj//延时器需要清除 - headtext:string; - zhong:string - ngOnDestroy():void{ - this.zhutu.clear() - this.zhutu.dispose() + constructor( + private router: Router, + private activatedRoute: ActivatedRoute, + public echartsData: EchartsDataService, + public snackBar: MatSnackBar, + private adapter: DateAdapter + ) {} + zhutu; //echarts实例 + option; + time: String; + buildingTypeName: String; + setTimeoutObj; //延时器需要清除 + headtext: string; + zhong: string; + ngOnDestroy(): void { + if (this.zhutu) { + this.zhutu.clear(); + this.zhutu.dispose(); + } } ngOnInit(): void { - this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.zhiNumData, + this.zhiNameData + ); this.dateInit(); //let headtext:string; - let datayuex:string; - let headName:string; + let datayuex: string; + let headName: string; // console.log(this.activatedRoute.queryParams.subscribe) //headtext=this.activatedRoute.queryParams["headtext"]; - this.activatedRoute.queryParams.subscribe(param=>{ - this.headtext=param.headtext - datayuex=param.level - this.zhong=param.zhong - headName=this.headtext+''+datayuex; + this.activatedRoute.queryParams.subscribe((param) => { + this.headtext = param.headtext; + datayuex = param.level; + this.zhong = param.zhong; + headName = this.headtext + "" + datayuex; //console.log(headName) - }); - window.setTimeout(()=>{ - this.zhuzhuangtu(headName) - },0) + }); + window.setTimeout(() => { + this.zhuzhuangtu(headName); + }, 0); } - selectType:string = 'month'; //选择当前的 查询类型 按月/年 - + selectType: string = "month"; //选择当前的 查询类型 按月/年 //查询数据 - years:any = [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + 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) + dateInit() { + let date = new Date().getFullYear(); + for (let i = date; i >= date - 10; i--) { + this.years.unshift(i); } // console.log(this.years) } - - selectOneYear:any = (new Date()).getFullYear() //开始年份 - selectStartMonth:any = 1 //开始月份 - Submit (e) { - - } - selectStartYear:any = (new Date()).getFullYear() //开始年份 + selectOneYear: any = new Date().getFullYear(); //开始年份 + selectStartMonth: any = 1; //开始月份 + Submit(e) {} + selectStartYear: any = new Date().getFullYear(); //开始年份 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] - zhiNumData = [0,0,0,0,0,0,0,0,0,0,0,0,0,0] - zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"] - tiaoshiPao:any + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 + zhiNameData = [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + "松江支队", + "金山支队", + "崇明支队", + ]; + zhiNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + zhongNameData = [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + "松江中队", + "金山中队", + "崇明中队", + ]; + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i 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; - } - } - }//echarts两个字换行 + interval: 0, + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 2; //每项显示文字个数 + 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; + } + }, + }; //echarts两个字换行 /* 柱状图 */ - zhuzhuangtu(headName:string){ + zhuzhuangtu(headName: string) { var ec = echarts as any; - this.zhutu = ec.init(document.getElementById('zhidui'),'walden'); + this.zhutu = ec.init(document.getElementById("zhidui"), "walden"); this.option = { title: { - text: headName+'：总数(0)', + text: headName + "：总数(0)", left: "center", top: "0", textStyle: { - fontSize: 30 - } + fontSize: 30, + }, }, /* grid: { left: '5%', bottom:'35%' }, */ xAxis: { - type: 'category', - data: this.zhiNameData, - //axisLabel: this.axisLabel, - axisLabel:{ - //this.axisLabel, - textStyle:{ - fontSize :18, - color:'#000000' - } - - } + type: "category", + data: this.zhiNameData, + //axisLabel: this.axisLabel, + axisLabel: { + //this.axisLabel, + textStyle: { + fontSize: 18, + color: "#000000", + }, + }, }, yAxis: { - type: 'value', - axisLabel:{ - textStyle:{ - fontSize :18, - color:'#000000' - } - - } + type: "value", + axisLabel: { + textStyle: { + fontSize: 18, + color: "#000000", + }, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.echartsData.tableTooltip('',headName) + trigger: "item", + formatter: (params) => { + return this.echartsData.tableTooltip("", headName); }, - position: this.echartsData.tableTooltipNoShowq + position: this.echartsData.tableTooltipNoShowq, /* backgroundColor:'rgba(255,255,255,1)', borderWidth:'1', borderRadius :'0' */ }, - series: [{ + series: [ + { data: this.zhiNumData, - type: 'bar', + type: "bar", markPoint: { - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + color: "rgba(220, 220, 220, 0.8)", }, - barWidth :'38', + barWidth: "38", //label: this.topTextlabel - }] + }, + ], }; - this.zhutu.getZr().on('click',params=>{ + this.zhutu.getZr().on("click", (params) => { // console.log(params.name) - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.zhutu.containPixel('grid',pointInPixel)) { - let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.zhutu.containPixel("grid", pointInPixel)) { + let xIndex = this.zhutu.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; /*事件处理代码书写位置*/ - this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+headName}}); + this.router.navigate(["/statisticanalysis/delete_one/delete_four"], { + queryParams: { level: this.option.xAxis.data[xIndex] + headName }, + }); } }); /* this.zhutu.on('click', (params) => { @@ -215,37 +277,50 @@ export class DeleteThereComponent implements OnInit { this.zhutu.setOption(this.option); } - /* 鼠标悬停提示 */ - tableTooltip2(biaotou:string){ - var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄浦中队","number":"144","zhanbi":"2.8%"},' - shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},' - shuju+='{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},' - shuju+='{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},' - shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},' - shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]' - var jsonObj = JSON.parse(shuju); - var res = '
'+biaotou+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - //var res='
'+biaotou+'
' - for(var i=0;i' - res+='
' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
' - return res - } + /* 鼠标悬停提示 */ + tableTooltip2(biaotou: string) { + var shuju = + '[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄浦中队","number":"144","zhanbi":"2.8%"},'; + shuju += + '{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},'; + shuju += + '{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},'; + shuju += + '{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},'; + shuju += + '{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},'; + shuju += + '{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]'; + var jsonObj = JSON.parse(shuju); + var res = + '
' + + biaotou + + "
"; + res += + '
'; + res += ''; + res += ''; + res += ''; + res += ''; + res += ""; + res += ""; + //var res='
'+biaotou+'
' + for (var i = 0; i < jsonObj.length; i++) { + res += "
"; + res += '"; + res += '"; + res += + '"; + } + res += ""; + res += + ''; + res += "
名称数量总占比
' + jsonObj[i].name + "' + jsonObj[i].number + "' + jsonObj[i].zhanbi + "
总计135619%
"; + return res; + } } diff --git a/src/app/statistic-analysis/deleteUnit/delete-two-newadd/delete-two-newadd.component.ts b/src/app/statistic-analysis/deleteUnit/delete-two-newadd/delete-two-newadd.component.ts index d985980..7f3f0b0 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two-newadd/delete-two-newadd.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-two-newadd/delete-two-newadd.component.ts @@ -1,227 +1,311 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import { ActivatedRoute } from '@angular/router'; -import { EchartsDataService } from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from "@angular/material/dialog"; +import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; +import { ActivatedRoute } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-delete-two-newadd', - templateUrl: './delete-two-newadd.component.html', - styleUrls: ['./delete-two-newadd.component.scss'] + selector: "app-delete-two-newadd", + templateUrl: "./delete-two-newadd.component.html", + styleUrls: ["./delete-two-newadd.component.scss"], }) export class DeleteTwoNewaddComponent implements OnInit { + constructor( + private router: Router, + public dialog: MatDialog, + public snackBar: MatSnackBar, + private serviceData: EchartsDataService, + public route: ActivatedRoute + ) {} - constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } - - year:String - buildingTypeName:String - level:String - setTimeoutObj//延时器需要清除 + year: String; + buildingTypeName: String; + level: String; + setTimeoutObj; //延时器需要清除 ngOnInit(): void { - this.dateInit () - this.bianli() - this.route.queryParams.subscribe(params => { - this.year = params['level']; - this.buildingTypeName = params['headtext']; + this.dateInit(); + this.bianli(); + this.route.queryParams.subscribe((params) => { + this.year = params["level"]; + this.buildingTypeName = params["headtext"]; + }); + this.setTimeoutObj = window.setTimeout(() => { + this.detailEcharts(); }); - this.setTimeoutObj = window.setTimeout(()=>{ - this.detailEcharts() - }) } - ngOnDestroy(){ + ngOnDestroy() { window.clearTimeout(this.setTimeoutObj); - this.detailPlanEchart.clear() - this.detailPlanEchart.dispose() + if (this.detailPlanEchart) { + this.detailPlanEchart.clear(); + this.detailPlanEchart.dispose(); + } } - selectType:string = 'month'; //选择当前的 查询类型 按月/年 + selectType: string = "month"; //选择当前的 查询类型 按月/年 //查询数据 - years:any = [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + 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) + dateInit() { + let date = new Date().getFullYear(); + for (let i = date; i >= date - 10; i--) { + this.years.unshift(i); } } - selectOneYear:any = (new Date()).getFullYear() //开始年份 - selectStartMonth:any = 1 //开始月份 - Submit (e) { - - } - selectStartYear:any = (new Date()).getFullYear() //开始年份 + selectOneYear: any = new Date().getFullYear(); //开始年份 + selectStartMonth: any = 1; //开始月份 + Submit(e) {} + selectStartYear: any = new Date().getFullYear(); //开始年份 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 - zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] - zhongNumData = [0,0,0,0,0,0,0,0,0,0,0] + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 + zhongNameData = [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + ]; + zhongNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] - zhiNumData = [0,0,0,0,0,0,0,0,0,0,0] - tiaoshiPao:any + zhiNameData = [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + ]; + zhiNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i{ - if(params[0].seriesName == "year"){ - return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) - }else{ - return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + trigger: "axis", + formatter: (params) => { + if (params[0].seriesName == "year") { + return this.serviceData.tableTooltip( + this.serviceData.monthTooltip, + params[0].name + ); + } else { + return this.serviceData.tableTooltip( + this.serviceData.tableDataZhi, + params[0].name + ); } }, - position:this.serviceData.tableTooltipNoShow2 + position: this.serviceData.tableTooltipNoShow2, }, // x轴 xAxis: { - type: 'category', + type: "category", data: this.date, axisLabel: { color: "#000", //刻度线标签颜色 - textStyle:{ - fontSize :18, - color:'#000000' - } + textStyle: { + fontSize: 18, + color: "#000000", + }, }, //设置坐标轴字体颜色和宽度 - axisLine: { + axisLine: { lineStyle: { color: "#000", }, }, - splitLine: {//分割线配置 - show:true, + splitLine: { + //分割线配置 + show: true, lineStyle: { - color: '#999', - } - } + color: "#999", + }, + }, }, // y轴 yAxis: { - type: 'value', - name: '个', + type: "value", + name: "个", axisLabel: { //color: "#000", //刻度线标签颜色 - textStyle:{ - fontSize :18, - color:'#000000' - } + textStyle: { + fontSize: 18, + color: "#000000", + }, }, - //设置坐标轴字体颜色和宽度 - axisLine: { + //设置坐标轴字体颜色和宽度 + axisLine: { lineStyle: { color: "#000", - } - } + }, + }, }, // 数据 - series: [{ - name: 'xxx', - type: 'line', + series: [ + { + name: "xxx", + type: "line", markPoint: { - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, data: this.dateNum, - } + }, ], }; this.detailPlanEchart.setOption(this.option); - this.detailPlanEchart.getZr().on('click',params=>{ - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { - let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + this.detailPlanEchart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel("grid", pointInPixel)) { + let xIndex = this.detailPlanEchart.convertFromPixel( + { seriesIndex: 0 }, + [params.offsetX, params.offsetY] + )[0]; /*事件处理代码书写位置*/ - if(this.serviceData.level=='0'){ - this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1'}}); - }else if(this.serviceData.level=='1'){ - this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+this.buildingTypeName}}); + if (this.serviceData.level == "0") { + this.router.navigate(["/statisticanalysis/delete_one/delete_there"], { + queryParams: { + level: this.option.xAxis.data[xIndex], + headtext: this.buildingTypeName, + zhong: "1", + }, + }); + } else if (this.serviceData.level == "1") { + this.router.navigate(["/statisticanalysis/delete_one/delete_four"], { + queryParams: { + level: this.option.xAxis.data[xIndex] + this.buildingTypeName, + }, + }); } - } }); } //返回按钮 - backBtn(){ - window.history.go(-1) - } - - tableTooltip(params:any){ - var data = [ - {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} - ] - var res = '
'+params.name+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - // res+='' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' - return res + backBtn() { + window.history.go(-1); } + tableTooltip(params: any) { + var data = [ + { + name: params.name, + number: params.value, + zhanbi: ((params.value / 1340) * 100).toFixed(2) + "%", + }, + ]; + var res = + '
' + + params.name + + "
"; + res += + '
'; + res += ''; + res += ''; + res += ''; + res += ''; + res += ""; + res += ""; + for (var i = 0; i < data.length; i++) { + res += ""; + res += '"; + res += '"; + res += '"; + } + + res += ""; + // res+='' + res += "
名称数量总占比
' + data[i].name + "' + data[i].number + "' + data[i].zhanbi + "
总计135619%
"; + return res; + } } diff --git a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts index e4926e1..f8983cc 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts @@ -1,123 +1,209 @@ /* - * @Descripttion: - * @version: + * @Descripttion: + * @version: * @Author: sueRimn * @Date: 2020-09-02 16:21:18 * @LastEditors: sueRimn * @LastEditTime: 2021-06-24 15:27:13 */ -import { Component, OnInit, ViewChild } from '@angular/core'; -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'; -import {EchartsDataService,} from '../../echarts-data.service' +import { Component, OnInit, ViewChild } from "@angular/core"; +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"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-delete-two', - templateUrl: './delete-two.component.html', - styleUrls: ['./delete-two.component.scss'] + selector: "app-delete-two", + templateUrl: "./delete-two.component.html", + styleUrls: ["./delete-two.component.scss"], }) export class DeleteTwoComponent implements OnInit { - options:any; - datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月']; - datayuey=[0, 0, 0, 0, 0, 0, 0,0,0]; - datanianx=[2020,2021]; - dataniany=[0,0] - tiaoshiPao:any//气泡 + options: any; + datayuex = [ + "一月", + "二月", + "三月", + "四月", + "五月", + "六月", + "七月", + "八月", + "九月", + ]; + datayuey = [0, 0, 0, 0, 0, 0, 0, 0, 0]; + datanianx = [2020, 2021]; + dataniany = [0, 0]; + tiaoshiPao: any; //气泡 - constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService, private route: ActivatedRoute) { } + constructor( + private router: Router, + public snackBar: MatSnackBar, + private adapter: DateAdapter, + public echartsData: EchartsDataService, + private route: ActivatedRoute + ) {} /* @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 */ ngOnInit(): void { - this.echartsData.statefulInspectionToggle=true - this.dateInit() - this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) + this.echartsData.statefulInspectionToggle = true; + this.dateInit(); + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.datayuey, + this.datayuex + ); //this.bianli() - window.setTimeout(()=>{ - this.getechartsdata() - },0) + window.setTimeout(() => { + this.getechartsdata(); + }, 0); } - ngOnDestroy():void{ - this.headZx.clear() - this.headZx.dispose() + ngOnDestroy(): void { + if (this.headZx) { + this.headZx.clear(); + this.headZx.dispose(); + } } - selectType:string = 'month'; //选择当前的 查询类型 按月/年 - headZx//echarts实例 + selectType: string = "month"; //选择当前的 查询类型 按月/年 + headZx; //echarts实例 + + zhiNameData = [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + "松江支队", + "金山支队", + "崇明支队", + ]; + zhiNumData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] - zhiNumData = [0,0,0,0,0,0,0,0,0,0,0,0,0,0] - - //查询数据 - years:any = [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + 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) + dateInit() { + let date = new Date().getFullYear(); + for (let i = date; i >= date - 10; i--) { + 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 //结束月份 + 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) + 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); } //按月查询 - monthSubmit (e) { - this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey) + monthSubmit(e) { + this.headZhexian("Line", "删除数量总统计", 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 + 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) } 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 + 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) } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请选择正确时间区段','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请选择正确时间区段", "确定", config); } - }else { + } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请选择正确时间区段','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请选择正确时间区段", "确定", config); } } - - - selectStartYear:any = (new Date()).getFullYear() //开始年份 - selectEndYear:any = (new Date()).getFullYear() //结束年份 + selectStartYear: any = new Date().getFullYear(); //开始年份 + 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) + 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); } //按年查询 - yearSubmit (e) { + yearSubmit(e) { //console.log(this.selectType) - this.headZhexian('Line','删除数量总统计',this.datanianx,this.dataniany) + 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) @@ -127,215 +213,288 @@ export class DeleteTwoComponent implements OnInit { this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany) this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) */ if (e.selectEndYear >= e.selectStartYear) { - let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 - let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 + let startTime = + e.selectStartYear + "-" + 1 + "-" + 1 + " " + 0 + ":" + 0 + ":" + 0; + let endTime = + e.selectEndYear + "-" + 12 + "-" + 31 + " " + 23 + ":" + 59 + ":" + 59; } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请选择正确时间区段','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请选择正确时间区段", "确定", config); } } //支队查询 - zhiFind(){ - this.echartsData.dezhiorBuinding="zhi" + zhiFind() { + this.echartsData.dezhiorBuinding = "zhi"; } //建筑类型查询 - buildingFind(){ - this.echartsData.dezhiorBuinding="building" + buildingFind() { + this.echartsData.dezhiorBuinding = "building"; } //返回 - goBack(){ - history.go(-1) + 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, + 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) + }; + 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: 折线图 * @test: test font - * @msg: - * @param {divid(传入的div),headtext(标题)} - * @return {type} - */ - headZhexian(divid:string,headtext:string,datayuex,datayuey){ - var dianji:boolean=headtext=="删除数量总统计" ? false:true; - var divsiaze={contentSize: [350, 496], viewSize: [831, 380]} - var pagex - var pagey - var boxsize=[pagex,pagey] + * @msg: + * @param {divid(传入的div),headtext(标题)} + * @return {type} + */ + headZhexian(divid: string, headtext: string, datayuex, datayuey) { + var dianji: boolean = headtext == "删除数量总统计" ? false : true; + var divsiaze = { contentSize: [350, 496], viewSize: [831, 380] }; + var pagex; + var pagey; + var boxsize = [pagex, pagey]; /* document.onmouseover=function(e){ console.log("000") pagex=e.pageX pagey=e.pageY } */ var ec = echarts as any; - this.headZx = ec.init(document.getElementById(`${divid}`),'skinUpp'); + this.headZx = ec.init(document.getElementById(`${divid}`), "skinUpp"); this.options = { grid: { top: 50, - left:40, + left: 40, right: 20, bottom: 20, }, // 标题 title: { - text: `${headtext}`+`:总数（${this.tabledata[0].totalCount}）`, - left:'center', + text: `${headtext}` + `:总数（${this.tabledata[0].totalCount}）`, + left: "center", top: -4, //副标题文本样式 - 　subtextStyle:{ - color:'#999', - fontWeight:'bold', - }, - textStyle:{ + subtextStyle: { + color: "#999", + fontWeight: "bold", + }, + textStyle: { //文字颜色 - color:'#000', - fontSize:divid=='Line'?30: 22, - } + color: "#000", + fontSize: divid == "Line" ? 30 : 22, + }, }, //提示框 tooltip: { - trigger: 'axis', - formatter: (params)=>{ - return this.echartsData.dezhiorBuinding=="zhi"?this.echartsData.tableTooltip(this.echartsData.tableDataZhi,`${headtext}`):this.echartsData.tableTooltip(this.echartsData.buildingType,`${headtext}`) + trigger: "axis", + formatter: (params) => { + return this.echartsData.dezhiorBuinding == "zhi" + ? this.echartsData.tableTooltip( + this.echartsData.tableDataZhi, + `${headtext}` + ) + : this.echartsData.tableTooltip( + this.echartsData.buildingType, + `${headtext}` + ); }, /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', borderRadius :'0', */ - position: this.echartsData.tableTooltipNoShow2 + position: this.echartsData.tableTooltipNoShow2, }, xAxis: { - type: 'category', - boundaryGap:true, - data: datayuex, - axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' - }, - color: "#000", //刻度线标签颜色 + type: "category", + boundaryGap: true, + data: datayuex, + axisLabel: { + textStyle: { + fontSize: 15, + color: "#000000", }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: { - color: "#000", - }, + color: "#000", //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", }, - splitLine: {//分割线配置 - show:true, - lineStyle: { - color: '#999', - } - } + }, + splitLine: { + //分割线配置 + show: true, + lineStyle: { + color: "#999", + }, + }, }, yAxis: { - type: 'value', - axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' - }, - color: "#000" //刻度线标签颜色 + type: "value", + axisLabel: { + textStyle: { + fontSize: 15, + color: "#000000", }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: { - color: "#000", - } - } + color: "#000", //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + }, + }, }, - series: [{ + series: [ + { data: datayuey, - type: 'line', + type: "line", markPoint: { - symbolSize:[65, 65], - data: this.tiaoshiPao + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, + clickable: false, }, - clickable:false, - }] + ], }; - this.headZx.getZr().on('click', (params) => { + this.headZx.getZr().on("click", (params) => { // console.log(params.name) - /* this.echartsData.statefulInspectionName =params.name+headtext; + /* this.echartsData.statefulInspectionName =params.name+headtext; this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */ - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.headZx.containPixel('grid',pointInPixel)) { - let xIndex=this.headZx.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; - if(this.options.xAxis.data[xIndex]=='2019'||this.options.xAxis.data[xIndex]=='2020'){ - this.router.navigate(['/statisticanalysis/delete_thereLineDetails'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}}); + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.headZx.containPixel("grid", pointInPixel)) { + let xIndex = this.headZx.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; + if ( + this.options.xAxis.data[xIndex] == "2019" || + this.options.xAxis.data[xIndex] == "2020" + ) { + this.router.navigate(["/statisticanalysis/delete_thereLineDetails"], { + queryParams: { + level: this.options.xAxis.data[xIndex], + headtext: headtext, + }, + }); //this.router.navigate(['/statisticanalysis/delete_two_newadd'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}}); - }else{ + } else { /*事件处理代码书写位置*/ //this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}}); - if(this.echartsData.dezhiorBuinding=="zhi"){ - if(this.echartsData.level=='0'){ - this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}}); - }else if(this.echartsData.level=='1'){ - this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.options.xAxis.data[xIndex]+headtext}}); + if (this.echartsData.dezhiorBuinding == "zhi") { + if (this.echartsData.level == "0") { + this.router.navigate( + ["/statisticanalysis/delete_one/delete_there"], + { + queryParams: { + level: this.options.xAxis.data[xIndex], + headtext: headtext, + }, + } + ); + } else if (this.echartsData.level == "1") { + this.router.navigate( + ["/statisticanalysis/delete_one/delete_four"], + { + queryParams: { + level: this.options.xAxis.data[xIndex] + headtext, + }, + } + ); } - - }else{ - this.router.navigate(['/statisticanalysis/delete_two_newadd'],{queryParams:{'level':this.options.xAxis.data[xIndex],'headtext':headtext}}); + } else { + this.router.navigate(["/statisticanalysis/delete_two_newadd"], { + queryParams: { + level: this.options.xAxis.data[xIndex], + headtext: headtext, + }, + }); } - } - } - }); this.headZx.setOption(this.options); } /** * @name: 表格提示框封装 * @test: test font - * @msg: + * @msg: * @param {string(表头)} - * @return {type} + * @return {type} */ - biaogeTishi(biaotou:string){ - var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' - shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' - shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' - shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' - shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' - shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' - var jsonObj = JSON.parse(shuju); - var res = '
'+biaotou+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
' - return res + biaogeTishi(biaotou: string) { + var shuju = + '[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'; + shuju += + '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'; + shuju += + '{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'; + shuju += + '{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'; + shuju += + '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'; + shuju += + '{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'; + var jsonObj = JSON.parse(shuju); + var res = + '
' + + biaotou + + "
"; + res += + '
'; + res += ""; + res += + ''; + res += + ''; + res += + ''; + res += ""; + res += ""; + for (var i = 0; i < jsonObj.length; i++) { + res += ""; + res += + '"; + res += + '"; + res += + '"; + } + + res += ""; + res += + ''; + res += "
名称数量总占比
' + + jsonObj[i].name + + "' + + jsonObj[i].number + + "' + + jsonObj[i].zhanbi + + "
总计135619%
"; + return res; } - } diff --git a/src/app/statistic-analysis/home/home.component.ts b/src/app/statistic-analysis/home/home.component.ts index 235927e..3b76421 100644 --- a/src/app/statistic-analysis/home/home.component.ts +++ b/src/app/statistic-analysis/home/home.component.ts @@ -102,12 +102,7 @@ export class HomeComponent implements OnInit { } ngOnDestroy(): void { - /* this.planState.clear() - this.planState.dispose() - this.chartDwsjcj.clear() - this.chartDwsjcj.dispose() - this.chartZdgzqy.clear() - this.chartZdgzqy.dispose() */ + } //初始化地图 diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts index 979df59..be38f23 100644 --- a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts +++ b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts @@ -1,39 +1,47 @@ /* - * @Descripttion: - * @version: + * @Descripttion: + * @version: * @Author: sueRimn * @Date: 2021-05-08 09:42:43 * @LastEditors: sueRimn * @LastEditTime: 2021-05-19 14:46:30 */ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; //import {Foimport { FormGroup, FormControl } from '@angular/forms'; -import { EchartsDataService } from '../echarts-data.service'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; +import { EchartsDataService } from "../echarts-data.service"; +import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; +import { + DateAdapter, + MAT_DATE_FORMATS, + MAT_DATE_LOCALE, +} from "@angular/material/core"; declare var echarts: any; @Component({ - selector: 'app-real-monitoring', - templateUrl: './real-monitoring.component.html', - styleUrls: ['./real-monitoring.component.scss'], - + selector: "app-real-monitoring", + templateUrl: "./real-monitoring.component.html", + styleUrls: ["./real-monitoring.component.scss"], }) export class RealMonitoringComponent implements OnInit { - /* campaignOne: FormGroup; campaignTwo: FormGroup; */ - constructor(private router: Router, public EchartsData: EchartsDataService, private route: ActivatedRoute, public snackBar: MatSnackBar) { } + constructor( + private router: Router, + public EchartsData: EchartsDataService, + private route: ActivatedRoute, + public snackBar: MatSnackBar + ) {} - addtime = String(new Date().getFullYear()) + '-01'//添加时间 - endtime = String(new Date().getFullYear()) + '-0' + String(new Date().getMonth() + 1) + addtime = String(new Date().getFullYear()) + "-01"; //添加时间 + endtime = + String(new Date().getFullYear()) + "-0" + String(new Date().getMonth() + 1); /* addtime=String(new Date().getFullYear()+new Date().getMonth()) endtime=String(new Date().getFullYear()+new Date().getMonth()) */ ngOnInit(): void { window.setTimeout(() => { - this.getechartsdata(true) - }, 0) + this.getechartsdata(true); + }, 0); } //获取echarts数据 async getechartsdata(chushi: boolean) { @@ -60,162 +68,178 @@ export class RealMonitoringComponent implements OnInit { }); } */ - for (var i = Number(this.addtime.split('-')[0]); i <= Number(this.endtime.split('-')[0]); i++) { + for ( + var i = Number(this.addtime.split("-")[0]); + i <= Number(this.endtime.split("-")[0]); + i++ + ) { let paramdataleft = { objectType: 3, - TrendYear: i - } + TrendYear: i, + }; //获取左侧柱状图的数据 - await this.EchartsData.getData(paramdataleft, '/api/StatisticsAnalysis/Trends') - this.leftzhuTable = JSON.parse(JSON.stringify(this.EchartsData.allDate)) + await this.EchartsData.getData( + paramdataleft, + "/api/StatisticsAnalysis/Trends" + ); + this.leftzhuTable = JSON.parse(JSON.stringify(this.EchartsData.allDate)); //console.log(this.leftzhuTable) this.leftzhuTable[0].forEach((value, index, array) => { - if (this.addtime.split('-')[0] != this.endtime.split('-')[0]) { - if ((array[index].year == Number(this.addtime.split('-')[0]) && array[index].month >= Number(this.addtime.split('-')[1])) || (array[index].year == Number(this.endtime.split('-')[0]) && array[index].month <= Number(this.endtime.split('-')[1]))) { - this.dateNum.push(array[index].count) - this.dateyue.push(array[index].year + '-' + array[index].month) + if (this.addtime.split("-")[0] != this.endtime.split("-")[0]) { + if ( + (array[index].year == Number(this.addtime.split("-")[0]) && + array[index].month >= Number(this.addtime.split("-")[1])) || + (array[index].year == Number(this.endtime.split("-")[0]) && + array[index].month <= Number(this.endtime.split("-")[1])) + ) { + this.dateNum.push(array[index].count); + this.dateyue.push(array[index].year + "-" + array[index].month); } } else { - if (array[index].month >= this.addtime.split('-')[1] && array[index].month <= this.endtime.split('-')[1]) { - this.dateNum.push(array[index].count) - this.dateyue.push(array[index].year + '-' + array[index].month) + if ( + array[index].month >= this.addtime.split("-")[1] && + array[index].month <= this.endtime.split("-")[1] + ) { + this.dateNum.push(array[index].count); + this.dateyue.push(array[index].year + "-" + array[index].month); } } - }); } //获取底端柱状图数据 let paramBottom = { - TimeIntervalStart: this.addtime == '0' ? '' : this.endtime, - TimeIntervalEnd: this.endtime == '0' ? '' : this.endtime - } + TimeIntervalStart: this.addtime == "0" ? "" : this.endtime, + TimeIntervalEnd: this.endtime == "0" ? "" : this.endtime, + }; if (chushi) { - await this.EchartsData.getData(paramBottom, '/api/StatisticsAnalysis/Plans/AuditApproved/Organizations') - this.bottomTable = JSON.parse(JSON.stringify(this.EchartsData.allDate)) - this.addNum = this.bottomTable[0].totalCount + await this.EchartsData.getData( + paramBottom, + "/api/StatisticsAnalysis/Plans/AuditApproved/Organizations" + ); + this.bottomTable = JSON.parse(JSON.stringify(this.EchartsData.allDate)); + this.addNum = this.bottomTable[0].totalCount; this.bottomTable[0].organizations.forEach((value, index, array) => { - this.zhiNameData.push(array[index].organizationName) - this.zhiNumData.push(array[index].count) + this.zhiNameData.push(array[index].organizationName); + this.zhiNumData.push(array[index].count); if (index > 0 && index < 4) { - this.addyuan.push(array[index].organizationName) + this.addyuan.push(array[index].organizationName); } - }); - this.bottomzhutu() + this.bottomzhutu(); } //右侧饼状图数据 let param = { - TimeIntervalStart: this.addtime == '0' ? '' : this.addtime, - TimeIntervalEnd: this.endtime == '0' ? '' : this.endtime - } - await this.EchartsData.getData(param, '/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes') - this.rightbTable = JSON.parse(JSON.stringify(this.EchartsData.allDate)) - console.log(this.rightbTable) - this.rightbTable[0].planTypeStatistics.planTypes.forEach((value,index,array) => { - if(array[index].planTypeName=='Plan2D'){ - this.indexData.push({name:'二维预案',value:array[index].count}) - }else if(array[index].planTypeName=='Plan3D'){ - //array[index].planTypeName=='三维预案' - this.indexData.push({name:'三维预案',value:array[index].count}) - }else if(array[index].planTypeName=='Other'){ - //array[index].planTypeName=='其他预案' - this.indexData.push({name:'其他预案',value:array[index].count}) - }else if(array[index].planTypeName=='PlanText'){ - //array[index].planTypeName=='文本预案' - this.indexData.push({name:'文本预案',value:array[index].count}) + TimeIntervalStart: this.addtime == "0" ? "" : this.addtime, + TimeIntervalEnd: this.endtime == "0" ? "" : this.endtime, + }; + await this.EchartsData.getData( + param, + "/api/StatisticsAnalysis/Plans/AuditApproved/PlanTypes" + ); + this.rightbTable = JSON.parse(JSON.stringify(this.EchartsData.allDate)); + console.log(this.rightbTable); + this.rightbTable[0].planTypeStatistics.planTypes.forEach( + (value, index, array) => { + if (array[index].planTypeName == "Plan2D") { + this.indexData.push({ name: "二维预案", value: array[index].count }); + } else if (array[index].planTypeName == "Plan3D") { + //array[index].planTypeName=='三维预案' + this.indexData.push({ name: "三维预案", value: array[index].count }); + } else if (array[index].planTypeName == "Other") { + //array[index].planTypeName=='其他预案' + this.indexData.push({ name: "其他预案", value: array[index].count }); + } else if (array[index].planTypeName == "PlanText") { + //array[index].planTypeName=='文本预案' + this.indexData.push({ name: "文本预案", value: array[index].count }); + } } - }); - console.log(this.indexData) - this.leftzhuzhuangtu() - this.rightbingtu() - + ); + console.log(this.indexData); + this.leftzhuzhuangtu(); + this.rightbingtu(); } //查询按钮 findClick() { - console.log(this.addtime, this.endtime) + console.log(this.addtime, this.endtime); const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - if (this.addtime == '0' || this.endtime == '0') { - this.snackBar.open('结束时间或者开始时间不能为空!', '确定', config); + config.verticalPosition = "top"; + config.duration = 3000; + if (this.addtime == "0" || this.endtime == "0") { + this.snackBar.open("结束时间或者开始时间不能为空!", "确定", config); } else { if (this.endtime < this.addtime) { - this.snackBar.open('结束时间不能大于开始时间!', '确定', config); + this.snackBar.open("结束时间不能大于开始时间!", "确定", config); } else { - this.leftzhutu.clear() - this.leftzhutu.dispose() - this.dateyue = [] - this.dateNum = [] + if (this.leftzhutu) { + this.leftzhutu.clear(); + this.leftzhutu.dispose(); + } + + this.dateyue = []; + this.dateNum = []; //this.zhiNameData = [] //this.zhiNumData = [] //this.addyuan = [] - this.getechartsdata(false) + this.getechartsdata(false); } } - } - addNum = 0//新增预案个数 - addyuan = [] - leftzhuTable//左侧柱状图数据 - rightbTable//右侧饼图数据 - bottomTable//最低端柱状图数据 - leftzhutu - optionLeftzhu//中间左侧柱状图实例 - dateyue = [] - dateNum = [] - zhiNameData = [] - zhiNumData = [] - rightbing - optionRightbing//中间右侧柱状图 - bottomzhu//底部柱状图实例 - bottomZhuoption - tiaoshiPao: any + addNum = 0; //新增预案个数 + addyuan = []; + leftzhuTable; //左侧柱状图数据 + rightbTable; //右侧饼图数据 + bottomTable; //最低端柱状图数据 + leftzhutu; + optionLeftzhu; //中间左侧柱状图实例 + dateyue = []; + dateNum = []; + zhiNameData = []; + zhiNumData = []; + rightbing; + optionRightbing; //中间右侧柱状图 + bottomzhu; //底部柱状图实例 + bottomZhuoption; + tiaoshiPao: any; //中间左侧柱状图 async leftzhuzhuangtu() { var ec = echarts as any; - this.leftzhutu = ec.init(document.getElementById(`leftecharts`), 'walden'); + this.leftzhutu = ec.init(document.getElementById(`leftecharts`), "walden"); this.optionLeftzhu = { grid: { //top: 10, containLabel: true, bottom: 10, - left: 50 + left: 50, }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'none' - } + type: "none", + }, }, xAxis: { - type: 'category', - data: this.dateyue, - //axisLabel: this.axisLabel, - axisLabel:{ - //this.axisLabel, - textStyle:{ - fontSize :14, - color:'#000000' - } - - } - - + type: "category", + data: this.dateyue, + //axisLabel: this.axisLabel, + axisLabel: { + //this.axisLabel, + textStyle: { + fontSize: 14, + color: "#000000", + }, + }, }, yAxis: { - type: 'value', - axisLabel:{ - textStyle:{ - fontSize :14, - color:'#000000' - } - - } - - + type: "value", + axisLabel: { + textStyle: { + fontSize: 14, + color: "#000000", + }, + }, }, /* tooltip: { trigger: 'item', @@ -226,24 +250,30 @@ export class RealMonitoringComponent implements OnInit { }, */ dataZoom: [ { - type: 'slider', - bottom:2 - } - ], - series: [{ - name: '数量', - data: this.dateNum, - type: 'bar', - markPoint: { - symbolSize: [65, 65], - data: this.EchartsData.qipao(this.tiaoshiPao, this.dateNum, this.dateyue) + type: "slider", + bottom: 2, }, - backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + ], + series: [ + { + name: "数量", + data: this.dateNum, + type: "bar", + markPoint: { + symbolSize: [65, 65], + data: this.EchartsData.qipao( + this.tiaoshiPao, + this.dateNum, + this.dateyue + ), + }, + backgroundStyle: { + color: "rgba(220, 220, 220, 0.8)", + }, + barWidth: "38", + //label: this.topTextlabel }, - barWidth: '38', - //label: this.topTextlabel - }] + ], }; this.leftzhutu.setOption(this.optionLeftzhu); /* this.leftzhutu.getZr().on('click', async (params)=>{ @@ -282,14 +312,15 @@ export class RealMonitoringComponent implements OnInit { }); */ - - } //中间右侧饼图 - indexData = []//所有数据 - lengthdata = ['二维预案', '三维预案', '文本预案', '其他预案'] + indexData = []; //所有数据 + lengthdata = ["二维预案", "三维预案", "文本预案", "其他预案"]; rightbingtu() { - this.rightbing = echarts.init(document.getElementById('rightecharts'), 'walden'); + this.rightbing = echarts.init( + document.getElementById("rightecharts"), + "walden" + ); this.optionRightbing = { /* title: { text: `建筑类型统计（${this.count}家）`, @@ -308,39 +339,39 @@ export class RealMonitoringComponent implements OnInit { } }, */ tooltip: { - trigger: 'item', + trigger: "item", axisPointer: { - type: 'shadow' - } + type: "shadow", + }, }, legend: { - orient: 'vertical', + orient: "vertical", //left:this.padHw?50:0, //right:this.padHw?20:250, top: 20, right: 30, textStyle: { fontSize: 16, - color: "#000000" + color: "#000000", }, - data: this.lengthdata + data: this.lengthdata, }, series: [ { - top: '0', - name: '预案类型', - type: 'pie', - radius: '60%', - center: ['50%', '53%'], + top: "0", + name: "预案类型", + type: "pie", + radius: "60%", + center: ["50%", "53%"], label: { show: true, fontSize: 16, - formatter: '{b}{c}家\n{d|({d}%)}', + formatter: "{b}{c}家\n{d|({d}%)}", rich: { d: { - align: 'center', - fontSize: 18 - } + align: "center", + fontSize: 18, + }, }, }, /* data: [ @@ -349,110 +380,116 @@ export class RealMonitoringComponent implements OnInit { { value: this.rightbTable[0].planTypeStatistics.planTypes[2] != undefined ? this.rightbTable[0].planTypeStatistics.planTypes[2].count : 0, name: '其他预案' }, { value: this.rightbTable[0].planTypeStatistics.planTypes[3] != undefined ? this.rightbTable[0].planTypeStatistics.planTypes[3].count : 0, name: '文本预案' } ], */ - data:this.indexData, + data: this.indexData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.rightbing.setOption(this.optionRightbing) + this.rightbing.setOption(this.optionRightbing); } //最底部柱状图 bottomzhutu() { var ec = echarts as any; - this.bottomzhu = ec.init(document.getElementById(`bottomEcharts`), 'walden'); + this.bottomzhu = ec.init( + document.getElementById(`bottomEcharts`), + "walden" + ); this.bottomZhuoption = { grid: { //top: 10, - containLabel:true, - bottom:2, - left:50 - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'none' - } + containLabel: true, + bottom: 2, + left: 50, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, }, xAxis: { - type: 'category', - data: this.zhiNameData, - //axisLabel: this.axisLabel, - axisLabel:{ - //this.axisLabel, - textStyle:{ - fontSize :14, - color:'#000000' - }, - interval: 0, - //rotate:38 - formatter:function(value){ - var ret = "";//拼接加\n返回的类目项 - var maxLength = 3;//每项显示文字个数 - 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 - } - - + type: "category", + data: this.zhiNameData, + //axisLabel: this.axisLabel, + axisLabel: { + //this.axisLabel, + textStyle: { + fontSize: 14, + color: "#000000", + }, + interval: 0, + //rotate:38 + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 3; //每项显示文字个数 + 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 + }, }, yAxis: { - type: 'value', - axisLabel:{ - textStyle:{ - fontSize :14, - color:'#000000' - } - - } + type: "value", + axisLabel: { + textStyle: { + fontSize: 14, + color: "#000000", + }, + }, }, dataZoom: [ { - type: 'slider', - bottom:90, + type: "slider", + bottom: 90, //backgroundColor:'rgba(47,69,84,-0.2)', - dataBackground:{ - areaStyle:{ - opacity:0 - } - } - } - ], - series: [{ - name: '数量', - data: this.zhiNumData, - type: 'bar', - markPoint: { - symbolSize: [65, 65], - data: this.EchartsData.qipao(this.tiaoshiPao, this.zhiNumData, this.zhiNameData) + dataBackground: { + areaStyle: { + opacity: 0, + }, + }, }, - - barWidth :'38', + ], + series: [ + { + name: "数量", + data: this.zhiNumData, + type: "bar", + markPoint: { + symbolSize: [65, 65], + data: this.EchartsData.qipao( + this.tiaoshiPao, + this.zhiNumData, + this.zhiNameData + ), + }, + + barWidth: "38", //label: this.topTextlabel - }] - }; - this.bottomzhu.setOption(this.bottomZhuoption); - /* this.bottomzhu.getZr().on('click',(params)=>{ + }, + ], + }; + this.bottomzhu.setOption(this.bottomZhuoption); + /* this.bottomzhu.getZr().on('click',(params)=>{ console.log(params) }) */ - } - } +} diff --git a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts index 4d5e122..e2d4e0f 100644 --- a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts +++ b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts @@ -1,168 +1,223 @@ -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'; +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'] + 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) { } + constructor( + private router: Router, + public snackBar: MatSnackBar, + public echartsData: EchartsDataService + ) {} ngOnInit(): void { - window.setTimeout(()=>{ - this.getechartsdata() - - }) + window.setTimeout(() => { + this.getechartsdata(); + }); } - ngOnDestroy () { - this.example.clear() - this.example.dispose() + ngOnDestroy() { + if (!this.example) { + return; + } + this.example.clear(); + this.example.dispose(); } - example:any; - buildingShow:boolean=false //控制查询条件的显隐 - selectedBtn="tu" //两个查询按钮颜色控制 - chaxun:string="" + example: any; + buildingShow: boolean = false; //控制查询条件的显隐 + selectedBtn = "tu"; //两个查询按钮颜色控制 + chaxun: string = ""; //图形查询点击事件 - tuClick(){ - this.buildingShow=false - this.selectedBtn="tu" + tuClick() { + this.buildingShow = false; + this.selectedBtn = "tu"; } //条件查询 - tiaojianClick(){ - this.buildingShow=true - this.selectedBtn="tiaojian" + tiaojianClick() { + this.buildingShow = true; + this.selectedBtn = "tiaojian"; } //查询按钮点击事件 - findClick(){ + 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 + 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") + 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={ + /* 首页饼状图 */ + 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}家）`, + text: + pieid == "pie" + ? `已维护统计（${this.tabledata1[0].totalCount}家）` + : `计划维护统计（${this.tabledata2[0].totalCount}家）`, top: "3%", - left: 'center', - textStyle:{ - fontSize:28 - } + left: "center", + textStyle: { + fontSize: 28, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.weihu(params.data) + 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 + position: this.echartsData.tableTooltipNoShow2, }, legend: { - orient: 'vertical', + orient: "vertical", right: 150, - top:80, + top: 80, // itemWidth:60, // itemHeight:25, - textStyle:{ - fontSize:18, - color:"#000000" - }, - data:pieid=="pie"? ['维护无需修改', '维护修改', '维护删除']:['未维护', '维护通过审核', '维护中'] + 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 - } + 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)' - } - } - - }] + 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.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 @@ -171,216 +226,312 @@ export class ScheduledUpdatesComponent implements OnInit { 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) + 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' + dwOryuan = "danwei"; //点击单位按钮 - danweiClick(){ - this.dwOryuan='danwei' - this.example.clear() - this.example.dispose() - this.getechartsdata() + danweiClick() { + this.dwOryuan = "danwei"; + this.getechartsdata(); + if (this.example) { + this.example.clear(); + this.example.dispose(); + } } //点击预案按钮 - yuanClick(){ - this.dwOryuan='yuan' - this.example.clear() - this.example.dispose() - this.getechartsdata() + yuanClick() { + this.dwOryuan = "yuan"; + if (this.example) { + 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 + 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.res+='
'; - this.res+=''; - this.res+=''; - this.res+='' - this.res+='' - this.res+='' - this.res+=''; - for(var i=0;i' - this.res+='' - this.res+='' - } - this.res+='' - this.res+='' - this.res+='
名称数量总占比
'+this.tishiData[i].count+''+countbi+'%
总计'+countall+'100%
' - return this.res - - } + 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 = + '
' + + datas.name + + "
"; + this.res += + '
'; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ""; + this.res += ""; + for (var i = 0; i < this.tishiData.length; i++) { + countbi = + Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; + allCountbi = allCountbi + countbi; + this.res += ""; + this.res += + '"; + this.res += + '"; + this.res += '"; + } + this.res += ""; + this.res += + ''; + this.res += "
名称数量总占比
' + + this.tishiData[i].organizationName + + "' + this.tishiData[i].count + "' + countbi + "%
总计' + + countall + + '100%
"; + return this.res; + } } //首页条件查询 @Component({ - selector: 'app-indexCondition', - templateUrl: './indexCondition.html', - styleUrls: ['../state/page-two-time/page-two-time.component.scss'] + 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) { } + constructor( + public router: ActivatedRoute, + public echartsData: EchartsDataService, + public route: Router + ) {} ngOnInit(): void { - window.setTimeout(()=>{ - - },0) + window.setTimeout(() => {}, 0); } - ngOnDestroy () { + ngOnDestroy() { /* this.oneEcharts.dispose() this.oneEcharts.clear() */ } - oneEcharts:any; - displayedColumns: string[] = ['name', 'weight', 'symbol']; + oneEcharts: any; + displayedColumns: string[] = ["name", "weight", "symbol"]; //点击支队名称跳转事件 - zhiClick(item){ - this.route.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':item+this.echartsData.buildingName}}); + 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'] + 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; //父组件中获得子组件的引用 + 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() + this.dateInit(); } - isToggle:boolean = true; // 已核查/未核查 - selectType:string = 'year'; //选择当前的 查询类型 按月/年 + isToggle: boolean = true; // 已核查/未核查 + selectType: string = "year"; //选择当前的 查询类型 按月/年 //查询数据 - years:any = [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + 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) + dateInit() { + let date = new Date().getFullYear(); + for (let i = date; i >= date - 10; i--) { + this.years.unshift(i); } } - selectOneYear:any = (new Date()).getFullYear()-2 //开始年份 - selectTwoYear:any = (new Date()).getFullYear() //结束年份 - selectStartMonth:any = 1 //开始月份 - selectEndMonth:any = (new Date()).getMonth()+2 //结束月份 + selectOneYear: any = new Date().getFullYear() - 2; //开始年份 + selectTwoYear: any = new Date().getFullYear(); //结束年份 + selectStartMonth: any = 1; //开始月份 + selectEndMonth: any = new Date().getMonth() + 2; //结束月份 //点击月或年 - changeTime(e){ - console.log(e) - //this.echartsData.selectType=0 - this.verifieds.changeTime(e.value,this.selectOneYear,this.selectStartMonth,this.selectTwoYear,this.selectEndMonth) + 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) + 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) + 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 + 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) + 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); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请选择正确时间区段", "确定", config); } - }else { + } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请选择正确时间区段','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请选择正确时间区段", "确定", config); } } - selectStartYear:any = (new Date()).getFullYear()-2 //开始年份 - selectEndYear:any = (new Date()).getFullYear() //结束年份 - + selectStartYear: any = new Date().getFullYear() - 2; //开始年份 + selectEndYear: any = new Date().getFullYear(); //结束年份 + //按年查询 - yearSubmit (e) { - console.log(e) + yearSubmit(e) { + console.log(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) + 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); + 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 + 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 + notVerified() { + this.isToggle = false; //this.echartsData.scheduledUpdatesToggle = "three" - this.echartsData.scheduledUpdatesToggle =1 - this.echartsData.findShow=false + this.echartsData.scheduledUpdatesToggle = 1; + this.echartsData.findShow = false; } //返回 - goBack () { + goBack() { /* if(this.echartsData.scheduledUpdatesToggle==1||this.echartsData.scheduledUpdatesToggle==-3){ this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); }else{ @@ -390,174 +541,270 @@ export class publicEchartsComponent implements OnInit { //this.router.navigateByUrl('/statisticanalysis/scheduledUpdates'); } } */ - if(this.verifieds.pieid=='pie'&& this.echartsData.scheduledUpdatesToggle>1){ - this.echartsData.scheduledUpdatesToggle-- - }else{ - 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 () { + 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-2+"-"+'01','1',this.echartsData.dateYear+'-'+'12','12') + zhiFind() { + if (this.verifieds.oneEcharts) { + this.verifieds.oneEcharts.clear(); + this.verifieds.oneEcharts.dispose(); + } + + this.echartsData.zhiorBuinding = "zhi"; + this.verifieds.getechartsdata( + this.echartsData.dateYear - 2 + "-" + "01", + "1", + this.echartsData.dateYear + "-" + "12", + "12" + ); } //建筑类型查询 - buildingFind(){ - this.verifieds.oneEcharts.clear() - this.verifieds.oneEcharts.dispose() - this.echartsData.zhiorBuinding="building" - this.verifieds.getechartsdata(this.echartsData.dateYear-2+"-"+'01','1',this.echartsData.dateYear+'-'+'12','12') + buildingFind() { + if (this.verifieds.oneEcharts) { + this.verifieds.oneEcharts.clear(); + this.verifieds.oneEcharts.dispose(); + } + this.echartsData.zhiorBuinding = "building"; + this.verifieds.getechartsdata( + this.echartsData.dateYear - 2 + "-" + "01", + "1", + this.echartsData.dateYear + "-" + "12", + "12" + ); } - - - } - - //已核查组件 @Component({ - selector: 'app-verified', - templateUrl: './verified.html', - styleUrls: ['../state/page-two-time/page-two-time.component.scss'] + 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) { } + 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-2+"-"+'01','1',this.echartsData.dateYear+'-'+'12','12') + window.setTimeout(() => { + if (this.echartsData.scheduledUpdatesToggle == 1) { + this.getechartsdata( + this.echartsData.dateYear - 2 + "-" + "01", + "1", + this.echartsData.dateYear + "-" + "12", + "12" + ); } - - },0) - console.log(this.echartsData.scheduledUpdatesToggle) - this.pieid=this.route.snapshot.queryParams.pieid - this.typelast=this.route.snapshot.queryParams.type + }, 0); + console.log(this.echartsData.scheduledUpdatesToggle); + this.pieid = this.route.snapshot.queryParams.pieid; + this.typelast = this.route.snapshot.queryParams.type; } - typelast + typelast; - ngOnDestroy () { + ngOnDestroy() { //this.oneEcharts.dispose() //this.oneEcharts.clear() } - pieid=this.route.snapshot.queryParams.pieid + 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) + async changeTime( + e, + selectOneYear, + nselectStartMoth, + selectTwoYear, + selectEndMonth + ) { + if (this.oneEcharts) { + 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'] + 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==1?selectStartYear:this.echartsData.dateYear+'-'+'01', - TimeEnd:this.echartsData.TimeType==1?selectEndYear:this.echartsData.dateYear+'-'+'12', + tabledata; + async getechartsdata( + selectStartYear, + selectStartMonth, + selectEndYear, + selectEndMonth + ) { + let Parameters = { + MaintainedState: this.route.snapshot.queryParams.type, + TimeType: this.echartsData.TimeType, + TimeStart: + this.echartsData.TimeType == 1 + ? selectStartYear + : this.echartsData.dateYear + "-" + "01", + TimeEnd: + this.echartsData.TimeType == 1 + ? selectEndYear + : this.echartsData.dateYear + "-" + "12", //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); + }); } - 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) + + this.oneInit(this.xdatayue, this.ydatayue); } //提示框表格 - tishiData - res - tableTooltip(datas){ - this.tishiData=this.echartsData.zhiorBuinding=='zhi'? this.tabledata[0].items[0].organizations:this.tabledata[0].items[0].buildingTypes - var countall=0//总计 - var countbi=0//站比 - var allCountbi=0//总站比 - for(var i=0;i' - this.res+='
'; - this.res+=''; - this.res+=''; - this.res+='' - this.res+='' - this.res+='' - this.res+=''; - for(var i=0;i' - }else{ - this.res+='' - } - this.res+='' - this.res+='' + tishiData; + res; + tableTooltip(datas) { + this.tishiData = + this.echartsData.zhiorBuinding == "zhi" + ? this.tabledata[0].items[0].organizations + : this.tabledata[0].items[0].buildingTypes; + 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 = + '
' + + datas[0].axisValue + + "
"; + this.res += + '
名称数量总占比
'+ this.tishiData[i].buildingTypeName+''+this.tishiData[i].count+''+countbi+'%
'; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ''; + this.res += ""; + this.res += ""; + for (var i = 0; i < this.tishiData.length; i++) { + countbi = + Math.round((this.tishiData[i].count / countall) * 10000) / 100.0; + allCountbi = allCountbi + countbi; + this.res += ""; + if (this.echartsData.zhiorBuinding == "zhi") { + this.res += + '"; + } else { + this.res += + '"; } - this.res+='' - this.res+='' - this.res+='
名称数量总占比
' + + this.tishiData[i].organizationName + + "' + + this.tishiData[i].buildingTypeName + + "
总计'+countall+'100%
' - return this.res + this.res += + '' + this.tishiData[i].count + ""; + this.res += '' + countbi + "%"; + } + this.res += ""; + this.res += + '总计' + + countall + + '100%'; + this.res += ""; + return this.res; } //图形数据 - oneInit (xdata,ydata) { - this.oneEcharts = echarts.init(document.getElementById('center'),'walden'); + oneInit(xdata, ydata) { + this.oneEcharts = echarts.init(document.getElementById("center"), "walden"); var option = { grid: { top: 100, - left:40, + left: 40, right: 20, //bottom: 20, }, @@ -565,246 +812,323 @@ export class verifiedComponent implements OnInit { title: { text: `已核查 总数：(${this.tabledata[0].totalCount})`, top: -4, - left: 'center', - textStyle:{ + left: "center", + textStyle: { //文字颜色 - color:'#000', + color: "#000", fontSize: 32, - } + }, }, //提示框 tooltip: { - trigger: 'axis', + trigger: "axis", /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', borderRadius :'0', */ - formatter: (params)=>{ - return this.tableTooltip(params) + 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 + position: this.echartsData.tableTooltipNoShow2, }, // x轴 xAxis: { - type: 'category', - boundaryGap:true, - data:xdata, - axisLabel:{ - textStyle:{ - fontSize :18, - color:'#000000' - } - + type: "category", + boundaryGap: true, + data: xdata, + axisLabel: { + textStyle: { + fontSize: 18, + color: "#000000", + }, }, //设置坐标轴字体颜色和宽度 - axisLine: { + axisLine: { lineStyle: { color: "#000", }, }, - splitLine: {//分割线配置 - show:true, + splitLine: { + //分割线配置 + show: true, lineStyle: { - color: '#999', - } - } + color: "#999", + }, + }, }, // y轴 yAxis: { - type: 'value', + type: "value", axisLabel: { - fontSize :18, - color: "#000" //刻度线标签颜色 + fontSize: 18, + color: "#000", //刻度线标签颜色 }, - //设置坐标轴字体颜色和宽度 - axisLine: { + //设置坐标轴字体颜色和宽度 + axisLine: { lineStyle: { color: "#000", - } - } + }, + }, }, // 数据 - series: [{ - name: '单位预案编制数量', - type: 'line', + series: [ + { + name: "单位预案编制数量", + type: "line", markPoint: { - - symbolSize:[65, 65], - data: this.qipaotishi + symbolSize: [65, 65], + data: this.qipaotishi, + }, + data: ydata, + clickable: false, }, - data:ydata, - clickable:false, - } ], }; - this.oneEcharts.getZr().on('click', (params) => { - if(this.echartsData.scheduledUpdatesToggle == 1){ + 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].buildingTypes.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].buildingTypes.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); + //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].buildingTypes.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].buildingTypes.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.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}] - - + 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'] + 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) { } + constructor(private router: Router, public echartsData: EchartsDataService) {} ngOnInit(): void { - window.setTimeout(()=>{ - this.oneInit() - },0) + window.setTimeout(() => { + this.oneInit(); + }, 0); } - ngOnDestroy () { - this.oneEcharts.dispose() - this.oneEcharts.clear() + ngOnDestroy() { + if (!this.oneEcharts) { + return; + } + this.oneEcharts.dispose(); + this.oneEcharts.clear(); } - oneEcharts:any; - oneInit () { - this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp'); + oneEcharts: any; + oneInit() { + this.oneEcharts = echarts.init( + document.getElementById("center"), + "skinUpp" + ); var option = { grid: { - left:70 + left: 70, }, title: { - text: '未核查', - subtext: '总数剩余 0', - left: 'center', - textStyle:{ - color:'#000', + text: "未核查", + subtext: "总数剩余 0", + left: "center", + textStyle: { + color: "#000", fontSize: 30, }, - subtextStyle: {color:'#999',fontSize: 15} + subtextStyle: { color: "#999", fontSize: 15 }, }, tooltip: { - trigger: 'axis', - formatter: (params)=>{ - return this.echartsData.tableTooltip(this.echartsData.tableDataZhong,'未核查') + trigger: "axis", + formatter: (params) => { + return this.echartsData.tableTooltip( + this.echartsData.tableDataZhong, + "未核查" + ); }, - position:this.echartsData.tableTooltipNoShow2 + position: this.echartsData.tableTooltipNoShow2, }, legend: { - data: ['剩余未核查','总数'], - textStyle: { color: '#000',fontSize: 18} + data: ["剩余未核查", "总数"], + textStyle: { color: "#000", fontSize: 18 }, }, xAxis: { - type: 'value', + type: "value", boundaryGap: [0, 0.01], axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' + textStyle: { + fontSize: 15, + color: "#000000", }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000",} + axisLine: { + lineStyle: { color: "#000" }, }, }, yAxis: { - type: 'category', + type: "category", //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000"}, + axisLine: { + lineStyle: { color: "#000" }, }, axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' + textStyle: { + fontSize: 15, + color: "#000000", }, color: "#000", //刻度线标签颜色 - formatter: '{value}' + formatter: "{value}", }, - data: this.echartsData.level=='0'? ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'] - :['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], + data: + this.echartsData.level == "0" + ? [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + "崇明支队", + "金山支队", + ] + : [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + "崇明中队", + "金山中队", + ], }, series: [ { - name: '剩余未核查', - type: 'bar', - stack: '差值', + name: "剩余未核查", + type: "bar", + stack: "差值", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle:{color:'#C80000'}, + itemStyle: { color: "#C80000" }, label: { show: true, - position: 'insideRight', - color: '#fff' + position: "insideRight", + color: "#fff", }, }, { - name: '总数', - type: 'bar', - stack: '差值', + name: "总数", + type: "bar", + stack: "差值", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle:{color:'#999'}, + itemStyle: { color: "#999" }, label: { show: true, - position: 'insideRight', - color: '#fff' + position: "insideRight", + color: "#fff", }, }, - ] + ], }; this.oneEcharts.setOption(option); - this.oneEcharts.on('click', (params) => { + this.oneEcharts.on("click", (params) => { /* this.echartsData.scheduledUpdatesType = 1 this.echartsData.scheduledUpdatesName = params.name this.echartsData.scheduledUpdatesToggle = 3 */ @@ -812,250 +1136,342 @@ export class notVerifiedComponent implements OnInit { this.oneEcharts.setOption(option); */ }); } - - - } //支队核查具体月份组件 @Component({ - selector: 'app-yueDate', - templateUrl: './yueDate.html', - styleUrls: ['../state/page-two-time/page-two-time.component.scss'] + 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; - lasttype + constructor( + public router: ActivatedRoute, + public echartsData: EchartsDataService, + public route: Router + ) {} + + level: string; + lasttype; ngOnInit(): void { //console.log(this.echartsData.scheduledUpdatesToggle) - this.router.queryParams.subscribe(param=>{ - this.level=param.level - this.lasttype=param.type - }); - - window.setTimeout(()=>{ - this.getechartsdata() - - },0) + this.router.queryParams.subscribe((param) => { + this.level = param.level; + this.lasttype = param.type; + }); + + window.setTimeout(() => { + this.getechartsdata(); + }, 0); } - ngOnDestroy () { - this.oneEcharts.dispose() - this.oneEcharts.clear() + ngOnDestroy() { + if (!this.oneEcharts) { + return; + } + this.oneEcharts.dispose(); + this.oneEcharts.clear(); } - zhiNameData = [] + 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 - } + 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=[] - if(this.echartsData.zhiorBuinding=='zhi'){ - 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) - }); - }else{ - this.tabledata[0].items[0].buildingTypes.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/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 = []; + if (this.echartsData.zhiorBuinding == "zhi") { + 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) + }); + } else { + this.tabledata[0].items[0].buildingTypes.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) + }); } - 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.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) + } + ); + } 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) + } + ); + } 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() + } + ); + } + + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.ynum, + this.zhiNameData + ); + this.twoInit(); } - } - tiaoshiPao:any + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i{ - console.log(params) - if(params[0].axisValue.indexOf('救援站')==-1){ - 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):'' - } + + grid: { + containLabel: true, + top: 80, + // top: 10 + }, + //提示框 + tooltip: { + trigger: "axis", + textStyle: { + fontSize: 18, + }, + formatter: (params) => { + console.log(params); + if (params[0].axisValue.indexOf("救援站") == -1) { + 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) + } + + //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: 15, + color: "#000000", }, - position:this.echartsData.tableTooltipNoShow2 + color: "#000", //刻度线标签颜色 + interval: 0, + rotate: 28, }, - legend: { - right:10, - data: this.echartsData.zhuXname, - textStyle: { fontSize :16,color: '#000' } + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { color: "#000" }, }, - xAxis: { - id:this.organizationId, - axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' - }, - color: "#000", //刻度线标签颜色 - interval: 0, - rotate:28, - }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000",} + type: "category", + data: this.zhiNameData, + axisPointer: { type: "shadow" }, + }, + yAxis: { + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000000", }, - 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}' - } + type: "value", + axisLabel: { + textStyle: { + fontSize: 18, + color: "#000000", }, - // { - // //设置坐标轴字体颜色和宽度 - // 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)' + 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 - }, + data: this.tiaoshiPao, }, - - - ] - }; - this.oneEcharts.setOption(option); - /* this.items[index].echart.on('click', (params) => { + }, + ], + }; + 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] @@ -1063,18 +1479,26 @@ export class yueDateComponent implements OnInit { 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.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() + 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) { + if (!this.oneEcharts) { + return; + } + this.oneEcharts.dispose(); + this.oneEcharts.clear(); //this.getechartsdata() } @@ -1082,84 +1506,138 @@ export class yueDateComponent implements OnInit { 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] + } 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() - } - + 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) + ) { + if (!this.oneEcharts) { + return; + } + this.oneEcharts.dispose(); + this.oneEcharts.clear(); + } } - } - - }); - - + }); } - - - } //建筑类型核查具体月份组件 @Component({ - selector: 'app-yuebuildingDate', - templateUrl: './yuebuildingDate.html', - styleUrls: ['../state/page-two-time/page-two-time.component.scss'] + 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 + ) {} - constructor(public router: ActivatedRoute,public echartsData:EchartsDataService,public route:Router) { } - - level:string; + level: string; ngOnInit(): void { - this.router.queryParams.subscribe(param=>{ - this.level=param.level - }); - - window.setTimeout(()=>{ - this.twoInit() - },0) + this.router.queryParams.subscribe((param) => { + this.level = param.level; + }); + + window.setTimeout(() => { + this.twoInit(); + }, 0); } - ngOnDestroy () { - this.oneEcharts.dispose() - this.oneEcharts.clear() + ngOnDestroy() { + if (!this.oneEcharts) { + return; + } + + this.oneEcharts.dispose(); + this.oneEcharts.clear(); } - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] - buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] + 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, + 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=[] + }; + 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) + } 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 => { @@ -1167,114 +1645,119 @@ export class yuebuildingDateComponent implements OnInit { 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 - } + 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, }, - legend: { - data: this.echartsData.zhuXname, - textStyle: { fontSize :16,color: '#000' } + }, + //提示框 + tooltip: { + trigger: "axis", + textStyle: { + fontSize: 18, }, - xAxis: [{ + }, + legend: { + data: this.echartsData.zhuXname, + textStyle: { fontSize: 16, color: "#000" }, + }, + xAxis: [ + { axisLabel: { - textStyle:{ - fontSize :18, - color:'#000000' + textStyle: { + fontSize: 18, + color: "#000000", }, color: "#000", //刻度线标签颜色 - interval: 0 + interval: 0, }, //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000",} + axisLine: { + lineStyle: { color: "#000" }, }, - type: 'category', - data:this.buildingData, - axisPointer: {type: 'shadow'} - }], - yAxis: [ - { - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle:{ - color:'#000000' - } + type: "category", + data: this.buildingData, + axisPointer: { type: "shadow" }, + }, + ], + yAxis: [ + { + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000000", }, - type: 'value', - axisLabel: { - interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠） - rotate:38 , //调整数值改变倾斜的幅度（范围-90到90） - 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'} + type: "value", + axisLabel: { + interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠） + rotate: 38, //调整数值改变倾斜的幅度（范围-90到90） + 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, @@ -1288,10 +1771,10 @@ export class yuebuildingDateComponent implements OnInit { 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) => { + ], + }; + 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] @@ -1299,152 +1782,198 @@ export class yuebuildingDateComponent implements OnInit { 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.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 + 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[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'] + 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) { } + constructor(private router: Router, public echartsData: EchartsDataService) {} ngOnInit(): void { - window.setTimeout(()=>{ - this.oneInit() - },0) + window.setTimeout(() => { + this.oneInit(); + }, 0); } - ngOnDestroy () { - this.example.dispose() - this.example.clear() + ngOnDestroy() { + if (!this.example) { + return; + } + this.example.dispose(); + this.example.clear(); } - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] - buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"] - - example:any; - oneInit () { - this.example = echarts.init(document.getElementById('center'), 'skinUpp'); - if (this.echartsData.scheduledUpdatesType ===0) { //已核查 + 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} + text: `总数（0）`, //${this.echartsData.scheduledUpdatesName}${this.echartsData.scheduledUpdatesXName} top: -2, right: 655, - textStyle:{ - color:'#000', + textStyle: { + color: "#000", fontSize: 30, - } + }, }, //提示框 tooltip: { - trigger: 'axis', - textStyle:{ - fontSize :18 - } + trigger: "axis", + textStyle: { + fontSize: 18, + }, }, legend: { //data: ['平均值','维护无需修改', '维护修改', '维护通过审核'], - data:this.echartsData.zhuXname, - textStyle: { color: '#000',fontSize: 16 }, - right:20 + data: this.echartsData.zhuXname, + textStyle: { color: "#000", fontSize: 16 }, + right: 20, }, - xAxis: [{ - axisLabel: { - textStyle:{ - fontSize :18, - color:'#000000' + xAxis: [ + { + axisLabel: { + textStyle: { + fontSize: 18, + color: "#000000", + }, + color: "#000", //刻度线标签颜色 }, - color: "#000", //刻度线标签颜色 - }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000",} + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { color: "#000" }, + }, + type: "category", + data: [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + "崇明中队", + "金山中队", + ], + axisPointer: { type: "shadow" }, }, - type: 'category', - data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], - axisPointer: {type: 'shadow'} - }], + ], yAxis: [ { //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000"}, + axisLine: { + lineStyle: { color: "#000" }, }, - type: 'value', + type: "value", axisLabel: { - textStyle:{ - fontSize :18, - color:'#000000' + textStyle: { + fontSize: 18, + color: "#000000", }, color: "#000", //刻度线标签颜色 - formatter: '{value}' - } + formatter: "{value}", + }, }, ], series: [ { name: this.echartsData.zhuXname[1], - type: 'bar', - stack: '总数', - barWidth :'38', + 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: '总数', + type: "bar", + stack: "总数", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle:{color: '#626c91'} + itemStyle: { color: "#626c91" }, }, { name: this.echartsData.zhuXname[3], - type: 'bar', - stack: '总数', + type: "bar", + stack: "总数", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle:{color:'#c4ebad'} + itemStyle: { color: "#c4ebad" }, }, { name: this.echartsData.zhuXname[0], - type: 'line', + type: "line", // yAxisIndex: 1, data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle:{color: '#FFDC35'} + itemStyle: { color: "#FFDC35" }, }, { //name: '与上个月环比', - type: 'line', + type: "line", // yAxisIndex: 1, - data: [0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0], + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //itemStyle:{color: '#6be6c1'}, - }, /* { //name: '警报', @@ -1475,134 +2004,190 @@ export class detailedInformationComponent implements OnInit { data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111], itemStyle:{color: '#999'} }, */ - ] + ], }; this.example.setOption(option); - } else { //未核查 + } else { + //未核查 var options = { grid: { - left:90 + left: 90, }, title: { text: this.echartsData.scheduledUpdatesName, - left: 'center', - textStyle:{ - color:'#000', + left: "center", + textStyle: { + color: "#000", fontSize: 30, }, }, tooltip: { - trigger: 'axis', - textStyle:{ - fontSize: 18 + trigger: "axis", + textStyle: { + fontSize: 18, }, axisPointer: { - type: 'shadow' - } + type: "shadow", + }, }, legend: { - data: ['剩余未核查','总数'], - textStyle: { color: '#000',fontSize: 16 } + data: ["剩余未核查", "总数"], + textStyle: { color: "#000", fontSize: 16 }, }, xAxis: { - type: 'value', + type: "value", boundaryGap: [0, 0.01], axisLabel: { - textStyle:{ - fontSize :18, - color:'#000000' + textStyle: { + fontSize: 18, + color: "#000000", }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000",} + axisLine: { + lineStyle: { color: "#000" }, }, }, yAxis: { - type: 'category', + type: "category", //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: {color: "#000"}, + axisLine: { + lineStyle: { color: "#000" }, }, axisLabel: { - textStyle:{ - fontSize :18, - color:'#000000' + textStyle: { + fontSize: 18, + color: "#000000", }, color: "#000", //刻度线标签颜色 - formatter: '{value}' + formatter: "{value}", }, - data: ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'], + data: [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + "崇明中队", + "金山中队", + ], }, series: [ { - name: '剩余未核查', - type: 'bar', - stack: '差值', + name: "剩余未核查", + type: "bar", + stack: "差值", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle:{color:'#C80000'}, + itemStyle: { color: "#C80000" }, label: { show: true, - position: 'insideRight', - color: '#fff' + position: "insideRight", + color: "#fff", }, }, { - name: '总数', - type: 'bar', - stack: '差值', + name: "总数", + type: "bar", + stack: "差值", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle:{color:'#999'}, + itemStyle: { color: "#999" }, label: { show: true, - position: 'insideRight', - color: '#fff' + position: "insideRight", + color: "#fff", }, }, - ] + ], }; this.example.setOption(options); } } - - - } - - //更多资讯组件 @Component({ - selector: 'app-moreTable', - templateUrl: './moreTable.html', - styleUrls: ['./scheduled-updates.component.scss'] + 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: '浦东支队'} - ] - - - -} \ No newline at end of file + 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: "浦东支队", + }, + ]; +} diff --git a/src/app/statistic-analysis/state/page-one/page-one.component.ts b/src/app/statistic-analysis/state/page-one/page-one.component.ts index 8c5774b..2c2573b 100644 --- a/src/app/statistic-analysis/state/page-one/page-one.component.ts +++ b/src/app/statistic-analysis/state/page-one/page-one.component.ts @@ -1,310 +1,543 @@ /* - * @Descripttion: - * @version: + * @Descripttion: + * @version: * @Author: sueRimn * @Date: 2020-09-01 15:24:39 * @LastEditors: sueRimn * @LastEditTime: 2021-07-21 08:54:04 */ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import {EchartsDataService,} from '../../echarts-data.service' +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; -declare var CryptoJS +declare var CryptoJS; @Component({ - selector: 'app-page-one', - templateUrl: './page-one.component.html', - styleUrls: ['./page-one.component.scss'] + selector: "app-page-one", + templateUrl: "./page-one.component.html", + styleUrls: ["./page-one.component.scss"], }) export class PageOneComponent implements OnInit { - options:any; - - constructor(private router: Router,public echartsData:EchartsDataService) { } + options: any; - padHw - orid + constructor(private router: Router, public echartsData: EchartsDataService) {} + + padHw; + orid; ngOnInit() { - if(window.matchMedia("(max-width: 1400px)").matches){ - this.padHw=true + if (window.matchMedia("(max-width: 1400px)").matches) { + this.padHw = true; //this.padjt= - }else{ - this.padHw=false + } else { + this.padHw = false; } - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } - - window.setTimeout(()=>{ - this.getechartsdata() - }) + } + + window.setTimeout(() => { + this.getechartsdata(); + }); let jwt = sessionStorage.getItem("token"); - let rawJwt = CryptoJS.enc.Base64.parse(jwt.split('.')[1]); + let rawJwt = CryptoJS.enc.Base64.parse(jwt.split(".")[1]); let identityJson = CryptoJS.enc.Utf8.stringify(rawJwt); - let identityJsonparse=JSON.parse(identityJson) - this.orid=identityJsonparse.oid + let identityJsonparse = JSON.parse(identityJson); + this.orid = identityJsonparse.oid; //console.log(identityJsonparse) } ngOnDestroy(): void { - this.indexBzt.clear() - this.indexBzt.dispose() + if (!this.indexBzt) { + return; + } + this.indexBzt.clear(); + this.indexBzt.dispose(); } - async getechartsdata(){ - await this.echartsData.getData(null,`/api/StatisticsAnalysis/Plans`) - this.initCharts("pieone") - this.initCharts("pietwo") + async getechartsdata() { + await this.echartsData.getData(null, `/api/StatisticsAnalysis/Plans`); + this.initCharts("pieone"); + this.initCharts("pietwo"); } //级别和类型转换 - pieonetype=true//级别 - clickhuan(){ - this.pieonetype=!this.pieonetype - this.initCharts("pieone") + pieonetype = true; //级别 + clickhuan() { + this.pieonetype = !this.pieonetype; + this.initCharts("pieone"); } /* 首页饼状图 */ - indexBzt - tabledata - count - indexData - planCategoriesData=[]//预案级别 - planStatusesData=[]//预案状态 - planTypeStatisticsdata=[]//预案类型 - initCharts(tid){ - this.planTypeStatisticsdata=[] - this.planCategoriesData=[] - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) - if(tid=='pieone') - { - if(this.pieonetype){ - this.tabledata[0].planCategoryStatistics.planCategories.forEach((value,index,array) => { - if(array[index].planCategoryName=='LevelOne'){ - this.planCategoriesData.push({name:'Ⅰ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:1}) - }else if(array[index].planCategoryName=='LevelTwo'){ - this.planCategoriesData.push({name:'Ⅱ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:2}) - }else if(array[index].planCategoryName=='LevelThree'){ - this.planCategoriesData.push({name:'Ⅲ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:3}) - }else if(array[index].planCategoryName=='LevelFour'){ - this.planCategoriesData.push({name:'Ⅳ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:4}) - }else if(array[index].planCategoryName=='LevelFive'){ - this.planCategoriesData.push({name:'Ⅴ级预案',value:array[index].count,planStatusName:array[index].planCategoryName,type:5}) + indexBzt; + tabledata; + count; + indexData; + planCategoriesData = []; //预案级别 + planStatusesData = []; //预案状态 + planTypeStatisticsdata = []; //预案类型 + initCharts(tid) { + this.planTypeStatisticsdata = []; + this.planCategoriesData = []; + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); + if (tid == "pieone") { + if (this.pieonetype) { + this.tabledata[0].planCategoryStatistics.planCategories.forEach( + (value, index, array) => { + if (array[index].planCategoryName == "LevelOne") { + this.planCategoriesData.push({ + name: "Ⅰ级预案", + value: array[index].count, + planStatusName: array[index].planCategoryName, + type: 1, + }); + } else if (array[index].planCategoryName == "LevelTwo") { + this.planCategoriesData.push({ + name: "Ⅱ级预案", + value: array[index].count, + planStatusName: array[index].planCategoryName, + type: 2, + }); + } else if (array[index].planCategoryName == "LevelThree") { + this.planCategoriesData.push({ + name: "Ⅲ级预案", + value: array[index].count, + planStatusName: array[index].planCategoryName, + type: 3, + }); + } else if (array[index].planCategoryName == "LevelFour") { + this.planCategoriesData.push({ + name: "Ⅳ级预案", + value: array[index].count, + planStatusName: array[index].planCategoryName, + type: 4, + }); + } else if (array[index].planCategoryName == "LevelFive") { + this.planCategoriesData.push({ + name: "Ⅴ级预案", + value: array[index].count, + planStatusName: array[index].planCategoryName, + type: 5, + }); + } } - }); - }else{ - this.tabledata[0].planTypeStatistics.planTypes.forEach((value,index,array) => { - if(array[index].planTypeName=='Plan2D'){ - this.planTypeStatisticsdata.push({name:'二维预案',value:array[index].count,planStatusName:array[index].planTypeName,type:1}) - }else if(array[index].planTypeName=='Plan3D'){ - this.planTypeStatisticsdata.push({name:'三维预案',value:array[index].count,planStatusName:array[index].planTypeName,type:2}) - }else if(array[index].planTypeName=='Other'){ - this.planTypeStatisticsdata.push({name:'其它预案',value:array[index].count,planStatusName:array[index].planTypeName,type:3}) - }else if(array[index].planTypeName=='PlanText'){ - this.planTypeStatisticsdata.push({name:'文本预案',value:array[index].count,planStatusName:array[index].planTypeName,type:4}) + ); + } else { + this.tabledata[0].planTypeStatistics.planTypes.forEach( + (value, index, array) => { + if (array[index].planTypeName == "Plan2D") { + this.planTypeStatisticsdata.push({ + name: "二维预案", + value: array[index].count, + planStatusName: array[index].planTypeName, + type: 1, + }); + } else if (array[index].planTypeName == "Plan3D") { + this.planTypeStatisticsdata.push({ + name: "三维预案", + value: array[index].count, + planStatusName: array[index].planTypeName, + type: 2, + }); + } else if (array[index].planTypeName == "Other") { + this.planTypeStatisticsdata.push({ + name: "其它预案", + value: array[index].count, + planStatusName: array[index].planTypeName, + type: 3, + }); + } else if (array[index].planTypeName == "PlanText") { + this.planTypeStatisticsdata.push({ + name: "文本预案", + value: array[index].count, + planStatusName: array[index].planTypeName, + type: 4, + }); + } } - }); + ); } - - }else{ - this.tabledata[0].planStatusStatistics.planStatuses.forEach((value,index,array) => { - if(array[index].planStatusName=='New'){ - this.planStatusesData.push({name:'预案新增',value:array[index].count,type:1,planStatusName:array[index].planStatusName}) - }else if(array[index].planStatusName=='Auditing'){ - this.planStatusesData.push({name:'预案审核中',value:array[index].count,type:2,planStatusName:array[index].planStatusName}) - }else if(array[index].planStatusName=='Approved'){ - this.planStatusesData.push({name:'预案审核通过',value:array[index].count,type:3,planStatusName:array[index].planStatusName}) - }else if(array[index].planStatusName=='Rejected'){ - this.planStatusesData.push({name:'预案审核退回',value:array[index].count,type:4,planStatusName:array[index].planStatusName}) - }else if(array[index].planStatusName=='Editing'){ - this.planStatusesData.push({name:'预案编制',value:array[index].count,type:5,planStatusName:array[index].planStatusName}) + } else { + this.tabledata[0].planStatusStatistics.planStatuses.forEach( + (value, index, array) => { + if (array[index].planStatusName == "New") { + this.planStatusesData.push({ + name: "预案新增", + value: array[index].count, + type: 1, + planStatusName: array[index].planStatusName, + }); + } else if (array[index].planStatusName == "Auditing") { + this.planStatusesData.push({ + name: "预案审核中", + value: array[index].count, + type: 2, + planStatusName: array[index].planStatusName, + }); + } else if (array[index].planStatusName == "Approved") { + this.planStatusesData.push({ + name: "预案审核通过", + value: array[index].count, + type: 3, + planStatusName: array[index].planStatusName, + }); + } else if (array[index].planStatusName == "Rejected") { + this.planStatusesData.push({ + name: "预案审核退回", + value: array[index].count, + type: 4, + planStatusName: array[index].planStatusName, + }); + } else if (array[index].planStatusName == "Editing") { + this.planStatusesData.push({ + name: "预案编制", + value: array[index].count, + type: 5, + planStatusName: array[index].planStatusName, + }); + } } - }); + ); } - - + var ec = echarts as any; - this.indexBzt = ec.init(document.getElementById(tid),'walden'); - var options={ + this.indexBzt = ec.init(document.getElementById(tid), "walden"); + var options = { title: { - text:tid=='pieone'&&this.pieonetype?`预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）` :tid=='pieone'&&!this.pieonetype?`预案类型统计（${this.tabledata[0].planTypeStatistics.totalCount}份）`:`预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`, - top: "7%", - left: 'center', - textStyle:{ - fontSize:this.padHw?25: 31 - } + text: + tid == "pieone" && this.pieonetype + ? `预案级别统计（${this.tabledata[0].planCategoryStatistics.totalCount}份）` + : tid == "pieone" && !this.pieonetype + ? `预案类型统计（${this.tabledata[0].planTypeStatistics.totalCount}份）` + : `预案状态统计（${this.tabledata[0].planStatusStatistics.totalCount}份）`, + top: "7%", + left: "center", + textStyle: { + fontSize: this.padHw ? 25 : 31, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - this.echartsData.biaogeTishiyuan(params.data,tid,this.pieonetype) - return this.echartsData.res - } + trigger: "item", + formatter: (params) => { + this.echartsData.biaogeTishiyuan(params.data, tid, this.pieonetype); + return this.echartsData.res; + }, }, legend: { bottom: 50, - left: 'center', - //padding:20, - // itemWidth:60, - // itemHeight:25, - textStyle:{ - fontSize:this.padHw?15: 18, - color:"#000000" - }, - data:tid=='pieone'&&this.pieonetype?['Ⅰ级预案', 'Ⅱ级预案', 'Ⅲ级预案', 'Ⅳ级预案', 'Ⅴ级预案']:tid=='pieone'&&!this.pieonetype?['二维预案', '三维预案', '其它预案', '文本预案'] :['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] + left: "center", + //padding:20, + // itemWidth:60, + // itemHeight:25, + textStyle: { + fontSize: this.padHw ? 15 : 18, + color: "#000000", + }, + data: + tid == "pieone" && this.pieonetype + ? ["Ⅰ级预案", "Ⅱ级预案", "Ⅲ级预案", "Ⅳ级预案", "Ⅴ级预案"] + : tid == "pieone" && !this.pieonetype + ? ["二维预案", "三维预案", "其它预案", "文本预案"] + : [ + "预案新增", + "预案审核通过", + "预案编制", + "预案审核退回", + "预案审核中", + ], }, series: [ - { - name: '访问来源', - type: 'pie', - radius: '50%', - center: ['50%', '45%'], - label:{ - normal:{ - show:true, - // position: 'inner', - fontSize:this.padHw?14: 18, - formatter:this.padHw?'{b} \n{c}份({d}%)' :'{b} {c}份\n({d}%)', - }, - rich: { - d: { - align: 'center', - } - }, - + { + name: "访问来源", + type: "pie", + radius: "50%", + center: ["50%", "45%"], + label: { + normal: { + show: true, + // position: 'inner', + fontSize: this.padHw ? 14 : 18, + formatter: this.padHw ? "{b} \n{c}份({d}%)" : "{b} {c}份\n({d}%)", + }, + rich: { + d: { + align: "center", }, - data:tid=='pieone'&&this.pieonetype?this.planCategoriesData:tid=='pieone'&&!this.pieonetype?this.planTypeStatisticsdata:this.planStatusesData, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] + }, + }, + data: + tid == "pieone" && this.pieonetype + ? this.planCategoriesData + : tid == "pieone" && !this.pieonetype + ? this.planTypeStatisticsdata + : this.planStatusesData, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], }; - this.indexBzt.on('click', (params) => { + this.indexBzt.on("click", (params) => { // console.log(params) - if(tid=='pieone'){ - if(this.pieonetype){ - for(var i=0;i0){ - this.tabledata[0].planCategoryStatistics.planCategories[i].organizations.forEach((element,index,array) => { - if(array[index].organizationId==this.orid){ - array.splice(index,1) + if (tid == "pieone") { + if (this.pieonetype) { + for ( + var i = 0; + i < this.tabledata[0].planCategoryStatistics.planCategories.length; + i++ + ) { + if ( + this.tabledata[0].planCategoryStatistics.planCategories[i] + .planCategoryName == params.data.planStatusName + ) { + if ( + (this.echartsData.level == "0" || + this.echartsData.level == "1" || + this.echartsData.level == "2") && + this.tabledata[0].planCategoryStatistics.planCategories[i] + .organizations.length > 0 + ) { + this.tabledata[0].planCategoryStatistics.planCategories[ + i + ].organizations.forEach((element, index, array) => { + if (array[index].organizationId == this.orid) { + array.splice(index, 1); } - window.setTimeout(()=>{ - if(array.length>0){ - this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); - } - else{ - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); + window.setTimeout(() => { + if (array.length > 0) { + this.router.navigate( + ["/statisticanalysis/statePageOne/time"], + { + queryParams: { + level: params.name, + type: params.data.type, + tid: "pieone", + pieonetype: this.pieonetype, + }, + } + ); + } else { + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + xname: params.name, + name: params.name, + id: null, + type: params.data.type, + tid: "pieone", + pieonetype: this.pieonetype, + }, + }); } - }) + }); }); - - } - else if(this.echartsData.level=='3'){ + } else if (this.echartsData.level == "3") { //中队跳转 - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + xname: params.name, + name: params.name, + id: null, + type: params.data.type, + tid: "pieone", + pieonetype: this.pieonetype, + }, + }); } } } - }else{ - for(var i=0;i0){ - this.tabledata[0].planTypeStatistics.planTypes[i].organizations.forEach((element,index,array) => { - if(array[index].organizationId==this.orid){ - array.splice(index,1) + } else { + for ( + var i = 0; + i < this.tabledata[0].planTypeStatistics.planTypes.length; + i++ + ) { + if ( + this.tabledata[0].planTypeStatistics.planTypes[i].planTypeName == + params.data.planStatusName + ) { + if ( + (this.echartsData.level == "0" || + this.echartsData.level == "1" || + this.echartsData.level == "2") && + this.tabledata[0].planCategoryStatistics.planCategories[i] + .organizations.length > 0 + ) { + this.tabledata[0].planTypeStatistics.planTypes[ + i + ].organizations.forEach((element, index, array) => { + if (array[index].organizationId == this.orid) { + array.splice(index, 1); } - window.setTimeout(()=>{ - if(array.length>0){ - this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); - } - else{ - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); + window.setTimeout(() => { + if (array.length > 0) { + this.router.navigate( + ["/statisticanalysis/statePageOne/time"], + { + queryParams: { + level: params.name, + type: params.data.type, + tid: "pieone", + pieonetype: this.pieonetype, + }, + } + ); + } else { + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + xname: params.name, + name: params.name, + id: null, + type: params.data.type, + tid: "pieone", + pieonetype: this.pieonetype, + }, + }); } - }) + }); }); - - } - else if(this.echartsData.level=='3'){ + } else if (this.echartsData.level == "3") { //中队跳转 - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pieone','pieonetype':this.pieonetype}}); + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + xname: params.name, + name: params.name, + id: null, + type: params.data.type, + tid: "pieone", + pieonetype: this.pieonetype, + }, + }); } } } } - - }else{ - for(var i=0;i0){ - this.tabledata[0].planStatusStatistics.planStatuses[i].organizations.forEach((element,index,array) => { - if(array[index].organizationId==this.orid){ - array.splice(index,1) + } else { + for ( + var i = 0; + i < this.tabledata[0].planStatusStatistics.planStatuses.length; + i++ + ) { + if ( + this.tabledata[0].planStatusStatistics.planStatuses[i] + .planStatusName == params.data.planStatusName + ) { + if ( + (this.echartsData.level == "0" || + this.echartsData.level == "1" || + this.echartsData.level == "2") && + this.tabledata[0].planStatusStatistics.planStatuses[i] + .organizations.length > 0 + ) { + this.tabledata[0].planStatusStatistics.planStatuses[ + i + ].organizations.forEach((element, index, array) => { + if (array[index].organizationId == this.orid) { + array.splice(index, 1); } - window.setTimeout(()=>{ - if(array.length>0){ - this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':params.name,'type':params.data.type,'tid':'pietwo'}}); - } - else{ - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}}); + window.setTimeout(() => { + if (array.length > 0) { + this.router.navigate( + ["/statisticanalysis/statePageOne/time"], + { + queryParams: { + level: params.name, + type: params.data.type, + tid: "pietwo", + }, + } + ); + } else { + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + xname: params.name, + name: params.name, + id: null, + type: params.data.type, + tid: "pietwo", + }, + }); } - }) + }); }); - - } - else if(this.echartsData.level=='3'){ + } else if (this.echartsData.level == "3") { //中队跳转 - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':params.name,'name':params.name,'id':null,'type':params.data.type,'tid':'pietwo'}}); + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + xname: params.name, + name: params.name, + id: null, + type: params.data.type, + tid: "pietwo", + }, + }); } } } } - - - }); this.indexBzt.setOption(options); } /** * @name: 表格提示框封装 * @test: test font - * @msg: + * @msg: * @param {string(表头)} - * @return {type} + * @return {type} */ - biaogeTishi(biaotou:string){ - var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},' - shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' - shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' - shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' - shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' - shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' - shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' - var jsonObj = JSON.parse(shuju); - var res = '
'+biaotou+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
' - return res - } + biaogeTishi(biaotou: string) { + var shuju = + '[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'; + shuju += + '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'; + shuju += + '{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'; + shuju += + '{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'; + shuju += + '{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'; + shuju += + '{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'; + shuju += + '{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'; + var jsonObj = JSON.parse(shuju); + var res = + '
' + + biaotou + + "
"; + res += + '
'; + res += ""; + res += + ''; + res += + ''; + res += + ''; + res += ""; + res += ""; + for (var i = 0; i < jsonObj.length; i++) { + res += ""; + res += + '"; + res += + '"; + res += + '"; + } + res += ""; + res += + ''; + res += "
名称数量总占比
' + + jsonObj[i].name + + "' + + jsonObj[i].number + + "' + + jsonObj[i].zhanbi + + "
总计135619%
"; + return res; + } } diff --git a/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts index 43cfbb2..424b5fa 100644 --- a/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts +++ b/src/app/statistic-analysis/state/page-there-year/page-there-year.component.ts @@ -1,160 +1,218 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; -import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import { ActivatedRoute } from '@angular/router'; -import { EchartsDataService } from '../../echarts-data.service'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from "@angular/material/dialog"; +import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; +import { ActivatedRoute } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; declare var echarts: any; @Component({ - selector: 'app-page-there-year', - templateUrl: './page-there-year.component.html', - styleUrls: ['./page-there-year.component.scss'] + selector: "app-page-there-year", + templateUrl: "./page-there-year.component.html", + styleUrls: ["./page-there-year.component.scss"], }) export class PageThereYearComponent implements OnInit { + constructor( + private router: Router, + public dialog: MatDialog, + public snackBar: MatSnackBar, + private serviceData: EchartsDataService, + public route: ActivatedRoute + ) {} - constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } - - tid - year:String - buildingTypeName:String - level:String - setTimeoutObj//延时器需要清除 - type - tabledata//获取所有数据 - lastyears//上个页面传过来的年份 - count=0//总数 - pieonetype//判断是级别还是类型，上个页面传过来的参数 - planType//预案类型 + tid; + year: String; + buildingTypeName: String; + level: String; + setTimeoutObj; //延时器需要清除 + type; + tabledata; //获取所有数据 + lastyears; //上个页面传过来的年份 + count = 0; //总数 + pieonetype; //判断是级别还是类型，上个页面传过来的参数 + planType; //预案类型 ngOnInit(): void { - this.dateInit () - this.route.queryParams.subscribe(params => { - this.year = params['level']; - this.buildingTypeName = params['headtext']; - this.type=params['type'] - this.lastyears=params['headtext'].substring(0,4) - this.tid=params.tid - this.pieonetype=params.pieonetype + this.dateInit(); + this.route.queryParams.subscribe((params) => { + this.year = params["level"]; + this.buildingTypeName = params["headtext"]; + this.type = params["type"]; + this.lastyears = params["headtext"].substring(0, 4); + this.tid = params.tid; + this.pieonetype = params.pieonetype; }); - if(this.year=='二维预案'){ - this.planType=1 - }else if(this.year=='三维预案'){ - this.planType=2 - }else if(this.year=='其他预案'){ - this.planType=4 - }else if(this.year=='文本预案'){ - this.planType=16 + if (this.year == "二维预案") { + this.planType = 1; + } else if (this.year == "三维预案") { + this.planType = 2; + } else if (this.year == "其他预案") { + this.planType = 4; + } else if (this.year == "文本预案") { + this.planType = 16; } - this.setTimeoutObj = window.setTimeout(()=>{ - this.getechartsData() - }) + this.setTimeoutObj = window.setTimeout(() => { + this.getechartsData(); + }); } - ngOnDestroy(){ + ngOnDestroy() { window.clearTimeout(this.setTimeoutObj); - this.detailPlanEchart.clear() - this.detailPlanEchart.dispose() + if (!this.detailPlanEchart) { + return; + } + this.detailPlanEchart.clear(); + this.detailPlanEchart.dispose(); } - async getechartsData(){ - let paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1, - TrendYear:this.lastyears||'', - TrendType:0 + async getechartsData() { + let paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + objectType: + this.tid == "pieone" && this.pieonetype == "true" + ? 2 + : this.tid == "pieone" && this.pieonetype == "false" + ? 5 + : 1, + TrendYear: this.lastyears || "", + TrendType: 0, + }; + await this.serviceData.getData(paramdata, `/api/StatisticsAnalysis/Trends`); + this.tabledata = JSON.parse(JSON.stringify(this.serviceData.allDate)); + // console.log(this.tabledata) + for (var i = 0; i < this.tabledata[0].length; i++) { + this.date.push(this.tabledata[0][i].month); + this.dateNum.push(this.tabledata[0][i].count); + this.count += this.tabledata[0][i].count; } - await this.serviceData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) - this.tabledata=JSON.parse(JSON.stringify(this.serviceData.allDate)) - // console.log(this.tabledata) - for(var i=0;i{ - this.date[index]=this.date[index]+'月' - }) - this.tiaoshiPao=this.serviceData.qipao(this.tiaoshiPao,this.dateNum,this.date) - this.detailEcharts() + this.date.forEach((value, index, array) => { + this.date[index] = this.date[index] + "月"; + }); + this.tiaoshiPao = this.serviceData.qipao( + this.tiaoshiPao, + this.dateNum, + this.date + ); + this.detailEcharts(); } - selectType:string = 'month'; //选择当前的 查询类型 按月/年 + selectType: string = "month"; //选择当前的 查询类型 按月/年 //查询数据 - years:any = [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + 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) + dateInit() { + let date = new Date().getFullYear(); + for (let i = date; i >= date - 10; i--) { + this.years.unshift(i); } } - selectOneYear:any = (new Date()).getFullYear() //开始年份 - selectStartMonth:any = 1 //开始月份 - Submit (e) { - - } - selectStartYear:any = (new Date()).getFullYear() //开始年份 + selectOneYear: any = new Date().getFullYear(); //开始年份 + selectStartMonth: any = 1; //开始月份 + Submit(e) {} + selectStartYear: any = new Date().getFullYear(); //开始年份 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 - zhongNameData = ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] - zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 + zhongNameData = [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + ]; + zhongNumData = [200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100]; - zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] - zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] - tiaoshiPao:any + zhiNameData = [ + "浦东支队", + "黄浦支队", + "徐汇支队", + "长宁支队", + "静安支队", + "普陀支队", + "虹口支队", + "杨浦支队", + "闵行支队", + "宝山支队", + "嘉定支队", + ]; + zhiNumData = [300, 290, 280, 270, 260, 250, 240, 230, 220, 210, 200]; + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i{ if(params[0].seriesName == "year"){ return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) @@ -162,89 +220,111 @@ export class PageThereYearComponent implements OnInit { return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) } }, */ - position:this.serviceData.tableTooltipNoShow2 + position: this.serviceData.tableTooltipNoShow2, }, // x轴 xAxis: { - type: 'category', + type: "category", data: this.date, axisLabel: { color: "#000", //刻度线标签颜色 - textStyle:{ - fontSize :18, - color:'#000000' - } + textStyle: { + fontSize: 18, + color: "#000000", + }, }, //设置坐标轴字体颜色和宽度 - axisLine: { + axisLine: { lineStyle: { color: "#000", }, }, - splitLine: {//分割线配置 - show:true, + splitLine: { + //分割线配置 + show: true, lineStyle: { - color: '#999', - } - } + color: "#999", + }, + }, }, // y轴 yAxis: { - type: 'value', - name: '个', + type: "value", + name: "个", axisLabel: { //color: "#000", //刻度线标签颜色 - textStyle:{ - fontSize :18, - color:'#000000' - } + textStyle: { + fontSize: 18, + color: "#000000", + }, }, - //设置坐标轴字体颜色和宽度 - axisLine: { + //设置坐标轴字体颜色和宽度 + axisLine: { lineStyle: { color: "#000", - } - } + }, + }, }, // 数据 - series: [{ - name: 'xxx', - type: 'line', + series: [ + { + name: "xxx", + type: "line", markPoint: { - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, data: this.dateNum, - } + }, ], }; this.detailPlanEchart.setOption(this.option); - this.detailPlanEchart.getZr().on('click',params=>{ - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { - let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + this.detailPlanEchart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel("grid", pointInPixel)) { + let xIndex = this.detailPlanEchart.convertFromPixel( + { seriesIndex: 0 }, + [params.offsetX, params.offsetY] + )[0]; /*事件处理代码书写位置*/ - if(this.serviceData.level=='0'||this.serviceData.level=='1'||this.serviceData.level=='2'){ - this.serviceData.isQuery=true - this.serviceData.planMonth=this.option.xAxis.data[xIndex].substring(0,1) - this.serviceData.planYear=this.lastyears + if ( + this.serviceData.level == "0" || + this.serviceData.level == "1" || + this.serviceData.level == "2" + ) { + this.serviceData.isQuery = true; + this.serviceData.planMonth = this.option.xAxis.data[xIndex].substring( + 0, + 1 + ); + this.serviceData.planYear = this.lastyears; /* if(!this.serviceData.isQuery){ this.serviceData.planYear=this.lastyears } */ - + //this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName,'zhong':'1','type':this.type}}); - this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'level':this.year,'headtext':this.buildingTypeName,'zhong':'1','type':this.type,'pieonetype':this.pieonetype,'tid':this.tid,'month':this.option.xAxis.data[xIndex]}}); - } - else if(this.serviceData.level=='3'){ + this.router.navigate(["/statisticanalysis/statePageOne/time"], { + queryParams: { + level: this.year, + headtext: this.buildingTypeName, + zhong: "1", + type: this.type, + pieonetype: this.pieonetype, + tid: this.tid, + month: this.option.xAxis.data[xIndex], + }, + }); + } else if (this.serviceData.level == "3") { //中队跳转 - this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':this.type}}); + this.router.navigate(["/statisticanalysis/CompangInfo"], { + queryParams: { name: params.name, type: this.type }, + }); } } }); } //返回按钮 - backBtn(){ - window.history.go(-1) - } - + backBtn() { + window.history.go(-1); + } } diff --git a/src/app/statistic-analysis/state/page-there/page-there.component.ts b/src/app/statistic-analysis/state/page-there/page-there.component.ts index 3d8021b..11184e4 100644 --- a/src/app/statistic-analysis/state/page-there/page-there.component.ts +++ b/src/app/statistic-analysis/state/page-there/page-there.component.ts @@ -1,286 +1,372 @@ -import { Component, OnInit } from '@angular/core'; -import { Router,ActivatedRoute } from '@angular/router'; -import {EchartsDataService} from '../../echarts-data.service'; -import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; -import { DateAdapter } from '@angular/material/core'; +import { Component, OnInit } from "@angular/core"; +import { Router, ActivatedRoute } from "@angular/router"; +import { EchartsDataService } from "../../echarts-data.service"; +import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar"; +import { DateAdapter } from "@angular/material/core"; declare var echarts: any; @Component({ - selector: 'app-page-there', - templateUrl: './page-there.component.html', - styleUrls: ['./page-there.component.scss'] + selector: "app-page-there", + templateUrl: "./page-there.component.html", + styleUrls: ["./page-there.component.scss"], }) export class PageThereComponent implements OnInit { + constructor( + private router: Router, + private activatedRoute: ActivatedRoute, + public echartsData: EchartsDataService, + public snackBar: MatSnackBar, + private adapter: DateAdapter + ) {} - constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter) { } + zhutu; //echarts实例 + option; + time: String; + buildingTypeName: String; + setTimeoutObj; //延时器需要清除 + headtext: string; + zhong: string; + type; + tabledata; + organizationId = []; + lastid; + tid; - zhutu//echarts实例 - option - time:String - buildingTypeName:String - setTimeoutObj//延时器需要清除 - headtext:string; - zhong:string - type - tabledata - organizationId=[] - lastid - tid - - ngOnDestroy():void{ - this.zhutu.clear() - this.zhutu.dispose() + ngOnDestroy(): void { + if (!this.zhutu) { + return; + } + this.zhutu.clear(); + this.zhutu.dispose(); } ngOnInit(): void { - if(sessionStorage.getItem('refresh') === 'true') { - sessionStorage.removeItem('refresh'); + if (sessionStorage.getItem("refresh") === "true") { + sessionStorage.removeItem("refresh"); location.reload(); - } - if(window.matchMedia("(max-width: 1400px)").matches){ - this.padHw=true + } + if (window.matchMedia("(max-width: 1400px)").matches) { + this.padHw = true; //this.padjt= - }else{ - this.padHw=false + } else { + this.padHw = false; } this.dateInit(); - let datayuex:string; - this.activatedRoute.queryParams.subscribe(param=>{ - this.lastid=param.id - this.type=param.type - this.headtext=param.headtext - datayuex=param.level - this.zhong=param.zhong - this.headName=datayuex+this.headtext; - this.tid=param.tid - this.pieonetype=param.pieonetype - if(this.headtext=='二维预案'){ - this.planType=1 - }else if(this.headtext=='三维预案'){ - this.planType=2 - }else if(this.headtext=='其他预案'){ - this.planType=4 - }else if(this.headtext=='文本预案'){ - this.planType=16 + let datayuex: string; + this.activatedRoute.queryParams.subscribe((param) => { + this.lastid = param.id; + this.type = param.type; + this.headtext = param.headtext; + datayuex = param.level; + this.zhong = param.zhong; + this.headName = datayuex + this.headtext; + this.tid = param.tid; + this.pieonetype = param.pieonetype; + if (this.headtext == "二维预案") { + this.planType = 1; + } else if (this.headtext == "三维预案") { + this.planType = 2; + } else if (this.headtext == "其他预案") { + this.planType = 4; + } else if (this.headtext == "文本预案") { + this.planType = 16; } //console.log(headName) - }); - - window.setTimeout(()=>{ - this.getechartsdata() - }) + }); + + window.setTimeout(() => { + this.getechartsdata(); + }); } - pieonetype//判断是级别还是类型，上个页面传过来的参数 - planType//预案类型 - padHw - headName - selectType:string = 'month'; //选择当前的 查询类型 按月/年 - async getechartsdata(){ - let paramdata/* ={ + pieonetype; //判断是级别还是类型，上个页面传过来的参数 + planType; //预案类型 + padHw; + headName; + selectType: string = "month"; //选择当前的 查询类型 按月/年 + async getechartsdata() { + let paramdata; /* ={ planStatus:this.tid=='pieone'?'': this.type, PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', OrganizationId:this.lastid, PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'' } */ - if(this.echartsData.planYear==undefined&&this.echartsData.planMonth!=undefined){ - this.echartsData.planYear=new Date().getFullYear() - paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - OrganizationId:this.lastid, - PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'', - TimeIntervalStart:this.echartsData.planYear+'-'+this.echartsData.planMonth, - TimeIntervalEnd:this.echartsData.planYear+'-'+this.echartsData.planMonth, - } - - }else if(this.echartsData.planYear==undefined&&this.echartsData.planMonth==undefined){ - paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - OrganizationId:this.lastid, - PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'', - } - }else{ - paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - OrganizationId:this.lastid, - PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:'', - TimeIntervalStart:this.echartsData.planYear+'-'+this.echartsData.planMonth, - TimeIntervalEnd:this.echartsData.planYear+'-'+this.echartsData.planMonth, - } + if ( + this.echartsData.planYear == undefined && + this.echartsData.planMonth != undefined + ) { + this.echartsData.planYear = new Date().getFullYear(); + paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + OrganizationId: this.lastid, + PlanType: + this.tid == "pieone" && this.pieonetype == "false" + ? this.planType + : "", + TimeIntervalStart: + this.echartsData.planYear + "-" + this.echartsData.planMonth, + TimeIntervalEnd: + this.echartsData.planYear + "-" + this.echartsData.planMonth, + }; + } else if ( + this.echartsData.planYear == undefined && + this.echartsData.planMonth == undefined + ) { + paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + OrganizationId: this.lastid, + PlanType: + this.tid == "pieone" && this.pieonetype == "false" + ? this.planType + : "", + }; + } else { + paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + OrganizationId: this.lastid, + PlanType: + this.tid == "pieone" && this.pieonetype == "false" + ? this.planType + : "", + TimeIntervalStart: + this.echartsData.planYear + "-" + this.echartsData.planMonth, + TimeIntervalEnd: + this.echartsData.planYear + "-" + this.echartsData.planMonth, + }; } - await this.echartsData.getData(paramdata,this.tid=='pieone'&&this.pieonetype=='true'?'/api/StatisticsAnalysis/Plans/Category':this.tid=='pieone'&&this.pieonetype=='false'?'/api/StatisticsAnalysis/Plans/Type': `/api/StatisticsAnalysis/Plans/Status`) - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) - // console.log(this.tabledata) - for(var i=0;i=date-10;i--) { - this.years.unshift(i) + dateInit() { + let date = new Date().getFullYear(); + for (let i = date; i >= date - 10; i--) { + this.years.unshift(i); } // console.log(this.years) } - - selectOneYear:any = (new Date()).getFullYear() //开始年份 - selectStartMonth:any = 1 //开始月份 - Submit (e) { - - } - selectStartYear:any = (new Date()).getFullYear() //开始年份 + selectOneYear: any = new Date().getFullYear(); //开始年份 + selectStartMonth: any = 1; //开始月份 + Submit(e) {} + selectStartYear: any = new Date().getFullYear(); //开始年份 topTextlabel = { show: true, // 开启显示 - position: 'top', // 在上方显示 + position: "top", // 在上方显示 distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 - verticalAlign: 'middle', - textStyle: { // 数值样式 - color: 'black', - fontSize: 12 - } - }//柱状图数值顶部显示 - zhiNameData = [] - zhiNumData = [] - tiaoshiPao:any + verticalAlign: "middle", + textStyle: { + // 数值样式 + color: "black", + fontSize: 12, + }, + }; //柱状图数值顶部显示 + zhiNameData = []; + zhiNumData = []; + tiaoshiPao: any; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i 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; - } + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 2; //每项显示文字个数 + 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; } - }//echarts两个字换行 + }, + }; //echarts两个字换行 /* 柱状图 */ - zhuzhuangtu(headName:string){ + zhuzhuangtu(headName: string) { var ec = echarts as any; - this.zhutu = ec.init(document.getElementById('zhidui'),'walden'); + this.zhutu = ec.init(document.getElementById("zhidui"), "walden"); this.option = { title: { - text: headName+`总数(${this.tabledata[0].totalCount})`, + text: headName + `总数(${this.tabledata[0].totalCount})`, left: "center", - top:0, + top: 0, //bottom: "540", textStyle: { - fontSize: 30 - } + fontSize: 30, + }, }, grid: { - top: this.padHw?90:110, - containLabel:true, + top: this.padHw ? 90 : 110, + containLabel: true, //bottom: 10 - }, + }, xAxis: { - id:this.organizationId, - type: 'category', - data: this.zhiNameData, - axisLabel: this.axisLabel, - + id: this.organizationId, + type: "category", + data: this.zhiNameData, + axisLabel: this.axisLabel, }, yAxis: { - type: 'value', - axisLabel:{ - textStyle:{ - fontSize :18, - color:'#000000' - } - - } + type: "value", + axisLabel: { + textStyle: { + fontSize: 18, + color: "#000000", + }, + }, }, tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.echartsData.biaogeTishida(params) + trigger: "item", + formatter: (params) => { + return this.echartsData.biaogeTishida(params); }, - position: this.echartsData.tableTooltipNoShowq + position: this.echartsData.tableTooltipNoShowq, /* backgroundColor:'rgba(255,255,255,1)', borderWidth:'1', borderRadius :'0' */ }, - series: [{ + series: [ + { data: this.zhiNumData, - type: 'bar', + type: "bar", markPoint: { - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + color: "rgba(220, 220, 220, 0.8)", }, - barWidth :'38', + barWidth: "38", //label: this.topTextlabel - }] + }, + ], }; - this.zhutu.getZr().on('click',params=>{ + this.zhutu.getZr().on("click", (params) => { // console.log(params.name) - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.zhutu.containPixel('grid',pointInPixel)) { - let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.zhutu.containPixel("grid", pointInPixel)) { + let xIndex = this.zhutu.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; /*事件处理代码书写位置*/ - this.echartsData.isQuery==false? this.echartsData.planYear=this.option.xAxis.data[xIndex]:this.echartsData.planYear==undefined - console.log(this.echartsData.planYear) - if((this.echartsData.level=='0'||this.echartsData.level=='1')&&this.tabledata[0].organizations[xIndex].subOrganizations.length>=1){ - this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':this.option.xAxis.data[xIndex],'name':this.headtext,'id':this.option.xAxis.id[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}}); - }else{ - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'xname':this.option.xAxis.data[xIndex],'name':this.headtext,'id':this.option.xAxis.id[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}}); + this.echartsData.isQuery == false + ? (this.echartsData.planYear = this.option.xAxis.data[xIndex]) + : this.echartsData.planYear == undefined; + console.log(this.echartsData.planYear); + if ( + (this.echartsData.level == "0" || this.echartsData.level == "1") && + this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1 + ) { + this.router.navigate(["/statisticanalysis/PageZhongDuiDetails"], { + queryParams: { + level: this.option.xAxis.data[xIndex], + name: this.headtext, + id: this.option.xAxis.id[xIndex], + type: this.type, + tid: this.tid, + pieonetype: this.pieonetype, + }, + }); + } else { + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + xname: this.option.xAxis.data[xIndex], + name: this.headtext, + id: this.option.xAxis.id[xIndex], + type: this.type, + tid: this.tid, + pieonetype: this.pieonetype, + }, + }); } - } }); /* this.zhutu.on('click', (params) => { diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts index 67a848a..df1b12e 100644 --- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts +++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts @@ -1,75 +1,76 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core'; -import { MatDatepickerInputEvent } from '@angular/material/datepicker'; -import { ActivatedRoute, Router } from '@angular/router'; -import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; -import { FormControl } from '@angular/forms'; -import { DateAdapter } from '@angular/material/core'; -import { PageTwoNameComponent } from '../page-two-name/page-two-name.component'; -import {EchartsDataService} from '../../echarts-data.service' -import { resolve } from 'dns'; +import { Component, Input, OnInit, ViewChild } from "@angular/core"; +import { MatDatepickerInputEvent } from "@angular/material/datepicker"; +import { ActivatedRoute, Router } from "@angular/router"; +import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar"; +import { FormControl } from "@angular/forms"; +import { DateAdapter } from "@angular/material/core"; +import { PageTwoNameComponent } from "../page-two-name/page-two-name.component"; +import { EchartsDataService } from "../../echarts-data.service"; +import { resolve } from "dns"; declare var echarts: any; @Component({ - selector: 'app-page-two-time', - templateUrl: './page-two-time.component.html', - styleUrls: ['./page-two-time.component.scss'] + selector: "app-page-two-time", + templateUrl: "./page-two-time.component.html", + styleUrls: ["./page-two-time.component.scss"], }) export class PageTwoTimeComponent implements OnInit { + constructor( + private router: Router, + public snackBar: MatSnackBar, + private adapter: DateAdapter, + public echartsData: EchartsDataService, + private activatedRoute: ActivatedRoute + ) {} - constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService,private activatedRoute: ActivatedRoute) { } - - @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 - @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 - @ViewChild('echartsComponent')echartsComponent :echartsComponent; //父组件中获得子组件的引用 + @ViewChild("appEcharts") appEcharts: echartsComponent; //父组件中获得子组件的引用 + @ViewChild("pageTwoName") pageTwoName: PageTwoNameComponent; //父组件中获得子组件的引用 + @ViewChild("echartsComponent") echartsComponent: echartsComponent; //父组件中获得子组件的引用 ngOnInit(): void { - this.activatedRoute.queryParams.subscribe(param=>{ - this.type=param.type + this.activatedRoute.queryParams.subscribe((param) => { + this.type = param.type; }); - this.echartsData.statefulInspectionToggle = true - this.dateInit() - this.bianli() - } - ngOnDestroy(): void { + this.echartsData.statefulInspectionToggle = true; + this.dateInit(); + this.bianli(); } + ngOnDestroy(): void {} - isQuery:boolean = true; //横纵向查询 - type + isQuery: boolean = true; //横纵向查询 + type; //shao - toggleTrue () { + toggleTrue() { //this.isQuery = true - this.echartsData.isQuery=true - this.echartsData.statefulInspectionToggle = true + this.echartsData.isQuery = true; + this.echartsData.statefulInspectionToggle = true; } //chen - toggleFalse () { + toggleFalse() { //this.isQuery = false - this.echartsData.isQuery=false - this.echartsData.statefulInspectionToggle = true - this.selectType = 'month' + this.echartsData.isQuery = false; + this.echartsData.statefulInspectionToggle = true; + this.selectType = "month"; } //返回 - goBack () { - //this.echartsComponent.twoExample.clear() - //this.echartsComponent.dispose() - this.echartsData.statefulInspectionToggle = true - sessionStorage.setItem('refresh', 'true'); + goBack() { + this.echartsData.statefulInspectionToggle = true; + sessionStorage.setItem("refresh", "true"); history.go(-1); } - selectType:string = 'month'; //选择当前的 查询类型 按月/年 + selectType: string = "month"; //选择当前的 查询类型 按月/年 - async changeTime (e) { - let data = e.value - await this.appEcharts.changeTime(data) - if(e.value=='month'){ - this.echartsData.selectType=0 - } - else if(e.value=='year'){ - this.years=[2020,2021,2022] - this.echartsData.selectType=2 + async changeTime(e) { + let data = e.value; + await this.appEcharts.changeTime(data); + if (e.value == "month") { + this.echartsData.selectType = 0; + } else if (e.value == "year") { + this.years = [2020, 2021, 2022]; + this.echartsData.selectType = 2; /* console.log(this.appEcharts.tabledata) this.appEcharts.tabledata[0].forEach((value,index,array) => { this.years.push(array[index].year) @@ -80,288 +81,390 @@ export class PageTwoTimeComponent implements OnInit { } //查询数据 - years= [] - selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] - tiaoshiPao:any - datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200] - datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] + years = []; + selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; + tiaoshiPao: any; + datayuey = [270, 253, 244, 199, 189, 173, 160, 198, 200]; + datayuex = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"]; //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i=date-10;i--) { + 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 = 12 //结束月份 + selectOneYear: any = new Date().getFullYear(); //开始年份 + selectTwoYear: any = new Date().getFullYear(); //结束年份 + selectStartMonth: any = 1; //开始月份 + selectEndMonth: any = 12; //结束月份 //按月查询 - monthSubmit (e) { - 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 - this.echartsData.selectStartMonth=e.selectStartMonth - this.echartsData.selectEndMonth=e.selectEndMonth - this.appEcharts.findYue() + monthSubmit(e) { + 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; + this.echartsData.selectStartMonth = e.selectStartMonth; + this.echartsData.selectEndMonth = e.selectEndMonth; + this.appEcharts.findYue(); } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请选择正确时间区段','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请选择正确时间区段", "确定", config); } } - - - selectStartYear:any = (new Date()).getFullYear()-1 //开始年份 - selectEndYear:any = (new Date()).getFullYear() //结束年份 + selectStartYear: any = new Date().getFullYear() - 1; //开始年份 + selectEndYear: any = new Date().getFullYear(); //结束年份 //按年查询 - yearSubmit (e) { + 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 - this.echartsData.selectOneYear=e.selectStartYear - this.echartsData.selectTwoYear=e.selectEndYear - this.appEcharts.findyear() + let startTime = + e.selectStartYear + "-" + 1 + "-" + 1 + " " + 0 + ":" + 0 + ":" + 0; + let endTime = + e.selectEndYear + "-" + 12 + "-" + 31 + " " + 23 + ":" + 59 + ":" + 59; + this.echartsData.selectOneYear = e.selectStartYear; + this.echartsData.selectTwoYear = e.selectEndYear; + this.appEcharts.findyear(); } else { const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('结束时间必须大于开始时间','确定',config); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("结束时间必须大于开始时间", "确定", config); } } - - - } @Component({ - selector: 'app-echarts', - templateUrl: './echarts.html', - styleUrls: ['./page-two-time.component.scss'] + selector: "app-echarts", + templateUrl: "./echarts.html", + styleUrls: ["./page-two-time.component.scss"], }) export class echartsComponent implements OnInit { + constructor( + private router: Router, + private activatedRoute: ActivatedRoute, + public snackBar: MatSnackBar, + private adapter: DateAdapter, + public echartsData: EchartsDataService + ) {} - constructor(private router: Router,private activatedRoute: ActivatedRoute,public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService) { } - - tid - zongcount=0 - type - organizationId=[] - tiaoshiPao:any - datayuey=[] - datayuex=[] - dataYearX = [] - dataYearY = [] - pieonetype//判断是级别还是类型，上个页面传过来的参数 - planType//预案类型 - toggleTrue (){} - //气泡提示数据获取 - bianli(){ - var arrshuzu='['; - for(var i=0;i{ - this.headtext=param.level - this.type=param.type - this.tid=param.tid - this.pieonetype=param.pieonetype + } + this.activatedRoute.queryParams.subscribe((param) => { + this.headtext = param.level; + this.type = param.type; + this.tid = param.tid; + this.pieonetype = param.pieonetype; }); - if(this.headtext=='二维预案'){ - this.planType=1 - }else if(this.headtext=='三维预案'){ - this.planType=2 - }else if(this.headtext=='其他预案'){ - this.planType=4 - }else if(this.headtext=='文本预案'){ - this.planType=16 + if (this.headtext == "二维预案") { + this.planType = 1; + } else if (this.headtext == "三维预案") { + this.planType = 2; + } else if (this.headtext == "其他预案") { + this.planType = 4; + } else if (this.headtext == "文本预案") { + this.planType = 16; } - window.setTimeout(()=>{ - this.getechartsData() - }) + window.setTimeout(() => { + this.getechartsData(); + }); } - - ngOnDestroy () { - this.twoExample.clear() - this.twoExample.dispose() - + + ngOnDestroy() { + this.twoExample.clear(); + this.twoExample.dispose(); } //获取数据 - async getechartsData(){ - this.datayuex=[] - this.datayuey=[] - this.zongcount=0 - let paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1, - TrendType:0 + async getechartsData() { + this.datayuex = []; + this.datayuey = []; + this.zongcount = 0; + let paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + objectType: + this.tid == "pieone" && this.pieonetype == "true" + ? 2 + : this.tid == "pieone" && this.pieonetype == "false" + ? 5 + : 1, + TrendType: 0, + }; + await this.echartsData.getData(paramdata, `/api/StatisticsAnalysis/Trends`); + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); + //console.log(this.tabledata) + for (var i = 0; i < this.tabledata[0].length; i++) { + if ( + this.tabledata[0][i].month >= this.echartsData.selectStartMonth || + this.tabledata[0][i].month <= this.echartsData.selectEndMonth + ) { + this.datayuex.push(this.tabledata[0][i].month); + this.datayuey.push(this.tabledata[0][i].count); + this.zongcount = this.zongcount + this.tabledata[0][i].count; + } } - await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) - //console.log(this.tabledata) - for(var i=0;i=this.echartsData.selectStartMonth||this.tabledata[0][i].month<=this.echartsData.selectEndMonth){ - this.datayuex.push(this.tabledata[0][i].month) - this.datayuey.push(this.tabledata[0][i].count) - this.zongcount=this.zongcount+this.tabledata[0][i].count - } - } - this.datayuex.forEach((value,index,array)=>{ - array[index]=array[index]+'月' - }) - - this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) - //this.oneInit() - this.twoInit(this.datayuex,this.datayuey) + this.datayuex.forEach((value, index, array) => { + array[index] = array[index] + "月"; + }); + + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.datayuey, + this.datayuex + ); + //this.oneInit() + this.twoInit(this.datayuex, this.datayuey); } - async changeTime (e) { - this.twoExample.clear() - this.twoExample.dispose() - if (e=='year') { + async changeTime(e) { + if (this.twoExample) { + this.twoExample.clear(); + this.twoExample.dispose(); + } + + if (e == "year") { //this.oneInit(this.dataYearX,this.dataYearY) - this.dataYearX=[] - this.dataYearY=[] - this.echartsData.selectType=2 - this.zongcount=0 - let paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1, - TrendType:this.echartsData.selectType - } - await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) - window.setTimeout(()=>{ - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) - console.log(this.tabledata) + this.dataYearX = []; + this.dataYearY = []; + this.echartsData.selectType = 2; + this.zongcount = 0; + let paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + objectType: + this.tid == "pieone" && this.pieonetype == "true" + ? 2 + : this.tid == "pieone" && this.pieonetype == "false" + ? 5 + : 1, + TrendType: this.echartsData.selectType, + }; + await this.echartsData.getData( + paramdata, + `/api/StatisticsAnalysis/Trends` + ); + window.setTimeout(() => { + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); + console.log(this.tabledata); //resolve(this.tabledata) - for(var i=0;i{ - this.dataYearX[index]=this.dataYearX[index]+'年' - }) - //this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) + this.dataYearX.forEach((value, index, array) => { + this.dataYearX[index] = this.dataYearX[index] + "年"; + }); + //this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) //this.oneInit() - this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) - this.twoInit(this.dataYearX,this.dataYearY) - }) + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.dataYearY, + this.dataYearX + ); + this.twoInit(this.dataYearX, this.dataYearY); + }); //this.twoInit(this.dataYearX,this.dataYearY) - } else { - this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.datayuey, + this.datayuex + ); //this.oneInit() - this.echartsData.selectType=0 - this.getechartsData() - this.twoInit(this.datayuex,this.datayuey) - + this.echartsData.selectType = 0; + this.getechartsData(); + this.twoInit(this.datayuex, this.datayuey); } } //按月查询 - async findYue(){ - this.twoExample.clear() - this.datayuex=[] - this.datayuey=[] - let paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1, - TrendType:this.echartsData.selectType - } - await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) - window.setTimeout(()=>{ - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) + async findYue() { + this.twoExample.clear(); + this.datayuex = []; + this.datayuey = []; + let paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + objectType: + this.tid == "pieone" && this.pieonetype == "true" + ? 2 + : this.tid == "pieone" && this.pieonetype == "false" + ? 5 + : 1, + TrendType: this.echartsData.selectType, + }; + await this.echartsData.getData(paramdata, `/api/StatisticsAnalysis/Trends`); + window.setTimeout(() => { + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); //console.log(this.tabledata[0].companyStatistics.trendStatistics.added) - for(var i=0;i=this.echartsData.selectStartMonth&&this.tabledata[0][i].month<=this.echartsData.selectEndMonth){ - this.datayuex.push(this.tabledata[0][i].month) - this.datayuey.push(this.tabledata[0][i].count) - } + for (var i = 0; i < this.tabledata[0].length; i++) { + if ( + this.tabledata[0][i].month >= this.echartsData.selectStartMonth && + this.tabledata[0][i].month <= this.echartsData.selectEndMonth + ) { + this.datayuex.push(this.tabledata[0][i].month); + this.datayuey.push(this.tabledata[0][i].count); } - this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) - this.twoInit(this.datayuex,this.datayuey) - }) + } + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.datayuey, + this.datayuex + ); + this.twoInit(this.datayuex, this.datayuey); + }); } //按年查询 - async findyear(){ - this.twoExample.clear() - this.dataYearX=[] - this.dataYearY=[] - let paramdata={ - planStatus:this.tid=='pieone'?'': this.type, - PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'', - objectType:this.tid=='pieone'&&this.pieonetype=='true'?2:this.tid=='pieone'&&this.pieonetype=='false'?5: 1, - TrendType:this.echartsData.selectType - } - await this.echartsData.getData(paramdata,`/api/StatisticsAnalysis/Trends`) - window.setTimeout(()=>{ - this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) + async findyear() { + this.twoExample.clear(); + this.dataYearX = []; + this.dataYearY = []; + let paramdata = { + planStatus: this.tid == "pieone" ? "" : this.type, + PlanCategory: + this.tid == "pieone" && this.pieonetype == "true" ? this.type : "", + objectType: + this.tid == "pieone" && this.pieonetype == "true" + ? 2 + : this.tid == "pieone" && this.pieonetype == "false" + ? 5 + : 1, + TrendType: this.echartsData.selectType, + }; + await this.echartsData.getData(paramdata, `/api/StatisticsAnalysis/Trends`); + window.setTimeout(() => { + this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate)); //console.log(this.tabledata[0].companyStatistics.trendStatistics.added) - for(var i=0;i=this.echartsData.selectOneYear&&this.tabledata[0][i].year<=this.echartsData.selectTwoYear){ - this.dataYearX.push(this.tabledata[0][i].year) - this.dataYearY.push(this.tabledata[0][i].count) - } + for (var i = 0; i < this.tabledata[0].length; i++) { + if ( + this.tabledata[0][i].year >= this.echartsData.selectOneYear && + this.tabledata[0][i].year <= this.echartsData.selectTwoYear + ) { + this.dataYearX.push(this.tabledata[0][i].year); + this.dataYearY.push(this.tabledata[0][i].count); } - this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) - this.twoInit(this.dataYearX,this.dataYearY) - }) + } + this.tiaoshiPao = this.echartsData.qipao( + this.tiaoshiPao, + this.dataYearY, + this.dataYearX + ); + this.twoInit(this.dataYearX, this.dataYearY); + }); } - headtext - twoExample:any; - tabledata - thisYear=new Date().getFullYear() - twoInit (X, Y) { + headtext; + twoExample: any; + tabledata; + thisYear = new Date().getFullYear(); + twoInit(X, Y) { /* X.forEach((element,index,array) => { array[index]=array[index]+'月' }); */ - let that = this - this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp'); + let that = this; + this.twoExample = echarts.init(document.getElementById("two"), "skinUpp"); var option = { // 标题 title: { - text: this.headtext+`：总数（${this.zongcount}）`, + text: this.headtext + `：总数（${this.zongcount}）`, top: -4, - left: 'center', + left: "center", bottom: 100, - textStyle:{ + textStyle: { //文字颜色 fontSize: 30, - color:'#000', - } + color: "#000", + }, }, grid: { top: 90, }, tooltip: { - trigger: 'axis', + trigger: "axis", position: this.echartsData.tableTooltipNoShowq, /* formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增') @@ -369,95 +472,117 @@ export class echartsComponent implements OnInit { }, // x轴 xAxis: { - type: 'category', + type: "category", data: X, boundaryGap: true, axisLabel: { color: "#000", //刻度线标签颜色 - textStyle:{ - fontSize :18, - color:'#000000' + textStyle: { + fontSize: 18, + color: "#000000", }, }, //设置坐标轴字体颜色和宽度 - axisLine: { + axisLine: { lineStyle: { color: "#000", }, }, - splitLine: {//分割线配置 - show:true, + splitLine: { + //分割线配置 + show: true, lineStyle: { - color: '#999', - } - } + color: "#999", + }, + }, }, // y轴 yAxis: { - type: 'value', - name: '个', + type: "value", + name: "个", axisLabel: { - textStyle:{ - fontSize :15, - color:'#000000' + textStyle: { + fontSize: 15, + color: "#000000", }, - color: "#000" //刻度线标签颜色 + color: "#000", //刻度线标签颜色 }, - //设置坐标轴字体颜色和宽度 - axisLine: { + //设置坐标轴字体颜色和宽度 + axisLine: { lineStyle: { color: "#000", - } - } + }, + }, }, // 数据 - series: [{ - name: '单位预案编制数量', - type: 'line', + series: [ + { + name: "单位预案编制数量", + type: "line", markPoint: { - - symbolSize:[65, 65], - data: this.tiaoshiPao - }, + symbolSize: [65, 65], + data: this.tiaoshiPao, + }, data: Y, - } + }, ], }; this.twoExample.setOption(option); - this.twoExample.getZr().on('click', (params) => { + this.twoExample.getZr().on("click", (params) => { // console.log(params.name) - /* this.echartsData.statefulInspectionName =params.name+headtext; + /* this.echartsData.statefulInspectionName =params.name+headtext; this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */ - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.twoExample.containPixel('grid',pointInPixel)) { - let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; - if(this.echartsData.selectType==2){ - this.echartsData.planYear=X[xIndex].substring(0,4) - this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':this.headtext,'headtext':X[xIndex],'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}}); - }else{ + const pointInPixel = [params.offsetX, params.offsetY]; + if (this.twoExample.containPixel("grid", pointInPixel)) { + let xIndex = this.twoExample.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; + if (this.echartsData.selectType == 2) { + this.echartsData.planYear = X[xIndex].substring(0, 4); + this.router.navigate( + ["/statisticanalysis/stataPageThereYearComponent"], + { + queryParams: { + level: this.headtext, + headtext: X[xIndex], + type: this.type, + tid: this.tid, + pieonetype: this.pieonetype, + }, + } + ); + } else { /*事件处理代码书写位置*/ - if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){ - this.twoExample.clear() - this.echartsData.isQuery=true + if ( + this.echartsData.level == "0" || + this.echartsData.level == "1" || + this.echartsData.level == "2" + ) { + this.twoExample.clear(); + this.echartsData.isQuery = true; this.twoExample.setOption(option); - this.echartsData.planMonth=option.xAxis.data[xIndex].substring(0,1) + this.echartsData.planMonth = option.xAxis.data[xIndex].substring( + 0, + 1 + ); //this.router.navigate(['/statisticanalysis/statePageOne/time'],{queryParams:{'zhong':'1','type':this.type,'pieonetype':this.pieonetype,'tid':this.tid,'month':option.xAxis.data[xIndex]}}); //this.router.navigate(['/statisticanalysis/statePageOne/name'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':this.headtext,'type':this.type}}); - } else if(this.echartsData.level=='3'){ + } else if (this.echartsData.level == "3") { //中队跳转 - this.router.navigate(['/statisticanalysis/AllPlan'],{queryParams:{'name':params.name,'type':this.type,'tid':this.tid,'pieonetype':this.pieonetype}}); + this.router.navigate(["/statisticanalysis/AllPlan"], { + queryParams: { + name: params.name, + type: this.type, + tid: this.tid, + pieonetype: this.pieonetype, + }, + }); } - } - } - }); } - threeExample:any; - - - - + threeExample: any; } diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts index 79b966b..5fd8911 100644 --- a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts @@ -69,8 +69,11 @@ export class PageZhongDuiDetailsComponent implements OnInit { }) } ngOnDestroy(): void { - this.detailPlanEchart.clear() - this.detailPlanEchart.dispose() + if (this.detailPlanEchart) { + this.detailPlanEchart.clear() + this.detailPlanEchart.dispose() + } + } async getechartsdata(){ let paramdata={ diff --git a/src/index.html b/src/index.html index e709411..fac3faa 100644 --- a/src/index.html +++ b/src/index.html @@ -27,9 +27,9 @@ - - + -->