productDev/dmMes.git

			@@ -1,5 +1,5 @@
			<template>
			<div class="content">
			<div class="content1">
			<div class="content_left">
			<div class="content_left_item1">
			<div class="content_left_item1_head">
			@@ -26,34 +26,20 @@
			<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 class="item2_content_head">
			<div class="item2_content_head_item">物料名称 / 工序</div>
			<div class="item2_content_head_item">仓库</div>
			<div class="item2_content_head_item">货架</div>
			<div class="item2_content_head_item">数量</div>
			</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 @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container">
			<div ref="scrollContainer" class="scroll_container">
			<div v-for="(item, index) in listData" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
			<span>{{ item.name }}</span>
			<div class="scroll_item_row"></div>
			<div class="scroll_item_row"></div>
			<div class="scroll_item_row"></div>
			<div class="scroll_item_row"></div>
			</div>
			</div>
			</div>
			@@ -66,11 +52,92 @@
			</template>

			<script setup>
			import {reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick} from 'vue'

			let timer = ref(null)
			let scrollContainer = ref(null)
			let listData = reactive([
			{name: 'dom第一个'},
			{name: 'dom第二个'},
			{name: 'dom第三个'},
			{name: 'dom第四个'},
			{name: 'dom第五个'},
			{name: 'dom第六个'},
			{name: 'dom第七个'},
			{name: 'dom第八个'},
			{name: 'dom第九个'},
			{name: 'dom第十个'},
			])
			start()
			// 注：示例中的 listData 写的是静态数据，可以直接调用 start()
			// 如果是接口获取 listData 列表时，需要在 nextTick 中调用 start()
			// 否则，进入页面不会滚动。必须鼠标移入移出才会滚动
			// 用 nextTick 的原因是需要等 dom 元素加载完毕后再执行方法

			// let chartData = reactive({
			// data: []
			// })
			// function getSensorData() {
			// GetSensorData().then(res=> {
			// chartData.data = res.data.data
			// nextTick(()=>{
			// start()
			// })
			// })
			// }

			// onMounted(()=> {
			// getSensorData()
			// })

			onBeforeUnmount(()=>{
			clearTimeout(timer.value)
			})
			onUnmounted(()=>{
			clearTimeout(timer.value)
			})

			function handleMouseEnter() {
			clearTimeout(timer.value)
			}
			function handleMouseLeave() {
			start()
			}
			// 开启定时器
			function start() {
			clearTimeout(timer.value)
			// 定时器触发周期
			let speed = ref(25)
			timer.value = setInterval(ListScroll, speed.value)
			}
			function ListScroll() {
			let scrollDom = scrollContainer.value
			// 判读组件是否渲染完成
			if(scrollDom.offsetHeight == 0) {
			scrollDom = scrollContainer.value
			}else {
			// 如果列表数量过少不进行滚动
			if(scrollDom.children.length < 4) {
			clearTimeout(timer.value)
			return
			}
			// 组件进行滚动
			scrollDom.scrollTop += 1
			// 判断是否滚动到底部
			if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
			// 获取组件第一个节点
			let first = scrollDom.children[0]
			// 删除节点
			scrollDom.removeChild(first)
			// 将该节点拼接到组件最后
			scrollDom.append(first)
			}
			}
			}
			</script>

			<style lang="scss" scoped>
			.content {
			.content1 {
			width: 100%;
			height: auto;
			display: flex;
			@@ -190,11 +257,55 @@
			.content_left_item2_content {
			width: 100%;
			height: 361px;
			padding: 20px;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
			.item2_content_head {
			width: 100%;
			height: 36px;
			display: flex;
			align-items: center;
			background: rgba(52,88,159,0.5);
			.item2_content_head_item {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 13px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #01D9FE;
			&:first-child {
			flex: 1.5;
			}
			}
			}
			.main_container {
			width: 100%;
			height: calc(100% - 36px);
			.scroll_container {
			width: 100%;
			height: 100%;
			overflow: hidden;
			.scroll_item_bg1 {
			background: rgba(52,88,159,0.2);
			}
			.scroll_item_bg2 {
			background: rgba(52,88,159,0.5);
			}
			.scroll_item {
			width: 100%;
			height: 36px;
			display: flex;
			align-items: center;

			}
			}
			}
			}
			}
			}
			.content_center {
			flex: 2;
			margin: 0 40px;