Sinopec-Anxin/src/app/pages/home-page/home-page.component.ts

import { HttpClient } from "@angular/common/http";
import { Component, OnInit, ViewContainerRef } from "@angular/core";
import { Router } from "@angular/router";
import * as echarts from "echarts";
import * as moment from "moment";
import { NzModalService } from "ng-zorro-antd/modal";
import { GetOutOfLineDetailsComponent } from "../today-warning/get-out-of-line-details/get-out-of-line-details.component";
import { NzMessageService } from "ng-zorro-antd/message";
import { DisposeequipmentComponent } from "../records/warning-statistics-list/disposeequipment/disposeequipment.component";
import { listRefreshService } from "../../service/listRefresh.service";
declare var tools;
@Component({
  selector: "app-home-page",
  templateUrl: "./home-page.component.html",
  styleUrls: ["./home-page.component.scss"],
})
export class HomePageComponent implements OnInit {
  constructor(
    private listRefreshService: listRefreshService,
    private http: HttpClient,
    private router: Router,
    private modal: NzModalService,
    private viewContainerRef: ViewContainerRef,
    private message: NzMessageService
  ) {}
  warningechartpieAll; //全部预警饼图
  warningechartpieOptionAll = {
    color: [
      "#91CCFF",
      "#46DFFF",
      "#36A2FF",
      "#FF6181",
      "#B4C3FF",
      "#FF9963",
      "#5A9CFF",
      "#4BFFD4",
      "#46DFFF",
      "#91CCFF",
    ],
    tooltip: {
      trigger: "item", //触发类型
    },
    // legend: {
    //   top: '1%',
    //   // left: '25.5%',
    //   itemGap: 6,
    //   itemWidth: 6,
    //   itemHeight: 6,
    //   formatter: (name) => {
    //     return '{a|' + name + '}';
    //   },
    //   textStyle: {
    //     color: '#fff',
    //     rich: {
    //       a: {
    //         width: 50
    //       }
    //     }
    //   }
    // },
    series: [
      {
        type: "pie",
        radius: ["65%", "85%"],
        // top: '2%',
        avoidLabelOverlap: false, //防止标签重叠策略
        emphasis: {
          //中间高亮区域
          show: true,
        },
        data: [],
        tooltip: {
          //鼠标移入提示
          position: "right",
          padding: [14, 19],
          backgroundColor: "rgba(28, 129, 218, 0.4)",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter: "{b} : {c} ({d}%)",
          extraCssText: "z-index:2",
        },
        label: {
          normal: {
            show: true,
            position: "center",
            color: "#4c4a4a",
            formatter: "",
            rich: {
              total: {
                fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
                textShadowColor: "#8df",
                textShadowBlur: 3,
                color: "#fff",
              },
              active: {
                fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
                color: "#fff",
                fontFamily: "Microsoft YaHei",
              },
            },
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
      },
    ],
  };

  warningechartpie; //30天预警饼图
  warningechartpieOption = {
    color: [
      "#91CCFF",
      "#46DFFF",
      "#36A2FF",
      "#FF6181",
      "#B4C3FF",
      "#FF9963",
      "#5A9CFF",
      "#4BFFD4",
      "#46DFFF",
      "#91CCFF",
    ],
    tooltip: {
      trigger: "item", //触发类型
    },
    legend: {
      top: "5%",
      left: "25.5%",
      itemGap: 8,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        return "{a|" + name + "}";
      },
      textStyle: {
        color: "#fff",
        rich: {
          a: {
            width: 60,
          },
        },
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "60%"],
        bottom: "-5%",
        right: "77%",
        avoidLabelOverlap: false, //防止标签重叠策略
        emphasis: {
          //中间高亮区域
          show: true,
        },
        data: [],
        tooltip: {
          //鼠标移入提示
          position: "right",
          padding: [14, 19],
          backgroundColor: "rgba(28, 129, 218, 0.4)",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter: "{b} : {c} ({d}%)",
          extraCssText: "z-index:2",
        },
        label: {
          normal: {
            show: true,
            position: "center",
            color: "#4c4a4a",
            formatter: "",
            rich: {
              total: {
                fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
                textShadowColor: "#8df",
                textShadowBlur: 3,
                color: "#fff",
              },
              active: {
                fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
                color: "#fff",
                fontFamily: "Microsoft YaHei",
              },
            },
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
      },
    ],
  };

  warningechartbar; //预警折线图
  warningechartbarOption = {
    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        show: false,
        lineStyle: {
          color: "#91CCFF",
        },
      },
      axisTick: {
        //刻度线
        show: false,
      },
      // inverse: true
    },
    yAxis: {
      type: "value",
      nameTextStyle: {
        color: "#C4E2FC",
      },
      splitLine: {
        //分割线
        lineStyle: {
          color: ["#0f4374"],
          width: 2,
        },
      },
      axisTick: {
        //刻度线
        show: false,
      },
      axisLine: {
        //轴线
        show: false,
        lineStyle: {
          color: "#C4E2FC",
        },
      },
    },
    tooltip: {
      // trigger: 'axis'//触发类型
    },
    series: [
      {
        data: [
          4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000,
          3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000,
          4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,
        ],
        type: "bar",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#23F0FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        barWidth: "35%",
      },
      {
        data: [
          4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000,
          3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000,
          4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000,
        ],
        type: "line",
        symbol: "circle",
        symbolSize: 5,
        label: {
          normal: {
            show: true,
            formatter: function (dataObj) {
              const { dataIndex, value } = dataObj;
              let labelText = value;

              labelText = "";
              if (dataIndex % 1 === 0) {
                // 每隔三个x坐标显示一个
                labelText = value;
              }

              return `${labelText}`;
            },
          },
        },
        itemStyle: {
          color: "#fff",
          shadowColor: "#fff",
          shadowBlur: 10,
        },
        lineStyle: {
          color: "#FFCC8A",
          width: 1,
        },
      },
    ],
    grid: {
      left: "40px",
      right: "30px",
      bottom: "38px",
      top: "30px",
    },
  };

