productDev/dmMes.git

			@@ -1,11 +1,69 @@
			<template>
			<div class="content">
			<div class="content_left">1</div>
			<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>

			@@ -19,16 +77,131 @@
			align-items: center;
			justify-content: space-between;
			.content_left {
			width: 920px;
			background-color: aquamarine;
			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: 1;
			flex: 2;
			margin: 0 40px;
			background-color: aquamarine;
			}
			.content_right {
			width: 920px;
			flex: 1;
			background-color: aquamarine;
			}
			}