<template>
|
<div>
|
<!-- <el-tabs tab-position="top" style="height: 2120px;width: 2000px;margin: 0px auto" class="demo-tabs">
|
<el-tab-pane :label="config.areaName" v-for="config in configs" :key="config.index">
|
<el-drawer v-model="visible" :show-close="false" :modal="false" :lock-scroll="false">
|
<template #header="{ close, titleId, titleClass }">
|
<h4 :id="titleId" :class="titleClass">设备状态详细</h4>
|
<el-button type="danger" @click="close">
|
<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
|
Close
|
</el-button>
|
</template>
|
<div class="equip-container">
|
<el-table :data="tableData" style="width: 100%" height="85vh">
|
<el-table-column fixed prop="plcName" label="设备名称" width="90px" header-align="center" align="center"></el-table-column>
|
<el-table-column prop="autoStatus" label="工作模式" width="100px" header-align="center" align="center">
|
<template #default="scope">
|
<el-tag type="info" effect="plain">{{ scope.row.autoStatus }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="state" label="设备状态" width="90px" header-align="center" align="center">
|
<template #default="scope">
|
<el-tag :type="scope.row.state=='故障'?'danger':'success'" effect="dark">{{ scope.row.state }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="workStatus" label="作业状态" width="100px" header-align="center" align="center">
|
<template #default="scope">
|
<el-tag type="warning">{{ scope.row.workStatus }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="errMessage" label="异常信息" header-align="center" align="center"></el-table-column>
|
</el-table>
|
</div>
|
</el-drawer>
|
<div style="width: 1680px;height: 32px;line-height: 32px;margin-bottom: 10px;">
|
<el-button size="small" @click="visible = true">
|
查看设备具体状态
|
</el-button>
|
</div>
|
<div class="home-container">
|
<grid-layout :layout="config.layout"
|
:col-num="50"
|
:row-height="40"
|
:is-draggable="false"
|
:is-resizable="false"
|
:margin="[0,0]"
|
:responsive="false"
|
:vertical-compact="false"
|
:prevent-collision="true"
|
:use-css-transforms="true"
|
style="height: 2000px;"
|
>
|
<grid-item
|
v-for="item in config.layout"
|
:x="item.x"
|
:y="item.y"
|
:w="item.w"
|
:h="item.h"
|
:i="item.i"
|
:key="item.i"
|
:is-draggable="false"
|
:is-resizable="false"
|
style="background: transparent;cursor: pointer;"
|
>
|
<el-tooltip :visible="item.showName" class="box-item" effect="dark" :content="'设备：'+item.equipName" placement="bottom">
|
<div :class="{'wrap':item.isWrap,'fault':item.status.state=='Fault','stored':item.status.iSstore}"
|
style="display: flex; overflow: hidden;" @mouseover="item.showName=true" @mouseout="item.showName=false">
|
<el-image :src="item.image" style="display: block;width: 40px;height: 40px" scroll-container=".home-container" v-for="i in item.h>item.w?item.h:item.w" :key="i.index" draggable="false"/>
|
</div>
|
</el-tooltip>
|
</grid-item>
|
</grid-layout>
|
</div>
|
</el-tab-pane>
|
</el-tabs> -->
|
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive } from 'vue'
|
import http from "@/api/http";
|
// import "@/assets/css/index.css"
|
import { CircleCloseFilled } from '@element-plus/icons-vue'
|
import { ElNotification } from 'element-plus'
|
|
export default {
|
components: {
|
CircleCloseFilled
|
},
|
data() {
|
return {
|
configs:[],
|
visible:false,
|
isGetConfig:true,
|
timer:null,
|
webSocket:null,
|
receivedData:null,
|
tableData:[
|
{
|
plcName: 'L1',
|
autoStatus: '自动',
|
state: '正常',
|
workStatus: '放货完成',
|
errMessage: ''
|
},
|
{
|
plcName: 'L2',
|
autoStatus: '自动',
|
state: '故障',
|
workStatus: '放货完成',
|
errMessage: ''
|
},
|
]
|
}
|
},
|
mounted(){
|
// this.configs=[];
|
// this.$nextTick(x=>{
|
// this.getConfigList();
|
// });
|
// this.showErrMsg("设备10：连接异常");
|
// this.connectWebSocket();
|
},
|
unmounted () {
|
this.configs=[];
|
clearInterval(this.timer);
|
},
|
methods: {
|
connectWebSocket() {
|
this.webSocket = new WebSocket('ws:localhost:9290/websocket')
|
this.webSocket.addEventListener('open', this.onWebSocketOpen)
|
this.webSocket.addEventListener('message', this.onWebSocketMessage)
|
this.webSocket.addEventListener('error', this.onWebSocketError)
|
this.webSocket.addEventListener('close', this.onWebSocketClose)
|
},
|
onWebSocketOpen() {
|
console.log('WebSocket connection established.')
|
},
|
onWebSocketMessage(event) {
|
this.receivedData = event.data
|
console.log('Received data:', this.receivedData)
|
// 处理接收到的数据
|
this.processData(this.receivedData)
|
},
|
onWebSocketError(event) {
|
console.error('WebSocket error:', event)
|
},
|
onWebSocketClose(event) {
|
console.log('WebSocket connection closed:', event.code, event.reason)
|
},
|
processData(data) {
|
console.log('Processing data:', data)
|
switch (data.type) {
|
case 'config':
|
this.configs=[];
|
data.config.forEach(item => {
|
for (let index = 0; index < item.layout.length; index++) {
|
item.layout[index].status=JSON.parse(item.layout[index].status);
|
}
|
this.configs.push(item);
|
});
|
break;
|
case 'equipDetail':
|
this.tableData=[];
|
data.equipDetail.forEach(item=>{
|
this.tableData.push(item);
|
});
|
break;
|
case 'errMessage':
|
this.showErrMsg(data.content);
|
break;
|
default:
|
break;
|
}
|
},
|
closeWebSocket() {
|
if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
|
this.webSocket.close()
|
}
|
},
|
getConfigList(){
|
http.post("/api/dt_ConfigArea/GetConfig",null).then(x=>{
|
if(x.status){
|
this.configs=[];
|
x.data.forEach(item => {
|
for (let index = 0; index < item.layout.length; index++) {
|
item.layout[index].status=JSON.parse(item.layout[index].status);
|
}
|
this.configs.push(item);
|
});
|
}
|
if(this.isGetConfig){
|
this.isGetConfig=false;
|
this.timer=setInterval(()=>{
|
this.$nextTick(x=>{
|
this.getConfigList();
|
});
|
},3000)
|
}
|
}).catch(error=>{
|
console.log("出错"+error);
|
});
|
},
|
getDate(){
|
var currentDate = new Date();
|
// 获取年、月、日、小时、分钟和秒
|
var year = currentDate.getFullYear();
|
var month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要加1，并补零
|
var day = currentDate.getDate().toString().padStart(2, '0'); // 补零
|
var hours = currentDate.getHours().toString().padStart(2, '0'); // 补零
|
var minutes = currentDate.getMinutes().toString().padStart(2, '0'); // 补零
|
var seconds = currentDate.getSeconds().toString().padStart(2, '0'); // 补零
|
// 拼接日期和时间字符串
|
var formattedDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
return formattedDateTime;
|
},
|
showErrMsg(val){
|
ElNotification({
|
title: ' 异常 '+this.getDate(),
|
message: val,
|
position: 'bottom-right',
|
type:'error',
|
duration: 0
|
})
|
},
|
// getStoredStyle(iSstore,val){
|
// if(iSstore){
|
// var indexU=val.indexOf("Up");
|
// var indexD=val.indexOf("Down");
|
// var indexL=val.indexOf("Left");
|
// var indexR=val.indexOf("Right");
|
// if(indexU>=0){
|
// var style={
|
// "width": "40px",
|
// "height": "40px",
|
// "--g":"repeat-y repeating-linear-gradient(0deg,#000 0 10px, #E6A23C 0 30px)",
|
// "background": "var(--g)",
|
// "background-size": "40px 40px,40px 40px",
|
// "animation": "up 5s infinite linear"
|
// };
|
// return style
|
// }else if(indexD>=0){
|
// var style={
|
// "width": "40px",
|
// "height": "40px",
|
// "--g":"repeat-y repeating-linear-gradient(0deg,#000 0 10px, #E6A23C 0px 30px)",
|
// "background": "var(--g)",
|
// "background-size": "40px 40px,40px 40px",
|
// "animation": "down 5s linear infinite"
|
// };
|
// return style
|
// }else if(indexL>=0){
|
// var style={
|
// "width": "40px",
|
// "height": "40px",
|
// "--g":"repeat-x repeating-linear-gradient(90deg,#000 0 10px, #E6A23C 0 30px)",
|
// "background": "var(--g)",
|
// "background-size": "40px 40px,40px 40px",
|
// "animation": "left 5s infinite linear"
|
// };
|
// return style
|
// }else if(indexR>=0){
|
// var style={
|
// "width": "40px",
|
// "height": "40px",
|
// "--g":"repeat-x repeating-linear-gradient(90deg,#000 0 10px, #E6A23C 0 30px)",
|
// "background": "var(--g)",
|
// "background-size": "40px 40px,40px 40px",
|
// "animation": "right 5s infinite linear"
|
// };
|
// return style
|
// }
|
// }
|
// }
|
}
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
