<!--
|
* @Author: daidai
|
* @Date: 2022-03-04 09:23:59
|
* @LastEditors: Please set LastEditors
|
* @LastEditTime: 2022-05-07 11:05:02
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
|
-->
|
<template>
|
<div class="contents">
|
<div class="contetn_left">
|
<div class="pagetab">
|
|
</div>
|
<!-- <ItemWrap class="contetn_left-top contetn_lr-item" title="故障--种类频率">
|
<LeftCenter />
|
</ItemWrap> -->
|
|
<ItemWrap
|
class="contetn_left-bottom contetn_lr-item"
|
title="当前出入库任务"
|
>
|
<stationone/>
|
</ItemWrap>
|
|
<ItemWrap
|
class="contetn_left-bottom contetn_lr-item"
|
title="今日待出库实盘"
|
>
|
<stationtwo/>
|
</ItemWrap>
|
|
<ItemWrap
|
class="contetn_left-bottom contetn_lr-item"
|
title="货位状态信息"
|
>
|
<stationthree/>
|
</ItemWrap>
|
|
</div>
|
<div class="contetn_center">
|
<div style="height:70vh;margin-bottom: -30px">
|
<LeftBottom/>
|
</div>
|
<ItemWrap
|
class="contetn_left-bottom contetn_lr-item"
|
title="产量展示信息"
|
style="padding: 0 10px 16px 10px"
|
>
|
<RightCenter />
|
</ItemWrap>
|
</div>
|
<div class="contetn_right">
|
<ItemWrap
|
class="contetn_left-bottom contetn_lr-item"
|
title="各线当前任务数量"
|
style="padding: 0 10px 16px 10px"
|
>
|
<passtwo />
|
</ItemWrap>
|
|
<ItemWrap
|
class="contetn_left-bottom contetn_lr-item"
|
title="实盘入库产量统计"
|
style="padding: 0 10px 16px 10px"
|
>
|
<CenterBottom />
|
</ItemWrap>
|
|
<ItemWrap
|
class="contetn_left-bottom contetn_lr-item"
|
title="实盘出库产量统计"
|
>
|
<plan />
|
</ItemWrap>
|
</div>
|
<div class="popup-container">
|
<!-- 弹窗内容 -->
|
<div
|
v-show="isPopupVisible"
|
class="popup"
|
>
|
<div class="popup-content">
|
<table class="table table-striped">
|
<thead>
|
<tr>
|
<th>货位号</th>
|
<th>托盘号</th>
|
<th>库区</th>
|
</tr>
|
</thead>
|
<tbody>
|
|
<!-- 使用 v-for 循环渲染数据行 -->
|
<tr v-for="item in tableData" :key="item.id"> <!-- 假设数据有唯一标识id，若无可用索引 -->
|
<td style="color: red;">当前超时托盘：</td>
|
<td>{{ item.locationCode }}</td> <!-- 货位号字段，需根据接口返回的实际字段名修改 -->
|
<td>{{ item.palletCode }}</td> <!-- 托盘号字段 -->
|
<td>{{ item.areaCode.includes('FR') ? '分容库区' : item.areaCode.includes('GW') ? '高温库区' : item.areaCode.includes('CW') ? '常温库区' : item.areaCode }}</td><!-- 应出库时间，可添加格式化函数 -->
|
<td >{{ item.outboundTime }}</td>
|
</tr>
|
<!-- 空数据提示 -->
|
<tr v-if="tableData.length == 0">
|
<td colspan="3" class="text-center">暂无数据</td>
|
</tr>
|
</tbody>
|
|
</table>
|
<button @click="closePopup">立即关闭</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LeftTop from './left-top.vue'
|
import LeftCenter from "./left-center.vue";
|
import LeftBottom from "./left-bottom.vue";
|
import CenterMap from "./center-map.vue";
|
import CenterBottom from "./center-bottom.vue";
|
import RightTop from "./right-top.vue";
|
import RightCenter from "./right-center.vue";
|
import RightBottom from "./right-bottom.vue";
|
import LeftCenterRight from "./left-center-right.vue";
|
import stationone from './station-one.vue'
|
import stationtwo from './station-two.vue'
|
import stationthree from './station-three.vue'
|
import stationfour from './station-four.vue'
|
import passtwo from './pass-two.vue'
|
import plan from './plan.vue'
|
import {GetTimeoutgetPageData} from "@/api/http.js"
|
export default {
|
components: {
|
LeftTop,
|
LeftCenter,
|
LeftCenterRight,
|
LeftBottom,
|
CenterMap,
|
RightTop,
|
RightCenter,
|
RightBottom,
|
CenterBottom,
|
stationone,
|
stationtwo,
|
stationthree,
|
stationfour,
|
passtwo,
|
plan
|
},
|
data() {
|
return {
|
isPopupVisible: false,
|
tableData: [],
|
showDuration: 60*10*1000, // 显示时长（5秒）
|
intervalTime: 60*60*1000, // 间隔时长（5秒）
|
showTimer: null, // 显示时长定时器
|
intervalTimer: null // 间隔时长定时器
|
};
|
},
|
mounted() {
|
this.startPopupCycle(); // 启动弹窗循环
|
},
|
beforeDestroy() {
|
this.clearTimers(); // 清除所有定时器
|
},
|
// beforeDestroy() {
|
// this.clearData()
|
// },
|
methods: {
|
// 启动弹窗循环
|
startPopupCycle() {
|
this.showPopup(); // 首次显示弹窗
|
},
|
|
// 显示弹窗
|
showPopup() {
|
this.isPopupVisible = true;
|
this.fetchData(); // 获取数据
|
|
// 设置显示时长定时器
|
this.showTimer = setTimeout(() => {
|
this.hidePopup(); // 显示结束后隐藏弹窗
|
}, this.showDuration);
|
},
|
|
// 隐藏弹窗
|
hidePopup() {
|
this.isPopupVisible = false;
|
|
// 设置间隔时长定时器
|
this.intervalTimer = setTimeout(() => {
|
this.startPopupCycle(); // 间隔结束后重新显示弹窗
|
}, this.intervalTime);
|
},
|
|
// 获取数据
|
async fetchData() {
|
try {
|
const rep = await GetTimeoutgetPageData();
|
this.tableData = rep || []; // 更新响应式数据
|
} catch (error) {
|
console.error("数据获取失败:", error);
|
}
|
},
|
|
// 手动关闭弹窗（可选）
|
closePopup() {
|
this.isPopupVisible = false;
|
this.clearTimers(); // 清除定时器
|
this.startPopupCycle(); // 重新开始循环（可选）
|
},
|
|
// 清除所有定时器
|
clearTimers() {
|
clearTimeout(this.showTimer);
|
clearTimeout(this.intervalTimer);
|
this.showTimer = null;
|
this.intervalTimer = null;
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
// 内容
|
.contents {
|
.contetn_left,
|
.contetn_right {
|
width: 540px;
|
box-sizing: border-box;
|
// padding: 16px 0;
|
}
|
|
.contetn_center {
|
width: 720px;
|
}
|
|
//左右两侧 三个块
|
.contetn_lr-item {
|
height: 310px;
|
}
|
|
.contetn_center_top {
|
width: 100%;
|
}
|
|
// 中间
|
.contetn_center {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
|
.contetn_center-bottom {
|
height: 315px;
|
}
|
|
//左边 右边 结构一样
|
.contetn_left,
|
.contetn_right {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
position: relative;
|
|
|
}
|
}
|
.labels {
|
flex-shrink: 0;
|
font-size: 24px;
|
color: rgba(255, 255, 255, 0.6);
|
float: left;
|
margin-right: 11.5%;
|
}
|
.labelsd {
|
flex-shrink: 0;
|
font-size: 24px;
|
color: rgba(255, 255, 255, 0.6);
|
float: left;
|
margin-left: 6%;
|
}
|
|
@keyframes rotating {
|
0% {
|
-webkit-transform: rotate(0) scale(1);
|
transform: rotate(0) scale(1);
|
}
|
50% {
|
-webkit-transform: rotate(180deg) scale(1.1);
|
transform: rotate(180deg) scale(1.1);
|
}
|
100% {
|
-webkit-transform: rotate(360deg) scale(1);
|
transform: rotate(360deg) scale(1);
|
}
|
}
|
.popup-container {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: rgba(0, 0, 0, 0.3);
|
z-index: 9999;
|
}
|
|
.popup {
|
background: #fff;
|
padding: 20px;
|
border-radius: 8px;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
}
|
|
.popup-content {
|
text-align: center;
|
}
|
|
button {
|
margin-top: 15px;
|
padding: 8px 20px;
|
background: #42b983;
|
color: #fff;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
button:hover {
|
opacity: 0.9;
|
}
|
</style>
|
