<template>
  <div class="left">
    <div class="t">
      <Title text="用户安检" />
      <div class="btn">
        <div
          class="btn-item"
          v-for="item in btnData1"
          :key="item"
          :class="{ active: btn1Active == item }"
        >
          {{ item }}
        </div>
      </div>

      <div class="chars1">
        <div><img src="@/assets/bigwindowImg/ind2Img/ind2Imga.png" alt="" /></div>
        <div class="bb">
          <div class="text">安检任务1进度</div>
          <PressureBarChartVue />
        </div>
      </div>
      <div class="chars2">
        <UserTypeStackBarChart />
      </div>
    </div>
    <div class="b">
      <Title text="管线巡检" />
      <div class="btn">
        <div
          class="btn-item"
          v-for="item in btnData2"
          :key="item"
          :class="{ active: btn2Active == item }"
        >
          {{ item }}
        </div>
      </div>
      <div class="text-wrapper">
        <div v-for="item in textData" :key="item.t1">
          <div class="text1">{{ item.t1 }}</div>
          <div class="text2">{{ item.t2 }}</div>
        </div>
      </div>
      <div class="chars3">
        <PressureBarChart2 />
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/views/bigWindow/PubCom/title.vue";
import PressureBarChartVue from "./PressureBarChart.vue";
import PressureBarChart2 from "./PressureBarChart2.vue";

import UserTypeStackBarChart from "./UserTypeStackBarChart.vue";

export default {
  name: "",
  components: {
    Title,
    PressureBarChartVue,
    UserTypeStackBarChart,
    PressureBarChart2,
  },
  data() {
    return {
      textData: [
        {
          t1: "2.396",
          t2: "高压已巡检",
        },
        {
          t1: "2.3961",
          t2: "高压已巡检",
        },
        {
          t1: "2.3962",
          t2: "高压已巡检",
        },
        {
          t1: "2.3963",
          t2: "高压已巡检",
        },
      ],
      btnData1: ["居民", "工商业"],
      btn1Active: "居民",
      btnData2: ["日", "季度", "年"],
      btn2Active: "日",
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.left {
  overflow: hidden;
  // width: 20%;
  width: 434px;
  top: 102px;
  bottom: 50px;
  // background: url("~@/assets/bigwindowImg/index/l.png") no-repeat center;

  // background-size: 100% 100%;
  // border: 1px solid red;

  position: absolute;
  left: 10px;
  z-index: 999999;
}
.btn {
  display: flex;
  margin-top: 15px;
  margin-bottom: 20px;
  .btn-item {
    width: 71px;
    height: 38px;
    background: rgba(25, 151, 254, 0.098);
    box-sizing: border-box;
    border: 0.96px solid #10b4f5;
    box-shadow: inset 0px 0px 13px 0px rgba(25, 151, 254, 0.61);
    margin-right: 15px;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
    color:#fff;

    &.active {
      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
      border: 1px solid #72c1ff;
    }
  }
}
.chars1 {
  display: flex;
  .bb {
    flex: 1;
    margin-bottom: 12px;
    .text {
      color: #fff;
      font-size: 16px;
      margin-bottom: 2px;
      padding-left: 10px;
      padding-top: 10px;
      box-sizing: border-box;
    }
  }
}
.b {
  margin-top: 25px;
}
.text-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;

  .text1 {
    font-size: 28px;
  }
  .text2 {
    font-size: 16px;
  }
}
</style>
