新增WMS下发任务表，增加分拣任务菜单；绑定分拣码垛设备数据

wxw

2024-09-05 637668ccd8a20772540eaf88ecf8b6eb098df5a1

 Web/src/views/device/sortPallet/index.vue

@@ -14,11 +14,11 @@
                    </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">
                            <span>{{ deviceInfo.name }}</span>
                            <span>{{ deviceInfo.text }}</span>
                            <div :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]"></div>
                        </div>
                        <div class="otherValuefix" >
@@ -29,6 +29,9 @@
                                <el-form-item label="任务号">
                                    <el-input v-model="deviceInfo.taskNumber"></el-input>
                                </el-form-item>
                                <el-form-item label="批次号">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="物料编码">
                                    <el-input></el-input>
                                </el-form-item>
@@ -38,7 +41,7 @@
                                <el-form-item label="包装名称">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="状态">
                                <el-form-item label="绑定状态">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="抓箱品种">
@@ -73,100 +76,43 @@
    </el-container>    
</template>
  
  <script lang="ts" setup>
    import { ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { GetWcsPackPlcList,GetWcsPackStationPlcList } from '/@/api/wcs/wcsDevice';
//设备数据
const deviceList=ref<any>([]);
//设备对应工位数据
const devicePointData = ref<any>([]);

    const deviceList=[
        {
            id: 1,
            name: '1号机器人'
        },
        {
            id: 2,
            name: '2号机器人'
        },
        {
            id: 3,
            name: '3号机器人'
        },
    ];
const selectedDeviceId=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 fetchStationData = async (plcId: any) => {
    const res2 = await GetWcsPackStationPlcList({ plcId });
    devicePointData.value = res2.data.result;
    console.log('data:'+devicePointData.value);
};
// 获取设备数据
const fetchPLCDeviceData = 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);

    //切换层平面
    function chooseDevice(id) {
        selectedDeviceId.value = id;
        devicePointData.value = devicePointList.filter(device => device.deviceId === id);
    if (deviceList.value.length > 0) {
      selectedDeviceId.value = deviceList.value[0].id;
      await fetchStationData(selectedDeviceId.value);
    }
  </script>
  
  <style scoped>
};
fetchPLCDeviceData();

//切换
function chooseDevice(id) {
    selectedDeviceId.value = id;

    fetchStationData(id);
}
</script>

<style scoped>
    .card-page {
        width: 100%;
        height: 50px;
@@ -181,13 +127,13 @@
        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;
@@ -208,13 +154,13 @@
    }
    .otherValuefix{
        width: 100%;
        height: 550px;
        height: 540px;
        padding: 10px;
        border-bottom: 1px solid rgb(197, 195, 195);
    }
    .otherButtonfix{
        width: 100%;
        height: 100px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
@@ -226,5 +172,5 @@
    .device-status-1{
        background-color: red;
    }
  </style>
</style>