<template>
|
<div id="index" ref="appRef">
|
<div class="bg">
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
<div v-else class="host-body">
|
<div class="d-flex jc-center">
|
<dv-decoration-10 class="dv-dec-10" />
|
<div class="d-flex jc-center">
|
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
|
<div class="title">
|
<span class="title-text">中车数据大屏</span>
|
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
|
</div>
|
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#568aea', '#000000']" />
|
</div>
|
<dv-decoration-10 class="dv-dec-10-s" />
|
</div>
|
|
<!-- 第二行 -->
|
<div class="d-flex jc-between px-2">
|
<div class="d-flex aside-width">
|
<div class="react-left ml-4 react-l-s">
|
<span class="react-before"></span>
|
<span class="text">设备运行状态</span>
|
</div>
|
<div class="react-right ml-3">
|
<span class="text">货位信息统计</span>
|
</div>
|
</div>
|
<div class="d-flex aside-width">
|
<div class="react-right bg-color-blue mr-3">
|
<span class="text fw-b">检修信息统计</span>
|
</div>
|
<div class="react-right mr-4 react-l-s">
|
<span class="react-after"></span>
|
<!-- <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span> -->
|
</div>
|
</div>
|
</div>
|
|
<div style="margin-top: 30px;display: flex;">
|
<div style="width: 75%;">
|
<!-- 第三行数据 -->
|
<div style="display: flex;width: 100%;">
|
|
<!-- ===================================出入库口=================================== -->
|
<div class="container">
|
<div class="flex-container">
|
<div style="display: flex; justify-content: space-between;">
|
<div v-for="(item, index) in plcData" :key="index" style="margin-left: 1px; width: 35%;">
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: item.handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="item.handShake"
|
style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!item.handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
</div>
|
|
|
|
</div>
|
</div>
|
<!-- ===================================出入库口=================================== -->
|
|
<div style="width: 62%;height: 560px;">
|
|
|
|
<!--=========================================================货架与堆垛机部分=======================================================-->
|
<div style="width: 100%;height: 425px;">
|
|
<div class="grid-container">
|
<div v-for="(item, index) in gridItems.slice(108, 216)" :key="index" class="grid-item"
|
:style="{ 'background-color': GetBgColor(item) }">
|
</div>
|
</div>
|
|
|
<div style="border: 1px solid #fff;width: 100%;height: 85px;background-color: #000;">
|
<div :style="{
|
background: !plcData6 ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out',
|
width: '10%',
|
height: '70px',
|
marginTop: '7px',
|
transition: 'margin-left 10s ease', // 添加动画效果，平滑过渡
|
marginLeft: !plcData6 ? '85%' : '1%', // 计算margin-left，根据ddjSC值控制位置
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
borderRadius: '10px'
|
}" :class="{ 'moving': !plcData6 }">
|
<img src="../assets/ddj.png" style="height: 55px;" />
|
</div>
|
</div>
|
|
|
<div class="grid-container">
|
<div v-for="(item, index) in gridItems.slice(0, 108)" :key="index" class="grid-item" :style="{
|
'background-color': GetBgColor(item),//hidden
|
'visibility': index === 100 || index === 101 || index === 96 || index === 97 ? 'hidden' : 'visible'
|
}">
|
|
</div>
|
</div>
|
</div>
|
<!--=========================================================货架与堆垛机部分=======================================================-->
|
|
|
<!--=========================================================检修出入库站台部分=======================================================-->
|
<div
|
style="width: 100%;height: 100px;display: flex;margin: 15px auto; justify-content: space-around; align-items: center;">
|
|
|
<div v-for="(item, index) in plcData3" :key="index" style="width: 20%; height: 85px;">
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: item.handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="item.handShake"
|
style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!item.handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
</div>
|
<img src="../assets/lines.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
|
</div>
|
<!--=========================================================检修出入库站台部分=======================================================-->
|
</div>
|
|
|
|
<!--=========================================================出库站台部分=======================================================-->
|
<div style="width: 23%;margin-top: 165px;">
|
<div class="flex-container">
|
<div style="display: flex; justify-content: space-between;">
|
<div v-for="(item, index) in plcData2" :key="index" style="margin-left: 1px; width: 35%;">
|
<div style="height: 90px; position: relative; margin-top: 5%; opacity: 0.8;" :style="{
|
background: item.handShake ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out'
|
}">
|
<div v-show="item.handShake"
|
style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: fadeIn 3s ease-in-out;">
|
</div>
|
<div v-show="!item.handShake"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
</div>
|
<img src="../assets/linesd.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--=========================================================出库站台部分=======================================================-->
|
|
</div>
|
|
|
|
<div>
|
<!--=========================================================RGV部分=======================================================-->
|
<div style="border: 1px solid #fff;width: 87%;height: 85px;margin: auto; position: relative;">
|
<div style="width: 14%; height: 85px;position: relative;" :style="{
|
background: plcData5 ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out',
|
marginLeft: plcData5 ? '86%' : '1%',
|
}" :class="{ 'moving': plcData5 }">
|
|
<div v-show="plcData5"
|
style="position: absolute; width: 50px; height: 50px; background-color: goldenrod; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: fadeIn 3s ease-in-out;">
|
</div>
|
|
<div v-show="!plcData5"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #000;">
|
|
</div>
|
|
<img src="../assets/lines.png" class="image" style="height: 90px;" />
|
</div>
|
</div>
|
<!--=========================================================RGV部分=======================================================-->
|
|
<!--=========================================================第一检修台=======================================================-->
|
<centerRight2 :plcData4="plcData4" />
|
</div>
|
|
</div>
|
|
<div style="width: 25%;margin-left: 10px;">
|
<div style="height: 450px;width: 100%;margin-top: 20px;color: #000;">
|
<dv-border-box-12>
|
<centerLeft1 />
|
</dv-border-box-12>
|
</div>
|
|
<div style="height: 430px;width: 100%;margin-top: 20px;color: #000;">
|
<dv-border-box-12 style="width: 100%;">
|
<bottomLeft />
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import drawMixin from "../utils/drawMixin";
|
import { formatTime } from '../utils/index.js'
|
import centerLeft1 from './centerLeft1'
|
import centerLeft2 from './centerLeft2'
|
import centerRight2 from './centerRight2'
|
|
import center from './center'
|
import bottomLeft from './bottomLeft'
|
import axios from 'axios'
|
|
export default {
|
mixins: [drawMixin],
|
data() {
|
return {
|
timing: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
ddjSC: false,
|
plcData: [],
|
plcData2: [],
|
plcData3: [],
|
plcData4:[],
|
plcData5:false,
|
gridItems: [], // 初始化为空数组
|
plcData6:false,
|
infoMsg: [
|
{ bgcolor: "rgba(255, 255, 255, 0)", msg: "空货位", state: "0" },
|
{ bgcolor: "#ff0", msg: "出入库锁定", state: "1" },
|
//{ bgcolor: "#FFA500", msg: "有货", state: "2" },
|
{ bgcolor: "rgba(0, 255, 0, 1)", msg: "合格", state: "12" },
|
{ bgcolor: "#FF6347", msg: "待修", state: "11" },
|
{ bgcolor: "#4C6E91", msg: "空托锁定", state: "98" },
|
{ bgcolor: "#f0f0f0", msg: "空托盘", state: "99" },
|
{ bgcolor: "#FF0000", msg: "禁用", state: "100" }
|
],
|
}
|
},
|
components: {
|
centerLeft1,
|
centerLeft2,
|
centerRight2,
|
center,
|
bottomLeft,
|
},
|
|
beforeDestroy() {
|
clearInterval(this.timing)
|
},
|
methods: {
|
timeFn() {
|
this.timing = setInterval(() => {
|
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
this.dateWeek = this.weekday[new Date().getDay()];
|
this.loadLocalData();
|
}, 2000)
|
},
|
|
cancelLoading() {
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
},
|
toggleMovement() {
|
axios.post("http://10.78.70.112:8099/api/Task/EquipmentInformation").then((res) => {
|
this.plcData = res.data.storage_platform;
|
this.plcData2 = res.data.outbound_platform;
|
this.plcData3=res.data.agv_platform;
|
this.plcData4=res.data.maintenance_platform;
|
this.plcData5=res.data.agv_plat[0].handShake;
|
|
}).catch((res) => {
|
|
})
|
},
|
GetBgColor(col) {
|
let bgColor = "#b7ba6b";
|
// 优先显示禁用状态
|
if (col.location_lock) {
|
this.infoMsg.forEach((el) => {
|
if (el.state == "100") {
|
bgColor = el.bgcolor;
|
}
|
});
|
} else {
|
this.infoMsg.forEach((el) => {
|
if (el.state == col.location_state) {
|
bgColor = el.bgcolor;
|
|
}
|
});
|
}
|
return bgColor;
|
},
|
loadLocalData() {
|
axios.post("http://10.78.70.112:8098/api/Task/GetLocationStatu2").then((x) => {
|
// axios.post("http://127.0.0.1:9290/api/Task/GetLocationStatu2").then((x) => {
|
this.gridItems=[]
|
this.gridItems = x.data;
|
})
|
},
|
loadLocalSC() {
|
axios.post("http://10.78.70.112:8099/api/Task/EquipmentInformationsc").then((res) => {
|
this.plcData6 = res.data;
|
})
|
}
|
},
|
mounted() {
|
document.title = '中车显示大屏';
|
this.timeFn();
|
this.loadLocalData();
|
this.cancelLoading()
|
this.toggleMovement();
|
setInterval(() => {
|
this.toggleMovement();
|
this.loadLocalSC()
|
}, 2000);
|
|
|
//this.loadLocalSC();
|
// this.interval2 = setInterval(() => {
|
// this.loadLocalData();
|
|
// }, 2000);
|
// this.interval = setInterval(() => {
|
// this.loadLocalSC();
|
// }, 20000);
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
@import '../assets/scss/index.scss';
|
|
@keyframes move {
|
0% {
|
margin-left: 1%;
|
}
|
30% {
|
margin-left: 40%;
|
}
|
50% {
|
margin-left: 86%;
|
}
|
100% {
|
margin-left: 1%;
|
}
|
}
|
|
.moving {
|
animation: move 14s infinite ease-in-out;
|
color: green;
|
}
|
.scroll-container {
|
width: 85%;
|
height: 95px;
|
margin: 5px auto;
|
border: 1px solid #fff;
|
overflow-y: auto;
|
/* 添加垂直滚动条 */
|
display: flex;
|
flex-direction: column;
|
/* 垂直排列子元素 */
|
}
|
|
.scroll-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 95px;
|
border-bottom: 1px solid #ddd;
|
background-color: aqua;
|
}
|
|
.scroll-item img {
|
height: 70%;
|
margin-right: 10px;
|
}
|
|
.scroll-item p {
|
margin: 0;
|
}
|
</style>
|
