| | |
| | | </el-button> |
| | | </div> |
| | | </el-row> |
| | | <el-row :span="2"> |
| | | <el-row :span="1"> |
| | | <div class="card-container"> |
| | | <el-card class="other-box-card" v-for="deviceInfo in devicePointData" :key="deviceInfo.id"> |
| | | <div slot="header" class="linefix"> |
| | |
| | | </el-container> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { ref } from 'vue'; |
| | | <script lang="ts" setup> |
| | | import { ref } from 'vue'; |
| | | import { GetWcsPackPlcList } from '/@/api/wcs/wcsDevice'; |
| | | |
| | | const deviceList=[ |
| | | { |
| | | id: 1, |
| | | name: '1号机器人' |
| | | }, |
| | | { |
| | | id: 2, |
| | | name: '2号机器人' |
| | | }, |
| | | { |
| | | id: 3, |
| | | name: '3号机器人' |
| | | }, |
| | | ]; |
| | | const deviceList=ref<any>([]); |
| | | |
| | | const devicePointList=[ |
| | | { |
| | | id: 1, |
| | | deviceId:1, |
| | | name: '1号机器人 1工位', |
| | | taskNumber: 'T000001', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 0 |
| | | }, |
| | | { |
| | | id: 2, |
| | | deviceId:1, |
| | | name: '1号机器人 2工位', |
| | | taskNumber: '', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 1 |
| | | }, |
| | | { |
| | | id: 3, |
| | | deviceId:1, |
| | | name: '1号机器人 3工位', |
| | | taskNumber: '', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 1 |
| | | }, |
| | | { |
| | | id: 4, |
| | | deviceId:2, |
| | | name: '2号机器人 1工位', |
| | | taskNumber: 'T000001', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 0 |
| | | }, |
| | | { |
| | | id: 5, |
| | | deviceId:2, |
| | | name: '2号机器人 2工位', |
| | | taskNumber: '', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 1 |
| | | }, |
| | | { |
| | | id: 6, |
| | | deviceId:3, |
| | | name: '3号机器人 1工位', |
| | | taskNumber: 'T000001', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 0 |
| | | } |
| | | ]; |
| | | const devicePointList=[ |
| | | { |
| | | id: 1, |
| | | deviceId:586494087331909, |
| | | name: '1号码垛机器人 1工位', |
| | | taskNumber: 'T000001', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 0 |
| | | }, |
| | | { |
| | | id: 2, |
| | | deviceId:586494087331909, |
| | | name: '1号码垛机器人 2工位', |
| | | taskNumber: '', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 1 |
| | | }, |
| | | { |
| | | id: 3, |
| | | deviceId:586494087331909, |
| | | name: '1号码垛机器人 3工位', |
| | | taskNumber: '', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 1 |
| | | }, |
| | | { |
| | | id: 4, |
| | | deviceId:586494241939525, |
| | | name: '2号码垛机器人 1工位', |
| | | taskNumber: 'T000001', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 0 |
| | | }, |
| | | { |
| | | id: 5, |
| | | deviceId:586494241939525, |
| | | name: '2号码垛机器人 2工位', |
| | | taskNumber: '', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 1 |
| | | }, |
| | | { |
| | | id: 6, |
| | | deviceId:3, |
| | | name: '3号机器人 1工位', |
| | | taskNumber: 'T000001', |
| | | taskType: '', |
| | | plc: '', |
| | | wcs: '', |
| | | status: 0 |
| | | } |
| | | ]; |
| | | |
| | | let devicePointData = ref<any>([]); |
| | | const selectedDeviceId=ref<any>(); |
| | | // 查询操作 |
| | | const handleQuery = async () => { |
| | | var res = await GetWcsPackPlcList(); |
| | | deviceList.value = res.data.result; |
| | | |
| | | //输送线数据 |
| | | let devicePointFirst= devicePointList.filter(device => device.deviceId === deviceList[0].id) |
| | | let devicePointData = ref(devicePointFirst); |
| | | let selectedDeviceId = ref(deviceList[0].id); |
| | | selectedDeviceId.value = deviceList.value[0].id; |
| | | devicePointData.value= devicePointList.filter(device => device.deviceId === selectedDeviceId.value); |
| | | }; |
| | | handleQuery(); |
| | | |
| | | //切换层平面 |
| | | function chooseDevice(id) { |
| | | selectedDeviceId.value = id; |
| | | devicePointData.value = devicePointList.filter(device => device.deviceId === id); |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | //切换 |
| | | function chooseDevice(id) { |
| | | selectedDeviceId.value = id; |
| | | devicePointData.value = devicePointList.filter(device => device.deviceId === id); |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .card-page { |
| | | width: 100%; |
| | | height: 50px; |
| | |
| | | height: 30px; |
| | | } |
| | | .card-container { |
| | | display: grid; |
| | | grid-template-columns: repeat(6, 1fr); |
| | | gap: 10px; |
| | | display: grid; |
| | | grid-template-columns: repeat(6, 1fr); |
| | | gap: 10px; |
| | | } |
| | | .other-box-card { |
| | | box-sizing: border-box; |
| | | background: linear-gradient(135deg, #66ccff, #3399ff); |
| | | .other-box-card { |
| | | box-sizing: border-box; |
| | | background: linear-gradient(135deg, #66ccff, #3399ff); |
| | | } |
| | | .lineStatus{ |
| | | position: absolute; |
| | |
| | | } |
| | | .otherValuefix{ |
| | | width: 100%; |
| | | height: 550px; |
| | | height: 500px; |
| | | padding: 10px; |
| | | border-bottom: 1px solid rgb(197, 195, 195); |
| | | } |
| | |
| | | .device-status-1{ |
| | | background-color: red; |
| | | } |
| | | </style> |
| | | </style> |
| | | |