  oilchartpie; //卸油饼图
  oilchartpieOption = {
    color: [
      "#91CCFF",
      "#46DFFF",
      "#36A2FF",
      "#FF6181",
      "#B4C3FF",
      "#FF9963",
      "#5A9CFF",
      "#4BFFD4",
      "#46DFFF",
      "#91CCFF",
    ],
    tooltip: {
      trigger: "item", //触发类型
    },
    legend: {
      top: "5%",
      left: "25%",
      itemGap: 8,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        // return name.length > 7 ? name.substr(0, 7) + "..." : name;
        return name;
      },
      textStyle: {
        color: "#fff",
        rich: {
          a: {
            width: 80,
          },
        },
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "60%"],
        bottom: "8%",
        right: "77%",
        avoidLabelOverlap: false, //防止标签重叠策略
        label: {
          normal: {
            show: true,
            position: "center",
            color: "#4c4a4a",
            formatter: "",
            rich: {
              total: {
                fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
                textShadowColor: "#8df",
                textShadowBlur: 3,
                color: "#fff",
              },
              active: {
                fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
                color: "#fff",
                // fontFamily: 'Microsoft YaHei',
              },
            },
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        data: [],
        tooltip: {
          //鼠标移入提示
          position: "right",
          padding: [14, 19],
          backgroundColor: "rgba(28, 129, 218, 0.4)",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter: "{b} : {c} ({d}%)",
          extraCssText: "z-index:2",
        },
      },
    ],
  };

  oilchartpieOptionPieData1: any;

