web/SchedulingDashboard.git

			@@ -9,37 +9,42 @@
			</div>
			</div>
			<div class="table-box">
			<el-table :data="tableData" style="width: 100%">
			<el-table
			ref="table"
			:data="tableData"
			style="width: 100%"
			height="100%"
			>
			<el-table-column
			prop="workOrderId"
			prop="Number"
			label="工单编号"
			align="center"
			show-overflow-tooltip
			>
			</el-table-column>
			<el-table-column
			prop="product"
			prop="Product"
			label="产品"
			align="center"
			show-overflow-tooltip
			>
			</el-table-column>
			<el-table-column
			prop="productSpecs"
			prop="Scale"
			label="产品规格"
			align="center"
			show-overflow-tooltip
			>
			</el-table-column>
			<el-table-column
			prop="amount"
			prop="Amount"
			label="生产数量"
			align="center"
			show-overflow-tooltip
			>
			</el-table-column>
			<el-table-column
			prop="planTime"
			prop="PlanTime"
			label="计划时间"
			align="center"
			min-width="100"
			@@ -50,7 +55,7 @@
			<template slot-scope="scope">
			<div class="progerss-bg">
			<div
			v-for="item in scope.row.completeProgerss"
			v-for="(item, index) in scope.row.completeProgerss"
			class="progerss"
			:class="
			item.status == 1
			@@ -68,9 +73,17 @@
			</el-table-column>
			<el-table-column label="延期预警" align="center">
			<template slot-scope="scope">
			<div v-show="scope.row.delayWarning > 0" class="round-view">
			<div class="round"></div>
			<div class="title">{{ scope.row.delayWarning + "天" }}</div>
			<div v-show="scope.row.DelayDays > 0" class="round-view">
			<div class="round red-bg"></div>
			<div class="title red-color">
			{{ scope.row.DelayDays + "天" }}
			</div>
			</div>
			<div v-show="scope.row.DelayDays < 0" class="round-view">
			<div class="round green-bg"></div>
			<div class="title green-color">
			{{ scope.row.DelayDays + "天" }}
			</div>
			</div>
			</template>
			</el-table-column>
			@@ -83,78 +96,201 @@
			<script>
			export default {
			components: {},
			props: {},
			props: {
			tableData: {
			type: Array,
			default: () => [],
			},
			},
			data() {
			return {
			tableData: [
			{
			workOrderId: "A5435",
			product: "产品1",
			productSpecs: "规格",
			amount: "2000",
			planTime: "02-23~05-23",
			completeProgerss: [
			{ status: 1 },
			{ status: 1 },
			{ status: 2 },
			{ status: 0 },
			],
			delayWarning: 3,
			},
			{
			workOrderId: "A5435",
			product: "产品1",
			productSpecs: "规格",
			amount: "2000",
			planTime: "02-23~05-23",
			completeProgerss: [
			{ status: 1 },
			{ status: 1 },
			{ status: 2 },
			{ status: 0 },
			],
			delayWarning: 0,
			},
			{
			workOrderId: "A5435",
			product: "产品1",
			productSpecs: "规格",
			amount: "2000",
			planTime: "02-23~05-23",
			completeProgerss: [
			{ status: 1 },
			{ status: 1 },
			{ status: 1 },
			{ status: 1 },
			{ status: 1 },
			{ status: 1 },
			{ status: 1 },
			{ status: 1 },
			{ status: 2 },
			{ status: 0 },
			],
			delayWarning: 2,
			},
			{
			workOrderId: "A5435",
			product: "产品1",
			productSpecs: "规格",
			amount: "2000",
			planTime: "02-23~05-23",
			completeProgerss: [
			{ status: 1 },
			{ status: 1 },
			{ status: 2 },
			{ status: 0 },
			],
			delayWarning: 0,
			},
			],
			// tableData: [
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 3,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 1 },
			// { status: 1 },
			// { status: 1 },
			// { status: 1 },
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 2,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: -2,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// {
			// Number: "A5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// {
			// Number: "BA5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// {
			// Number: "BA5435",
			// Product: "产品1",
			// Scale: "规格",
			// Amount: "2000",
			// PlanTime: "02-23~05-23",
			// completeProgerss: [
			// { status: 1 },
			// { status: 1 },
			// { status: 2 },
			// { status: 0 },
			// ],
			// DelayDays: 0,
			// },
			// ],
			};
			},
			mounted() {},
			mounted() {
			this.setAutoScroll();
			},
			watch: {},
			methods: {},
			methods: {
			// 实现自动滚动的方法
			setAutoScroll() {
			// 拿到表格挂载后的真实DOM
			const table = this.$refs.table;
			// 拿到表格中承载数据的div元素
			const divData = table.bodyWrapper;
			// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
			setInterval(() => {
			// 元素自增距离顶部1像素
			divData.scrollTop += 1;
			// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
			if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
			// 重置table距离顶部距离
			divData.scrollTop = 0;
			}
			}, 200); // 滚动速度
			},
			},
			};
			</script>

			@@ -192,6 +328,8 @@
			}
			.table-box {
			padding: 20px 15px;
			height: calc(100% - 75px);
			overflow: hidden;
			.progerss-bg {
			width: 100%;
			height: 22px;
			@@ -219,13 +357,25 @@
			.round-view {
			display: flex;
			justify-content: center;
			color: #ff0000;

			.round {
			width: 22px;
			height: 22px;
			border-radius: 11px;
			background: #ff0000;

			margin-right: 5px;
			}
			.red-bg {
			background: #ff0000;
			}
			.green-bg {
			background: #00cc00;
			}
			.red-color {
			color: #ff0000;
			}
			.green-color {
			color: #00cc00;
			}
			}
			}
			@@ -251,6 +401,7 @@
			// 修改表格字体颜色
			.el-table__body td {
			color: #00ffff;
			padding: 8px 0;
			}
			// 设置表格背景透明
			.el-table th {
			@@ -285,5 +436,10 @@
			.el-table::before {
			display: none;
			}
			// 保留垂直滚动且隐藏滚动条
			.el-table__body-wrapper::-webkit-scrollbar {
			width: 0px;
			height: 0px;
			}
			}
			</style>