<template>
|
<div class="count-view">
|
<div class="box">
|
<div class="left">
|
<div class="title-view">
|
<div>开机台数</div>
|
</div>
|
<div class="value-view">
|
<div class="title-margin-left">200台</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="title-view">
|
<div>外加工台数</div>
|
</div>
|
<div class="value-view">
|
<div class="title-margin-left">500台</div>
|
</div>
|
</div>
|
</div>
|
<div class="box">
|
<div class="left">
|
<div class="title-view">
|
<div>计划外加工数</div>
|
</div>
|
<div class="value-view">
|
<div class="title-margin-left">4000件</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="title-view">
|
<div>计划生产数</div>
|
</div>
|
<div class="value-view">
|
<div class="title-margin-left">2000件</div>
|
</div>
|
</div>
|
</div>
|
<div class="box">
|
<div class="left">
|
<div class="title-view">
|
<div>实际外加工数</div>
|
</div>
|
<div class="value-view">
|
<div class="title-margin-left">4000件</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="title-view">
|
<div>实际生产数</div>
|
</div>
|
<div class="value-view">
|
<div class="title-margin-left">2000件</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {
|
allList: [
|
{ title: "开机台数", value: 200 },
|
{ title: "总产量", value: 1200 },
|
{ title: "生产工单数", value: 200 },
|
{ title: "延期交付", value: 20 },
|
{ title: "物料不足", value: 10 },
|
{ title: "计划达成率", value: 2 },
|
],
|
};
|
},
|
mounted() {},
|
watch: {},
|
methods: {},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.count-view {
|
margin-top: 20px;
|
width: calc(100% - 20px);
|
height: 100%;
|
.box {
|
height: 33%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.left,
|
.right {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
.title-view {
|
width: 70%;
|
height: calc(100% - 10px);
|
background: linear-gradient(290deg, transparent 42px, #3a3728 0) bottom
|
left;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
color: #3a3728;
|
font-family: "Arial Negreta", "Arial Normal", "Arial";
|
font-weight: 700;
|
font-size: 20px;
|
color: #fccd1d;
|
display: flex;
|
align-items: center;
|
padding-left: 8px;
|
border-radius: 5px;
|
}
|
.value-view {
|
margin-left: -70px;
|
width: 50%;
|
// text-align: right;
|
height: calc(100% - 25px);
|
background: linear-gradient(110deg, transparent 42px, #083f55 0) bottom
|
left;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
font-size: 20px;
|
color: #01f7fd;
|
font-family: "Arial Normal", "Arial";
|
font-weight: 400;
|
display: flex;
|
align-items: center;
|
border-radius: 5px;
|
.title-margin-left {
|
margin-left: 45px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
