devicesmgt/sgzb-screen/src/components/home/leftOne.vue

<template>
  <div class="access-rate-page">
    <div class="access-rate-box">
      <div class="access-rate-box-title-bg">
        <h5 class="access-rate-box-title">领料数据</h5>
      </div>
      <div @click="handleClick(1)">
        <CountFlopOne :val="num" sonTitle="施工机具今日出库" ref="countFlop"></CountFlopOne>
      </div>
      <div class="access-rate-box-top" @click="handleClick(2)">
        <CountFlopOne :val="num2" sonTitle="工器具今日出库" ref="countFlopTools"></CountFlopOne>
      </div>
    </div>
  </div>
</template>

<script>
import CountFlopOne from './countFlopOne.vue'
import { getMaterialReqDataApi } from "../../api/screen";

export default {
  name: 'accessRatePage',
  components: {
    CountFlopOne
  },
  data() {
    return {
      num: 0,
      num2: 0,
    }
  },
  mounted() {
    this.getMaterialReqDataApiPage()
    setInterval(() => {
      this.getMaterialReqDataApiPage()
    }, 60 * 1000);
  },
  methods: {
    getMaterialReqDataApiPage() {
      getMaterialReqDataApi().then(res => {
        if (res.code == 200) {
          this.num = this.formatNumber(res.data.num)
          this.num2 = this.formatNumber(res.data.num2)
        }
      })
    },
    formatNumber(num) {
      const str = String(num); // 将数字转换成字符串
      if (str.length < 6) {
        const prefix = '0'.repeat(6 - str.length); // 在前面补零
        const formattedStr = prefix + str; // 组合补零后的字符串
        const result = formattedStr.replace(/(\d{3})(?=\d)/g, '$1,'); // 在中间用逗号分割
        return result;
      } else {
        return str.replace(/(\d{3})(?=\d)/g, '$1,'); // 直接在中间用逗号分割
      }
    },
    handleClick(maType) {
      if (maType == 1) {
        this.$refs.countFlop.handleClick(maType)
      } else {
        this.$refs.countFlopTools.handleClick(maType)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.access-rate-page {
  margin-bottom: 31px;
  .access-rate-box {
    .access-rate-box-title-bg {
      width: 433px;
      height: 50px;
      background: url(../../assets/img/myImage/title_left.png) no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .access-rate-box-title {
        position: absolute;
        left: 6%;
        top: 28%;
        font-size: 20px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 500;
        color: #ffffff;
        line-height: 23px;
        letter-spacing: 2px;
      }
    }
    .access-rate-box-top {
      margin-top: 30px;
    }
  }
}
</style>