<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-12-28 16:34:51
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-01-02 10:28:16
 * @FilePath: /huaxin-web/src/views/indexcomponents/index/Right/components/Top.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="right-top flex-d-b bb">
    <div class="title-text charsTitle flex">
      <div class="a">临近安检日期设备</div>
      <div class="b">{{ nearNum }}</div>
    </div>
    <div class="item-wrapper flex bb">
      <div v-for="item in itemData" :key="item.text" class="item flex">
        <img :src="item.src" alt="" />
        <div class="text">{{ item.text }}</div>
        <div class="val">{{ item.val }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import a from "@/assets/indexImg/a.png";
import b from "@/assets/indexImg/b.png";
import c from "@/assets/indexImg/c.png";
import d from "@/assets/indexImg/d.png";
import { devLifeStatistic } from "@/api/screenstatistic/statistic.js";

export default {
  name: "",
  data() {
    return {
      itemData: [
        { src: a, text: "设备总量", val: " " },
        { src: b, text: "正常运行", val: " " },
        { src: c, text: "停用", val: " " },
        { src: d, text: "报废", val: " " },
      ],
      nearNum:" ",
    };
  },
  created(){
    this.devLifeStatistic().then(res=>{
      console.log('smzq',res);
      const {devTotalNum,nearNum,normalNum,scrapNum,stopNum} = res.data;
      this.nearNum =nearNum;
      this.itemData[0].val = devTotalNum;
      this.itemData[1].val = normalNum;
      this.itemData[2].val = scrapNum;
      this.itemData[3].val = stopNum;
    })
  },
  methods: {
    devLifeStatistic(){
      return devLifeStatistic();
    }
  },
};
</script>
<style lang="scss" scoped>
.right-top {
  width: 100%;
  height: 100%;
  .title-text {
    color: #fff;
    align-items: center;
    // margin-bottom:15px;
    .b {
      margin-left: 15px;
      color: #ff6464;
      font-size: 18px;
      font-weight: 900;
    }
  }
  .item-wrapper {
    flex-wrap: wrap;
    margin-top: 10px;
    flex: 1;
  }
  .item {
    width: 50%;
    color: #fff;
    align-items: center;
    // margin-bottom:15px;
    img {
      margin-right: 8px;
      width: 32px;
      height: 32px;
    }
    .text {
      margin-right: 7px;
      font-size: 16px;
    }
    .val {
      font-size: 20px;
      color: #48f7fc;
      font-weight: 800;
    }
  }
}
</style>
