ShangHaiYuan-AnXin/src/app/statistic-analysis/home/home.component.ts

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']
})
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(){
      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 {
        /* 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

    //封装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",
        });
        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 {
    }

    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
                }
            });
        }
        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}%)'
            },
            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'
            },
        },
        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: [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: {
              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",
                  }
                } */
            ],
        };
        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])
        }
        //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',
                            }
                        },
                    },
                    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
    }
}