设备监控绑数据

hwh

2024-09-02 95462bdd3669437accda30289858b59f72603f6f

设备监控绑数据

 Admin.NET/WCS.Application/Service/WcsDevice/Dto/WcsDeviceOutput.cs

@@ -123,7 +123,7 @@
    /// <summary>
    /// 任务类型
    /// </summary>
    public TaskTypeEnum TaskType { get; set; }
    public TaskTypeEnum? TaskType { get; set; }
    public string Plc { get; set; }
    public string Wcs { get; set; }
    /// <summary>

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

@@ -18,14 +18,14 @@
                    <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}`"></el-switch>
                                <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}`"></el-switch>
                            <el-switch v-model="conveyor.isConn" :inactive-text="`${conveyor.text}`" disabled ></el-switch>
                        </el-card>
                    </el-collapse-item>
                </el-collapse>
@@ -66,7 +66,6 @@

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { Vue2 } from 'vue-demi';
import { listStatus } from '/@/api/wcs/wcsPlc';

const state = ref<any>({});
@@ -1887,7 +1886,7 @@


//输送线数据
let cellsData = ref(cellsDataOne);;
let cellsData = ref(cellsDataOne);

const isPlain1 = ref(false);//一层
const isPlain2 = ref(true);//二层

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

@@ -1,6 +1,6 @@
<template>
    <el-container>
        <el-aside style="width: auto;height: auto;">
        <el-aside style="width: auto; height: auto;">
            <el-card class="box-card">
                <div slot="header" class="linefix">
                    <span>输送线</span>
@@ -9,17 +9,15 @@
                <div class="choosefix">
                    <el-select v-model="lineValue" placeholder="请选择">
                        <el-option v-for="item in lineOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                            :value="item.value"></el-option>
                    </el-select>
                    <el-select v-model="stationValue" placeholder="请选择" style="margin-top: 10px;">
                        <el-option v-for="item in stationOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                        <el-option v-for="item in stations" :key="item.id" :label="item.stationNum"
                            :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="lineValuefix">
                    <el-form label-position="left" label-width="60px">
                    <el-form label-position="left" label-width="80px">
                        <el-form-item label="任务号">
                            <el-input></el-input>
                        </el-form-item>
@@ -35,13 +33,19 @@
                        <el-form-item label="托盘码">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="PLC">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="WCS">
                            <el-input></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-input></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="lineButtonfix">
                    <el-form label-position="left" label-width="60px">
                    <el-form label-position="left" label-width="80px">
                        <el-form-item>
                            <el-button>写入</el-button>
                            <el-button>设置</el-button>
@@ -52,29 +56,32 @@
        </el-aside>
        <el-main style="padding: 0 0 0 5px;">
            <div class="card-container">
                <el-card class="other-box-card" v-for="deviceInfo in deviceList" :key="deviceInfo.id">
                <el-card class="other-box-card" v-for="deviceInfo in listStackingMachineData" :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 }]">
                            :class="['lineStatus', { 'device-status-0': deviceInfo.status === true }, { 'device-status-1': deviceInfo.status === false }]">
                        </div>
                    </div>
                    <div class="otherValuefix">
                        <el-form label-position="left" label-width="60px">
                        <el-form label-position="left" label-width="80px">
                            <el-form-item label="任务号">
                                <el-input v-model="deviceInfo.taskNumber"></el-input>
                                <el-input v-model="deviceInfo.taskNo"></el-input>
                            </el-form-item>
                            <el-form-item label="任务类型">
                                <el-input></el-input>
                                <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}] `" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="PLC">
                                <el-input></el-input>
                                <el-input v-model="deviceInfo.plc"></el-input>
                            </el-form-item>
                            <el-form-item label="WCS">
                                <el-input></el-input>
                                <el-input v-model="deviceInfo.wcs"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-input></el-input>
                                <el-input :value="deviceInfo.status ? '在线' : '离线'" readonly></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
@@ -94,101 +101,63 @@

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { listWcsDevice } from '/@/api/wcs/wcsDevice';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { getDictLabelByVal as dv } from '/@/utils/dict-utils';

const lineOptions = [{
    value: '001',
    label: '一楼输送线'
}, {
    value: '002',
    label: '二楼输送线'
}, {
    value: '003',
    label: '三楼输送线'
}];
const lineValue = '001';
const stations = ref<any>([]);
const listStackingMachineData = ref<any>([]);

const stationOptions = [{
    value: '200',
    label: '200'
}, {
    value: '202',
    label: '202'
}, {
    value: '300',
    label: '300'
}];
const stationValue = '200';
const lineValue = ref('1');
const stationValue = ref();


const deviceList = [
    {
        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 handleQuery = async () => {
    var res = await listWcsDevice();
    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层托盘输送线')
    }
]
    if (stations.value.length > 0)
        stationValue.value = stations.value[0][0].id;
    debugger;
};
handleQuery();


const lineOptions = [
    { 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>
@@ -204,69 +173,80 @@
    border-bottom: 1px solid rgb(197, 195, 195);
    display: flex;
    align-items: center;
    height: 40px;
    height: 30px;
    position: relative;
}

.lineStatus {
    position: absolute;
    right: 0;
    float: right;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    border-radius: 50%;
    background-color: #67C23A;
}

.choosefix {
    width: 100%;
    height: auto;
    padding: 10px;
    border-bottom: 1px solid rgb(197, 195, 195);
}

.box-card {
    width: 280px;
    width: 100%;
    max-width: 280px;
    background: linear-gradient(135deg, #66ccff, #3399ff);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.lineValuefix {
    width: 100%;
    height: 500px;
    padding: 10px;
    border-bottom: 1px solid rgb(197, 195, 195);
}

.lineButtonfix {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.otherValuefix {
    width: 100%;
    height: 220px;
    padding: 10px;
    border-bottom: 1px solid rgb(197, 195, 195);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Optional, for spacing between form items */
}

.card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.other-box-card {
    box-sizing: border-box;
    background: linear-gradient(135deg, #66ccff, #3399ff);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: auto;
    /* Ensure card height adjusts based on content */
}

.otherButtonfix {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding: 10px;
}

.device-status-0 {
@@ -275,14 +255,6 @@

.device-status-1 {
    background-color: red;
}

.box-card,
.other-box-card {
    background: linear-gradient(135deg, #66ccff, #3399ff);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.linefix span {