  oilchartbar; //卸油折线图
  oilchartbarOption = {
    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        show: false,
        lineStyle: {
          color: "#91CCFF",
        },
      },
      axisTick: {
        //刻度线
        show: false,
      },
      // inverse: true
    },
    yAxis: {
      type: "value",
      nameTextStyle: {
        color: "#C4E2FC",
      },
      splitLine: {
        //分割线
        lineStyle: {
          color: ["#0f4374"],
          width: 2,
        },
      },
      axisTick: {
        //刻度线
        show: false,
      },
      axisLine: {
        //轴线
        show: false,
        lineStyle: {
          color: "#C4E2FC",
        },
      },
    },
    tooltip: {
      // // trigger: 'axis'
    },
    series: [
      {
        name: "卸油事件",
        data: [],
        type: "bar",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#23F0FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        barWidth: "25%",
      },
      {
        name: "卸油事件",
        data: [],
        type: "line",
        symbol: "circle",
        symbolSize: 8,
        label: {
          normal: {
            show: true,
            formatter: function (dataObj) {
              const { dataIndex, value } = dataObj;
              let labelText = value;

              labelText = "";
              if (dataIndex % 1 === 0) {
                // 每隔三个x坐标显示一个
                labelText = value;
              }

              return `${labelText}`;
            },
          },
        },
        itemStyle: {
          color: "#fff",
          shadowColor: "#fff",
          shadowBlur: 10,
        },
        lineStyle: {
          color: "#FFCC8A",
          width: 1,
        },
      },
    ],
    // legend: {
    //   data: ['卸油事件'],
    //   textStyle: {
    //     color: '#fff'
    //   },
    //   right: 28,
    //   top: 18,
    //   itemWidth: 8,
    //   itemHeight: 8,
    // },
    grid: {
      left: "40px",
      right: "30px",
      bottom: "38px",
      top: "36px",
    },
  };

  userdata;
  ngOnInit(): void {
    this.userdata = JSON.parse(sessionStorage.getItem("userdata"));

    // 饼图
    this.warningechartpieAll = echarts.init(
      document.getElementById("eventechartpieAll"),
      null,
      { devicePixelRatio: 2 }
    );
    // this.equipmentechart = echarts.init(document.getElementById('equipmentechart'));
    // 预警饼图

    this.warningechartpie = echarts.init(
      document.getElementById("eventechartpie"),
      null,
      { devicePixelRatio: 2 }
    );
    // 预警线图
    this.warningechartbar = echarts.init(
      document.getElementById("eventechartline")
    );

    // 卸油饼图
    this.oilchartpie = echarts.init(
      document.getElementById("oilechartpie"),
      null,
      { devicePixelRatio: 2 }
    );
    // 卸油线图
    this.oilchartbar = echarts.init(document.getElementById("oilechartline"));

    window.onresize = () => {
      setTimeout(() => {
        this.warningechartpieAll.resize();
        this.warningechartpie.resize();
        this.warningechartbar.resize();
        this.oilchartpie.resize();
        this.oilchartbar.resize();
      }, 200);
    };

    this.rollStart();

    this.getHomeAggregation();

    this.getUnreadNotification();

    setTimeout(() => {
      this.getHomeAggregation();
    }, 10 * 6000);

    this.listRefreshService.getMessage().subscribe((message: any) => {
      //列表刷新
      if (message.type == "add") {
        this.getHomeAggregation();
      }
    });

    // this.resolutionRatio();
  }

  resolutionRatio() {
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);
  }

  unreadMessageList: any;
  /**
   * 获得所有未读消息
   */
  getUnreadNotification() {
    this.http
      .get("/api/services/app/Notification/GetUnreadNotification")
      .subscribe((data: any) => {
        console.log("获得所有未读消息", data);
        this.unreadMessageList = data.result;
      });
  }

  //获得统计信息

  HomeAggregatioData: any = {
    areaAgg: [],
    violationType: {
      violationTypeAgg: [],
    },
    ouViolationType: {
      ouCorrectCount: "",
      ouNotCorrectCount: "",
      ouTotalCount: "",
    },
    dev: {
      stationCount: "",
      violationCount: "",
      cameraCount: "",
    },
    deviceViolationCount: "",
    licenseViolationCount: "",
  };
  totalCount;
  isSpin: boolean = false;

  /**
   * 获得统计图表数据
   */
  getHomeAggregation() {
    let organizationUnitId;
    if (this.router.url.indexOf("petrolStation") != -1) {
      organizationUnitId = JSON.parse(
        sessionStorage.getItem("userdataOfgasstation")
      ).organization.id;
    } else {
      organizationUnitId = JSON.parse(sessionStorage.getItem("userdata"))
        .organization.id;
    }
    let body = {
      organizationUnitId: organizationUnitId,
      isContainsChildren: true,
    };
    this.isSpin = true;
    this.http
      .post("/api/services/app/Home/HomeAggregation", body)
      .subscribe((data: any) => {
        this.HomeAggregatioData = data.result;
        this.totalCount = data.result.todayRecordCount;
        this.equipmentechartdata = [
          { name: "接入油站数量", value: data.result.dev.stationCount },
          { name: "摄像头数量", value: data.result.dev.cameraCount },
          { name: "预警模型数量", value: data.result.dev.violationCount },
        ];
        console.log("图表信息", data.result);
        this.isSpin = false;
        this.eventEcharts(data.result);
      });
  }

  //预警图表
  equipmentechartdata;
  tools1;
  tools1All;
  tools2;
  eventEcharts(data) {
    let violationTypeAggCount = 0;
    let violationTypeAggCountAll = 0;
    data.violationType.violationTypeAgg.forEach((element) => {
      violationTypeAggCount += element.count;
      element.name = element.key;
      element.value = element.count;
    });
    data.violationType.violationTypeAggAll.forEach((element) => {
      violationTypeAggCountAll += element.count;
      element.name = element.key;
      element.value = element.count;
    });
    this.warningechartpieOption.series[0].data =
      data.violationType.violationTypeAgg;
    this.warningechartpieOption.series[0].label.normal.formatter =
      "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}";
    this.warningechartpie.setOption(this.warningechartpieOption);

    this.warningechartpieOptionAll.series[0].data =
      data.violationType.violationTypeAggAll;
    this.warningechartpieOptionAll.series[0].label.normal.formatter =
      "{total|" + violationTypeAggCountAll + "}" + "\n\r" + "{active|累计预警}";
    this.warningechartpieAll.setOption(this.warningechartpieOptionAll);
    // 可调用clearLoop方法，清除定时器
    this.tools1 && this.tools1.clearLoop();
    this.tools1 = null;
    this.tools1 = tools.loopShowTooltip(
      this.warningechartpie,
      this.warningechartpieOption,
      {
        interval: 5000,
        loopSeries: true,
      }
    );

    this.tools1All && this.tools1All.clearLoop();
    this.tools1All = null;
    this.tools1All = tools.loopShowTooltip(
      this.warningechartpieAll,
      this.warningechartpieOptionAll,
      {
        interval: 5000,
        loopSeries: true,
      }
    );

    let monthArr = [];
    let valuedata = [];
    data.violationType.days30ViolationCount.forEach((element) => {
      monthArr.push(moment(element.key).format("MM.DD"));
      valuedata.push(element.count);
    });
    this.warningechartbarOption.xAxis.data = monthArr;
    this.warningechartbarOption.series[0].data = valuedata;
    this.warningechartbarOption.series[1].data = valuedata;
    let valueCount = valuedata.find(function (value, index, arr) {
      return value > 1000;
    });
    if (valueCount) {
      this.warningechartbarOption.series[1].label.normal.formatter = function (
        dataObj
      ) {
        const { dataIndex, value } = dataObj;
        let labelText = value;

        labelText = "";
        if (dataIndex % 2 === 0) {
          // 每隔三个x坐标显示一个
          labelText = value;
        }

        return `${labelText}`;
      };
    }
    this.warningechartbar.setOption(this.warningechartbarOption);

    //卸油两个图
    this.oilDischargeEcharts(data);
  }

  //30天预警事件两个图
  eventWarningOfMonth() {}

  //卸油两个图
  oilDischargeNum: any;
  oilDischargeEcharts(data) {
    this.oilDischargeNum = data.totalCount;
    //饼图
    data.ouViolationType.ouViolationTypeAgg.forEach((element) => {
      element.name = element.key;
      element.value = element.count;
    });
    this.oilchartpieOptionPieData1 = data.ouViolationType.ouViolationTypeAgg;
    this.oilchartpieOption.series[0].label.normal.formatter =
      "{total|" + data.ouRecordCount + "}" + "\n\r" + "{active|卸油预警}";
    this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1;
    this.oilchartpie.setOption(this.oilchartpieOption);

    // 可调用clearLoop方法，清除定时器
    this.tools2 && this.tools2.clearLoop();
    this.tools2 = null;
    this.tools2 = tools.loopShowTooltip(
      this.oilchartpie,
      this.oilchartpieOption,
      {
        interval: 5000,
        loopSeries: true,
      }
    );
    //柱状图
    let monthArr = [];
    let valuedata = [];
    data.ouViolationType.ouDays30ViolationCount.forEach((element) => {
      monthArr.push(moment(element.key).format("MM.DD"));
      valuedata.push(element.count);
    });
    this.oilchartbarOption.xAxis.data = monthArr;
    this.oilchartbarOption.series[0].data = valuedata;
    this.oilchartbarOption.series[1].data = valuedata;
    let valueCount = valuedata.find(function (value, index, arr) {
      return value > 1000;
    });
    if (valueCount) {
      this.warningechartbarOption.series[1].label.normal.formatter = function (
        dataObj
      ) {
        const { dataIndex, value } = dataObj;
        let labelText = value;

        labelText = "";
        if (dataIndex % 2 === 0) {
          // 每隔三个x坐标显示一个
          labelText = value;
        }

        return `${labelText}`;
      };
    }
    this.oilchartbar.setOption(this.oilchartbarOption);
  }

  timer;
  /**
   * 上部通知栏滚动
   */
  rollStart() {
    var ROLL_SPEED = 100;
    var noticeList1 = document.getElementById("notice-list");
    var noticeList2 = document.getElementById("notice-list-2");
    var listWrapper = document.getElementById("list-wrapper");
    noticeList2.innerHTML = noticeList1.innerHTML;
    this.timer = setInterval(rollStart, ROLL_SPEED);

    function rollStart() {
      if (
        Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight
      ) {
        listWrapper.style.top = "0px";
      } else {
        var top = listWrapper.style.top;
        listWrapper.style.top = _subStr(top) - 1 + "px";
      }
    }
    // 截取px前数值
    function _subStr(str) {
      var index = str.indexOf("px");
      if (index > -1) {
        return parseFloat(str.substr(0, index + 1));
      }
    }
  }
  mouseEnter() {
    // console.log('进入了')
    window.clearInterval(this.timer);
  }
  mouseleave() {
    // console.log('离开了')
    if (!this.isOpenModel) {
      this.rollStart();
    }
  }

  width(width: string, denominator: string) {
    let style: any = {};
    style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + "%";
    return style;
  }

  isOpenModel: boolean = false;

  look(item) {
    console.log("消息item", item);
    item.notification.data.violation = {};
    item.notification.data.violation.violationType =
      item.notification.data.violationType;
    item.notification.data.violation.violationSubType =
      item.notification.data.violationSubType;
    item.notification.data.violation.violationName =
      item.notification.data.violationName;
    item.notification.data.violation.eventSystemName =
      item.notification.data.eventSystemName;
    if (
      item.notification.data.eventSystemName == "设备报废临期提醒" ||
      item.notification.data.eventSystemName == "设备报废逾期报警" ||
      item.notification.data.eventSystemName == "设备维保临期提醒" ||
      item.notification.data.eventSystemName == "设备维保逾期报警"
    ) {
      this.isOpenModel = true;
      let copydata = item.notification.data;
      copydata.violatedItemSnapshotObj = JSON.parse(
        copydata.violatedItemSnapshot
      );
      const modal = this.modal.create({
        nzContent: DisposeequipmentComponent,
        nzViewContainerRef: this.viewContainerRef,
        nzWidth: 380,
        nzBodyStyle: {
          border: "1px solid #91CCFF",
          "border-radius": "0px",
          padding: "7px",
          "box-shadow": "0 0 8px 0 #fff",
          "background-image": "linear-gradient(#003665, #000f25)",
        },
        nzComponentParams: {
          data: copydata,
        },
        nzFooter: null,
        nzClosable: false,
        nzOnOk: async () => {
          if (instance.isScrap) {
            await new Promise((resolve) => {
              let body = {
                id: copydata.violatedItemSnapshotObj.id,
                isScrapped: true,
                organizationUnitId:
                  copydata.violatedItemSnapshotObj.organizationUnitId,
                name: instance.copydata2.violatedItemSnapshotObj.name,
                storageLocation:
                  instance.copydata2.violatedItemSnapshotObj.storageLocation,
                productionDate: moment(
                  instance.copydata2.violatedItemSnapshotObj.productionDate
                ).format("yyyy-MM-DD"),
                maintenanceDate: moment(
                  instance.copydata2.violatedItemSnapshotObj.maintenanceDate
                ).format("yyyy-MM-DD"),
                validityEndTime: moment(
                  instance.copydata2.violatedItemSnapshotObj.validityEndTime
                ).format("yyyy-MM-DD"),
              };
              this.http
                .put("/api/services/app/FireEquipment/Update", body)
                .subscribe((data: any) => {
                  let body = {
                    id: item.notification.entityId,
                    handleRecord: "报废成功！",
                  };
                  this.http
                    .post(
                      "/api/services/app/ViolateRecord/HandleViolateRecord",
                      body
                    )
                    .subscribe((data) => {
                      resolve(data);
                      this.message.create("success", "报废成功！");
                      copydata.handleTime = new Date();
                      return true;
                    });
                });
            });
          } else {
            if (instance.validateForm.valid) {
              await new Promise((resolve) => {
                let body = {
                  id: copydata.violatedItemSnapshotObj.id,
                  name: instance.validateForm.value.name,
                  storageLocation: instance.validateForm.value.storageLocation,
                  productionDate: moment(
                    instance.validateForm.value.productionDate
                  ).format("yyyy-MM-DD"),
                  maintenanceDate: moment(
                    instance.validateForm.value.maintenanceDate
                  ).format("yyyy-MM-DD"),
                  validityEndTime: moment(
                    instance.validateForm.value.validityEndTime
                  ).format("yyyy-MM-DD"),
                  organizationUnitId:
                    copydata.violatedItemSnapshotObj.organizationUnitId,
                };
                this.http
                  .put("/api/services/app/FireEquipment/Update", body)
                  .subscribe((data: any) => {
                    let body = {
                      id: item.notification.entityId,
                      handleRecord: "维保成功！",
                    };
                    this.http
                      .post(
                        "/api/services/app/ViolateRecord/HandleViolateRecord",
                        body
                      )
                      .subscribe((data) => {
                        resolve(data);
                        this.message.create("success", "维保成功！");
                        copydata.handleTime = new Date();
                        return true;
                      });
                  });
              });
            } else {
              this.message.create("warning", "请填写完整！");
              return false;
            }
          }
        },
      });
      const instance = modal.getContentComponent();

      modal.afterClose.subscribe((result) => {
        this.isOpenModel = false;
        this.rollStart();
      });
      this.readMess(item.notification.id);
    } else {
      this.isOpenModel = true;
      item.notification.data.id = item.notification.entityId;
      let data = item.notification.data;
      const modal = this.modal.create({
        nzContent: GetOutOfLineDetailsComponent,
        nzWrapClassName: "vertical-center-modal",
        nzViewContainerRef: this.viewContainerRef,
        nzWidth:
          document.documentElement.clientHeight < 650 ||
          document.documentElement.clientWidth < 1400
            ? 1000
            : 1200,
        nzClosable: false,
        nzClassName: "modelnobg",
        nzBodyStyle: {
          "border-radius": "0px",
          padding: "0px",
        },
        nzComponentParams: {
          data: data,
        },
        nzFooter: null,
        nzOnOk: async () => {},
      });
      const instance = modal.getContentComponent();
      modal.afterClose.subscribe((result) => {
        this.isOpenModel = false;
        this.rollStart();
      });
      this.readMess(item.notification.id);
    }
  }

  //标记为已读
  readMess(id) {
    let body = {
      id: id,
    };
    this.http
      .post("/api/services/app/Notification/Read", body)
      .subscribe((data: any) => {
        console.log("标记已读成功");
      });
  }

  ignore(index) {
    this.unreadMessageList.splice(index, 1);
  }
}