ShangHaiYuan-AnXin/src/app/statistic-analysis/state/page-there/page-there.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { EchartsDataService } from "../../echarts-data.service";
import { MatSnackBarConfig, MatSnackBar } from "@angular/material/snack-bar";
import { DateAdapter } from "@angular/material/core";
declare var echarts: any;

@Component({
  selector: "app-page-there",
  templateUrl: "./page-there.component.html",
  styleUrls: ["./page-there.component.scss"],
})
export class PageThereComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    public echartsData: EchartsDataService,
    public snackBar: MatSnackBar,
    private adapter: DateAdapter<any>
  ) {}

  zhutu; //echarts实例
  option;
  time: String;
  buildingTypeName: String;
  setTimeoutObj; //延时器需要清除
  headtext: string;
  zhong: string;
  type;
  tabledata;
  organizationId = [];
  lastid;
  tid;

  ngOnDestroy(): void {
    if (!this.zhutu) {
      return;
    }
    this.zhutu.clear();
    this.zhutu.dispose();
  }

  ngOnInit(): void {
    if (sessionStorage.getItem("refresh") === "true") {
      sessionStorage.removeItem("refresh");
      location.reload();
    }
    if (window.matchMedia("(max-width: 1400px)").matches) {
      this.padHw = true;
      //this.padjt=
    } else {
      this.padHw = false;
    }
    this.dateInit();
    let datayuex: string;
    this.activatedRoute.queryParams.subscribe((param) => {
      this.lastid = param.id;
      this.type = param.type;
      this.headtext = param.headtext;
      datayuex = param.level;
      this.zhong = param.zhong;
      this.headName = datayuex + this.headtext;
      this.tid = param.tid;
      this.pieonetype = param.pieonetype;
      if (this.headtext == "二维预案") {
        this.planType = 1;
      } else if (this.headtext == "三维预案") {
        this.planType = 2;
      } else if (this.headtext == "其他预案") {
        this.planType = 4;
      } else if (this.headtext == "文本预案") {
        this.planType = 16;
      }
      //console.log(headName)
    });

    window.setTimeout(() => {
      this.getechartsdata();
    });
  }
  pieonetype; //判断是级别还是类型，上个页面传过来的参数
  planType; //预案类型
  padHw;
  headName;
  selectType: string = "month"; //选择当前的 查询类型 按月/年
  async getechartsdata() {
    let paramdata; /* ={
      planStatus:this.tid=='pieone'?'': this.type,
      PlanCategory:this.tid=='pieone'&&this.pieonetype=='true'?this.type:'',
      OrganizationId:this.lastid,
      PlanType:this.tid=='pieone'&&this.pieonetype=='false'?this.planType:''
    } */
    if (
      this.echartsData.planYear == undefined &&
      this.echartsData.planMonth != undefined
    ) {
      this.echartsData.planYear = new Date().getFullYear();
      paramdata = {
        planStatus: this.tid == "pieone" ? "" : this.type,
        PlanCategory:
          this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
        OrganizationId: this.lastid,
        PlanType:
          this.tid == "pieone" && this.pieonetype == "false"
            ? this.planType
            : "",
        TimeIntervalStart:
          this.echartsData.planYear + "-" + this.echartsData.planMonth,
        TimeIntervalEnd:
          this.echartsData.planYear + "-" + this.echartsData.planMonth,
      };
    } else if (
      this.echartsData.planYear == undefined &&
      this.echartsData.planMonth == undefined
    ) {
      paramdata = {
        planStatus: this.tid == "pieone" ? "" : this.type,
        PlanCategory:
          this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
        OrganizationId: this.lastid,
        PlanType:
          this.tid == "pieone" && this.pieonetype == "false"
            ? this.planType
            : "",
      };
    } else {
      paramdata = {
        planStatus: this.tid == "pieone" ? "" : this.type,
        PlanCategory:
          this.tid == "pieone" && this.pieonetype == "true" ? this.type : "",
        OrganizationId: this.lastid,
        PlanType:
          this.tid == "pieone" && this.pieonetype == "false"
            ? this.planType
            : "",
        TimeIntervalStart:
          this.echartsData.planYear + "-" + this.echartsData.planMonth,
        TimeIntervalEnd:
          this.echartsData.planYear + "-" + this.echartsData.planMonth,
      };
    }
    await this.echartsData.getData(
      paramdata,
      this.tid == "pieone" && this.pieonetype == "true"
        ? "/api/StatisticsAnalysis/Plans/Category"
        : this.tid == "pieone" && this.pieonetype == "false"
        ? "/api/StatisticsAnalysis/Plans/Type"
        : `/api/StatisticsAnalysis/Plans/Status`
    );
    this.tabledata = JSON.parse(JSON.stringify(this.echartsData.allDate));
    // console.log(this.tabledata)
    for (var i = 0; i < this.tabledata[0].organizations.length; i++) {
      this.zhiNameData.push(
        this.tabledata[0].organizations[i].organizationName
      );
      this.zhiNumData.push(this.tabledata[0].organizations[i].count);
      this.organizationId.push(
        this.tabledata[0].organizations[i].organizationId
      );
    }
    this.tiaoshiPao = this.echartsData.qipao(
      this.tiaoshiPao,
      this.zhiNumData,
      this.zhiNameData
    );
    this.zhuzhuangtu(this.headName);
  }

  //查询数据
  years: any = [];
  selectMonth: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  //日期初始化
  dateInit() {
    let date = new Date().getFullYear();
    for (let i = date; i >= date - 10; i--) {
      this.years.unshift(i);
    }
    // console.log(this.years)
  }

  selectOneYear: any = new Date().getFullYear(); //开始年份
  selectStartMonth: any = 1; //开始月份
  Submit(e) {}
  selectStartYear: any = new Date().getFullYear(); //开始年份

  topTextlabel = {
    show: true, // 开启显示
    position: "top", // 在上方显示
    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    verticalAlign: "middle",
    textStyle: {
      // 数值样式
      color: "black",
      fontSize: 12,
    },
  }; //柱状图数值顶部显示
  zhiNameData = [];
  zhiNumData = [];
  tiaoshiPao: any;
  //气泡提示数据获取
  bianli() {
    var arrshuzu = "[";
    for (var i = 0; i < this.zhiNumData.length; i++) {
      arrshuzu +=
        '{"value":' +
        this.zhiNumData[i] +
        ',"coord":[' +
        i +
        "," +
        this.zhiNumData[i] +
        '],"name":' +
        '"' +
        this.zhiNameData[i] +
        '"' +
        "},";
    }
    arrshuzu = arrshuzu.substring(0, arrshuzu.length - 1);
    arrshuzu += "]";
    this.tiaoshiPao = JSON.parse(arrshuzu);
    //return tishiPao
  }
  date = [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
  ];
  dateNum = [270, 253, 244, 199, 189, 173, 160, 198, 200];
  //返回
  goBack() {
    //this.zhutu.clear()
    this.zhutu ? this.zhutu.dispose() : null;
    history.go(-1);
    this.echartsData.statefulInspectionToggle = true;
  }

  axisLabel = {
    interval: 0,
    //rotate:-30,
    textStyle: {
      fontSize: 15,
      color: "#000000",
    },
    formatter: function (value) {
      var ret = ""; //拼接加\n返回的类目项
      var maxLength = 2; //每项显示文字个数
      var valLength = value.length; //X轴类目项的文字个数
      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
      if (rowN > 1) {
        //如果类目项的文字大于3,
        for (var i = 0; i < rowN; i++) {
          var temp = ""; //每次截取的字符串
          var start = i * maxLength; //开始截取的位置
          var end = start + maxLength; //结束截取的位置
          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
          temp = value.substring(start, end) + "\n";
          ret += temp; //凭借最终的字符串
        }
        return ret;
      } else {
        return value;
      }
    },
  }; //echarts两个字换行
  /* 柱状图 */
  zhuzhuangtu(headName: string) {
    var ec = echarts as any;
    this.zhutu = ec.init(document.getElementById("zhidui"), "walden");
    this.option = {
      title: {
        text: headName + `总数(${this.tabledata[0].totalCount})`,
        left: "center",
        top: 0,
        //bottom: "540",
        textStyle: {
          fontSize: 30,
        },
      },
      grid: {
        top: this.padHw ? 90 : 110,
        containLabel: true,
        //bottom: 10
      },
      xAxis: {
        id: this.organizationId,
        type: "category",
        data: this.zhiNameData,
        axisLabel: this.axisLabel,
      },
      yAxis: {
        type: "value",
        axisLabel: {
          textStyle: {
            fontSize: 18,
            color: "#000000",
          },
        },
      },
      tooltip: {
        trigger: "item",
        formatter: (params) => {
          return this.echartsData.biaogeTishida(params);
        },
        position: this.echartsData.tableTooltipNoShowq,
        /* backgroundColor:'rgba(255,255,255,1)',
        borderWidth:'1',
        borderRadius :'0' */
      },
      series: [
        {
          data: this.zhiNumData,
          type: "bar",
          markPoint: {
            symbolSize: [65, 65],
            data: this.tiaoshiPao,
          },
          backgroundStyle: {
            color: "rgba(220, 220, 220, 0.8)",
          },
          barWidth: "38",
          //label: this.topTextlabel
        },
      ],
    };
    this.zhutu.getZr().on("click", (params) => {
      // console.log(params.name)
      const pointInPixel = [params.offsetX, params.offsetY];
      if (this.zhutu.containPixel("grid", pointInPixel)) {
        let xIndex = this.zhutu.convertFromPixel({ seriesIndex: 0 }, [
          params.offsetX,
          params.offsetY,
        ])[0];
        /*事件处理代码书写位置*/
        this.echartsData.isQuery == false
          ? (this.echartsData.planYear = this.option.xAxis.data[xIndex])
          : this.echartsData.planYear == undefined;
        console.log(this.echartsData.planYear);
        if (
          (this.echartsData.level == "0" || this.echartsData.level == "1") &&
          this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1
        ) {
          this.router.navigate(["/statisticanalysis/PageZhongDuiDetails"], {
            queryParams: {
              level: this.option.xAxis.data[xIndex],
              name: this.headtext,
              id: this.option.xAxis.id[xIndex],
              type: this.type,
              tid: this.tid,
              pieonetype: this.pieonetype,
            },
          });
        } else {
          this.router.navigate(["/statisticanalysis/AllPlan"], {
            queryParams: {
              xname: this.option.xAxis.data[xIndex],
              name: this.headtext,
              id: this.option.xAxis.id[xIndex],
              type: this.type,
              tid: this.tid,
              pieonetype: this.pieonetype,
            },
          });
        }
      }
    });
    /* this.zhutu.on('click', (params) => {
      console.log(params)
      this.echartsData.statefulInspectionName =params.name;
      this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`);
    }); */
    this.zhutu.setOption(this.option);
  }
}