设备监控设置

hwh

2024-09-06 c4f8cc1f88a83de4784b5fc90496ff79d377e321

设备监控设置

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

@@ -56,6 +56,7 @@
import 'splitpanes/dist/splitpanes.css';
import { listWcsAlarmInfo, resetWcsAlarmInfo } from '/@/api/wcs/wcsAlarmInfo';
import { signalR } from './signalR';
import { ElMessageBox, ElMessage } from "element-plus";
//连接signalR 监听变更
onMounted(async () => {
    signalR.off('PublicAlarm');
@@ -1951,6 +1952,7 @@
//复位报警
const reset = async () => {
    await resetWcsAlarmInfo({ layer: layer.value });
    ElMessage.success("复位成功");
    // await handleQuery();
}


 Web/src/views/device/deviceMonitor/component/setting.vue

New file
@@ -0,0 +1,198 @@
<template>
    <div class="wcsAlarmInfo-container">
        <el-dialog v-model="isShowDialog" :width="800" draggable="" :close-on-click-modal="false">
            <template #header>
                <div class="dialog-header">
                    <span>{{ props.title }}</span>
                </div>
            </template>

            <el-card class="box-card" shadow="hover">
                <template #header>
                    <div class="card-header">
						
                        <div>
                            <span>工位号：</span>
                            <el-select v-model="stationValue" placeholder="请选择" filterable value-key="stationNum"
                                style="width: 200px;">
                                <el-option v-for="item in listStationsData" :key="item.id" :label="item.stationNum"
                                    :value="item">
                                </el-option>
                            </el-select>
                            <el-button style="margin-left: 10px;">自动</el-button>
                        </div>
                        <div>
                            <div :class="['lineStatus', stationValue.status ? 'device-status-0' : 'device-status-1']"></div>
                        </div>
                    </div>
                </template>
                <div>
                    <el-form label-position="left" label-width="80px">
                        <el-row :gutter="25">
                            <el-col :span="12">
                                <el-form-item label="起始工位">
                                    <el-input v-model="stationValue.startLocatNo"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="目的工位">
                                    <el-input v-model="stationValue.endLocatNo"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="PLC">
                                    <el-input v-model="stationValue.plc"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="WCS">
                                    <el-input v-model="stationValue.wcs"></el-input>
                                </el-form-item>
                            </el-col>
							
                            <el-col :span="12">
                                <el-form-item label="取货排">
                                    <el-input ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="放货排">
                                    <el-input ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="取货列">
                                    <el-input ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="放货列">
                                    <el-input ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="取货层">
                                    <el-input ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="放货层">
                                    <el-input ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div style="text-align: center;margin: 10px;">
                        <el-button class="button" size="large">写入数据</el-button>
                    </div>
                </div>
                <template #footer>
                    <div class="card-footer">
                        <el-button class="button" size="large">正&nbsp;&nbsp;&nbsp;&nbsp;转</el-button>
                        <el-button class="button" size="large">反&nbsp;&nbsp;&nbsp;&nbsp;转</el-button>
                        <el-button class="button" size="large">移栽上升</el-button>
                        <el-button class="button" size="large">移栽下降</el-button>
                    </div>
                </template>
            </el-card>

            <!-- <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog" type="primary">关 闭</el-button>
                </span>
            </template> -->
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineModel } from 'vue';
const listStationsData = defineModel<any>("listStationsData")
const stationValue = defineModel<any>("stationValue")

const props = defineProps({
    title: {
        type: String,
        default: '',
    }
});
// const emit = defineEmits<{ (e: "update:listStationsData", value: Array<any>): void, (e: "update:stationValue", value): void }>()

// const handlestationChange = () => {
//     emit('update:listStationsData', listStationsData.value);
//     emit('update:stationValue', stationValue);
// };

const isShowDialog = ref(false);

const openDialog = async (row: any) => {
    console.log(listStationsData.value);
    debugger;
    isShowDialog.value = true;
};

const closeDialog = () => {
    isShowDialog.value = false;
};

defineExpose({ openDialog });
</script>

<style>
.el-col {
    margin-bottom: 15px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
    color: #fff;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
    background: linear-gradient(135deg, #66ccff, #3399ff);
    border-radius: 10px;
    color: #fff;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}

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

.device-status-0 {
    background-color: #67C23A;
}

.device-status-1 {
    background-color: red;
}
</style>

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

@@ -11,7 +11,7 @@
                        <el-option v-for="item in lineOptions" :key="item.id" :label="item.text"
                            :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="stationValue" placeholder="请选择" style="margin-top: 10px;"
                    <el-select v-model="stationValue" placeholder="请选择" style="margin-top: 10px;" filterable
                        value-key="stationNum">
                        <el-option v-for="item in listStationsData" :key="item.id" :label="item.stationNum"
                            :value="item">
@@ -53,7 +53,7 @@
                    <el-form label-position="left" label-width="80px">
                        <el-form-item>
                            <el-button>写入</el-button>
                            <el-button>设置</el-button>
                            <el-button @click="openDialog">设置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
@@ -100,13 +100,13 @@
                        <el-form label-position="left">
                            <el-form-item>
                                <el-button>写入</el-button>
                                <el-button>设置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </div>
        </el-main>
        <setting ref="settingDialogRef" :title="title" v-model:listStationsData="listStationsData" v-model:stationValue="stationValue" />
    </el-container>
</template>

@@ -116,11 +116,14 @@
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { listWcsPlc } from '/@/api/wcs/wcsPlc';

import setting from '/@/views/device/deviceMonitor/component/setting.vue'

const stations = ref<any>([]);
const listStationsData = ref<any>([]);
const listStackingMachineData = ref<any>([]);
const lineOptions = ref<any>([]);
const lineValue = ref(1);
const title = ref<string>('');
const stationValue = ref<any>({
    taskNo: '',
    taskType: '',
@@ -130,7 +133,11 @@
    wcs: '',
    status: false
});

const settingDialogRef = ref();
// 打开打印页面
const openDialog = async () => {
    settingDialogRef.value.openDialog(stationValue);
}
// 查询操作
const handleQuery = async () => {
    var listplc = await listWcsPlc({ type: 1 });
@@ -146,11 +153,14 @@
        listStationsData.value = stations.value[lineValue.value];
        stationValue.value = listStationsData.value[0];
    }
    title.value = listStationsData.value[0].text;
};

handleQuery();

const handleLineChange = (field: string, value: number) => {
    listStationsData.value = stations.value[value];
    title.value = lineOptions.value.filter(s => s.id == value)[0].text;
    if (listStationsData.value.length > 0)
        stationValue.value = listStationsData.value[0];
};
@@ -166,6 +176,12 @@
    margin-bottom: 10px;
}

.el-button {
    background-color: #fff;
    border-color: #fff;
    color: #000000;
}

.linefix {
    border-bottom: 1px solid rgb(197, 195, 195);
    display: flex;