From 10bec5eb87b3c8172bf8509bbfd97b8177791898 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Fri, 4 Aug 2023 16:27:16 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E4=BF=AE=E6=94=B9echarts?= =?UTF-8?q?=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entry-plan-look.component.html | 4 +- .../entry-plan/entry-plan.component.html | 4 +- .../open-plan/open-plan.component.html | 4 +- .../pass-plan/pass-plan.component.html | 8 +- .../add-unit-two-time.component.ts | 805 ++++++++------- ...dd-unit-two-type-statistics.component.html | 24 +- .../add-unit-two-type-statistics.component.ts | 941 ++++++++++-------- .../building-type-one.component.ts | 325 +++--- .../building-type-two-reverse.component.html | 22 +- .../building-type-two-reverse.component.ts | 720 ++++++++------ src/app/tabbar/tabbar.component.html | 34 +- 11 files changed, 1610 insertions(+), 1281 deletions(-) diff --git a/src/app/plan-management/entry-plan-look/entry-plan-look.component.html b/src/app/plan-management/entry-plan-look/entry-plan-look.component.html index 0ac7849..331bfc9 100644 --- a/src/app/plan-management/entry-plan-look/entry-plan-look.component.html +++ b/src/app/plan-management/entry-plan-look/entry-plan-look.component.html @@ -112,8 +112,8 @@ 改名 - 转在线导入 + 编辑 -
+
diff --git a/src/app/plan-management/open-plan/open-plan.component.html b/src/app/plan-management/open-plan/open-plan.component.html index d9eb115..1071a5a 100644 --- a/src/app/plan-management/open-plan/open-plan.component.html +++ b/src/app/plan-management/open-plan/open-plan.component.html @@ -66,14 +66,14 @@ -
+
diff --git a/src/app/plan-management/pass-plan/pass-plan.component.html b/src/app/plan-management/pass-plan/pass-plan.component.html index 9d743e5..8214f73 100644 --- a/src/app/plan-management/pass-plan/pass-plan.component.html +++ b/src/app/plan-management/pass-plan/pass-plan.component.html @@ -90,11 +90,11 @@ - 应急预案(国家级) + Ⅲ级预案 Ⅳ级预案 Ⅴ级预案 @@ -131,14 +131,14 @@
-
+
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..11b2784 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,474 +1,607 @@ -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() - }) - + // this.forArr.forEach((item) => { + // item.echart.clear(); + // item.echart.dispose(); + // }); + this.xxx.echart.clear(); + this.xxx.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'); - var option = { - grid: { - top: 90, - }, - // 标题 - title: { - text: this.headname+`：总数（${this.zongcount}）`, - top:-4, - left: 'center', - textStyle:{ - //文字颜色 - color:'#000', - fontSize:30 - } + xxx = { echart: null }; + twoInit(date, dateNum, typeName) { + let item = this.xxx; + // this.forArr.forEach((item,key) => { + + item.echart = echarts.init(document.getElementById("gaoceng"), "skinUpp"); + var option = { + grid: { + top: 90, + }, + // 标题 + title: { + text: this.headname + `：总数（${this.zongcount}）`, + top: -4, + left: "center", + textStyle: { + //文字颜色 + color: "#000", + fontSize: 30, }, - //提示框 - tooltip: { - trigger: 'axis', - formatter: function (params) { - //console.log(params) - return '时间:' + params[0].axisValueLabel + '
数量: ' + params[0].data; + }, + //提示框 + tooltip: { + trigger: "axis", + formatter: function (params) { + //console.log(params) + return ( + "时间:" + params[0].axisValueLabel + "
数量: " + params[0].data + ); }, - /* formatter: (params)=>{ + /* 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.tableTooltipNoShow + position: this.serviceData.tableTooltipNoShow, + }, + // x轴 + xAxis: { + type: "category", + data: date, + axisLabel: { + textStyle: { + fontSize: 16, + color: "#000000", + }, + color: "#000", //刻度线标签颜色 }, - // x轴 - xAxis: { - type: 'category', - data: date, - axisLabel: { - textStyle:{ - fontSize :16, - color:'#000000' - }, - color: "#000", //刻度线标签颜色 + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: { - color: "#000", - }, + }, + splitLine: { + //分割线配置 + show: true, + lineStyle: { + color: "#999", }, - splitLine: {//分割线配置 - show:true, - lineStyle: { - color: '#999', - } - } }, - // y轴 - yAxis: { - //min:10, - type: 'value', - name: '个', - axisLabel: { - textStyle:{ - fontSize :16, - color:'#000000' - }, - color: "#000" //刻度线标签颜色 + }, + // y轴 + yAxis: { + //min:10, + type: "value", + name: "个", + axisLabel: { + textStyle: { + fontSize: 16, + color: "#000000", }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: { - color: "#000", - } - } + color: "#000", //刻度线标签颜色 }, - // 数据 - series: [{ - name: typeName, - type: 'line', - markPoint: { - - symbolSize:[65, 65], - data: this.tiaoshiPao + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", }, - 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}}); + }, + }, + // 数据 + series: [ + { + name: typeName, + type: "line", + markPoint: { + 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, + }, + } + ); - /* 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-statistics/add-unit-two-type-statistics.component.html b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html index 9102a8d..2e63595 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html @@ -10,29 +10,17 @@
- - + +
-
- +
\ No newline at end of file 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..96b4379 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 - //this.padjt= - }else{ - this.padHw=false + if (window.matchMedia("(max-width: 1400px)").matches) { + this.padHw = true; + } 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) { + item.echart.clear(); + item.echart.dispose(); + } + }); + echarts.echart.clear(); + echarts.echart.dispose(); } //获取服务层数据 - async getechartsData(){ - let paramsdata - if(this.year==null){ + async getechartsData() { + let paramsdata; + if (this.year == null) { paramsdata = { - id:this.lastId, + id: this.lastId, //organizationId:'1' + }; + } else { + paramsdata = { + 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'); - let option = { - title: { - text: this.headname+`：总数（${this.tabledata[0].totalCount}）`, - left: "center", - top: -4, - //bottom: '80%', - textStyle: { - fontSize: 30 - } + }; + + echarts = { echart: null }; + barEcharts() { + let item = echarts; + console.log("this.data.zuzhiorBuilding", this.forArr); + // this.forArr.forEach((item) => { + item.echart = echarts.init(document.getElementById("gaoceng"), "walden"); + let option = { + title: { + text: this.headname + `：总数（${this.tabledata[0].totalCount}）`, + left: "center", + top: -4, + //bottom: '80%', + textStyle: { + fontSize: 30, }, - grid: { - 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, + grid: { + 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, + }, + 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.zhiorbuild == "zhi" + ? this.data.biaogeTishiZhi(params) + : this.data.biaogeTishida(params); }, - tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.zhiorbuild=="zhi"?this.data.biaogeTishiZhi(params): this.data.biaogeTishida(params) + position: this.data.tableTooltipNoShow2, + }, + series: [ + { + data: this.zhiorbuild == "zhi" ? this.buildnumData : this.zhiNumData, + type: "bar", + markPoint: { + data: this.tiaoshiPao, }, - position: this.data.tableTooltipNoShow2 - }, - series: [{ - data: this.zhiorbuild=="zhi"?this.buildnumData: this.zhiNumData, - type: 'bar', - markPoint: { - data: this.tiaoshiPao + backgroundStyle: { + color: "rgba(220, 220, 220, 0.8)", }, - 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]; - 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'}}) - } - 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){ - //总队，支队跳转 - 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}}); - } + 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 + ) { + console.log("走这里了吗"); + // 总队，支队跳转 + this.router.navigate( + ["/statisticanalysis/addUnit_one/addUnit_two_typeDetails"], + { + queryParams: { + organizationName: option.xAxis.data[xIndex], + buildingTypeName: this.headname, + id: this.lastId, + zhuId: option.xAxis.id[xIndex], + type: this.zhiorbuild == "zhi" ? "zhi" : "build", + }, + } + ); + } 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 + ) { + //总队，支队跳转 + 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..839b08a 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() + 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 + ) { + + console.log(111) //总队,支队，大队跳转 - 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 { + console.log(222) //中队跳转 - 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-two-reverse/building-type-two-reverse.component.html b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html index b12d73e..d3bb61e 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html +++ b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html @@ -15,27 +15,9 @@
-
-
- +
- + \ No newline at end of file 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..1bc8781 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,477 @@ -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() - }) - } - 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 { + if (item.echart) { + item.echart.clear(); + item.echart.dispose(); } - this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData) - this.barEcharts() + }); + } + 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 < 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.tiaoshiPao = this.data.qipao( + this.tiaoshiPao, + this.zhiNumData, + this.zhiNameData + ); + this.barEcharts(); } axisLabel = { interval: 0, - 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两个字换行 + 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', - textStyle: { - fontSize: 30 - } + lengthdata = []; //提示数据 + count = 0; //总数 + indexData = []; //所有数据 + organizationId = []; + tabledata; + + barEcharts() { + let item = this.forArr.find((v) => this.headname.indexOf(v.name) !== -1); + item.echart = echarts.init( + document.getElementById("buildingTypeEcharts"), + "walden" + ); + let option = { + title: { + text: this.headname + this.tabledata[0].totalCount, + left: "center", + top: this.padHw ? "18" : "0", + bottom: this.padHw ? "0" : "600", + textStyle: { + fontSize: 18, + }, + }, + grid: { + bottom: "15%", + }, + xAxis: { + id: this.organizationId, + type: "category", + data: this.zhiNameData, + axisLabel: { + interval: 0, + rotate: 28, + textStyle: { + 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: { + 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); + }, + position: this.data.tableTooltipNoShow2, + }, + series: [ + { + data: this.zhiNumData, + type: "bar", + markPoint: { + data: this.tiaoshiPao, }, - tooltip: { - trigger: 'item', - formatter: (params)=>{ - return this.tableTooltip(params) - }, - position: this.data.tableTooltipNoShow2 + backgroundStyle: { + color: "rgba(220, 220, 220, 0.8)", }, - series: [{ - data: this.zhiNumData, - type: 'bar', - markPoint: { - data:this.tiaoshiPao - }, - //showBackground: true, - backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' + barWidth: "38", + }, + ], + }; + item.echart.setOption(option); + item.echart.getZr().on("click", (params) => { + const pointInPixel = [params.offsetX, params.offsetY]; + // console.log("点击图表", pointInPixel); + if (item.echart.containPixel("grid", pointInPixel)) { + let xIndex = item.echart.convertFromPixel({ seriesIndex: 0 }, [ + params.offsetX, + params.offsetY, + ])[0]; + // console.log("点击柱状图index", xIndex); + // console.log("this.data", this.data); + // console.log("this.tabledata", this.tabledata); + if ( + (this.data.level == "0" || this.data.level == "1") && + this.tabledata[0].organizations[xIndex].subOrganizations.length !== 0 + ) { + // 总队，支队跳转 + 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], }, - 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}}); + } + ); + return; + } 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}}); } - - }); - }) - - + return; + }); } //提示框表格 - 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/tabbar/tabbar.component.html b/src/app/tabbar/tabbar.component.html index 03e8a8c..27ba2c0 100644 --- a/src/app/tabbar/tabbar.component.html +++ b/src/app/tabbar/tabbar.component.html @@ -226,39 +226,7 @@ 帮助文档下载中,请等待... --> - - - - - - - - - - +