<template>
|
<div class="container">
|
<!-- 标题 -->
|
<h1 class="title">生产数据看板</h1>
|
|
<!-- 自动横向滚动提示 -->
|
<div class="scroll-tip">
|
<div ref="tipContent" class="tip-content">{{ scrollTipText }}</div>
|
</div>
|
<!-- 表格区域 -->
|
<div class="table-container">
|
<table>
|
<thead>
|
<tr>
|
<th class="col-machine">机型</th>
|
<th class="col-plan">计划数量</th>
|
<th class="col-completed">上线数量</th>
|
<th class="col-completed">下线数量</th>
|
<th class="col-completed">在制数量</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="item in tableData" :key="item.id">
|
<td>{{ item.productCode }}</td>
|
<td>{{ item.planQty }}</td>
|
<td>{{ item.planQty }}</td>
|
<td>{{ item.planQty }}</td>
|
<td>{{ item.planQty }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<!-- 信息描述框 -->
|
<div class="info-box">
|
<p>告警信息：</p>
|
<ul>
|
<li>1. 数据统计周期为当日00:00至当前时间</li>
|
<li>2. 完成数量包含在制品</li>
|
<li>3. 每小时更新一次数据</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getWelcomeWord } from '@/api/main/da/stationCollection'
|
import { getTodayList } from '@/api/main/om/info'
|
export default {
|
data() {
|
return {
|
scrollTipText: '欢迎登录生产看板 欢迎登录生产看板 欢迎登录生产看板 欢迎登录生产看板 欢迎登录生产看板 欢迎登录生产看板 ',
|
tableData: [],
|
}
|
},
|
mounted() {
|
this.getWelcomeWord()
|
this.checkScrollNeeded()
|
window.addEventListener('resize', this.checkScrollNeeded)
|
this.getTableList()
|
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.checkScrollNeeded)
|
},
|
methods: {
|
//看板欢迎词
|
getWelcomeWord(){
|
const query = 'welcome';
|
getWelcomeWord(query).then(res => {
|
console.log('res',res)
|
if (res.code === 200){
|
if (res.data.length > 0){
|
if (res.data[0].remark !== null && res.data[0].remark !== ''){
|
console.log('111')
|
this.scrollTipText = res.data[0].remark
|
console.log('this.scrollTipText',this.scrollTipText)
|
}
|
}
|
}
|
})
|
},
|
getTableList(){
|
getTodayList().then(res => {
|
if (res.code === 200){
|
this.tableData = res.data
|
}
|
})
|
},
|
checkScrollNeeded() {
|
this.$nextTick(() => {
|
const content = this.$refs.tipContent
|
const container = content.parentElement
|
|
// 检测内容是否超出容器
|
const isOverflow = content.scrollWidth > container.offsetWidth
|
|
// 动态切换滚动状态
|
content.classList.toggle('auto-scroll', isOverflow)
|
|
// 设置滚动速度（可根据需要调整系数）
|
if (isOverflow) {
|
const overflowRatio = content.scrollWidth / container.offsetWidth
|
content.style.setProperty('--scroll-duration', `${overflowRatio * 20}s`)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container {
|
max-width: 2200px;
|
margin: 0 auto;
|
padding: 20px;
|
}
|
|
/* 标题样式 */
|
.title {
|
font-size: 40px;
|
font-weight: bold;
|
text-align: center;
|
margin-bottom: 30px;
|
color: #333;
|
}
|
|
.scroll-tip {
|
background: #e2fad0;
|
border: 1px solid #80e33d;
|
border-radius: 4px;
|
padding: 12px;
|
margin-bottom: 20px;
|
overflow: hidden; /* 隐藏溢出部分 */
|
position: relative;
|
}
|
|
.tip-content {
|
white-space: nowrap;
|
display: inline-block;
|
position: relative;
|
left: 0;
|
transition: all 0.3s;
|
padding-right: 20px; /* 防止文字紧贴边缘 */
|
font-size: 30px;
|
color: red;
|
}
|
|
/* 自动滚动动画 */
|
.tip-content.auto-scroll {
|
animation: auto-scroll linear infinite;
|
animation-duration: var(--scroll-duration, 15s);
|
}
|
|
@keyframes auto-scroll {
|
0% {
|
transform: translateX(100%);
|
}
|
100% {
|
transform: translateX(calc(-100% - 20px)); /* 滚动到完全消失 */
|
}
|
}
|
|
|
/* 表格样式 */
|
.table-container {
|
border: 1px solid #e8e8e8;
|
border-radius: 4px;
|
overflow: hidden;
|
margin-bottom: 20px;
|
}
|
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
thead {
|
background: #fafafa;
|
}
|
|
th {
|
padding: 16px;
|
text-align: left;
|
font-weight: 500;
|
color: rgba(0, 0, 0, 0.85);
|
border-bottom: 1px solid #e8e8e8;
|
}
|
|
tbody {
|
display: block;
|
max-height: 150px; /* 3行高度 */
|
overflow-y: auto;
|
}
|
|
tr {
|
display: table;
|
width: 100%;
|
table-layout: fixed;
|
}
|
|
td {
|
padding: 12px 16px;
|
border-bottom: 1px solid #e8e8e8;
|
color: rgba(0, 0, 0, 0.65);
|
}
|
|
/* 列宽设置 */
|
.col-machine { width: 25%; }
|
.col-plan { width: 25%; }
|
.col-completed { width: 25%; }
|
|
/* 信息描述框 */
|
.info-box {
|
background: #f0f9ff;
|
border: 1px solid #91d5ff;
|
border-radius: 4px;
|
padding: 16px;
|
color: #096dd9;
|
}
|
|
.info-box p {
|
font-weight: 500;
|
margin-bottom: 8px;
|
}
|
|
.info-box ul {
|
margin: 0;
|
padding-left: 20px;
|
}
|
|
.info-box li {
|
line-height: 1.6;
|
font-size: 14px;
|
}
|
</style>
|
