97 lines
2.5 KiB
Vue
97 lines
2.5 KiB
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>
|