<template>
|
<div class="content">
|
<div class="content_left">
|
<div class="content_left_item1">
|
<div class="content_left_item1_head">
|
<span>当日员工产量TOP10</span>
|
</div>
|
<div class="content_left_item1_content">
|
<div class="content_left_item1_content_row" v-for="(item, index) in 10" :key="index">
|
<div class="content_left_item1_content_row_name">
|
<div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div>
|
<span>赵立{{ index }}</span>
|
</div>
|
<div class="content_left_item1_content_row_line">
|
<el-progress
|
:show-text="false"
|
:percentage="50">
|
</el-progress>
|
</div>
|
<div class="content_left_item1_content_row_num">342</div>
|
</div>
|
</div>
|
</div>
|
<div class="content_left_item2">
|
<div class="content_left_item2_head">
|
<span>仓库实时余量统计</span>
|
</div>
|
<div class="content_left_item2_content">
|
<div class="productProcess">
|
|
<!-- 如果页面刷新数据比较频繁，可以将loading、showFlag的相关代码删除，防止过于频繁的出现加载动画 -->
|
<div class="loading_div" v-show="!showFlag">
|
<div>Loading...</div> <!-- 这个loading自己写，代码没贴出来 -->
|
</div>
|
|
<div class="success_info_body" v-show="showFlag">
|
<!-- 参数名称、列数根据实际情况调整 -->
|
<div class="table_body">
|
<div class="table_th">
|
<div class="tr1 th_style">排产编号</div>
|
<div class="tr2 th_style">类型</div>
|
<div class="tr3 th_style">日期</div>
|
<div class="tr4 th_style">进度</div>
|
</div>
|
<div class="table_main_body">
|
<div class="table_inner_body" :style="{top: tableTop + 'px'}">
|
<div class="table_tr" v-for="(item,index) in tableList" :key="index">
|
<div class="tr1 tr">{{item.planNo}}</div>
|
<div class="tr2 tr">{{item.type}}</div>
|
<div class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</div>
|
<div class="tr3 tr" v-else>-</div>
|
<div class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</div>
|
<div class="tr4 tr" v-else>-</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="content_center">2</div>
|
<div class="content_right">3</div>
|
</div>
|
</template>
|
|
<script setup>
|
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
width: 100%;
|
height: auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.content_left {
|
flex: 1;
|
.content_left_item1 {
|
width: 100%;
|
margin-bottom: 20px;
|
.content_left_item1_head {
|
background: url('@/assets/img/home_title_short@2x.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
width: 100%;
|
height: 38px;
|
line-height: 38px;
|
padding-left: 34px;
|
box-sizing: border-box;
|
span {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
|
font-weight: bold;
|
color: #FFFFFF;
|
line-height: 24px;
|
text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
|
}
|
}
|
.content_left_item1_content {
|
width: 100%;
|
height: 360px;
|
padding: 20px;
|
box-sizing: border-box;
|
background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
|
.content_left_item1_content_row {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 13px;
|
&:last-child {
|
margin: 0;
|
}
|
.content_left_item1_content_row_name {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 13px;
|
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
|
font-weight: 400;
|
color: #D2E0FF;
|
margin-left: 9px;
|
}
|
.num {
|
width: 20px;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
font-size: 12px;
|
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
.bg1 {
|
background: url('@/assets/img/rank_blue@2x.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.bg2 {
|
background: url('@/assets/img/rank_yellow@2x.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
.content_left_item1_content_row_line {
|
flex: 1;
|
margin: 0 15px;
|
&::v-deep(.el-progress-bar__outer) {
|
border-radius: 0%;
|
background: rgba(255,255,255,0.13);
|
}
|
&::v-deep(.el-progress-bar__inner) {
|
border-radius: 0%;
|
background: linear-gradient(270deg, #00B0FF 0%, #345BA3 100%);
|
}
|
}
|
.content_left_item1_content_row_num {
|
font-size: 13px;
|
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
|
font-weight: 400;
|
color: #D2E0FF;
|
}
|
}
|
}
|
}
|
.content_left_item2 {
|
width: 100%;
|
.content_left_item2_head {
|
background: url('@/assets/img/home_title_short@2x.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
width: 100%;
|
height: 38px;
|
line-height: 38px;
|
padding-left: 34px;
|
box-sizing: border-box;
|
span {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
|
font-weight: bold;
|
color: #FFFFFF;
|
line-height: 24px;
|
text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
|
}
|
}
|
.content_left_item2_content {
|
width: 100%;
|
height: 361px;
|
background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
|
|
}
|
}
|
}
|
.content_center {
|
flex: 2;
|
margin: 0 40px;
|
background-color: aquamarine;
|
}
|
.content_right {
|
flex: 1;
|
background-color: aquamarine;
|
}
|
}
|
</style>
|
|
