<template>
|
<div class="sys-user-container">
|
<el-row>
|
<el-col :span="5">
|
<el-row style="display: flex;text-align: center;justify-content: center;height: 40px;">
|
<el-button type="warning" style="width: 95%;height: 30px;" @click="reset">报警复位</el-button>
|
</el-row>
|
<el-table :data="paginatedData" border style="width: 100%" v-loading="loading"
|
:default-sort="{ prop: 'date', order: 'descending' }">
|
<el-table-column prop="alarmCode" label="变量" align="center"></el-table-column>
|
<el-table-column prop="alarmName" label="描述" align="center"></el-table-column>
|
<el-table-column prop="stationNum" label="位置" align="center"></el-table-column>
|
<el-table-column prop="alarmTime" label="时间" align="center"></el-table-column>
|
<el-table-column label="操作" width="80" align="center" fixed="right" show-overflow-tooltip="">
|
<template #default="scope">
|
<el-button icon="ele-Check" size="small" text="" type="primary"
|
@click="topUpAlarm(scope.row)">恢复</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
|
:total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" size="small" background=""
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" layout="prev, pager, next" />
|
</el-col>
|
<el-col :span="19">
|
<div class="card-page">
|
<el-button type="primary" :plain="layer != 1" @click="floorTogglePlain(1)">一层平面</el-button>
|
<el-button type="primary" :plain="layer != 2" @click="floorTogglePlain(2)">二层平面</el-button>
|
<el-button type="primary" :plain="layer != 3" @click="floorTogglePlain(3)">三层平面</el-button>
|
</div>
|
<div style="margin: 40px; height: 50%;">
|
<div class="grid-container-line">
|
<div v-for="cell in cellsDataLine" :key="cell.Id">
|
<div v-if="cell.IsShow === 0" class="grid-item-line">
|
<div class="grid-item-line-end">
|
{{ cell.EndLocat }}
|
</div>
|
<div class="grid-item-line-box" :style="{ marginTop: cell.BoxHeight + 'px' }">
|
{{ cell.LineCode }}
|
</div>
|
<div class="grid-item-line-child"></div>
|
</div>
|
</div>
|
</div>
|
<div class="grid-container">
|
<div v-for="cell in cellsData">
|
<!-- IsUse状态 0:正常 1：有物品 2：非工位 3：小车路线 4：故障 -->
|
<div v-if="cell.IsShow === 0"
|
:class="['grid-item', { 'active': cell.IsUse === 1 }, { 'active2': cell.IsUse === 2 }, { 'active3': cell.IsUse === 3 }, { 'active3': cell.IsUse === 3 }, { 'active4': cell.IsUse === 4 }]">
|
<div>{{ cell.Code }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, reactive, onMounted, computed } from 'vue';
|
import 'splitpanes/dist/splitpanes.css';
|
import { listWcsAlarmInfo, resetWcsAlarmInfo } from '/@/api/wcs/wcsAlarmInfo';
|
import { WriteInfo } from '/@/api/wcs/wcsDevice';
|
import { signalR } from './signalR';
|
import { ElMessageBox, ElMessage } from "element-plus";
|
import { cellsDataLine, cellsDataOne, cellsDataTwo, cellsDataThree } from './data';
|
import { auth } from '/@/utils/authFunction';
|
|
//连接signalR 监听变更
|
onMounted(async () => {
|
signalR.off('PublicAlarm');
|
signalR.on('PublicAlarm', (dataArray: any) => {
|
dataArray.forEach(data => {
|
console.log(data);
|
// 更新 tableData
|
const index = tableData.value.findIndex(t => t.id == data.id);
|
if (index === -1 && data.status == 1) {
|
// 如果不存在，添加新数据
|
tableData.value.unshift(data);
|
tableParams.value.total = tableData.value.length;
|
} else {
|
if (data.status == 1) {
|
// 如果状态为 1，更新数据
|
if (index !== -1) {
|
tableData.value.splice(index, 1, data);
|
}
|
} else {
|
// 如果状态不是 1，报警消除
|
if (index !== -1) {
|
tableData.value.splice(index, 1);
|
}
|
}
|
}
|
// 更新输送线数据
|
updateCellData(cellsDataOne.value, data);
|
updateCellData(cellsDataTwo.value, data);
|
updateCellData(cellsDataThree.value, data);
|
});
|
});
|
});
|
// 更新输送线数据的通用函数
|
function updateCellData(cellsData: any[], data: any) {
|
const foundCell = cellsData.find(cell => cell.Code === data.stationNum);
|
if (foundCell) {
|
//一个点位有一个信息报警就触发报警，取消报警需要确认这个点位没有任何报警信息
|
if (data.status == 1) {
|
foundCell.IsUse = 4;
|
}
|
else if (tableData.value.findIndex(c => c.stationNum == foundCell.Code) == -1) {
|
foundCell.IsUse = 0;
|
}
|
}
|
}
|
// 改变页面容量
|
const handleSizeChange = (val: number) => {
|
tableParams.value.pageSize = val;
|
};
|
|
// 改变页码序号
|
const handleCurrentChange = (val: number) => {
|
tableParams.value.page = val;
|
};
|
//表格显示数据
|
const paginatedData = computed(() => {
|
const start = (tableParams.value.page - 1) * tableParams.value.pageSize
|
const end = start + tableParams.value.pageSize
|
return tableData.value.slice(start, end)
|
})
|
|
//加载输送线数据
|
let cellsData = ref<any>([]);
|
|
const tableParams = ref({
|
page: 1,
|
pageSize: 20,
|
total: 0,
|
});
|
const loading = ref(false);
|
const tableData = ref<any>([]);
|
const handleQuery = async () => {
|
loading.value = true;
|
var res = await listWcsAlarmInfo({ status: 1 });
|
tableData.value = res.data.result;
|
tableParams.value.total = tableData.value.length;
|
|
// 更新输送线数据
|
updateCells(cellsDataOne.value);
|
updateCells(cellsDataTwo.value);
|
updateCells(cellsDataThree.value);
|
|
//加载输送线数据
|
cellsData.value = cellsDataOne.value;
|
|
console.log(tableParams.value.total);
|
loading.value = false;
|
};
|
// 更新输送线数据的通用函数
|
function updateCells(cellsData: any[]) {
|
tableData.value.forEach((item) => {
|
updateCellData(cellsData, item);
|
});
|
}
|
handleQuery();
|
|
//复位报警
|
const reset = async () => {
|
await resetWcsAlarmInfo({ layer: layer.value });
|
ElMessage.success("复位成功");
|
// await handleQuery();
|
}
|
|
const layer = ref(1);
|
//切换层平面
|
function floorTogglePlain(buttonNumber) {
|
layer.value = buttonNumber;
|
if (buttonNumber === 1) {
|
//切换输送线数据
|
cellsData.value = cellsDataOne.value;
|
} else if (buttonNumber === 2) {
|
//切换输送线数据
|
cellsData.value = cellsDataTwo.value;
|
} else if (buttonNumber === 3) {
|
//切换输送线数据
|
cellsData.value = cellsDataThree.value;
|
}
|
}
|
|
// const write = async (type: string,row: any) => {
|
// if (floorStates.value.isPlain1 == false) {
|
// row.Layer = 1;
|
// }else if(floorStates.value.isPlain2 == false){
|
// row.Layer = 2;
|
// }
|
// else if(floorStates.value.isPlain3 == false){
|
// row.Layer = 3;
|
// }
|
// row.TypeName = type;
|
|
// console.log(row);
|
// var res = await WriteInfo(row);
|
// console.log(res.data.result);
|
// ElMessage.success(res.data.result);
|
// }
|
//报警恢复
|
const topUpAlarm = async (row: any) => {
|
ElMessageBox.confirm(`确定要报警恢复任务吗?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
var param = Object.assign(row);
|
console.log(row.stationNum);
|
console.log(layer.value);
|
var data = {
|
LocatNo: row.stationNum,//工位
|
Layer: layer.value,//楼层
|
}
|
|
var res = await WriteInfo(data);
|
console.log(res.data.result);
|
// await topUpWcsTask(param);
|
// handleQuery();
|
// handleQuery2();
|
// ElMessage.success("报警恢复失败：" + res.data.result);
|
})
|
.catch(() => { });
|
|
}
|
|
</script>
|
|
<style scoped>
|
.box-card {
|
height: 30px;
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
}
|
|
.card-page {
|
width: 100%;
|
height: 30px;
|
display: flex;
|
text-align: center;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
}
|
|
.card-page>button {
|
width: 150px;
|
height: 30px;
|
}
|
|
.card-line {
|
border: none;
|
background-color: transparent;
|
position: absolute;
|
z-index: 99;
|
}
|
|
.grid-container-line {
|
display: grid;
|
grid-template-columns: repeat(51, 1fr);
|
/* 自适应列宽 */
|
grid-template-rows: 1fr;
|
/* 自适应行高 */
|
gap: 0;
|
margin-top: 25px;
|
width: 100%;
|
/* 宽度自适应 */
|
height: 1fr;
|
/* 高度自适应 */
|
}
|
|
.grid-item-line {
|
text-align: center;
|
line-height: 50px;
|
/* Vertical center the content */
|
font-size: 12px;
|
/* Adjust font size */
|
width: 20px;
|
height: 100%;
|
color: #fff;
|
font-size: 14px;
|
|
display: flex;
|
justify-content: center;
|
}
|
|
.grid-item-line-end {
|
width: 70px;
|
height: 25px;
|
border: 2px solid #797777;
|
background-color: rgb(182, 180, 180);
|
position: absolute;
|
margin-top: -25px;
|
display: flex;
|
text-align: center;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
color: #fff;
|
}
|
|
.grid-item-line-box {
|
width: 18px;
|
height: 18px;
|
background-color: rgb(97, 250, 145);
|
position: absolute;
|
display: flex;
|
text-align: center;
|
justify-content: center;
|
align-items: center;
|
/* Added to vertically center the text */
|
text-align: center;
|
color: black;
|
}
|
|
.grid-item-line-child {
|
height: 220px;
|
width: 3px;
|
background-color: #000000;
|
}
|
|
.card {
|
width: 100%;
|
position: absolute;
|
border-top: none;
|
z-index: 90;
|
margin-top: 310px;
|
}
|
|
.grid-container {
|
width: 100%;
|
display: grid;
|
grid-template-columns: repeat(51, 1fr);
|
/* 每列宽度 */
|
grid-template-rows: repeat(12, 1fr);
|
/* 每行高度 */
|
gap: 0px;
|
/* Gap between cells */
|
|
margin-top: -20px;
|
;
|
}
|
|
.grid-item {
|
background-color: #9c9c9c;
|
border: 1px solid #797777;
|
text-align: center;
|
line-height: 1.4vw;
|
/* 行高 */
|
width: 100%;
|
/* 自适应宽度 */
|
height: 100%;
|
/* 自适应高度 */
|
color: #fff;
|
font-size: 0.6vw;
|
}
|
|
.card {
|
width: 100%;
|
position: absolute;
|
border-top: none;
|
z-index: 90;
|
margin-top: 310px;
|
}
|
|
.active {
|
background-color: rgb(57, 141, 251);
|
/* IsUse 为1时背景颜色为蓝色 */
|
color: #f5f5f5;
|
}
|
|
.active2>div {
|
display: none;
|
}
|
|
.active3 {
|
background-color: #fff;
|
border: 1px solid red;
|
}
|
|
.active3>div {
|
display: none;
|
}
|
|
.active4 {
|
background-color: red;
|
}
|
</style>
|
