<template>
  <div class="right1-container">
    <InfoHeader
      name="历史故障统计"
      eName="Elevator cumulative data"
    ></InfoHeader>
    <InfoContent height="4.5rem">
      <div class="d-flex" style="padding: 0.15rem;">
        <BarCharts
          chartId="rightsssssw2ss"
          :chartXData="chartXData"
          :chartYData="chartYData"
          :chartSettings="chartSettings"
        ></BarCharts>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import BarCharts from "@/components/barCharts";
import {getWorkHistoryBad } from "@/api/elevator";
import moment from "moment";
export default {
  components: {
    InfoHeader,
    InfoContent,

    BarCharts,
  },
  data() {
    return {
      currentIndex: 0,
      chartXData: [],
      chartYData: [],
      startTime: moment().subtract(3, "months").format("YYYY-MM-DD"),
      endTime: moment().format("YYYY-MM-DD"),
      chartSettings: { legendTextArr: ["故障数量"], height: "4.5rem" ,barColor:'#01B2C3',interval:0,rotate:'30'},
      elevatorNum:''
    };
  },
  created() {
   
    if (this.$route.query) {
      this.elevatorNum = this.$route.query.elevatorNum;
      this.getWorkHistoryBadApi();
    }

 
  },
  methods: {
    getWorkHistoryBadApi() {
      getWorkHistoryBad(this.elevatorNum).then(
        (res) => {
          {
            this.chartXData = res.data.map((item) =>
              item.faultName
            );
            this.chartYData = res.data.map((item) => item.num);
          }
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.right1-container {
  //   position: fixed;
  //   top: 1.25rem;
  //   right: 0.22rem;
  width: 97%;
  pointer-events: all;
}
</style>
