160 lines
3.8 KiB
Vue
160 lines
3.8 KiB
Vue
<template>
|
||
<div id="center">
|
||
<dv-border-box-13>
|
||
<div class="dv-itbox">
|
||
<div class="itbox-left">
|
||
<span>今日到岗人数</span>
|
||
<span>{{`112`}}</span>
|
||
<span>较昨日增加{{`12`}}</span>
|
||
</div>
|
||
<img width="50px" src="../assets/image/u125.png" alt="" />
|
||
</div>
|
||
</dv-border-box-13>
|
||
|
||
<dv-border-box-13>
|
||
<div class="dv-itbox">
|
||
<div class="itbox-left">
|
||
<span>今出差人数</span>
|
||
<span>{{`4`}}</span>
|
||
<span>较昨日增加{{`1`}}</span>
|
||
</div>
|
||
<img width="50px" src="../assets/image/u124.png" alt="" />
|
||
</div>
|
||
</dv-border-box-13>
|
||
<dv-border-box-13>
|
||
<div class="dv-itbox">
|
||
<div class="itbox-left">
|
||
<span>当前设计项目数量</span>
|
||
<span>{{`14`}}</span>
|
||
<span>较昨日增加{{`0`}}</span>
|
||
</div>
|
||
<img width="50px" src="../assets/image/u124.png" alt="" />
|
||
</div>
|
||
</dv-border-box-13>
|
||
<dv-border-box-13>
|
||
<div class="dv-itbox">
|
||
<div class="itbox-left">
|
||
<span>当前在制项目数量</span>
|
||
<span>{{`49`}}</span>
|
||
<span>较昨日增加{{`1`}}</span>
|
||
</div>
|
||
<img width="50px" src="../assets/image/u126.png" alt="" />
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { request } from "@/utils/request.js";
|
||
|
||
export default {
|
||
components: {
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
mounted() {
|
||
// this.setData();
|
||
// this.startInterval();
|
||
},
|
||
methods: {
|
||
// 开启定时器
|
||
startInterval() {
|
||
const _this = this;
|
||
// 应通过接口获取配置时间，暂时写死10s
|
||
const time = 50 * 10 * 1000;
|
||
if (this.intervalId !== null) {
|
||
clearInterval(this.intervalId);
|
||
}
|
||
this.intervalId = setInterval(() => {
|
||
_this.setData();
|
||
}, time);
|
||
},
|
||
// 根据自己的业务情况修改
|
||
setData() {
|
||
const _this = this;
|
||
request({
|
||
// 各产品生产数量api路径
|
||
url: "/api/BigScreen/getMonthData",
|
||
method: "get",
|
||
}).then((r) => {
|
||
// console.log(r.data.MoCompleteRate);
|
||
if (r) {
|
||
// debugger
|
||
// _this.config.data[0] = r.data.MoCompleteRate
|
||
_this.config = {
|
||
// data: [r.data.MoCompleteRate],
|
||
shape: "round",
|
||
waveHeight: 10,
|
||
waveNum: 2,
|
||
// colors: ['#003366', 'FFE4C4']
|
||
};
|
||
_this.config1 = {
|
||
data: [r.data.PoCompleteRate],
|
||
shape: "round",
|
||
waveHeight: 10,
|
||
waveNum: 2,
|
||
// colors: ['#003366', 'FFE4C4']
|
||
};
|
||
}
|
||
// if (r) {
|
||
// _this.cdata = r.data.EqmtRate
|
||
// this.cdata.series.forEach(i => {
|
||
// i.type = 'line'
|
||
// i.markLine = {
|
||
// focus: 'series'
|
||
// }
|
||
// })
|
||
// }
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
#center {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
// flex-direction: column;
|
||
justify-content: space-between;
|
||
// background-color: bisque;
|
||
.dv-border-box-13 {
|
||
width: 25%;
|
||
height: 100%;
|
||
padding: 0 20px;
|
||
padding-top: 30px;
|
||
.dv-itbox {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
.itbox-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 180px;
|
||
span {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
span:nth-child(2) {
|
||
font-size: 24px;
|
||
color: #00bbec;
|
||
font-weight: 600;
|
||
}
|
||
span:nth-child(3) {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|