From c701c4a275be5da7eb663100adeaefd6674429c4 Mon Sep 17 00:00:00 2001 From: zhaoxu <493734247@qq.com> Date: Mon, 21 Jun 2021 17:26:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E5=9B=9E=E8=B0=83?= =?UTF-8?q?=E5=87=BD=E6=95=B0=E4=B8=AD=20this=E6=8C=87=E5=90=91=E9=97=AE?= =?UTF-8?q?=E9=A2=98.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../statistic-analysis/home/home.component.ts | 978 +++++++++--------- src/modules/map/declare/gaode-map.ts | 220 ++-- 2 files changed, 599 insertions(+), 599 deletions(-) diff --git a/src/app/statistic-analysis/home/home.component.ts b/src/app/statistic-analysis/home/home.component.ts index aa6cc97..65d6c68 100644 --- a/src/app/statistic-analysis/home/home.component.ts +++ b/src/app/statistic-analysis/home/home.component.ts @@ -7,525 +7,525 @@ 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) { } + constructor(private http: HttpClient, private render2: Renderer2, public element: ElementRef, private router: Router, public emitService: EchartsDataService) { } - map:IMap; //地图 - yuandata - ngOnInit() { - this.getechartsdata() - window.setTimeout(()=>{ - /* this.unitType() - this.unitData() - this.keyUnit() */ - this.mapInit() //初始化地图 - },0) - } + map: IMap; //地图 + yuandata + ngOnInit() { + this.getechartsdata() + window.setTimeout(() => { + /* this.unitType() + this.unitData() + this.keyUnit() */ + this.mapInit() //初始化地图 + }, 0) + } + + //更新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() + } - //更新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' + threePlan() { + // this.router.navigate(['/planManagement/entryPlan']) + } + twoPlan() { + // this.router.navigate(['/planManagement/entryPlan']) + } + cardPlan() { + // this.router.navigate(['/planManagement/entryPlan']) + } + otherPlan() { + // this.router.navigate(['/planManagement/entryPlan']) } - //获取组织机构数据 - 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() - } - - 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']) - } + //计划更新页面跳转 + scheduled() { + this.router.navigate(['/statisticanalysis/scheduledUpdates']) + } - ngOnDestroy(): void { - /* this.planState.clear() - this.planState.dispose() - this.chartDwsjcj.clear() - this.chartDwsjcj.dispose() - this.chartZdgzqy.clear() - this.chartZdgzqy.dispose() */ - - } - //初始化地图 - adcode:any //行政编码 - level = sessionStorage.getItem("level")//组织级别 - orid + ngOnDestroy(): void { + /* this.planState.clear() + this.planState.dispose() + this.chartDwsjcj.clear() + this.chartDwsjcj.dispose() + this.chartZdgzqy.clear() + this.chartZdgzqy.dispose() */ - //封装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 + } + //初始化地图 + adcode: any //行政编码 + level = sessionStorage.getItem("level")//组织级别 + orid - mapInit () { - //创建地图 - this.map = MapFactory.MapInstance('chartMap', { - cursor: 'default', - zooms:[8,16], - mapStyle:"amap://styles/grey", - }); - this.map.setAdministrativeAreaStyle(this,this.getEchartsData,this.setEchartsData) - } - planNum = [] - keyUnitNum - dataGetNum = 6578 + //封装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 - threePlanNum = "4374" - twoPlanNum = "9693" - cardPlanNum = "6403" - otherPlanNum = "2208" + mapInit() { + //创建地图 + this.map = MapFactory.MapInstance('chartMap', { + cursor: 'default', + zooms: [8, 16], + mapStyle: "amap://styles/grey", + }); + this.map.setAdministrativeAreaStyle(this, this.getEchartsData, this.setEchartsData) + } + planNum = [] + keyUnitNum + dataGetNum = 6578 + threePlanNum = "4374" + twoPlanNum = "9693" + cardPlanNum = "6403" + otherPlanNum = "2208" - aPlan = '328' - bPlan = '219' - cPlan = '168' - dPlan = '254' - ePlan = '116' - 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 { - 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 + + 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]) } - }); - } - 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 + //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 + } + }); } - }); - } - - - /* */ - 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', + 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' + } + }, + 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:''}, - {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)' + 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']) - }) - } + ] + }; + 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, + //新增、删除单位统计 + 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 + 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: [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) => { - 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: { - 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%' - } - /* , { - name: '删除单位', - type: 'bar', - data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134 ], - label: { - show: false, - position: "top", - formatter: '{c}', - color: "#fff", - } - } */ - ], + // y轴 + yAxis: { + type: 'value', + splitLine: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,.4)' + } + }, + }, + // 数据 + 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", + } + } + ], }; - this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'),'walden'); - this.chartDwsjcj.setOption(chartDwsjcjOptionsZhi); - this.chartDwsjcj.on("click",(params) => { - this.router.navigate(['/statisticanalysis/addUnit_one']) - }) - } + unitData() { + this.addxdata = [] + this.addydata = [] + this.addtable = JSON.parse(JSON.stringify(this.emitService.allDate)) + this.addtable[0].organizationStatistics.organizations.forEach((value, index, array) => { + 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: { + top: 0, + data: ['新增单位' ], + icon: 'circle', + itemGap: 20, + }, */ + //提示框 + tooltip: { + trigger: 'axis', + }, + // x轴 + xAxis: { + type: 'category', + data: this.addxdata, + axisLabel: { + interval: 0, - chartZdgzqy - - - //建筑类型统计 - keyUnit () { - this.buildcount=0 - this.buildtableData=JSON.parse(JSON.stringify(this.emitService.allDate)) - //console.log(this.buildtableData) - 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; + } + } //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 ], + label: { + show: false, + position: "top", + formatter: '{c}', + 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']) + }) } - //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' + + 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]) } - }, - 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', - } + //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' + } }, - }, - 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']) - }) - } + 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', + } + }, + }, + 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 - } + isNumList: boolean = true + changeNumList() { + this.isNumList = !this.isNumList + } } diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index df2a8e6..ba3aab4 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -14,7 +14,7 @@ export class GaoDeMap extends GaodeBasic implements IMap { this.self = new AMap.Map(container, options); } setBounds(zoom?: any, x?: any, y?: any, is?: boolean) { - return this.self.setBounds(zoom,x,y,is) + return this.self.setBounds(zoom, x, y, is) } setFitView(options: any) { return this.self.setFitView(options) @@ -52,7 +52,7 @@ export class GaoDeMap extends GaodeBasic implements IMap { setZoom(zoom) { return this.self.setZoom(zoom) } - setCenter(pos:any) { + setCenter(pos: any) { return this.self.setCenter(pos) } getCenter() { @@ -64,38 +64,38 @@ export class GaoDeMap extends GaodeBasic implements IMap { on(eventName: string, callback: Function): void { return this.self.on(eventName, callback); } - setAdministrativeAreaStyle(component:any,getData?:Function, setData?:Function) {//自定义 行政区划 样式 + setAdministrativeAreaStyle(component: any, getData?: Function, setData?: Function) {//自定义 行政区划 样式 let that = this let level = sessionStorage.getItem("level") - AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> { + AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => { let colors = [ "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac" ]; - + //创建一个实例 let districtExplorer = new DistrictExplorer({ map: that.self, eventSupport: true, //打开事件支持 }); - + let adcode = 310000 //上海行政编码 - districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { - + districtExplorer.loadAreaNode(adcode, (error, areaNode) => { + //更新地图视野 that.setBounds(areaNode.getBounds(), null, null, true); - + //设置定位节点，支持鼠标位置识别 //注意节点的顺序，前面的高优先级 districtExplorer.setAreaNodesForLocating(areaNode); - + //清除已有的绘制内容 districtExplorer.clearFeaturePolygons(); - + //绘制子区域 - districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ + districtExplorer.renderSubFeatures(areaNode, (feature, i) => { let fillColor = colors[i % colors.length]; let strokeColor = colors[colors.length - 1 - i % colors.length]; return { @@ -108,7 +108,7 @@ export class GaoDeMap extends GaodeBasic implements IMap { fillOpacity: 0.5, //填充透明度 }; }); - + //绘制父区域 districtExplorer.renderParentFeature(areaNode, { cursor: 'default', @@ -119,108 +119,108 @@ export class GaoDeMap extends GaodeBasic implements IMap { fillColor: null, //填充色 fillOpacity: 0.5, //填充透明度 }); - + // 更新地图视野以适合区划面 that.setFitView(districtExplorer.getAllFeaturePolygons()); }); - - if(level=="0"||level=="1"||level=="2"){ + + if (level == "0" || level == "1" || level == "2") { //区域内点击 - districtExplorer.on('featureClick', (e, feature) =>{ - getData && getData(feature); - - let props = feature.properties; - adcode = props.adcode - let fillColor2 - if(props.level == 'city'){ - fillColor2 = null - }else{ - fillColor2 = '#d0daee' - } - districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { - - //设置定位节点，支持鼠标位置识别 - //注意节点的顺序，前面的高优先级 - districtExplorer.setAreaNodesForLocating(areaNode); - - //清除已有的绘制内容 - districtExplorer.clearFeaturePolygons(); - - //绘制子区域 - districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ - let fillColor = colors[i % colors.length]; - let strokeColor = colors[colors.length - 1 - i % colors.length]; - return { - cursor: 'default', - bubble: true, - strokeColor: strokeColor, //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: fillColor, //填充色 - fillOpacity: 0.5, //填充透明度 - }; - }); - - //绘制父区域 - districtExplorer.renderParentFeature(areaNode, { - cursor: 'default', - bubble: true, - strokeColor: 'black', //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: fillColor2, //填充色 - fillOpacity: 0.5, //填充透明度 - }); - - // 更新地图视野以适合区划面 - that.setFitView(districtExplorer.getAllFeaturePolygons()); - }); - }); - - districtExplorer.on('outsideClick', (e) => { - setData && setData(component); - let adcode = 310000 - districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { - - //设置定位节点，支持鼠标位置识别 - //注意节点的顺序，前面的高优先级 - districtExplorer.setAreaNodesForLocating(areaNode); - - //清除已有的绘制内容 - districtExplorer.clearFeaturePolygons(); - - //绘制子区域 - districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ - let fillColor = colors[i % colors.length]; - let strokeColor = colors[colors.length - 1 - i % colors.length]; - return { - cursor: 'default', - bubble: true, - strokeColor: strokeColor, //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: fillColor, //填充色 - fillOpacity: 0.5, //填充透明度 - }; - }); - - //绘制父区域 - districtExplorer.renderParentFeature(areaNode, { - cursor: 'default', - bubble: true, - strokeColor: 'black', //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: null, //填充色 - fillOpacity: 0.5, //填充透明度 - }); - - // 更新地图视野以适合区划面 - that.setFitView(districtExplorer.getAllFeaturePolygons()); + districtExplorer.on('featureClick', (e, feature) => { + getData && getData.call(component, feature); + + let props = feature.properties; + adcode = props.adcode + let fillColor2 + if (props.level == 'city') { + fillColor2 = null + } else { + fillColor2 = '#d0daee' + } + districtExplorer.loadAreaNode(adcode, (error, areaNode) => { + + //设置定位节点，支持鼠标位置识别 + //注意节点的顺序，前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) => { + let fillColor = colors[i % colors.length]; + let strokeColor = colors[colors.length - 1 - i % colors.length]; + return { + cursor: 'default', + bubble: true, + strokeColor: strokeColor, //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: fillColor, //填充色 + fillOpacity: 0.5, //填充透明度 + }; + }); + + //绘制父区域 + districtExplorer.renderParentFeature(areaNode, { + cursor: 'default', + bubble: true, + strokeColor: 'black', //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: fillColor2, //填充色 + fillOpacity: 0.5, //填充透明度 + }); + + // 更新地图视野以适合区划面 + that.setFitView(districtExplorer.getAllFeaturePolygons()); + }); }); - }) + + districtExplorer.on('outsideClick', (e) => { + setData && setData.call(component); + let adcode = 310000 + districtExplorer.loadAreaNode(adcode, (error, areaNode) => { + + //设置定位节点，支持鼠标位置识别 + //注意节点的顺序，前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) => { + let fillColor = colors[i % colors.length]; + let strokeColor = colors[colors.length - 1 - i % colors.length]; + return { + cursor: 'default', + bubble: true, + strokeColor: strokeColor, //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: fillColor, //填充色 + fillOpacity: 0.5, //填充透明度 + }; + }); + + //绘制父区域 + districtExplorer.renderParentFeature(areaNode, { + cursor: 'default', + bubble: true, + strokeColor: 'black', //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: null, //填充色 + fillOpacity: 0.5, //填充透明度 + }); + + // 更新地图视野以适合区划面 + that.setFitView(districtExplorer.getAllFeaturePolygons()); + }); + }) } - + }); //end } } @@ -360,7 +360,7 @@ export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch { this.self = new AMap.PlaceSearch() } search(text: string, callback: Function) { - return this.self.search(text,callback) + return this.self.search(text, callback) } }