<template>
|
<div class="sys-user-container">
|
<el-row>
|
<el-col :span="3">
|
<el-collapse v-model="activeName">
|
<el-collapse-item title="设备控制" name="1">
|
<el-card class="box-card" shadow="hover">
|
<el-switch v-model="state.boRunningState" active-text="" inactive-text="程序服务"
|
@change="handleSwitchChange('boRunningState', $event)"></el-switch>
|
</el-card>
|
<el-card class="box-card" shadow="hover" style="margin-top: 3px;">
|
<el-switch v-model="state.boOffline" active-text="" inactive-text="脱机模式"
|
@change="handleSwitchChange('boOffline', $event)"></el-switch>
|
</el-card>
|
<el-card class="box-card" shadow="hover" style="margin-top: 3px;">
|
<el-switch v-model="state.boRefresh" active-text="" inactive-text="自刷新"
|
@change="handleSwitchChange('boRefresh', $event)"></el-switch>
|
</el-card>
|
<el-card class="box-card" shadow="hover" style="margin-top: 3px;">
|
<el-switch v-model="state.boDemo" active-text="" inactive-text="演示模式"
|
@change="handleSwitchChange('boDemo', $event)"></el-switch>
|
</el-card>
|
<el-card class="box-card" shadow="hover" style="margin-top: 3px;">
|
<el-switch v-model="state.boDrumReversal" active-text="" inactive-text="滚动反转"
|
@change="handleSwitchChange('boDrumReversal', $event)"></el-switch>
|
</el-card>
|
<el-card class="box-card" shadow="hover" style="margin-top: 3px;">
|
<el-switch v-model="state.boOutLock" active-text="" inactive-text="出库锁定"
|
@change="handleSwitchChange('boOutLock', $event)"></el-switch>
|
</el-card>
|
<el-card class="box-card" shadow="hover" style="margin-top: 3px;">
|
<el-switch v-model="state.boEnterLock" active-text="" inactive-text="入库锁定"
|
@change="handleSwitchChange('boEnterLock', $event)"></el-switch>
|
</el-card>
|
</el-collapse-item>
|
|
<el-collapse-item title="堆垛机" name="2">
|
<div style="overflow-x: auto;white-space: nowrap;">
|
<el-card v-for="(stacker, index) in stackers" :key="index" class="box-card" shadow="hover">
|
<el-switch v-model="stacker.isConn" :inactive-text="`${stacker.text}`"
|
disabled></el-switch>
|
</el-card>
|
</div>
|
</el-collapse-item>
|
|
<el-collapse-item title="输送线" name="3">
|
<el-card v-for="(conveyor, index) in conveyors" :key="index" class="box-card" shadow="hover">
|
<el-switch v-model="conveyor.isConn" :inactive-text="`${conveyor.text}`"
|
disabled></el-switch>
|
</el-card>
|
</el-collapse-item>
|
</el-collapse>
|
</el-col>
|
<el-col :span="21">
|
<div class="card-page">
|
<el-button type="primary" :plain="floorStates.isPlain1"
|
@click="floorTogglePlain(1)">一层平面</el-button>
|
<el-button type="primary" :plain="floorStates.isPlain2"
|
@click="floorTogglePlain(2)">二层平面</el-button>
|
<el-button type="primary" :plain="floorStates.isPlain3"
|
@click="floorTogglePlain(3)">三层平面</el-button>
|
</div>
|
<div style="margin: 40px; height: 58%;">
|
<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" :key="cell.Id">
|
<div v-if="cell.IsShow === 0"
|
:class="['grid-item', { 'active': cell.IsUse === 1 }, { 'active2': cell.IsUse === 2 }, { 'active3': cell.IsUse === 3 }]">
|
<div>{{ cell.Code }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="margin: 10px 40px;height: 30%; width: 100%; ">
|
<el-row>
|
<el-col :span="9">
|
<div >
|
<el-form label-position="right" label-width="40px" style="">
|
<el-form-item label="工位">
|
<el-input id="locaText" :disabled="lockInputStatus" v-model="stationValue.locatNo" style="width: 200px; margin-right: 10px;"></el-input>
|
<el-button @click="textLock(stationValue)">{{lockText}}</el-button>
|
<el-button @click="write('zidong',stationValue)">自动</el-button>
|
<el-button @click="write('shoudong',stationValue)">手动</el-button>
|
<el-button @mousedown="writeDown('huifu',stationValue)" @mouseup="writeUp('huifu',stationValue)">报警恢复</el-button>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('1diandong',stationValue)" @mouseup="writeUp('1diandong',stationValue)">1点动</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('2diandong',stationValue)" @mouseup="writeUp('2diandong',stationValue)">2点动</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('3diandong',stationValue)" @mouseup="writeUp('3diandong',stationValue)">3点动</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('4diandong',stationValue)" @mouseup="writeUp('4diandong',stationValue)">4点动</el-button>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('1liandong',stationValue)" @mouseup="writeUp('1liandong',stationValue)">1联动</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('2liandong',stationValue)" @mouseup="writeUp('2liandong',stationValue)">2联动</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('3liandong',stationValue)" @mouseup="writeUp('3liandong',stationValue)">3联动</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('4liandong',stationValue)" @mouseup="writeUp('4liandong',stationValue)">4联动</el-button>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('yizaisheng',stationValue)" @mouseup="writeUp('yizaisheng',stationValue)">移栽上升</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('fanzhuansheng',stationValue)" @mouseup="writeUp('fanzhuansheng',stationValue)">翻转机上升</el-button>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('yizaijiang',stationValue)" @mouseup="writeUp('yizaijiang',stationValue)">移栽下降</el-button>
|
<el-button size="large" :disabled="lockStatus" @mousedown="writeDown('fanzhuanjiang',stationValue)" @mouseup="writeUp('fanzhuanjiang',stationValue)">翻转机下降</el-button>
|
</el-form-item>
|
|
</el-form>
|
</div>
|
</el-col>
|
<el-col :span="15">
|
<div >
|
<el-form label-position="right" label-width="60px" style="" :inline="true">
|
<el-row :gutter="23">
|
<el-col :span="8">
|
<el-form-item >
|
<el-button @click="write('UpTask',stationValue)">更改任务</el-button>
|
<el-button @click="writeTaskInfo('writeTask',stationValue)">任务写入</el-button>
|
<el-button @click="writeTaskInfo('writeTaskDelete',stationValue)">任务清空</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="任务号" >
|
<el-input v-model="stationValue.taskNo" style="width: 200px; "></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="托盘号">
|
<el-input v-model="stationValue.palletNo" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="起始工位">
|
<el-input v-model="stationValue.startLoction" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="目标工位">
|
<el-input v-model="stationValue.endLoction" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="起始排">
|
<el-input v-model="stationValue.startPai" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="起始列">
|
<el-input v-model="stationValue.startLie" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="起始层">
|
<el-input v-model="stationValue.startCeng" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="目标排">
|
<el-input v-model="stationValue.endPai" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="目标列">
|
<el-input v-model="stationValue.endLie" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="目标层">
|
<el-input v-model="stationValue.endCeng" style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="6">
|
<el-form-item label="缠膜信号">
|
<el-input v-model="stationValue.chanMo" disabled style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="拆膜信号">
|
<el-input v-model="stationValue.chaiMo" disabled style="width: 200px; margin-right: 10px;"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, reactive, onMounted } from 'vue';
|
import { listStatus, listPosition } from '/@/api/wcs/wcsPlc';
|
import { GetLocationInfo,WriteLocationInfo,WriteInfo,WriteTaskInfo } from '/@/api/wcs/wcsDevice';
|
import { signalR } from './signalR';
|
import { cellsDataLine, cellsDataOne, cellsDataTwo, cellsDataThree } from './data';
|
import { ElMessage } from "element-plus";
|
|
// export default{
|
|
// }
|
const state = ref<any>({});
|
const stackers = ref<any>({});
|
const conveyors = ref<any>({});
|
|
|
const lockText = ref("锁定");
|
const lockStatus = ref(true);
|
const lockInputStatus = ref(false);
|
|
const stationValue = ref<any>({
|
locatNo: '',//工位
|
layer:'',//楼层
|
typeName:'',//操作类型名称
|
funcName:'',//事件结果 true/false
|
|
taskNo:'',
|
palletNo:'',
|
startLoction:'',
|
endLoction:'',
|
startPai:'',
|
startLie:'',
|
startCeng:'',
|
endPai:'',
|
endLie:'',
|
endCeng:'',
|
|
chanMo:'',
|
chaiMo:'',
|
|
});
|
|
|
// 查询状态
|
const handleQuery = async () => {
|
var res = await listStatus();
|
state.value = res.data.result.modService;
|
stackers.value = res.data.result.listPlc.filter(s => s.type == 0);
|
conveyors.value = res.data.result.listPlc.filter(s => s.type == 1);
|
|
var res2 = await listPosition();
|
res2.data.result.forEach(s => {
|
if (s.type == 0) {
|
// 更新堆垛机数据
|
const foundCell = cellsDataLine.value.find(cell => cell.Code === s.stationNum);
|
if (foundCell) {
|
//修改高度
|
foundCell.BoxHeight = s.boxHeight;
|
foundCell.EndLocat = s.endLocat;
|
}
|
}
|
else if (s.type == 1) {
|
// 更新输送线数据
|
updateCellData(cellsDataOne.value, s);
|
updateCellData(cellsDataTwo.value, s);
|
updateCellData(cellsDataThree.value, s);
|
}
|
});
|
};
|
handleQuery();
|
|
//连接signalR 监听变更
|
onMounted(async () => {
|
signalR.off('PublicPlcConn');
|
signalR.on('PublicPlcConn', (data: any) => {
|
console.log(data)
|
if (data.type === 0) {
|
// 替换 stackers 中的相应项
|
const index = stackers.value.findIndex(item => item.id === data.id);
|
if (index !== -1) {
|
stackers.value[index] = data;
|
}
|
} else if (data.type === 1 || data.type === 4) {
|
// 替换 conveyors 中的相应项
|
const index = conveyors.value.findIndex(item => item.id === data.id);
|
if (index !== -1) {
|
conveyors.value[index] = data;
|
}
|
}
|
console.log(stackers.value[0].isConn)
|
});
|
signalR.off('UpdateService');
|
signalR.on('UpdateService', (data: any) => {
|
state.value = data;
|
if (data.error) {
|
ElMessage({
|
message: data.error,
|
type: "error",
|
});
|
}
|
});
|
signalR.off('PublicPosition');
|
signalR.on('PublicPosition', (data: any) => {
|
if (data.type == 1) {
|
// 更新输送线数据
|
updateCellData(cellsDataOne.value, data);
|
updateCellData(cellsDataTwo.value, data);
|
updateCellData(cellsDataThree.value, data);
|
}
|
else if (data.type == 0) {
|
// 更新堆垛机数据
|
updateStacker(data)
|
// const foundCell = cellsDataLine.value.find(cell => cell.Code === data.stationNum);
|
// if (foundCell) {
|
// //修改高度
|
// foundCell.BoxHeight = data.boxHeight;
|
// }
|
}
|
});
|
});
|
const handleSwitchChange = (field: string, value: boolean) => {
|
const param = { [field]: value };
|
signalR.invoke('UpdateService', param);
|
};
|
//更新堆垛机
|
// updateStacker({ stationNum: '10', boxHeight: 200 })
|
function updateStacker(data: any) {
|
debugger;
|
const foundCell = cellsDataLine.value.find(cell => cell.Code === data.stationNum);
|
if (foundCell) {
|
foundCell.EndLocat = data.endLocat;
|
const startHeight = foundCell.BoxHeight;
|
const targetHeight = data.boxHeight;
|
const duration = 1000; // 动画持续时间（毫秒）
|
const interval = 50; // 更新间隔（毫秒）
|
const step = (targetHeight - startHeight) / (duration / interval);
|
|
const update = () => {
|
if ((step > 0 && foundCell.BoxHeight < targetHeight) || (step < 0 && foundCell.BoxHeight > targetHeight)) {
|
foundCell.BoxHeight += step;
|
if ((step > 0 && foundCell.BoxHeight >= targetHeight) || (step < 0 && foundCell.BoxHeight <= targetHeight)) {
|
foundCell.BoxHeight = targetHeight; // 确保最终值准确
|
clearInterval(timer);
|
}
|
} else {
|
clearInterval(timer);
|
}
|
};
|
|
const timer = setInterval(update, interval);
|
}
|
}
|
|
// 更新输送线数据的通用函数
|
function updateCellData(cellsData: any[], data: any) {
|
const foundCell = cellsData.find(cell => cell.Code === data.stationNum);
|
if (foundCell) {
|
if (data.boHaveItem) {
|
foundCell.IsUse = 1;
|
}
|
else {
|
foundCell.IsUse = 0;
|
}
|
}
|
}
|
|
const activeName = ['1', '2', '3'];
|
|
//输送线数据
|
let cellsData = cellsDataOne.value;
|
|
|
// 层平面状态
|
const floorStates = ref({
|
isPlain1: false,
|
isPlain2: true,
|
isPlain3: true
|
});
|
|
//切换层平面
|
function floorTogglePlain(buttonNumber) {
|
const floorData = [cellsDataOne.value, cellsDataTwo.value, cellsDataThree.value];
|
debugger;
|
if (buttonNumber >= 1 && buttonNumber <= 3) {
|
const index = buttonNumber - 1;
|
floorStates.value = {
|
isPlain1: index !== 0,
|
isPlain2: index !== 1,
|
isPlain3: index !== 2
|
};
|
cellsData = floorData[index];
|
}
|
}
|
|
|
const textLock = async (row: any) => {
|
if(lockText.value == "锁定"){
|
lockStatus.value=false;
|
lockInputStatus.value=true;
|
lockText.value ="解锁";
|
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 = "suoding";
|
|
console.log(row);
|
var res = await WriteLocationInfo(row);
|
var res2 = await GetLocationInfo(row);
|
let rowData = JSON.parse(JSON.stringify(res2.data.result));
|
stationValue.value = res2.data.result;
|
// stationValue.value = {
|
// locatNo: '',//工位
|
// layer:'',//楼层
|
// typeName:'',//操作类型名称
|
// funcName:null,//事件结果 true/false
|
|
// taskNo:'',
|
// palletNo:'',
|
// startLoction:'',
|
// endLoction:'',
|
// startPai:'',
|
// startLie:'',
|
// startCeng:'',
|
// endPai:'',
|
// endLie:'',
|
// endCeng:'',
|
// }
|
|
|
console.log(res2.data.result);
|
console.log(rowData);
|
|
}else{
|
lockStatus.value=true;
|
lockInputStatus.value=false;
|
lockText.value ="锁定";
|
}
|
|
}
|
|
const write = async (type: string,row: any) => {
|
if (lockStatus.value == false) {
|
ElMessage.success("请先锁定");
|
return;
|
}
|
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 writeDown = async (type: string,row: any) => {
|
if (lockStatus.value == false) {
|
ElMessage.success("请先锁定");
|
return;
|
}
|
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;
|
row.funcName = "true";
|
var res = await WriteInfo(row);
|
console.log(type+"按下事件");
|
|
// ElMessage.success(res.data.result);
|
}
|
const writeUp = async (type: string,row: any) => {
|
if (lockStatus.value == false) {
|
ElMessage.success("请先锁定");
|
return;
|
}
|
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;
|
row.funcName = "false";
|
var res = await WriteInfo(row);
|
console.log(type+"抬起事件");
|
|
// ElMessage.success('asdf'+ res.data.result);
|
}
|
|
const writeTaskInfo = 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;
|
var res = await WriteTaskInfo(row);
|
console.log(type+"抬起事件");
|
|
// ElMessage.success('asdf'+ res.data.result);
|
}
|
|
</script>
|
|
<style scoped>
|
|
.box-card {
|
height: 30px;
|
padding: 0;
|
display: flex;
|
align-items: center;
|
margin-top: 3px;
|
}
|
|
.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: 30px;
|
height: 100%;
|
color: #fff;
|
font-size: 14px;
|
|
display: flex;
|
justify-content: center;
|
}
|
|
.grid-item-line-end {
|
width: 80px;
|
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: 20px;
|
height: 20px;
|
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.7vw;
|
}
|
|
.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;
|
}
|
</style>
|
