<template>
  <div class="right1-container">
    <InfoHeader name="救援事件分析" eName="Rescue event analysis"></InfoHeader>
    <InfoContent height="2rem">
      <div class="d-flex jc-space-around">
        <div class="left-box">
          <div class="maintenance-total d-flex a-c jc-center">
            <div>
              <div class="c-white font-weight-br fs-14">救援次数</div>
              <div
                style="margin-top: 0.15rem; color: #02dff6"
                class="d-flex jc-center c-white font-weight-br fs-20"
              >
                1
              </div>
            </div>
          </div>
          <div
            style="margin: 0.15rem 0 0 0.3rem"
            class="maintenance-total d-flex a-c jc-center"
          >
            <div>
              <div class="c-white font-weight-br fs-14">处置中事件</div>
              <div
                style="margin-top: 0.15rem; color: #02dff6"
                class="d-flex jc-center c-white font-weight-br fs-20"
              >
                0
              </div>
            </div>
          </div>
        </div>
        <div>
             <div class="title1 d-flex jc-center fs-20" >事件总数</div>
        <div class="title1 d-flex font-weight-br jc-center fs-30">2</div>
        </div>
       
      </div>
    </InfoContent>
  </div>
</template>
  
  <script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      currentIndex: 0,
      classicList: [
        { name: "救援", key: "resuce" },
        { name: "维保", key: "maintenance" },
        { name: "维修", key: "repair" },
      ],
      config: {
        unit: "件",
        data: [
          {
            name: "年度数量",
            value: 167,
          },
          {
            name: "今日数量",
            value: 67,
          },
          {
            name: "月度数量",
            value: 123,
          },
          {
            name: "本周数量",
            value: 55,
          },
        ],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],

        showValue: true,
      },
    };
  },
  methods: {
    handleClickItem(index) {
      this.currentIndex = index;
    },
  },
};
</script>
  <style lang="scss" scoped>
.right1-container {
  position: fixed;
  top: 8.85rem;
  left: 0.22rem;
  width: 31%;
  pointer-events: all;
  .right--box {
    padding: 0.15rem;
    .maintenance-total {
      background: url("../../../assets/images/maintain_work_date.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 2.14rem;
      height: 1rem;
    }
  }
  .title1 {
    background-image: url("../../../assets/images/biaoti-bck.png");
    width: 1.875rem;
    height: 0.375rem;
    line-height: 0.375rem;
    margin: 0 auto;


    color: white;
    margin-top: 0.3rem;
  }
  .left-box {
    padding: 0.15rem;

    .maintenance-total {
      background: url("../../../assets/images/maintain_work_date.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 2.14rem;
      height: 0.8rem;
    }
  }
}
</style>
  