<template>
  <div class="right1-container">
    <InfoHeader name="故障异常分析" eName="Fault anomaly analysis"></InfoHeader>
    <InfoContent height="6.2rem">
      <div style="padding: 0.15rem">
        <div class="title1 d-flex jc-center">不文明乘梯行为</div>
        <div class="d-flex" style="margin-top: 0.5rem">
          <div class="d-flex">
            <div>
              <img
                src="https://ele.secp.com.cn/largeScreen/images/incivilization_03.png"
                alt=""
              />
            </div>
            <div style="margin-left: 0.1rem">
              <div class="c-white fs-16 ws-nowrap">电瓶车入梯</div>
              <div
                class="c-white fs-20"
                style="margin-top: 00.1rem; color: #00dfff"
              >
                0次
              </div>
            </div>
          </div>
          <div style="flex: 1">
            <LineCharts
              chartId="rescue1ss"
              :chartLineXData="chartLineXData"
              :chartSettingData="chartSettingData"
            ></LineCharts>
          </div>
        </div>
        <div class="d-flex" style="margin-top: 0.4rem">
          <div class="d-flex">
            <div>
              <img
                src="https://ele.secp.com.cn/largeScreen/images/incivilization_03.png"
                alt=""
              />
            </div>
            <div style="margin-left: 0.1rem">
              <div class="c-white fs-16 ws-nowrap">遮挡门行为</div>
              <div
                class="c-white fs-20"
                style="margin-top: 00.1rem; color: #00dfff"
              >
                4695次
              </div>
            </div>
          </div>
          <div style="flex: 1">
            <LineCharts
              chartId="rescue1sssss"
              :chartLineXData="chartLineXData"
              :chartSettingData="chartSettingData"
            ></LineCharts>
          </div>
        </div>
        <div class="d-flex" style="margin-top: 0.4rem">
          <div class="d-flex">
            <div>
              <img
                src="https://ele.secp.com.cn/largeScreen/images/incivilization_03.png"
                alt=""
              />
            </div>
            <div style="margin-left: 0.1rem">
              <div class="c-white fs-16 ws-nowrap">电瓶车梯阻</div>
              <div
                class="c-white fs-20"
                style="margin-top: 00.1rem; color: #00dfff"
              >
                0次
              </div>
            </div>
          </div>
          <div style="flex: 1">
            <LineCharts
              chartId="rescue1sss"
              :chartLineXData="chartLineXData"
              :chartSettingData="chartSettingData"
            ></LineCharts>
          </div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";

import LineCharts from "@/components/lineCharts";

export default {
  components: {
    InfoHeader,
    InfoContent,

    LineCharts,
  },
  data() {
    return {
      chartPieData: [],
      chartSetting: {
        showLegend: false,
        radius: ["30%", "60%"],
        height: "2rem",
      },
      chartSettingData: {
        lineColor: "#46EFF1",
        areaColor: "#2B8E9F",
        seriesName: "次数",
        height: "1rem",
      },
      chartLineXData: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      chartData: [
        {
          value: 9,
          name: "停电故障",
          itemStyle: { color: "#AC2B61" },
        },
        { value: 60, name: "非平层开门", itemStyle: { color: "#FFDB4A" } },
        { value: 32, name: "非平层停梯", itemStyle: { color: "#D36D50" } },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.right1-container {
  position: fixed;
  top: 5.05rem;
  right: 0.22rem;
  width: 31%;
  pointer-events: all;

  .title1 {
    background-image: url("../../../../assets/images/biaoti-bck.png");
    width: 1.875rem;
    height: 0.375rem;
    line-height: 0.375rem;
    margin: 0 auto;

    font-size: 0.2rem;
    color: white;
  }
  .order {
    background: url("../../../../assets/images/guzhang_bck.png");
    background-repeat: no-repeat;
    background-size: 100% 35%;
    background-position: bottom;
    height: 2rem;
    .rate {
      font-size: 0.55rem;
      color: white;
      font-weight: bolder;
    }
    .item {
      margin: 0.375rem 0;
      .num-title {
        font-size: 0.3rem;
        color: white;
      }
      .num-value {
        font-size: 0.36rem;
        color: white;
        margin-left: 0.15rem;
      }
    }
  }
}
</style>
