mt-fe-group/wms-njlm
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新

Browse Source
This commit is contained in:
朱文强
2024-05-24 15:59:49 +08:00
parent cf2a5a7861
commit dcba6962f2
19 changed files with 1508 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/views/wcsAlarm/real.vue Normal file
View File

@@ -0,0 +1,192 @@
<!--
* @Author: zwq
* @Date: 2024-05-21 14:25:27
* @LastEditors: zwq
* @LastEditTime: 2024-05-21 16:44:47
* @Description:
-->
<template>
<div class="main-body">
<el-divider content-position="left">堆垛机报警信息</el-divider>
<el-row :gutter="20">
<el-col v-for="i in 4" :key="i + 'ddj'" :span="6">
<el-card class="box-card" style="min-width: 240px">
<div slot="header" class="header-card">
堆垛机:
<div class="info">
{{ Info[i - 1].name }}
</div>
</div>
<div>
报警信息:
<div class="info">
{{ Info[i - 1].msg }}
</div>
</div>
<div>
报警编码:
<div class="info">
{{ Info[i - 1].code }}
</div>
</div>
<div class="blinking-warning" v-if="Info[i - 1].code !== 0" />
</el-card>
</el-col>
</el-row>
<el-divider content-position="left">1-2巷道输送线报警信息</el-divider>
<el-row :gutter="20" v-for="l in 2" :key="l + 'line1'">
<el-col v-for="i in 6" :key="i + 'ssx1'" :span="4">
<el-card class="box-card" style="min-width: 240px">
<div slot="header" class="header-card">
输送线:
<div class="info">
{{ Info[i - 1 + 4 + (l - 1) * 6].name }}
</div>
</div>
<div>
报警信息:
<div class="info">{{ Info[i - 1 + 4 + (l - 1) * 6].msg }}</div>
</div>
<div>
报警编码:
<div class="info">{{ Info[i - 1 + 4 + (l - 1) * 6].code }}</div>
</div>
<div
class="blinking-warning"
v-if="Info[i - 1 + 4 + (l - 1) * 6].code > 30" />
</el-card>
</el-col>
</el-row>
<el-divider content-position="left">3-4巷道输送线报警信息</el-divider>
<el-row :gutter="20" v-for="l in 2" :key="l + 'line2'">
<el-col v-for="i in 6" :key="i + 'ssx2'" :span="4">
<el-card class="box-card" style="min-width: 240px">
<div slot="header" class="header-card">
输送线:
<div class="info">
{{ Info[i - 1 + 4 + (l + 1) * 6].name }}
</div>
</div>
<div>
报警信息:
<div class="info">{{ Info[i - 1 + 4 + (l + 1) * 6].msg }}</div>
</div>
<div>
报警编码:
<div class="info">{{ Info[i - 1 + 4 + (l + 1) * 6].code }}</div>
</div>
<div
class="blinking-warning"
v-if="Info[i - 1 + 4 + (l + 1) * 6].code > 30" />
</el-card>
</el-col>
</el-row>
<el-divider content-position="left">检尺门报警信息</el-divider>
<el-row :gutter="20">
<el-col v-for="i in 4" :key="i + 'jcm'" :span="6">
<el-card class="box-card" style="min-width: 240px">
<div slot="header" class="header-card">
检尺门:
<div class="info">
{{ Info[i - 1 + 4 + 24].name }}
</div>
</div>
<div>
报警信息:
<div class="info">
{{ Info[i - 1 + 4 + 24].msg }}
</div>
</div>
<div>
报警编码:
<div class="info">
{{ Info[i - 1 + 4 + 24].code }}
</div>
</div>
<div class="blinking-warning" v-if="Info[i - 1 + 4 + 24].code > 30" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
Info: [],
};
},
created() {
this.getInfo();
this.startFun();
},
methods: {
startFun() {
const timer = setInterval(() => {
this.getInfo();
}, 10000);
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
});
},
getInfo() {
axios
.post('http://172.22.22.190/wcs-njlm/business/wcsTask/isAlarm')
.then((res) => {
console.log('实时报警')
console.log(res.data)
this.Info = res.data
})
.catch((error) => {
console.error('There was an error!', error);
});
},
},
};
</script>
<style lang="scss" scoped>
.main-body {
::v-deep .el-card__header {
padding: 5px 20px;
min-height: 25px;
}
::v-deep .el-card__body {
padding: 10px 20px;
}
.box-card {
font-size: 15px;
position: relative;
.header-card {
font-size: 17px;
}
.info {
color: #409eff;
float: right;
}
}
}
.blinking-warning {
position: absolute;
top: 0;
left: 0;
background-color: #ff0000; /* 红色背景 */
animation: blinkWarning 1s infinite; /* 动画名称和持续时间 */
width: 100%;
height: 100%;
}
@keyframes blinkWarning {
0% {
opacity: 0.7; /* 开始状态：不透明 */
}
50% {
opacity: 0; /* 中间状态：完全透明 */
}
100% {
opacity: 0.7; /* 结束状态：不透明 */
}
}
</style>