From ed1f680b769229226385eed1c4a0226de08135f3 Mon Sep 17 00:00:00 2001 From: Sjh <55341701@qq.com> Date: Mon, 27 May 2024 16:46:32 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gis-labeling/gis-labeling.component.ts | 28 +- .../statistic-analysis/home/home.component.ts | 1130 +++++++++-------- src/index.html | 4 +- 3 files changed, 643 insertions(+), 519 deletions(-) diff --git a/src/app/gis-management/gis-labeling/gis-labeling.component.ts b/src/app/gis-management/gis-labeling/gis-labeling.component.ts index 0bfd40c..cc6af86 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -121,7 +121,12 @@ export class GisLabelingComponent implements OnInit { }); }); } - ngOnInit(): void { + isHN = false; //是否是海南 + async ngOnInit(): Promise { + await this.getProfiles(); + this.Profiles.organizationName.indexOf("海南") !== -1 + ? (this.isHN = true) + : (this.isHN = false); window.setTimeout(() => { this.mapInit(); }, 0); @@ -182,6 +187,16 @@ export class GisLabelingComponent implements OnInit { }); } + Profiles; + getProfiles() { + return new Promise((resolve, reject) => { + this.http.get("/api/Account/Profiles").subscribe((res) => { + this.Profiles = res; + resolve(); + }); + }); + } + //构造重点单位checkbox控制器 buildUnits() { const arr = this.keyUnitList.map((item) => { @@ -287,7 +302,7 @@ export class GisLabelingComponent implements OnInit { ketUnitSubmit(value) { if (this.markers.length == 0) { let paramsdata: any = { - PageSize: 99999, + PageSize: 9999, BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ["123"], }; @@ -322,7 +337,7 @@ export class GisLabelingComponent implements OnInit { if (this.unitAreaDefault == "-1") { //如果勾选全部 let paramsdata: any = { - PageSize: 99999, + PageSize: 9999, BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ["123"], }; @@ -1264,7 +1279,7 @@ export class GisLabelingComponent implements OnInit { features: ["bg", "road", "point", "building"], mapStyle: "amap://styles/light", }); - this.map.setCity("上海市"); + this.isHN ? this.map.setCity("海南省") : this.map.setCity("上海市"); } this.satelliteModel = false; this.loadModel = false; @@ -1284,7 +1299,7 @@ export class GisLabelingComponent implements OnInit { layers: [layer], WebGLParams: { preserveDrawingBuffer: true }, }); - that.map.setCity("上海市"); + this.isHN ? that.map.setCity("海南省") : that.map.setCity("上海市"); that.mouseTool = MapFactory.MouseToolInstance(that.map); } @@ -1744,8 +1759,7 @@ export class GisLabelingComponent implements OnInit { console.log("走这里了吗2", that.routeStartList); that.routeStartList = []; setTimeout(() => { - - that.routeStartList = [...result.tips]; + that.routeStartList = [...result.tips]; console.log("走这里了吗3", that.routeStartList); }, 0); diff --git a/src/app/statistic-analysis/home/home.component.ts b/src/app/statistic-analysis/home/home.component.ts index 3b76421..eef7df3 100644 --- a/src/app/statistic-analysis/home/home.component.ts +++ b/src/app/statistic-analysis/home/home.component.ts @@ -1,461 +1,561 @@ -import { Component, OnInit, Renderer2, ElementRef } from '@angular/core'; -import { HttpClient } from '@angular/common/http' -import { Router } from '@angular/router'; -import { EchartsDataService } from '../echarts-data.service'; -import { MapFactory } from '@src/modules/map/declare/factory'; -import { IMap } from '@src/modules/map/declare/map'; +import { Component, OnInit, Renderer2, ElementRef } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; +import { EchartsDataService } from "../echarts-data.service"; +import { MapFactory } from "@src/modules/map/declare/factory"; +import { IMap } from "@src/modules/map/declare/map"; declare var echarts: any; @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'] + selector: "app-home", + templateUrl: "./home.component.html", + styleUrls: ["./home.component.scss"], }) export class HomeComponent implements OnInit { - - constructor(private http: HttpClient, private render2: Renderer2, public element: ElementRef, private router: Router, public emitService: EchartsDataService) { } - - map: IMap; //地图 - yuandata - ngOnInit() { - this.getechartsdata() - this.getYearlyCompleteProgress() - window.setTimeout(() => { - /* this.unitType() - this.unitData() - this.keyUnit() */ - this.mapInit() //初始化地图 - }, 0) - } - - - - //获得年度完成情况 - completeProgress: any = { - monthlyCompleteProgress: '', - yearlyCompleteProgress: '' - } - getYearlyCompleteProgress() { - this.http.get('/api/StatisticsAnalysis/Companies/YearlyCompleteProgress').subscribe((data) => { - // console.log('获得年度完成情况', data) - this.completeProgress = data - }) - } - integrity(width) { - let style: any = {} - style.width = width + '%'; - return style - } - - //更新echarts视图 - /* updateEcharts(){ + constructor( + private http: HttpClient, + private render2: Renderer2, + public element: ElementRef, + private router: Router, + public emitService: EchartsDataService + ) {} + + map: IMap; //地图 + yuandata; + ngOnInit() { + this.getechartsdata(); + this.getYearlyCompleteProgress(); + window.setTimeout(() => { + this.mapInit(); //初始化地图 + }, 0); + } + + //获得年度完成情况 + completeProgress: any = { + monthlyCompleteProgress: "", + yearlyCompleteProgress: "", + }; + getYearlyCompleteProgress() { + this.http + .get("/api/StatisticsAnalysis/Companies/YearlyCompleteProgress") + .subscribe((data) => { + // console.log('获得年度完成情况', data) + this.completeProgress = data; + }); + } + integrity(width) { + let style: any = {}; + style.width = width + "%"; + return style; + } + + //更新echarts视图 + /* updateEcharts(){ this.planState.resize() this.chartDwsjcj.resize() this.chartZdgzqy.resize() } */ - //获取数据 - ordata - buildtableData - lengthdata = []//建筑提示数据 - buildcount = 0//建筑总数 - indexData = []//建筑所有数据 - async getechartsdata() { - let paramsdata: any = { - OrganizationId: this.orid || '', - //organizationId:'1' - } - //获取组织机构数据 - await this.emitService.getData(paramsdata, `/api/StatisticsAnalysis/Companies`) - this.ordata = JSON.parse(JSON.stringify(this.emitService.allDate)) - console.log(this.ordata) - this.keyUnitNum = this.ordata[0].organizationStatistics.totalCount - this.unitData() - //获取预案状态统计数据 - await this.emitService.getData(paramsdata, `/api/StatisticsAnalysis/Plans`) - this.unitType() - //获取建筑类型统计数据 - await this.emitService.getData(paramsdata, `/api/StatisticsAnalysis/BuildingTypes`) - this.keyUnit() - } - //获取年度完成情况数据 - getYearData() { - - } - - - threePlan() { - // this.router.navigate(['/planManagement/entryPlan']) - } - twoPlan() { - // this.router.navigate(['/planManagement/entryPlan']) - } - cardPlan() { - // this.router.navigate(['/planManagement/entryPlan']) - } - otherPlan() { - // this.router.navigate(['/planManagement/entryPlan']) - } - - //计划更新页面跳转 - scheduled() { - this.router.navigate(['/statisticanalysis/scheduledUpdates']) - } - - ngOnDestroy(): void { - - - } - //初始化地图 - adcode: any //行政编码 - level = sessionStorage.getItem("level")//组织级别 - orid - - //封装Gaode - getEchartsData(data) { - return new Promise((resolve, reject) => { - let paramsdata: any = { - name: data.properties.name, - level: Number(this.level) + 1 - } - this.http.get("/api/Organizations/GetIdByName", { params: paramsdata }).subscribe((data: any) => { - this.orid = data[0] - this.getechartsdata() - resolve('success') - }) - }) - } - setEchartsData() { - this.orid = '' - this.getechartsdata() - } - //封装Gaode - - mapInit() { - //创建地图 - this.map = MapFactory.MapInstance('chartMap', { - cursor: 'default', - zooms: [8, 16], - mapStyle: "amap://styles/grey", + //获取数据 + ordata; + buildtableData; + lengthdata = []; //建筑提示数据 + buildcount = 0; //建筑总数 + indexData = []; //建筑所有数据 + async getechartsdata() { + let paramsdata: any = { + OrganizationId: this.orid || "", + //organizationId:'1' + }; + //获取组织机构数据 + await this.emitService.getData( + paramsdata, + `/api/StatisticsAnalysis/Companies` + ); + this.ordata = JSON.parse(JSON.stringify(this.emitService.allDate)); + console.log(this.ordata); + this.keyUnitNum = this.ordata[0].organizationStatistics.totalCount; + this.unitData(); + //获取预案状态统计数据 + await this.emitService.getData(paramsdata, `/api/StatisticsAnalysis/Plans`); + this.unitType(); + //获取建筑类型统计数据 + await this.emitService.getData( + paramsdata, + `/api/StatisticsAnalysis/BuildingTypes` + ); + this.keyUnit(); + } + //获取年度完成情况数据 + getYearData() {} + + threePlan() { + // this.router.navigate(['/planManagement/entryPlan']) + } + twoPlan() { + // this.router.navigate(['/planManagement/entryPlan']) + } + cardPlan() { + // this.router.navigate(['/planManagement/entryPlan']) + } + otherPlan() { + // this.router.navigate(['/planManagement/entryPlan']) + } + + //计划更新页面跳转 + scheduled() { + this.router.navigate(["/statisticanalysis/scheduledUpdates"]); + } + + ngOnDestroy(): void {} + //初始化地图 + adcode: any; //行政编码 + level = sessionStorage.getItem("level"); //组织级别 + orid; + + //封装Gaode + getEchartsData(data) { + return new Promise((resolve, reject) => { + let paramsdata: any = { + name: data.properties.name, + level: Number(this.level) + 1, + }; + this.http + .get("/api/Organizations/GetIdByName", { params: paramsdata }) + .subscribe((data: any) => { + this.orid = data[0]; + this.getechartsdata(); + resolve("success"); }); - this.map.setAdministrativeAreaStyle(this, this.getEchartsData, this.setEchartsData) - } - planNum = [] - keyUnitNum - dataGetNum = 6578 - - threePlanNum = "0" - twoPlanNum = "0" - cardPlanNum = "0" - otherPlanNum = "0" - - aPlan = '0' - bPlan = '0' - cPlan = '0' - dPlan = '0' - ePlan = '0' - ngAfterViewInit(): void { + }); + } + setEchartsData() { + this.orid = ""; + this.getechartsdata(); + } + //封装Gaode + + mapInit() { + //创建地图 + this.map = MapFactory.MapInstance("chartMap", { + cursor: "default", + zooms: [8, 16], + mapStyle: "amap://styles/grey", + }); + this.map.setAdministrativeAreaStyle( + this.getEchartsData, + this.setEchartsData + ); + } + planNum = []; + keyUnitNum; + threePlanNum = "0"; + twoPlanNum = "0"; + cardPlanNum = "0"; + otherPlanNum = "0"; + + aPlan = "0"; + bPlan = "0"; + cPlan = "0"; + dPlan = "0"; + ePlan = "0"; + ngAfterViewInit(): void {} + + planState; + + //预案状态统计 + pagedata; + pagedataCount; + unitType() { + this.planNum = []; + this.pagedata = JSON.parse(JSON.stringify(this.emitService.allDate)); + console.log(this.pagedata); + this.pagedataCount = String( + this.pagedata[0].planStatusStatistics.totalCount + ); + for (var i = 0; i < this.pagedataCount.length; i++) { + this.planNum.push(this.pagedataCount[i]); } - - planState - - - //预案状态统计 - pagedata - pagedataCount - unitType() { - this.planNum = [] - this.pagedata = JSON.parse(JSON.stringify(this.emitService.allDate)) - console.log(this.pagedata) - this.pagedataCount = String(this.pagedata[0].planStatusStatistics.totalCount) - for (var i = 0; i < this.pagedataCount.length; i++) { - this.planNum.push(this.pagedataCount[i]) - } - //this.planNum.push(this.pagedataCount.split(',')) - if (this.pagedata[0].planTypeStatistics.planTypes.length <= 0) { - this.threePlanNum = '0' - this.twoPlanNum = '0' - this.cardPlanNum = '0' - this.otherPlanNum = '0' - } else { - this.pagedata[0].planTypeStatistics.planTypes.forEach((value, index, array) => { - if (array[index].planTypeName == 'Plan2D') { - this.twoPlanNum = array[index].count - } else if (array[index].planTypeName == 'Plan3D') { - this.threePlanNum = array[index].count - } else if (array[index].planTypeName == 'Other') { - this.otherPlanNum = array[index].count - } else if (array[index].planTypeName == 'PlanText') { - this.cardPlanNum = array[index].count - } - }); + //this.planNum.push(this.pagedataCount.split(',')) + if (this.pagedata[0].planTypeStatistics.planTypes.length <= 0) { + this.threePlanNum = "0"; + this.twoPlanNum = "0"; + this.cardPlanNum = "0"; + this.otherPlanNum = "0"; + } else { + this.pagedata[0].planTypeStatistics.planTypes.forEach( + (value, index, array) => { + if (array[index].planTypeName == "Plan2D") { + this.twoPlanNum = array[index].count; + } else if (array[index].planTypeName == "Plan3D") { + this.threePlanNum = array[index].count; + } else if (array[index].planTypeName == "Other") { + this.otherPlanNum = array[index].count; + } else if (array[index].planTypeName == "PlanText") { + this.cardPlanNum = array[index].count; + } } - if (this.pagedata[0].planCategoryStatistics.planCategories.length <= 0) { - this.aPlan = '0' - this.bPlan = '0' - this.cPlan = '0' - this.dPlan = '0' - this.ePlan = '0' - } else { - this.pagedata[0].planCategoryStatistics.planCategories.forEach((value, index, array) => { - if (array[index].planCategoryName == 'LevelOne') { - this.aPlan = array[index].count - } else if (array[index].planCategoryName == 'LevelTwo') { - this.bPlan = array[index].count - } else if (array[index].planCategoryName == 'LevelThree') { - this.cPlan = array[index].count - } else if (array[index].planCategoryName == 'LevelFour') { - this.dPlan = array[index].count - } else if (array[index].planCategoryName == 'LevelFive') { - this.ePlan = array[index].count - } - }); + ); + } + if (this.pagedata[0].planCategoryStatistics.planCategories.length <= 0) { + this.aPlan = "0"; + this.bPlan = "0"; + this.cPlan = "0"; + this.dPlan = "0"; + this.ePlan = "0"; + } else { + this.pagedata[0].planCategoryStatistics.planCategories.forEach( + (value, index, array) => { + if (array[index].planCategoryName == "LevelOne") { + this.aPlan = array[index].count; + } else if (array[index].planCategoryName == "LevelTwo") { + this.bPlan = array[index].count; + } else if (array[index].planCategoryName == "LevelThree") { + this.cPlan = array[index].count; + } else if (array[index].planCategoryName == "LevelFour") { + this.dPlan = array[index].count; + } else if (array[index].planCategoryName == "LevelFive") { + this.ePlan = array[index].count; + } } + ); + } - - /* */ - let planStateOptionsZhi = { - title: { - text: `预案状态统计（${this.pagedata[0].planStatusStatistics.totalCount}份）`, - left: 'left', - textStyle: { - color: '#fff', - fontWeight: 'normal' - } + /* */ + let planStateOptionsZhi = { + title: { + text: `预案状态统计（${this.pagedata[0].planStatusStatistics.totalCount}份）`, + left: "left", + textStyle: { + color: "#fff", + fontWeight: "normal", + }, + }, + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + }, + series: [ + { + name: "访问来源", + type: "pie", + radius: "60%", + center: ["50%", "58%"], + label: { + show: true, + //fontSize:10, + formatter: "{b}\n{d|{c}份}", + rich: { + d: { + align: "center", + }, }, - tooltip: { - trigger: 'item', - formatter: '{b} : {c} ({d}%)' + }, + data: [ + { + value: + this.pagedata[0].planStatusStatistics.planStatuses[0] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[0].count + : 0, + name: "预案新增", + type: 1, + planStatusName: + this.pagedata[0].planStatusStatistics.planStatuses[0] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[0] + .planStatusName + : "", }, - series: [ - { - name: '访问来源', - type: 'pie', - radius: '60%', - center: ['50%', '58%'], - label: { - show: true, - //fontSize:10, - formatter: '{b}\n{d|{c}份}', - rich: { - d: { - align: 'center', - } - }, - - }, - data: [ - { value: this.pagedata[0].planStatusStatistics.planStatuses[0] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[0].count : 0, name: '预案新增', type: 1, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[0] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[0].planStatusName : '' }, - { value: this.pagedata[0].planStatusStatistics.planStatuses[2] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[2].count : 0, name: '预案审核通过', type: 3, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[2] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[2].planStatusName : '' }, - { value: this.pagedata[0].planStatusStatistics.planStatuses[4] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[4].count : 0, name: '预案编制', type: 5, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[4] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[4].planStatusName : '' }, - { value: this.pagedata[0].planStatusStatistics.planStatuses[3] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[3].count : 0, name: '预案审核退回', type: 4, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[3] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[3].planStatusName : '' }, - { value: this.pagedata[0].planStatusStatistics.planStatuses[1] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[1].count : 0, name: '预案审核中', type: 2, planStatusName: this.pagedata[0].planStatusStatistics.planStatuses[1] != undefined ? this.pagedata[0].planStatusStatistics.planStatuses[1].planStatusName : '' } - ], - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] - }; - this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden'); - this.planState.setOption(planStateOptionsZhi); - this.planState.on("click", (params) => { - this.router.navigate(['/statisticanalysis/statePageOne']) - }) - } - - //新增、删除单位统计 - chartDwsjcj - addtable - addxdata = [] - addydata = [] - chartDwsjcjOptionsZhong = { - // color: ['#FB33C2', '#00CFF0', '#2C3DE0'], - // 标题 - title: { - text: '新增、删除单位统计', - left: 0, - top: 0, - textStyle: { - color: '#fff', - fontWeight: 'normal' + { + value: + this.pagedata[0].planStatusStatistics.planStatuses[2] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[2].count + : 0, + name: "预案审核通过", + type: 3, + planStatusName: + this.pagedata[0].planStatusStatistics.planStatuses[2] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[2] + .planStatusName + : "", }, + { + value: + this.pagedata[0].planStatusStatistics.planStatuses[4] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[4].count + : 0, + name: "预案编制", + type: 5, + planStatusName: + this.pagedata[0].planStatusStatistics.planStatuses[4] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[4] + .planStatusName + : "", + }, + { + value: + this.pagedata[0].planStatusStatistics.planStatuses[3] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[3].count + : 0, + name: "预案审核退回", + type: 4, + planStatusName: + this.pagedata[0].planStatusStatistics.planStatuses[3] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[3] + .planStatusName + : "", + }, + { + value: + this.pagedata[0].planStatusStatistics.planStatuses[1] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[1].count + : 0, + name: "预案审核中", + type: 2, + planStatusName: + this.pagedata[0].planStatusStatistics.planStatuses[1] != + undefined + ? this.pagedata[0].planStatusStatistics.planStatuses[1] + .planStatusName + : "", + }, + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, }, - grid: { - left: 30, - right: 0, - }, - //图例 - legend: { - top: 0, - data: ['新增单位', '删除单位',], - icon: 'circle', - itemGap: 20, + ], + }; + this.planState = echarts.init( + document.getElementById("chartHynyxf"), + "walden" + ); + this.planState.setOption(planStateOptionsZhi); + this.planState.on("click", (params) => { + this.router.navigate(["/statisticanalysis/statePageOne"]); + }); + } + + //新增、删除单位统计 + chartDwsjcj; + addtable; + addxdata = []; + addydata = []; + chartDwsjcjOptionsZhong = { + // color: ['#FB33C2', '#00CFF0', '#2C3DE0'], + // 标题 + title: { + text: "新增、删除单位统计", + left: 0, + top: 0, + textStyle: { + color: "#fff", + fontWeight: "normal", + }, + }, + grid: { + left: 30, + right: 0, + }, + //图例 + legend: { + top: 0, + data: ["新增单位", "删除单位"], + icon: "circle", + itemGap: 20, + }, + //提示框 + tooltip: { + trigger: "axis", + }, + // x轴 + xAxis: { + type: "category", + data: [ + "浦东中队", + "黄浦中队", + "徐汇中队", + "长宁中队", + "静安中队", + "普陀中队", + "虹口中队", + "杨浦中队", + "闵行中队", + "宝山中队", + "嘉定中队", + "松江中队", + "金山中队", + "崇明中队", + ], + axisLabel: { + interval: 0, + + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 5; //每项显示文字个数 + var valLength = value.length; //X轴类目项的文字个数 + var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 + if (rowN > 1) { + //如果类目项的文字大于3, + for (var i = 0; i < rowN; i++) { + var temp = ""; //每次截取的字符串 + var start = i * maxLength; //开始截取的位置 + var end = start + maxLength; //结束截取的位置 + //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 + temp = value.substring(start, end) + "\n"; + ret += temp; + } //凭借最终的字符串 + return ret; + } else { + return value; + } + }, //function + }, + }, + // y轴 + yAxis: { + type: "value", + splitLine: { + show: true, + lineStyle: { + color: "rgba(255,255,255,.4)", }, - //提示框 - tooltip: { - trigger: 'axis', + }, + }, + // 数据 + series: [ + { + name: "新增单位", + type: "bar", + data: [88, 45, 95, 105, 75, 89, 69, 110, 96, 90, 80, 78, 94, 102], + label: { + show: false, + position: "top", + formatter: "{c}", + color: "#fff", }, - // x轴 - xAxis: { - type: 'category', - data: ["浦东中队", "黄浦中队", "徐汇中队", "长宁中队", "静安中队", "普陀中队", "虹口中队", "杨浦中队", "闵行中队", "宝山中队", "嘉定中队", "松江中队", "金山中队", "崇明中队"], - axisLabel: { - interval: 0, - - formatter: function (value) { - var ret = "";//拼接加\n返回的类目项 - var maxLength = 5;//每项显示文字个数 - var valLength = value.length;//X轴类目项的文字个数 - var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 - if (rowN > 1) { //如果类目项的文字大于3, - for (var i = 0; i < rowN; i++) { - var temp = "";//每次截取的字符串 - var start = i * maxLength;//开始截取的位置 - var end = start + maxLength;//结束截取的位置 - //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 - temp = value.substring(start, end) + "\n"; - ret += temp; - } //凭借最终的字符串 - return ret; - } else { - return value; - } - } //function - - } + }, + { + name: "删除单位", + type: "bar", + data: [35, 33, 27, 30, 35, 36, 28, 32, 36, 22, 19, 28, 34, 36], + label: { + show: false, + position: "top", + formatter: "{c}", + color: "#fff", }, - // y轴 - yAxis: { - type: 'value', - splitLine: { - show: true, - lineStyle: { - color: 'rgba(255,255,255,.4)' - } - }, + }, + ], + }; + unitData() { + this.addxdata = []; + this.addydata = []; + this.addtable = JSON.parse(JSON.stringify(this.emitService.allDate)); + this.addtable[0].organizationStatistics.organizations.forEach( + (value, index, array) => { + if ( + array[index].organizationId != "5687316efa75479d96c0091a167a3b84" && + array[index].organizationName != "上海总队" + ) { + this.addxdata.push(array[index].organizationName); + this.addydata.push(array[index].count); + } + } + ); + let chartDwsjcjOptionsZhi = { + // 标题 + title: { + text: `新增单位统计(${this.addtable[0].totalCount}家)`, + left: 0, + top: 0, + textStyle: { + color: "#fff", + fontWeight: "normal", }, - // 数据 - series: [ - { - name: '新增单位', - type: 'bar', - data: [88, 45, 95, 105, 75, 89, 69, 110, 96, 90, 80, 78, 94, 102], - label: { - show: false, - position: "top", - formatter: '{c}', - color: "#fff", - } - }, { - name: '删除单位', - type: 'bar', - data: [35, 33, 27, 30, 35, 36, 28, 32, 36, 22, 19, 28, 34, 36], - label: { - show: false, - position: "top", - formatter: '{c}', - color: "#fff", - } - } - ], - }; - unitData() { - this.addxdata = [] - this.addydata = [] - this.addtable = JSON.parse(JSON.stringify(this.emitService.allDate)) - this.addtable[0].organizationStatistics.organizations.forEach((value, index, array) => { - if (array[index].organizationId != '5687316efa75479d96c0091a167a3b84' && array[index].organizationName != '上海总队') { - this.addxdata.push(array[index].organizationName) - this.addydata.push(array[index].count) - } - - }); - let chartDwsjcjOptionsZhi = { - // 标题 - title: { - text: `新增单位统计(${this.addtable[0].totalCount}家)`, - left: 0, - top: 0, - textStyle: { - color: '#fff', - fontWeight: 'normal' - }, - }, - grid: { - //containLabel:true, - left: 30, - right: 0, - bottom: 30 - }, - //图例 - /* legend: { + }, + grid: { + //containLabel:true, + left: 30, + right: 0, + bottom: 30, + }, + //图例 + /* legend: { top: 0, data: ['新增单位' ], icon: 'circle', itemGap: 20, }, */ - //提示框 - tooltip: { - trigger: 'axis', - }, - // x轴 - xAxis: { - type: 'category', - data: this.addxdata, - axisLabel: { - interval: 0, - - formatter: function (value) { - var ret = "";//拼接加\n返回的类目项 - var maxLength = 5;//每项显示文字个数 - var valLength = value.length;//X轴类目项的文字个数 - var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 - if (rowN > 1) { //如果类目项的文字大于3, - for (var i = 0; i < rowN; i++) { - var temp = "";//每次截取的字符串 - var start = i * maxLength;//开始截取的位置 - var end = start + maxLength;//结束截取的位置 - //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 - temp = value.substring(start, end) + "\n"; - ret += temp; - } //凭借最终的字符串 - return ret; - } else { - return value; - } - } //function - - } - }, - // y轴 - yAxis: { - type: 'value', - splitLine: { - show: true, - lineStyle: { - color: 'rgba(255,255,255,.4)' - } - }, - }, - // 数据 - series: [ - { - name: '新增单位', - type: 'bar', - data: this.addydata, - label: { - show: false, - position: "top", - formatter: '{c}', - color: "#fff", - }, - barMaxWidth: '20%' - } - /* , { + //提示框 + tooltip: { + trigger: "axis", + }, + // x轴 + xAxis: { + type: "category", + data: this.addxdata, + axisLabel: { + interval: 0, + + formatter: function (value) { + var ret = ""; //拼接加\n返回的类目项 + var maxLength = 5; //每项显示文字个数 + var valLength = value.length; //X轴类目项的文字个数 + var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 + if (rowN > 1) { + //如果类目项的文字大于3, + for (var i = 0; i < rowN; i++) { + var temp = ""; //每次截取的字符串 + var start = i * maxLength; //开始截取的位置 + var end = start + maxLength; //结束截取的位置 + //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 + temp = value.substring(start, end) + "\n"; + ret += temp; + } //凭借最终的字符串 + return ret; + } else { + return value; + } + }, //function + }, + }, + // y轴 + yAxis: { + type: "value", + splitLine: { + show: true, + lineStyle: { + color: "rgba(255,255,255,.4)", + }, + }, + }, + // 数据 + series: [ + { + name: "新增单位", + type: "bar", + data: this.addydata, + label: { + show: false, + position: "top", + formatter: "{c}", + color: "#fff", + }, + barMaxWidth: "20%", + }, + /* , { name: '删除单位', type: 'bar', data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134 ], @@ -466,86 +566,96 @@ export class HomeComponent implements OnInit { color: "#fff", } } */ - ], - }; - this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'walden'); - this.chartDwsjcj.setOption(chartDwsjcjOptionsZhi); - this.chartDwsjcj.on("click", (params) => { - this.router.navigate(['/statisticanalysis/addUnit_one']) - }) + ], + }; + this.chartDwsjcj = echarts.init( + document.getElementById("chartDwsjcj"), + "walden" + ); + this.chartDwsjcj.setOption(chartDwsjcjOptionsZhi); + this.chartDwsjcj.on("click", (params) => { + this.router.navigate(["/statisticanalysis/addUnit_one"]); + }); + } + + chartZdgzqy; + + //建筑类型统计 + keyUnit() { + this.buildcount = 0; + this.buildtableData = JSON.parse(JSON.stringify(this.emitService.allDate)); + //console.log(this.buildtableData) + for (var i = 0; i < this.buildtableData[0].buildingTypes.length; i++) { + this.lengthdata.push( + this.buildtableData[0].buildingTypes[i].buildingTypeName + ); + this.buildcount = + this.buildcount + this.buildtableData[0].buildingTypes[i].count; + this.indexData.push(this.buildtableData[0].buildingTypes[i]); } - - chartZdgzqy - - - //建筑类型统计 - keyUnit() { - this.buildcount = 0 - this.buildtableData = JSON.parse(JSON.stringify(this.emitService.allDate)) - //console.log(this.buildtableData) - for (var i = 0; i < this.buildtableData[0].buildingTypes.length; i++) { - this.lengthdata.push(this.buildtableData[0].buildingTypes[i].buildingTypeName) - this.buildcount = this.buildcount + this.buildtableData[0].buildingTypes[i].count - this.indexData.push(this.buildtableData[0].buildingTypes[i]) - } - //JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name')) - this.indexData = this.indexData.map(v => { return { name: v.buildingTypeName, value: v.count, id: v.buildingTypeId } }) - let chartZdgzqyOptionsZhi = { - title: { - text: `建筑类型统计（${this.buildcount}家）`, - top: -5, - left: 'left', - textStyle: { - color: '#fff', - fontWeight: 'normal' - } + //JSON.parse(JSON.stringify(this.indexData).replace(/buildingTypeName/g, 'name')) + this.indexData = this.indexData.map((v) => { + return { name: v.buildingTypeName, value: v.count, id: v.buildingTypeId }; + }); + let chartZdgzqyOptionsZhi = { + title: { + text: `建筑类型统计（${this.buildcount}家）`, + top: -5, + left: "left", + textStyle: { + color: "#fff", + fontWeight: "normal", + }, + }, + tooltip: { + trigger: "item", + formatter: "{b} : {c}家 ({d}%)", + }, + // legend: { + // orient: 'vertical', + // right: 150, + // top:80, + // data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] + // }, + series: [ + { + name: "访问来源", + type: "pie", + radius: "70%", + center: ["50%", "61%"], + label: { + show: true, + // fontSize:13, + formatter: "{b}{c}家", + rich: { + d: { + align: "center", + }, }, - tooltip: { - trigger: 'item', - formatter: '{b} : {c}家 ({d}%)' + }, + data: this.indexData, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", }, - // legend: { - // orient: 'vertical', - // right: 150, - // top:80, - // data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] - // }, - series: [ - { - name: '访问来源', - type: 'pie', - radius: '70%', - center: ['50%', '61%'], - label: { - show: true, - // fontSize:13, - formatter: '{b}{c}家', - rich: { - d: { - align: 'center', - } - }, - }, - data: this.indexData, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] - }; - this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden'); - this.chartZdgzqy.setOption(chartZdgzqyOptionsZhi); - this.chartZdgzqy.on("click", (params) => { - this.router.navigate(['/statisticanalysis/buildingType_one']) - }) - } - - isNumList: boolean = true - changeNumList() { - this.isNumList = !this.isNumList - } + }, + }, + ], + }; + this.chartZdgzqy = echarts.init( + document.getElementById("chartZdgzqy"), + "walden" + ); + this.chartZdgzqy.setOption(chartZdgzqyOptionsZhi); + this.chartZdgzqy.on("click", (params) => { + this.router.navigate(["/statisticanalysis/buildingType_one"]); + }); + } + + isNumList: boolean = true; + changeNumList() { + this.isNumList = !this.isNumList; + } } diff --git a/src/index.html b/src/index.html index a6899a6..830e70a 100644 --- a/src/index.html +++ b/src/index.html @@ -27,9 +27,9 @@ - +