From f05bded017d914abb783f41407ae7d0c18f91c0f Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Sat, 5 Sep 2020 15:17:55 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E7=BB=9F=E8=AE=A1=E5=88=86?= =?UTF-8?q?=E6=9E=90=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/home.component.html | 119 ++++ .../home/home.component.scss | 26 + .../home/home.component.spec.ts | 25 + .../statistic-analysis/home/home.component.ts | 554 ++++++++++++++++++ .../statistic-analysis-routing.module.ts | 5 +- .../statistic-analysis.module.ts | 3 +- src/styles.scss | 3 +- 7 files changed, 732 insertions(+), 3 deletions(-) create mode 100644 src/app/statistic-analysis/home/home.component.html create mode 100644 src/app/statistic-analysis/home/home.component.scss create mode 100644 src/app/statistic-analysis/home/home.component.spec.ts create mode 100644 src/app/statistic-analysis/home/home.component.ts diff --git a/src/app/statistic-analysis/home/home.component.html b/src/app/statistic-analysis/home/home.component.html new file mode 100644 index 0000000..7aed1e6 --- /dev/null +++ b/src/app/statistic-analysis/home/home.component.html @@ -0,0 +1,119 @@ +
+
+ +
+
+
+ +
+
+
+
+
+
+
+
计划完成情况
+
+
+
+
+
本年时间进度
+
+
90%
+
+
+
+
+
+
+
年计划完成率
+
+
88%
+
+
+
+
+
+ +
+
+
+
+ +
+ +
+
+
预案编制总量
+
    +
  • 0
    • +
  • 2
    • +
  • 2
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
+
+
+
重点单位总量
+
8036
+
+
+
数据采集总量
+
6578
+
+
+ + +
+ +
+
+
+
+
+
三维预案总数
+
4374
+
+
+
二维预案总数
+
9693
+
+
+
卡片预案总数
+
6403
+
+
+
其他预案总数
+
2208
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/statistic-analysis/home/home.component.scss b/src/app/statistic-analysis/home/home.component.scss new file mode 100644 index 0000000..ce03372 --- /dev/null +++ b/src/app/statistic-analysis/home/home.component.scss @@ -0,0 +1,26 @@ +@import "../../../assets/css/newStyle.css"; +.main-center{ + position: relative; +} +#chartMap{ + margin-left: 5px; +} +.number-area{ + position: absolute; + top: 0; + display: block; + width:80%; +} +.total-item{ + z-index: 200; + cursor: pointer; +} +.total-item div{ + height: 25px!important; + line-height: 25px!important; +} +#chartZdgzqy{ + div{ + height: 298px!important; + } +} \ No newline at end of file diff --git a/src/app/statistic-analysis/home/home.component.spec.ts b/src/app/statistic-analysis/home/home.component.spec.ts new file mode 100644 index 0000000..490e81b --- /dev/null +++ b/src/app/statistic-analysis/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/home/home.component.ts b/src/app/statistic-analysis/home/home.component.ts new file mode 100644 index 0000000..948383d --- /dev/null +++ b/src/app/statistic-analysis/home/home.component.ts @@ -0,0 +1,554 @@ +import { Component, OnInit, Renderer2, ElementRef } from '@angular/core'; +import { HttpClient } from '@angular/common/http' +import { Router } from '@angular/router'; +declare var echarts: any; +declare var AMap: any; + +declare var AMapUI: any; +@Component({ + 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) { } + + + map:any; //地图 + ngOnInit() { + window.setTimeout(()=>{ + this.unitType() + this.unitData() + // this.teamData() + this.keyUnit() + this.mapInit() //初始化地图 + let that = this + window.addEventListener('resize',function () { + + }) + },0) + } + + threePlan(){ + // this.router.navigate(['/planManagement/entryPlan']) + } + twoPlan(){ + // this.router.navigate(['/planManagement/entryPlan']) + } + cardPlan(){ + // this.router.navigate(['/planManagement/entryPlan']) + } + otherPlan(){ + // this.router.navigate(['/planManagement/entryPlan']) + } + ngOnDestroy(): void { + this.planState.clear() + this.planState.dispose() + this.chartDwsjcj.clear() + this.chartDwsjcj.dispose() + this.chartZdgzqy.clear() + this.chartZdgzqy.dispose() + + } + //初始化地图 + adcode:any //行政编码 + mapInit () { + //创建地图 + this.map = new AMap.Map('chartMap', { + cursor: 'default', + zooms:[8,16], + mapStyle:"amap://styles/grey", + // bubble: true + }); + + let colors = [ + "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", + "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", + "#651067", "#329262", "#5574a6", "#3b3eac" + ]; + + AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> { + + //创建一个实例 + let districtExplorer = new DistrictExplorer({ + map: this.map, + eventSupport: true, //打开事件支持 + }); + + // let adcode = this.adcode; //行政编码 + let adcode + if(sessionStorage.getItem("realName") == "上海总队"){ + adcode = 310000 + }else{ + adcode = 500000 + } + + districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { + + //更新地图视野 + this.map.setBounds(areaNode.getBounds(), null, null, true); + + //设置定位节点，支持鼠标位置识别 + //注意节点的顺序，前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ + // console.log(123,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, //填充透明度 + }); + + // 更新地图视野以适合区划面 + this.map.setFitView(districtExplorer.getAllFeaturePolygons()); + }); + + districtExplorer.on('featureClick', (e, feature) =>{ + + let props = feature.properties; + adcode = props.adcode + // console.log(props) + let fillColor2 + if(props.level == 'city'){ + fillColor2 = null + }else{ + fillColor2 = '#d0daee' + } + districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { + //更新地图视野 + // this.map.setBounds(areaNode.getBounds(), null, null, true); + + //设置定位节点，支持鼠标位置识别 + //注意节点的顺序，前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ + let fillColor = colors[i % colors.length]; + // console.log(111,fillColor) + 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, //填充透明度 + }); + + // 更新地图视野以适合区划面 + this.map.setFitView(districtExplorer.getAllFeaturePolygons()); + }); + + // this.chartQusj.setOption(this.chartQusjOption2); + // this.chartYadwlx.setOption(this.chartYadwlxOption2); + // if(sessionStorage.getItem("realName") == "上海总队"){ + // this.chartYapyph.setOption(this.chartYapyphOption4); + // }else{ + // this.chartYapyph.setOption(this.chartYapyphOption2); + // } + // this.chartYapyph.setOption(this.chartYapyphOption2); + // this.chartYalxtj.setOption(this.chartYalxtjOption2); + // console.log(props) + //同时设置地图中心点和缩放级别 + // this.map.setZoomAndCenter(9.4, props.center); + + // this.map.setBounds(areaNode.getBounds(), null, null, true); + // this.router.navigate([`/home/detail`],{queryParams:{'code':props.adcode,'level':props.level}}) + // this.mapInit () + + // this.keyUnitNum = '666' + // this.dataNum = '456' + // this.planNum = '2,678' + }); + + districtExplorer.on('outsideClick', (e) => { + // console.log('区域外点击'); + let adcode + if(sessionStorage.getItem("realName") == "上海总队"){ + adcode = 310000 + }else{ + adcode = 500000 + } + districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { + //更新地图视野 + // this.map.setBounds(areaNode.getBounds(), null, null, true); + + //设置定位节点，支持鼠标位置识别 + //注意节点的顺序，前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ + let fillColor = colors[i % colors.length]; + // console.log(111,fillColor) + 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, //填充透明度 + }); + + // 更新地图视野以适合区划面 + this.map.setFitView(districtExplorer.getAllFeaturePolygons()); + }); + // this.chartQusj.setOption(this.chartQusjOption); + // this.chartYadwlx.setOption(this.chartYadwlxOption); + // if(sessionStorage.getItem("realName") == "上海总队"){ + // this.chartYapyph.setOption(this.chartYapyphOption3); + // }else{ + // this.chartYapyph.setOption(this.chartYapyphOption); + // } + // // this.chartYapyph.setOption(this.chartYapyphOption); + + // this.chartYalxtj.setOption(this.chartYalxtjOption); + // this.keyUnitNum = '8,036' + // this.dataNum = '6,578' + // this.planNum = '22,678' + }) + + }); + + + } + ngAfterViewInit(): void { + } + + planState + //预案状态统计 + unitType () { + this.planState = echarts.init(document.getElementById('chartHynyxf'), 'skinUpp'); + var options={ + title: { + text: '预案状态统计（7005份）', + left: 'center', + // top:-3 + // textStyle:{ + // fontSize:38 + // } + }, + tooltip: { + trigger: 'item', + formatter: '{b} : {c} ({d}%)' + }, + // legend: { + // orient: 'vertical', + // top:20, + // data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] + // }, + series: [ + { + name: '访问来源', + type: 'pie', + radius: '65%', + center: ['50%', '67%'], + label:{ + show:true, + formatter:'{b}\n{d|{c}份}', + rich: { + d: { + align: 'center', + } + }, + + }, + data: [ + {value: 1585, name: '预案新增'}, + {value: 2000, name: '预案审核通过',itemStyle:{color:'#02A7F0'}}, + {value: 2600, name: '预案编制'}, + {value: 1500, name: '预案审核退回'}, + {value: 1800, name: '预案审核中'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + this.planState.setOption(options); + this.planState.on("click",(params) => { + this.router.navigate(['/statisticanalysis/statePageOne']) + }) + } + + //新增、删除单位统计 + chartDwsjcj + unitData () { + this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'skinUpp'); + var option = { + color: ['#FB33C2', '#00CFF0', '#2C3DE0'], + // 标题 + title: { + text: '新增、删除单位统计', + left: 0, + top: 0, + }, + 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)' + } + }, + }, + // 数据 + series: [ + { + name: '新增单位', + type: 'bar', + data: [320, 302, 301, 234, 390, 330, 320, 390, 330, 320, 390, 301, 234, 390, 330, 320, 390, ], + label: { + show: false, + position: "top", + formatter: '{c}', + color: "#fff", + }, + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(254,51,194,1)' // 0% 处的颜色 + }, { + offset: 1, + color: 'rgba(254,51,194,.5)' // 100% 处的颜色 + }], + global: false // 缺省为 false + } + } + }, { + name: '删除单位', + type: 'bar', + data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134, 290, 430, 220, ], + label: { + show: false, + position: "top", + formatter: '{c}', + color: "#fff", + }, + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(0,220,254,1)' // 0% 处的颜色 + }, { + offset: 1, + color: 'rgba(1,104,191,1)' // 100% 处的颜色 + }], + globalCoord: false // 缺省为 false + }, + } + } + ], + }; + if(sessionStorage.getItem("realName") == "上海总队"){ + option.xAxis.data = ['上海总队','浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','青浦支队','松江支队','金山支队','崇明支队','滨海支队'] + }else{ + option.xAxis.data = ['渝北区消防救援支队', '黔江区消防救援支队', '大渡口区消防救援支队', '南岸区消防救援支队', '北培区消防救援支队', '渝中区消防救援支队', '万州区消防救援支队', '涪陵区消防救援支队', '江北区消防救援支队', '九龙仓区消防救援支队', '沙坪坝区消防救援支队', '九龙坡区消防救援支队', '长寿区消防救援支队', '巴南区消防救援支队', '江津区消防救援支队', '合川区消防救援支队', '南川区消防救援支队'] + } + this.chartDwsjcj.setOption(option); + this.chartDwsjcj.on("click",(params) => { + if(params.seriesName == "新增单位"){ + this.router.navigate(['/statisticanalysis/addUnit_one']) + }else{ + this.router.navigate(['/statisticanalysis/delete_one']) + } + }) + } + + chartZdgzqy + //建筑类型统计 + keyUnit () { + this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'skinUpp'); + let options={ + title: { + text: '建筑类型统计（8900家）', + left: 'center', + top: -3, + // textStyle: { + // fontSize:31 + // } + }, + tooltip: { + trigger: 'item', + formatter: '{b} : {c}家 ({d}%)' + }, + // legend: { + // orient: 'vertical', + // right: 150, + // top:80, + // data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] + // }, + series: [ + { + name: '访问来源', + type: 'pie', + radius: '70%', + center: ['50%', '60%'], + label:{ + show:true, + // fontSize:13, + formatter:'{b}{c}家', + rich: { + d: { + align: 'center', + } + }, + }, + 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: '隧道'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + this.chartZdgzqy.setOption(options); + this.chartZdgzqy.on("click",(params) => { + this.router.navigate(['/statisticanalysis/buildingType_one']) + }) + } + +} diff --git a/src/app/statistic-analysis/statistic-analysis-routing.module.ts b/src/app/statistic-analysis/statistic-analysis-routing.module.ts index 41f9e22..efaca8e 100644 --- a/src/app/statistic-analysis/statistic-analysis-routing.module.ts +++ b/src/app/statistic-analysis/statistic-analysis-routing.module.ts @@ -27,6 +27,8 @@ import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-deta import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component'; import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component'; import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component'; +import { HomeComponent } from './home/home.component'; + const routes: Routes = [ { path: 'statePageOne', component: PageOneComponent}, @@ -51,7 +53,8 @@ const routes: Routes = [ { path: 'addUnit_one/addUnit_two_time/three_barDetails', component: AddUnitThreeBarDetailsComponent}, { path: 'scheduledUpdates', component: ScheduledUpdatesComponent}, { path: 'scheduledUpdates', component: ScheduledUpdatesComponent}, - { path: 'scheduledUpdates/PublicEcharts', component: publicEchartsComponent} + { path: 'scheduledUpdates/PublicEcharts', component: publicEchartsComponent}, + { path: 'home', component: HomeComponent} ]; @NgModule({ diff --git a/src/app/statistic-analysis/statistic-analysis.module.ts b/src/app/statistic-analysis/statistic-analysis.module.ts index 2e37fef..00b1986 100644 --- a/src/app/statistic-analysis/statistic-analysis.module.ts +++ b/src/app/statistic-analysis/statistic-analysis.module.ts @@ -62,11 +62,12 @@ import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-deta import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component'; import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component'; import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component'; +import { HomeComponent } from './home/home.component'; @NgModule({ - declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent], + declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, ScheduledUpdatesComponent,publicEchartsComponent,verifiedComponent,notVerifiedComponent,detailedInformationComponent,moreTableComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,AddUnitThreeLineDetailsComponent,AddUnitThreeBarDetailsComponent, HomeComponent], imports: [ CommonModule, StatisticAnalysisRoutingModule, diff --git a/src/styles.scss b/src/styles.scss index a38cdca..2e04f9b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -76,4 +76,5 @@ table td.mat-footer-cell:last-of-type{ } .mat-tab-body-content{ overflow: hidden!important; -} \ No newline at end of file +} +// \ No newline at end of file