| | |
| | | </el-col> |
| | | <el-col :span="21"> |
| | | <div class="card-page"> |
| | | <el-button type="primary" :plain="isPlain1" @click="floorTogglePlain(1)">一层平面</el-button> |
| | | <el-button type="primary" :plain="isPlain2" @click="floorTogglePlain(2)">二层平面</el-button> |
| | | <el-button type="primary" :plain="isPlain3" @click="floorTogglePlain(3)">三层平面</el-button> |
| | | <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: 50%;"> |
| | | <div class="grid-container-line"> |
| | |
| | | |
| | | <script lang="ts" setup> |
| | | import { ref, reactive, onMounted } from 'vue'; |
| | | import { listStatus } from '/@/api/wcs/wcsPlc'; |
| | | import { listStatus, listPosition } from '/@/api/wcs/wcsPlc'; |
| | | import { signalR } from './signalR'; |
| | | |
| | | const state = ref<any>({}); |
| | |
| | | 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 || s.type == 4); |
| | | |
| | | 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; |
| | | } |
| | | } |
| | | else if (s.type == 1) { |
| | | // 更新输送线数据 |
| | | updateCellData(cellsDataOne, s); |
| | | updateCellData(cellsDataTwo, s); |
| | | updateCellData(cellsDataThree, s); |
| | | } |
| | | }); |
| | | }; |
| | | handleQuery(); |
| | | |
| | |
| | | signalR.on('UpdateService', (data: any) => { |
| | | state.value = data; |
| | | }); |
| | | signalR.off('PublicPosition'); |
| | | signalR.on('PublicPosition', (data: any) => { |
| | | |
| | | if (data.type == 1) { |
| | | // 更新输送线数据 |
| | | updateCellData(cellsDataOne, data); |
| | | updateCellData(cellsDataTwo, data); |
| | | updateCellData(cellsDataThree, data); |
| | | } |
| | | else if (data.type == 0) { |
| | | // 更新堆垛机数据 |
| | | const foundCell = cellsDataLine.value.find(cell => cell.Code === data.stationNum); |
| | | if (foundCell) { |
| | | //修改高度 |
| | | foundCell.BoxHeight = data.boxHeight; |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | const handleSwitchChange = (field: string, value: boolean) => { |
| | | signalR.invoke('UpdateService',state.value); |
| | | signalR.invoke('UpdateService', state.value); |
| | | }; |
| | | |
| | | // 更新输送线数据的通用函数 |
| | | 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']; |
| | | const value1 = ref(false); |
| | | const value2 = ref(false); |
| | | const value3 = ref(false); |
| | | |
| | | //堆垛机数据 |
| | | const cellsDataLine = [ |
| | | const cellsDataLine = ref([ |
| | | { Id: 1, Code: '001', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 }, |
| | | { Id: 2, Code: '002', LineCode: '01', EndLocat: '01010101', IsShow: 0, IsUse: 0, BoxHeight: 10 }, |
| | | { Id: 3, Code: '003', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 }, |
| | |
| | | { Id: 49, Code: '049', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 }, |
| | | { Id: 50, Code: '050', LineCode: '10', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 10 }, |
| | | { Id: 51, Code: '051', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 }, |
| | | ]; |
| | | ]); |
| | | |
| | | //一层输送线数据 |
| | | const cellsDataOne = [ |
| | |
| | | //输送线数据 |
| | | let cellsData = ref(cellsDataOne); |
| | | |
| | | const isPlain1 = ref(false);//一层 |
| | | const isPlain2 = ref(true);//二层 |
| | | const isPlain3 = ref(true);//三层 |
| | | |
| | | // 层平面状态 |
| | | const floorStates = ref({ |
| | | isPlain1: false, |
| | | isPlain2: true, |
| | | isPlain3: true |
| | | }); |
| | | |
| | | //切换层平面 |
| | | function floorTogglePlain(buttonNumber) { |
| | | if (buttonNumber === 1) { |
| | | isPlain1.value = !isPlain1.value; |
| | | isPlain2.value = true; |
| | | isPlain3.value = true; |
| | | const floorData = [cellsDataOne, cellsDataTwo, cellsDataThree]; |
| | | |
| | | cellsData.value = cellsDataOne; |
| | | } else if (buttonNumber === 2) { |
| | | isPlain2.value = !isPlain2.value; |
| | | isPlain1.value = true; |
| | | isPlain3.value = true; |
| | | |
| | | cellsData.value = cellsDataTwo; |
| | | } else if (buttonNumber === 3) { |
| | | isPlain3.value = !isPlain3.value; |
| | | isPlain1.value = true; |
| | | isPlain2.value = true; |
| | | |
| | | cellsData.value = cellsDataThree; |
| | | if (buttonNumber >= 1 && buttonNumber <= 3) { |
| | | const index = buttonNumber - 1; |
| | | floorStates.value = { |
| | | isPlain1: index !== 0, |
| | | isPlain2: index !== 1, |
| | | isPlain3: index !== 2 |
| | | }; |
| | | cellsData.value = floorData[index]; |
| | | } |
| | | } |
| | | </script> |