<template>
|
<div class="Largescreen">
|
<div style="
|
display: flex;
|
justify-content: center;
|
color: #fff;
|
font-size: 41rem;
|
height: 400px;
|
line-height: 400px;
|
margin-top: 140px;
|
/* letter-spacing: 5rem; */
|
font-weight: bold;
|
">
|
检 8 道
|
</div>
|
<div class="1" style="
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 3rem;
|
height: 200px;
|
/* margin-top: 1rem; */
|
margin-top: 60px;
|
">
|
<div class="2" style="
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 40px;
|
width: 50%;
|
height: 3rem;
|
background-color: #95f204;
|
margin-top: 1rem;
|
border-radius: 1.5rem;
|
"></div>
|
</div>
|
|
<div class="3" style="
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
height: 28rem;
|
color: #fff;
|
font-weight: bold;
|
margin-top: 8rem;
|
font-size: 20rem;
|
">
|
<span> CR400AF</span>
|
<span>G7237</span>
|
</div>
|
|
<div class="4" style="
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 10%;
|
padding-bottom: 10%;
|
height: 60%;
|
height: 1820px;
|
box-sizing: border-box;
|
border-radius: 2rem;
|
background-color: rgba(39, 136, 214, 0.5);
|
box-shadow: 0px 0px 1rem 0rem rgba(18, 150, 219, 0.5);
|
">
|
<div style="
|
display: flex;
|
width: 100%;
|
justify-content: center;
|
flex-direction: column;
|
align-items: center;
|
text-align: right;
|
margin-top: 1rem;
|
">
|
<div style="display: flex; flex-direction: column; width: 100%">
|
<div style="
|
height: 5rem;
|
font-size: 7rem;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
padding-left: 2rem;
|
box-sizing: border-box;
|
">
|
<img style="width: 6rem; height: 6rem" src="@/assets/imgs/下一个.png" alt="" />
|
<div style="
|
width: 30%;
|
text-align: justify;
|
text-justify: distribute-all-lines;
|
text-align-last: justify;
|
margin-left: 2rem;
|
color: #fff;
|
">
|
登顶人数
|
</div>
|
</div>
|
<div style="
|
margin-left: 2rem;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
margin-top: 5rem;
|
">
|
<div style="
|
width: 45%;
|
font-size: 8rem;
|
color: #fff;
|
background-color: #058f66;
|
border-radius: 1.5rem;
|
padding: 0.5rem 1rem;
|
text-align: center;
|
">
|
已登记 <span>2人</span>
|
</div>
|
<div style="
|
width: 45%;
|
font-size: 8rem;
|
color: #fff;
|
background-color: #d9001b;
|
border-radius: 1.5rem;
|
padding: 0.5rem 1rem;
|
text-align: center;
|
">
|
已登顶 <span>2人</span>
|
</div>
|
</div>
|
</div>
|
<div style="
|
color: #fff;
|
font-size: 5rem;
|
/* height: 500px; */
|
display: flex;
|
width: 100%;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 5rem;
|
padding: 0 1rem;
|
">
|
<div>
|
<img style="width: 6rem; height: 6rem" src="@/assets/imgs/工单管理.png" alt="" />
|
<span style="color: #fff; font-size: 7rem; font-weight: bold">作业人员列表</span>
|
</div>
|
<div class="5" style="color: #fff; font-size: 5rem" >
|
正在作业人员数量:
|
<span style="font-size: 9rem">{{ pageTotal }}</span>位
|
</div>
|
</div>
|
|
|
<div style="width: 98%; margin-top: 1rem;" >
|
<el-table empty-text="暂无数据" max-height="1200px" :data="visibleData" style="width: 100%;" :header-cell-style="{
|
color: '#1AC8FE',
|
background: '#0A5B91',
|
fontSize: '6rem',
|
|
}" :cell-style="{
|
color: '#fff',
|
background: '#147BAF',
|
fontSize: '4.5rem',
|
}"
|
@mouseenter="pauseAutoScroll"
|
@mouseleave="resumeAutoScroll"
|
>
|
<el-table-column prop="userTrueName" label="用户名称" align="center" min-width="1%" />
|
<el-table-column prop="unit" label="单位" align="center" min-width="1%" />
|
<el-table-column prop="userteam" align="center" label="班组" min-width="1%" />
|
<el-table-column prop="ipAddress" label="检修道" align="center" min-width="1%" />
|
<el-table-column prop="maintenancStartTime" label="开始时间" align="center" min-width="2%" />
|
</el-table>
|
</div>
|
|
<div style="
|
height: 100px;
|
position: absolute;
|
bottom: 2%;
|
color: #fff;
|
font-weight: bold;
|
font-size: 10rem;
|
">
|
{{ currentTime }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
<script setup>
|
import { onMounted, reactive, ref, toRef, onUnmounted } from "vue";
|
import {
|
PersonnelMonitoring,
|
UpstreamInspectionRoad,
|
} from "@/api/newapi/Maintenance";
|
import { formatTime } from "@/utils/index";
|
|
|
const tableData = ref([]);
|
const visibleData = ref([]); // 当前显示的数据
|
const scrollIndex = ref(0); // 当前滚动位置
|
const pageTotal = ref(0);
|
const totalCount = ref(0);
|
const scrollInterval = ref(null);
|
const isPaused = ref(false);
|
//分页请求参数
|
const pageQuery = ref({
|
page: 1, //当前页面
|
rows: 5, //每页显示条数
|
order: "desc", //排序方式
|
sort: "", //排序字段
|
wheres: "", //条件查询
|
});
|
const obj = {
|
selectType: "",
|
inputcontent: "",
|
};
|
const queryForm = toRef({ ...obj });
|
|
// 在initData方法中添加状态检查
|
const initData = () => {
|
PersonnelMonitoring({
|
pageIndex: pageQuery.value.page,
|
pageSize: 99999,
|
searchKeyword: queryForm.value.inputcontent,
|
}).then((res) => {
|
// 清空旧数据
|
tableData.value = [];
|
visibleData.value = [];
|
|
// 如果有新数据才更新
|
if (res.data && res.data.result && res.data.result.length > 0) {
|
tableData.value = res.data.result;
|
pageTotal.value = res.data.totalCount;
|
totalCount.value = res.data.result.filter(v => v.maintenanceStatus == 1).length;
|
|
// 检查是否有状态变化
|
const hasStatusChanged = tableData.value.some(item => {
|
const newItem = res.data.result.find(i => i.id === item.id);
|
return newItem && newItem.maintenanceStatus !== item.maintenanceStatus;
|
});
|
|
// 如果状态有变化，强制重置滚动
|
if (hasStatusChanged) {
|
scrollIndex.value = 0;
|
}
|
} else {
|
// 无数据时重置计数
|
pageTotal.value = 0;
|
totalCount.value = 0;
|
}
|
|
updateVisibleData();
|
|
// 控制滚动逻辑
|
if (tableData.value.length >= 6 && !scrollInterval.value) {
|
startAutoScroll();
|
} else if (tableData.value.length < 6 && scrollInterval.value) {
|
clearInterval(scrollInterval.value);
|
scrollInterval.value = null;
|
}
|
}).catch(error => {
|
console.error('获取数据失败:', error);
|
// 可以保持旧数据或显示错误信息
|
});
|
};
|
|
|
const updateVisibleData = () => {
|
// 清空可见数据
|
visibleData.value = [];
|
|
if (tableData.value.length === 0) {
|
return; // 无数据时直接返回
|
}
|
|
// 当数据量≤5条时，显示全部数据
|
if (tableData.value.length <= 5) {
|
visibleData.value = [...tableData.value];
|
return;
|
}
|
|
// 数据量>5条时，保持原有滚动逻辑
|
const end = Math.min(scrollIndex.value + pageQuery.value.rows, tableData.value.length);
|
visibleData.value = tableData.value.slice(scrollIndex.value, end);
|
|
// 数据不足时循环显示
|
if (visibleData.value.length < pageQuery.value.rows) {
|
visibleData.value = [
|
...visibleData.value,
|
...tableData.value.slice(0, pageQuery.value.rows - visibleData.value.length)
|
];
|
}
|
};
|
|
// 开始自动滚动
|
const startAutoScroll = () => {
|
// 只有数据量>5条时才启动滚动
|
if (tableData.value.length <= 5) {
|
clearInterval(scrollInterval.value);
|
scrollInterval.value = null;
|
return;
|
}
|
|
if (scrollInterval.value) clearInterval(scrollInterval.value);
|
|
scrollInterval.value = setInterval(() => {
|
if (!isPaused.value) {
|
scrollIndex.value = (scrollIndex.value + 1) % tableData.value.length;
|
updateVisibleData();
|
}
|
}, 2000);
|
};
|
|
|
|
// 暂停自动滚动
|
const pauseAutoScroll = () => {
|
isPaused.value = true;
|
};
|
|
// 恢复自动滚动
|
const resumeAutoScroll = () => {
|
isPaused.value = false;
|
};
|
|
|
|
const currentTime = ref("");
|
const timer = ref(null);
|
onMounted(async () => {
|
clearInterval(timer.value);
|
initData()
|
setInterval(() => {
|
initData()
|
}, 10000);
|
//获取当前时间
|
const date = new Date();
|
timer.value = setInterval(() => {
|
currentTime.value = formatTime(date, "yyyy-MM-dd hh:mm:ss");
|
date.setSeconds(date.getSeconds() + 1);
|
}, 1000);
|
// await UpstreamInspectionRoad();
|
});
|
onUnmounted(() => {
|
clearInterval(timer.value);
|
clearInterval(scrollInterval.value); // 卸载时清理定时器：
|
});
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
.Largescreen {
|
width: 2160px;
|
height: 3840px;
|
overflow: hidden;//页面不可滚动
|
position: relative;
|
flex-direction: column;
|
|
|
flex-direction: column;
|
|
// background-color: rgba($color: #000000, $alpha: 0.2);
|
.shadow {
|
box-shadow: 0px 0px 1rem 0.5rem rgb(18, 150, 219);
|
}
|
}
|
|
:deep(.el-table__empty-block) {
|
background-color: rgba(23, 87, 149, 0.9);
|
}
|
|
:deep(.el-scrollbar__wrap) {
|
background-color: rgba(23, 87, 149, 0.9);
|
}
|
|
:deep(.el-table .cell) {
|
font-size: 4rem !important;
|
line-height: 1.5 !important;
|
}
|
</style>
|
