devicesmgt/sgzb-screen/src/components/home/leftTwo1.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>

      <dv-border-box-1>
        <div @click="handleClick(1)">
          <CountFlopTwo
            :val="num"
            sonTitle="机具设备今日退库"
            ref="countFlop"
          ></CountFlopTwo>
        </div>
        <div class="access-rate-box-top" @click="handleClick(2)">
          <CountFlopTwo
            :val="num2"
            sonTitle="调试设备今日退库"
            ref="countFlopTools"
          ></CountFlopTwo>
        </div>
      </dv-border-box-1>
    </div>
  </div> -->

  <!-- <div class="left-two">
  
  </div> -->
  <div class="left-two">
    <dv-border-box-11 title="退料数据" class="left-two">
      <CountFlopTwo :val="num" sonTitle="机具设备今日退库" ref="countFlop" />
      <CountFlopTwo
        :val="num2"
        sonTitle="调试设备今日出库"
        ref="countFlopTools"
      />
    </dv-border-box-11>
  </div>
</template>

<script>
import CountFlopTwo from './countFlopTwo1.vue'
import { getMaterialReturnDataApi } from '../../api/screen'
export default {
  name: 'accessRatePage',
  components: {
    CountFlopTwo,
  },
  data() {
    return {
      num: 0,
      num2: 0,
    }
  },
  mounted() {
    this.getMaterialReturnDataApiPage()
    setInterval(() => {
      this.getMaterialReturnDataApiPage()
    }, 60 * 1000)
  },
  methods: {
    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,') // 直接在中间用逗号分割
      }
    },
    getMaterialReturnDataApiPage() {
      getMaterialReturnDataApi().then((res) => {
        if (res.code == 200) {
          this.num = this.formatNumber(res.data.num)
          this.num2 = this.formatNumber(res.data.num2)
        }
      })
    },
    handleClick(maType) {
      if (maType == 1) {
        this.$refs.countFlop.handleClick(maType)
      } else {
        this.$refs.countFlopTools.handleClick(maType)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.access-rate-page {
  //   margin-bottom: 31px;
  width: 100%;
  .access-rate-box {
    .access-rate-box-title-bg {
      width: 100%;
      height: 45px;
      margin-bottom: -20px;
      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;
    }
  }
}
// .left-two {
//   display: flex;
//   flex-direction: column;
// }
.left-two {
  height: 100%;
}

/deep/ .dv-border-box-11 .border-box-content {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>