设备监控绑定plc数据

hwh

2024-09-03 c56d28d684cee010f291295dbe851bab64c1b6a6

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

@@ -4,43 +4,49 @@
            <el-card class="box-card">
                <div slot="header" class="linefix">
                    <span>输送线</span>
                    <div class="lineStatus"></div>
                    <div
                        :class="['lineStatus', { 'device-status-0': stationValue.status === true }, { 'device-status-1': stationValue.status === false }]">
                    </div>
                </div>
                <div class="choosefix">
                    <el-select v-model="lineValue" placeholder="请选择">
                    <el-select v-model="lineValue" placeholder="请选择" @change="handleLineChange('item', $event)">
                        <el-option v-for="item in lineOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                    <el-select v-model="stationValue" placeholder="请选择" style="margin-top: 10px;">
                        <el-option v-for="item in stations" :key="item.id" :label="item.stationNum"
                            :value="item.id"></el-option>
                    <el-select v-model="stationValue" placeholder="请选择" style="margin-top: 10px;"
                        value-key="stationNum">
                        <el-option v-for="item in listStationsData" :key="item.id" :label="item.stationNum"
                            :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="lineValuefix">
                    <el-form label-position="left" label-width="80px">
                        <el-form-item label="任务号">
                            <el-input></el-input>
                            <el-input v-model="stationValue.taskNo"></el-input>
                        </el-form-item>
                        <el-form-item label="任务类型">
                            <el-input></el-input>
                            <el-select clearable v-model="stationValue.taskType" placeholder="请选择任务类型">
                        <el-option v-for="(item,index) in dl('TaskTypeEnum')" :key="index" :value="Number(item.value)" :label="`${item.name} [${item.value}]`"></el-option>
                     </el-select>
                        </el-form-item>
                        <el-form-item label="起始工位">
                            <el-input></el-input>
                            <el-input v-model="stationValue.startLocatNo"></el-input>
                        </el-form-item>
                        <el-form-item label="目的工位">
                            <el-input></el-input>
                            <el-input v-model="stationValue.endLocatNo"></el-input>
                        </el-form-item>
                        <el-form-item label="托盘码">
                            <el-input></el-input>
                            <el-input v-model="stationValue.palletNo"></el-input>
                        </el-form-item>
                        <el-form-item label="PLC">
                            <el-input></el-input>
                            <el-input v-model="stationValue.plc"></el-input>
                        </el-form-item>
                        <el-form-item label="WCS">
                            <el-input></el-input>
                            <el-input v-model="stationValue.wcs"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-input></el-input>
                            <el-input :value="stationValue.status ? '在线' : '离线'" readonly></el-input>
                        </el-form-item>
                    </el-form>
                </div>
@@ -71,8 +77,15 @@
                            <el-form-item label="任务类型">
                                <el-select clearable="" v-model="deviceInfo.taskType" placeholder="请选择状态">
                                    <el-option v-for="(item, index) in dl('TaskTypeEnum')" :key="index"
                                        :value="Number(item.value)" :label="`${item.name} (${item.code}) [${item.value}] `" />
                                        :value="Number(item.value)"
                                        :label="`${item.name} [${item.value}] `" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="起始工位">
                                <el-input v-model="deviceInfo.startLocatNo"></el-input>
                            </el-form-item>
                            <el-form-item label="目的工位">
                                <el-input v-model="deviceInfo.endLocatNo"></el-input>
                            </el-form-item>
                            <el-form-item label="PLC">
                                <el-input v-model="deviceInfo.plc"></el-input>
@@ -106,10 +119,19 @@
import { getDictLabelByVal as dv } from '/@/utils/dict-utils';

const stations = ref<any>([]);
const listStationsData = ref<any>([]);
const listStackingMachineData = ref<any>([]);

const lineValue = ref('1');
const stationValue = ref();
const lineValue = ref(1);
const stationValue = ref<any>({
    taskNo: '',
    taskType: '',
    startLocatNo:'',
    endLocatNo: '',
    plc: '',
    wcs: '',
    status: false
});

// 查询操作
const handleQuery = async () => {
@@ -117,47 +139,29 @@
    listStackingMachineData.value = res.data.result.filter(s => s.type == 0);
    const listConveyorLineData = res.data.result.filter(s => s.type == 1 || s.type == 4);
    stations.value = {
        '1': listConveyorLineData.filter(s => s.text = '1层托盘输送线'),
        '2': listConveyorLineData.filter(s => s.text = '2层托盘输送线'),
        '3': listConveyorLineData.filter(s => s.text = '3层托盘输送线')
        1: listConveyorLineData.filter(s => s.text == '1层托盘输送线'),
        2: listConveyorLineData.filter(s => s.text == '2层托盘输送线'),
        3: listConveyorLineData.filter(s => s.text == '3层托盘输送线')
    }
    if (stations.value.length > 0)
        stationValue.value = stations.value[0][0].id;
    debugger;
    if (stations.value[1].length > 0) {
        listStationsData.value = stations.value[1];
        stationValue.value = listStationsData.value[0];
    }
};
handleQuery();

const handleLineChange = (field: string, value: number) => {
    listStationsData.value = stations.value[value];
    stationValue.value = {};
};


const lineOptions = [
    { value: '1', label: '一楼输送线' },
    { value: '2', label: '二楼输送线' },
    { value: '3', label: '三楼输送线' }
    { value: 1, label: '一楼输送线' },
    { value: 2, label: '二楼输送线' },
    { value: 3, label: '三楼输送线' }
];

const deviceList = reactive([
    { id: 1, name: '1号码垛机器人', taskNumber: 'T000001', taskType: '', plc: '', wcs: '', status: 0 },
    { id: 2, name: '2号码垛机器人', taskNumber: '', taskType: '', plc: '', wcs: '', status: 1 },
    { id: 3, name: '3号码垛机器人', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 },
    { id: 4, name: '4号码垛机器人', taskNumber: '', taskType: '', plc: '', wcs: '', status: 1 },
    { id: 5, name: '5号码垛机器人', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 },
    { id: 6, name: '6号码垛机器人', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 },
    { id: 7, name: '7号码垛机器人', taskNumber: '', taskType: '', plc: '', wcs: '', status: '' },
    { id: 8, name: '8号码垛机器人', taskNumber: '', taskType: '', plc: '', wcs: '', status: 0 }
]);

const deviceTypeText = (taskType: number) => {
    switch (taskType) {
        case 0:
            return '入库任务'
        case 1:
            return '出库任务'
        case 2:
            return '移库任务'
        case 3:
            return 'PLC申请入库'
    }
    return ''
};
</script>

<style scoped>
@@ -165,8 +169,8 @@
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
.el-form-item--small {
    margin-bottom: 10px;
}

.linefix {