<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2026-03-11 09:36:51
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-03-12 14:24:05
 * @FilePath: /chuanganqi/src/views/ind2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="device-box f-d-c">
    <!-- <div class="back">
      <el-link @click="$router.back()" type="primary">返回</el-link>
    </div> -->
    <div class="t f-c">
      <div class="title" v-for="(item, index) in titleArr" :key="item.text">
        <div class="text">{{ item.text }}</div>
        <div class="num" :class="index == 1 ? 'small-text' : ''">
          {{ item.num }}
        </div>
        <div
          v-if="index == 1"
          class="num"
          :class="index == 1 ? 'small-text' : ''"
        >
          {{ item.num2 }}
        </div>
      </div>
    </div>
    <div class="b">
      <div
        class="item"
        v-for="item in itemArr.filter((item, index) => {
          return index >= (currentPage - 1) * 28 && index < currentPage * 28;
        })"
        :style="{ opacity: item.i > total ? 0 : 1 }"
        :key="item.a"
      >
        <div class="text">{{ item.a }}</div>
        <div class="circle" :class="item.b ? 'yes' : 'no'"></div>
        <div class="bottom">电压：{{ item.b ? item.c : "0" }}V</div>
        <div class="bottom">状态：{{ item.b ? "正常" : "异常" }}</div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="28"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      currentPage: 1,
      itemArr: [],
      total: 2001,
      titleArr: [
        {
          text: "柜体编号",
          num: 111,
        },
        {
          text: "老化时间",
          num: 111,
          num2: "2026-3-10 12:12",
        },
        {
          text: "老化进度",
          num: 111,
        },
        {
          text: "老化设备总数",
          num: 111,
        },
        {
          text: "正常设备",
          num: 111,
        },
        {
          text: "故障设备",
          num: 111,
        },
      ],
    };
  },
  created(e) {
    this.titleArr[0].num = this.$route.query.code;
    this.titleArr[1].num = "起" + this.$route.query.startTime;
    console.log(
      this.$dayjs(this.$route.query.startTime)
        .add(3, "day")
        .format("YYYY-MM-DD HH:MM"),
    );
    this.titleArr[1].num2 =
      "止" +
     ( this.$dayjs(this.$route.query.startTime)
        .add(3, "day")
        .format("YYYY-M-DD"))+" "+this.$route.query.startTime.slice(10) ;

    this.titleArr[2].num = this.$route.query.jd;
    this.change(+this.$route.query.allNum);
  },
  methods: {
    change(n) {
      const num = n;
      console.log(n);
      this.total = n;
      const itemArr = [];
      const add = num % 7;
      const myNum = num + (7 - add);

      console.log(myNum);

      // 先弄弄出来故障设备
      const gzNum = Math.ceil(50 * Math.random());
      this.titleArr[3].num = num;
      this.titleArr[4].num = num - gzNum;
      this.titleArr[5].num = gzNum;


      for (let i = 0; i < myNum; i++) {

        const c =(32 + Math.ceil(Math.random() * 5)) /10 +'';
        let data = {
          a: "DEV-" + (i + 1),
          i: i + 1,
          c:c[0]+c[1]+c[2]
        };
        if (i >= num) {
          data = {
            i: i + 1,
          };
        }

        itemArr.push(data);
      }

      const a = itemArr.sort(() => {
        return Math.random() - 0.5;
      });
      a.forEach((item, index) => {
        if (index < gzNum) {
          item.b = false;
        } else {
          item.b = true;
        }
      });
      a.sort((a, b) => {
        return a.i - b.i;
      });
      this.itemArr = a;
    },
    handleCurrentChange() {
      console.log(this.currentPage);
    },
  },
};
</script>
<style lang="scss" scoped>
.device-box {
  width: 100%;
  height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
}
.t {
  box-sizing: border-box;
  .title {
    background: #fff;
    flex: 1;
    margin: 10px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    .text {
    }
    .num {
      font-size: 35px;
      font-weight: 700;
      margin-top: 8px;
    }
  }
}
.b {
  flex: 1;
  margin: 10px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  // justify-content: center;
  box-sizing: border-box;
  padding-top: 10px;
  justify-content: center;

  .item {
    width: 14%;
    height: 22%;
    margin-bottom: 2px;
    border-radius: 12px;
    margin-right: 2px;
    margin-left: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    &:nth-child(7n) {
      // background: red;
      margin-left: 0px;
      // margin-right: 0px;
    }

    .text {
      font-weight: 600;
      margin-bottom: 10px;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .circle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin: 0 auto;
      margin-bottom: 10px;

      &.yes {
        background: linear-gradient(135deg, #2ecc71, #27ae60);
      }
      &.no {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
      }
    }
  }
}
.block {
  position: relative;
  top: -55px;
  // background: #fff;
  text-align: center;
  width: 100%;
}
.small-text {
  font-size: 22px !important;
}
.back {
  position: fixed;
  left: 34px;
  top: 0px;
}
</style>
