<template>
|
<div class="app-container">
|
<el-card style="flex: 1; margin-left: 10px" :loading="loading">
|
<div
|
slot="header"
|
class="clearfix"
|
style="display: flex; align-items: center"
|
>
|
<!-- 左侧按钮组 -->
|
<div>
|
<el-button type="success" size="mini" @click="storage()"
|
>原片仓储详情</el-button
|
>
|
<el-button type="success" size="mini" @click="handleInbound()"
|
>入库</el-button
|
>
|
<el-button type="success" size="mini">吊装位入库</el-button>
|
</div>
|
|
<!-- 右侧选择框 -->
|
<el-form-item style="margin-top: 15px; width: 150px">
|
<el-select v-model="formData2.dzw" placeholder="请选择吊装位">
|
<el-option label="吊装位1" value="吊装位1"></el-option>
|
<el-option label="吊装位2" value="吊装位2"></el-option>
|
<!-- 根据实际情况添加更多选项 -->
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-dialog v-model="Hidden" top="10vh" width="80%">
|
<el-table
|
:data="tableData"
|
v-model="dialogVisible3"
|
style="width: 98%; height: 200px"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
|
ref="table"
|
empty-text="No Data"
|
>
|
<el-table-column prop="number" label="库位号"></el-table-column>
|
<el-table-column prop="rawType" label="类型"></el-table-column>
|
<el-table-column prop="rawWidth" label="长度(mm)"></el-table-column>
|
<el-table-column prop="rawHeight" label="高度(mm)"></el-table-column>
|
<el-table-column
|
prop="rawThickness"
|
label="厚度(mm)"
|
></el-table-column>
|
<el-table-column prop="pieces" label="数量"></el-table-column>
|
<el-table-column prop="createTime" label="入库时间"></el-table-column>
|
<el-table-column prop="batchId" label="批次号"></el-table-column>
|
|
<el-table-column
|
align="center"
|
label="料架状态"
|
min-width="80"
|
prop="enableState"
|
>
|
<template #default="scope">
|
<el-tag
|
:type="getTagType(scope.row.enableState)"
|
@click="toggleStatus(scope.row)"
|
>
|
{{ scope.row.enableState === 1 ? "启用" : "未启用" }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<!-- 操作列 -->
|
<el-table-column label="操作" width="250">
|
<template #default="{ row }">
|
<el-button
|
type="primary"
|
size="mini"
|
@click="edithandleRowClick(row)"
|
>修改</el-button
|
>
|
<el-button type="danger" size="mini" @click="handleDelete(row)"
|
>删除</el-button
|
>
|
<el-button type="warning" size="mini" @click="handleCheckout(row)"
|
>出库</el-button
|
>
|
<!-- <el-button type="success" size="mini" @click="addglass()">添加原片</el-button> -->
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
v-if="totalItems > 0"
|
background
|
layout="prev, pager, next"
|
:total="totalItems"
|
:page-size="pageSize"
|
@current-change="handleCurrentChange"
|
></el-pagination>
|
</el-dialog>
|
|
<el-table
|
:data="tasktableData"
|
style="width: 98%; height: 150px"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
|
ref="table"
|
empty-text="No Data"
|
>
|
<template #header>
|
<div style="display: flex; align-items: center">
|
<span style="font-size: 16px; font-weight: bold; margin-right: 20px"
|
>任务列表</span
|
>
|
</div>
|
</template>
|
<el-table-column prop="id" label="Glassid"></el-table-column>
|
<el-table-column
|
prop="taskType"
|
label="任务描述"
|
width="250"
|
:formatter="formatTaskType"
|
></el-table-column>
|
<el-table-column
|
prop="rawThickness"
|
label="玻璃厚度"
|
></el-table-column>
|
<el-table-column prop="color" label="玻璃膜系"></el-table-column>
|
<el-table-column prop="startTime" label="创建时间"></el-table-column>
|
|
<el-table-column
|
align="center"
|
label="任务状态"
|
min-width="80"
|
prop="taskState"
|
>
|
<template #default="scope">
|
<el-tag :type="getTagType2(scope.row.taskState)">
|
{{ scope.row.taskState == "completed" ? "完成" : "进行中" }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<!-- 操作列 -->
|
<el-table-column label="操作" width="350">
|
<template #default="{ row }">
|
<el-button type="primary" size="mini" @click="handleRestart(row)"
|
>重新开始</el-button
|
>
|
<el-button type="danger" size="mini" @click="handleDeletetask(row)"
|
>删除任务</el-button
|
>
|
<el-button type="success" size="mini" @click="handleComplete(row)"
|
>任务完成</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<div class="img-ypcc">
|
<div
|
class="img-car1"
|
:style="'z-index:999;left:397px;top:205px;position:absolute;'"
|
>
|
<div
|
v-show="cellshow1"
|
style="
|
margin-top: 10px;
|
width: 200px;
|
height: 5px;
|
background-color: #409eff;
|
"
|
></div>
|
</div>
|
</div>
|
|
<!-- 入库对话框 -->
|
<el-dialog
|
title="入库"
|
v-model="dialogVisible"
|
width="30%"
|
:before-close="handleCloseDialog"
|
>
|
<el-form :model="formData" ref="form" label-width="80px">
|
<el-form-item label="进库料架">
|
<el-select v-model="formData.number" placeholder="请选择进库料架">
|
<el-option label="1" value="1"></el-option>
|
<el-option label="2" value="2"></el-option>
|
<!-- 根据实际情况添加更多选项 -->
|
</el-select>
|
</el-form-item>
|
<el-form-item label="颜色膜系">
|
<el-select v-model="formData.color" placeholder="请选择颜色膜系">
|
<el-option label="Red" value="Red"></el-option>
|
<el-option label="Blue" value="Blue"></el-option>
|
<!-- 根据实际情况添加更多选项 -->
|
</el-select>
|
</el-form-item>
|
<el-form-item label="宽度">
|
<el-input
|
v-model.number="formData.rawWidth"
|
placeholder="请输入宽度"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="高度">
|
<el-input
|
v-model.number="formData.rawHeight"
|
placeholder="请输入高度"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="厚度">
|
<el-input
|
v-model.number="formData.rawThickness"
|
placeholder="请输入厚度"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="数量">
|
<el-input
|
v-model.number="formData.pieces"
|
placeholder="请输入数量"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="handleConfirmInbound"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
|
<el-dialog title="添加原片" v-model="dialogVisible3" width="50%">
|
<el-form :model="formData3" ref="form" label-width="80px">
|
<el-form-item label="颜色膜系">
|
<el-input
|
v-model="formData.selectedColor"
|
readonly
|
style="width: 250px; height: 35px; font-size: 20px"
|
></el-input>
|
<el-dropdown @command="handleCommand">
|
<span class="el-dropdown-link">
|
选择<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="color in colors"
|
:key="color['0_glass_id']"
|
:command="color['0_glass_id']"
|
>
|
{{ color["0_glass_id"] }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</el-form-item>
|
|
<el-form-item label="长度">
|
<el-input
|
v-model="formData.width"
|
required
|
style="width: 250px; font-size: 20px"
|
@focus="clearInput('wid')"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="高度">
|
<el-input
|
v-model="formData.height"
|
required
|
style="width: 250px; font-size: 20px"
|
@focus="clearInput('heig')"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="厚度">
|
<el-input
|
v-model="formData.thickness"
|
required
|
style="width: 250px; font-size: 20px"
|
@focus="clearInput('thinkness')"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="数量">
|
<el-input-number
|
v-model="formData.quantity"
|
required
|
:min="0"
|
:max="9000"
|
style="width: 250px; font-size: 20px"
|
@focus="clearInput('num')"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible3 = false">关闭</el-button>
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
</span>
|
</el-dialog>
|
|
<el-dialog
|
title="编辑"
|
v-model="editdialogVisible"
|
width="30%"
|
@close="edithandleDialogClose"
|
>
|
<el-form :model="editForm" ref="editFormRef" label-width="80px">
|
<el-form-item label="数量">
|
<el-input v-model="editForm.pieces"></el-input>
|
</el-form-item>
|
<el-form-item label="批次号">
|
<el-input v-model="editForm.batchId"></el-input>
|
</el-form-item>
|
<el-form-item label="长度">
|
<el-input v-model="editForm.rawWidth"></el-input>
|
</el-form-item>
|
<el-form-item label="高度">
|
<el-input v-model="editForm.rawHeight"></el-input>
|
</el-form-item>
|
<el-form-item label="厚度">
|
<el-input v-model="editForm.rawThickness"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div class="dialog-footer">
|
<el-button @click="editdialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="editsaveEdit">保存</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
|
|
|
<script setup>
|
import { ref, onMounted, onBeforeUnmount,onUnmounted } from "vue"; // 导入 Vue 3 的模块
|
//import * as echarts from 'echarts';
|
import { ElMessage, ElMessageBox } from "element-plus";
|
// import {tableData} from '@/stores/tableData.js';
|
import { WebSocketHost, host } from "@/utils/constants";
|
import { initializeWebSocket, closeWebSocket } from "@/utils/WebSocketService";
|
|
import {
|
updateRawUsage,
|
deleteRawUsage,
|
inStorage,
|
outStorage,
|
taskUpdate,
|
} from "@/utils/api";
|
|
const loading = ref(false);
|
const Hidden = ref(false);
|
const tableData = ref([]);
|
const totalItems = ref(0);
|
totalItems.value = 10;
|
const pageSize = 10;
|
let currentPage = ref(1);
|
const handleCurrentChange = (val) => {
|
currentPage.value = val;
|
};
|
|
const formatTaskType = (row, column) => {
|
if (row.taskType === "从仓位到吊装位") {
|
return `从仓位${row.shelfRack}到吊装位${row.loadRack}`;
|
} else if (row.taskType === "从仓位到上片位") {
|
return `从仓位${row.shelfRack}到上片位${row.loadRack}`;
|
} else if (row.taskType === "从上片位到仓位") {
|
return `从上片位${row.loadRack}到仓位${row.shelfRack}`;
|
} else if (row.taskType === "从吊装位到仓位") {
|
return `从吊装位${row.loadRack}到仓位${row.shelfRack}`;
|
}
|
};
|
|
const getTagType2 = (status) => {
|
switch (status) {
|
case "completed":
|
return "success";
|
case "in-progress":
|
return "info";
|
case "warning":
|
return "warning";
|
case "danger":
|
return "danger";
|
default:
|
return "";
|
}
|
};
|
|
const getTagType = (status) => {
|
return status === 1 ? "success" : "danger";
|
// 根据状态值决定标签类型，这里假设状态为1时为成功（绿色），否则为失败（红色）
|
};
|
|
const toggleStatus = (row) => {
|
// 切换料架状态的逻辑
|
row.enableState = 1 - row.enableState; // Toggle between 0 and 1
|
// 此处可以添加保存状态的逻辑，比如调用 API 更新数据
|
};
|
let socket = null;
|
const socketUrl = `ws://${WebSocketHost}:${host}/api/glassStorage/api/talk/storageTask`;
|
// 定义消息处理函数，更新 receivedData 变量
|
const handleMessage = (data) => {
|
// 更新 tableData 的数据
|
|
tableData.value = data.rack[0]; // 假设 tableData 是响应式对象或变量
|
|
tableData.value.forEach((item) => {
|
// 获取 createTime 的时间戳
|
const createTimeTimestamp = item.createTime;
|
|
// 创建日期对象
|
const date = new Date(createTimeTimestamp);
|
|
// 格式化日期时间为本地格式
|
const formattedDateTime = date.toLocaleString();
|
|
// 替换原来的 createTime 字段为格式化后的日期时间字符串
|
item.createTime = formattedDateTime;
|
});
|
|
tasktableData.value = data.tasks[0]; // 假设 tasktableData 是响应式对象或变量
|
|
tasktableData.value.forEach((item) => {
|
// 获取 createTime 的时间戳
|
const createTimeTimestamp = item.startTime;
|
|
// 创建日期对象
|
const date = new Date(createTimeTimestamp);
|
|
// 格式化日期时间为本地格式
|
const formattedDateTime = date.toLocaleString();
|
|
// 替换原来的 createTime 字段为格式化后的日期时间字符串
|
item.startTime = formattedDateTime;
|
});
|
};
|
onMounted(() => {
|
socket = initializeWebSocket(socketUrl, handleMessage);
|
});
|
onUnmounted(() => {
|
if (socket) {
|
closeWebSocket(socket);
|
}
|
});
|
onBeforeUnmount(() => {
|
console.log("关闭了");
|
closeWebSocket();
|
});
|
|
const tasktableData = ref([]);
|
|
const dialogVisible = ref(false);
|
const formData = ref({
|
number: "",
|
color: "",
|
rawWidth: "",
|
rawHeight: "",
|
rawThickness: "",
|
pieces: "",
|
loadRack: 1,
|
});
|
|
const formData2 = ref({
|
dzw: "",
|
});
|
|
const handleDelete = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm("确定要执行删除操作吗？", "确认删除", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 点击确认按钮的回调，执行出库操作
|
|
const intNumber = {
|
id: parseInt(row.number),
|
};
|
deleteRawUsage(intNumber);
|
|
console.log("执行删除操作");
|
})
|
.catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log("取消删除操作");
|
});
|
};
|
|
const handleCheckout = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm("确定要执行出库操作吗？", "确认出库", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 点击确认按钮的回调，执行出库操作
|
const raw={
|
number:parseInt(row.number),
|
loadRack:2
|
}
|
outStorage(raw)
|
console.log("执行出库操作", row);
|
})
|
.catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log("取消出库操作");
|
});
|
};
|
|
const handleInbound = () => {
|
// 打开入库对话框
|
dialogVisible.value = true;
|
};
|
|
const storage = () => {
|
// 打开入库对话框
|
Hidden.value = true;
|
};
|
|
const handleCloseDialog = () => {
|
// 关闭对话框时重置表单数据
|
formData.value = {
|
number: "",
|
color: "",
|
rawWidth: "",
|
rawHeight: "",
|
rawThickness: "",
|
pieces: "",
|
};
|
dialogVisible.value = false;
|
};
|
|
const handleConfirmInbound = () => {
|
inStorage(formData.value);
|
// 处理确认入库逻辑，可以在这里提交表单或者执行其他操作
|
console.log("Confirm Inbound:", formData.value);
|
// 关闭对话框
|
dialogVisible.value = false;
|
};
|
|
const dialogVisible3 = ref(false);
|
const colors = ref([
|
{ "0_glass_id": "Red" },
|
{ "0_glass_id": "Green" },
|
{ "0_glass_id": "Blue" },
|
// Add more colors as needed
|
]);
|
|
const formData3 = ref({
|
selectedColor: "",
|
wid: "",
|
heig: "",
|
thinkness: "",
|
num: "",
|
});
|
|
const addglass = () => {
|
// 打开入库对话框
|
dialogVisible3.value = true;
|
};
|
const handleCommand = (command) => {
|
formData.value.selectedColor = command;
|
};
|
|
const clearInput = (field) => {
|
formData.value[field] = "";
|
};
|
|
const submitForm = () => {
|
console.log("提交数据:", formData.value);
|
dialogVisible3.value = false;
|
// Add your submit logic here
|
};
|
|
const editdialogVisible = ref(false);
|
const editForm = ref({
|
id: "",
|
pieces: "",
|
batchId: "",
|
rawWidth: "",
|
rawHeight: "",
|
rawThickness: "",
|
});
|
const editFormRef = ref(null);
|
let currentRow = ref(null);
|
|
// 处理行点击事件
|
const edithandleRowClick = (row) => {
|
currentRow.value = row;
|
console.log(row);
|
editForm.value.pieces = row.pieces.toString();
|
editForm.value.batchId = row.batchId;
|
editForm.value.rawWidth = row.rawWidth;
|
editForm.value.rawHeight = row.rawHeight;
|
editForm.value.rawThickness = row.rawThickness;
|
editForm.value.id = row.number;
|
editdialogVisible.value = true;
|
console.log(editForm.value);
|
};
|
|
// 添加保存编辑内容
|
const editsaveEdit = () => {
|
if (!currentRow.value) return;
|
|
// 更新当前行数据
|
currentRow.value.pieces = editForm.value.pieces;
|
currentRow.value.batchId = editForm.value.batchId;
|
currentRow.value.rawWidth = editForm.value.rawWidth;
|
currentRow.value.rawHeight = editForm.value.rawHeight;
|
currentRow.value.rawThickness = editForm.value.rawThickness;
|
// 调用更新函数，并处理其返回的 Promise
|
updateRawUsage(editForm.value);
|
|
// 关闭对话框
|
editdialogVisible.value = false;
|
};
|
|
// 对话框关闭时重置编辑表单和当前行数据
|
const edithandleDialogClose = () => {
|
editForm.value.pieces = "";
|
editForm.value.batchId = "";
|
editForm.value.rawWidth = "";
|
editForm.value.rawHeight = "";
|
editForm.value.rawThickness = "";
|
|
currentRow.value = null;
|
};
|
|
const handleRestart = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm("确定要执行重新开始操作吗？", "确认重新开始", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
const taskdata={
|
id:row.id,
|
Type:"重新开始"
|
}
|
taskUpdate(taskdata);
|
|
|
console.log("执行重新开始操作", row);
|
})
|
.catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log("取消重新开始操作");
|
});
|
};
|
|
const handleDeletetask = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm("确定要执行删除任务操作吗？", "确认删除任务", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 点击确认按钮的回调
|
const taskdata={
|
id:row.id,
|
Type:"删除"
|
}
|
taskUpdate(taskdata);
|
console.log("执行删除任务操作", row);
|
})
|
.catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log("取消删除任务操作");
|
});
|
};
|
|
const handleComplete = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm("确定要执行任务完成操作吗？", "确认任务完成", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
|
const taskdata={
|
id:row.id,
|
Type:"完成"
|
}
|
taskUpdate(taskdata);
|
// 点击确认按钮的回调
|
console.log("执行任务完成操作", row);
|
})
|
.catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log("取消任务完成操作");
|
});
|
};
|
</script>
|
|
<style scoped>
|
#dt {
|
display: block;
|
float: left;
|
line-height: 20px;
|
margin-left: 100px;
|
}
|
#dta {
|
display: block;
|
float: left;
|
line-height: 20px;
|
margin-left: 80%;
|
}
|
#dialog-footer {
|
text-align: center;
|
margin-top: -15px;
|
}
|
|
.img-ypcc {
|
margin-left: 80px;
|
background-image: url("../../assets/ypcc.png");
|
background-repeat: no-repeat;
|
background-attachment: local;
|
min-height: 600px;
|
width: 1400px;
|
max-width: 100%;
|
background-size: 1400px 600px;
|
overflow: hidden;
|
position: relative;
|
margin-top: 0px;
|
}
|
|
.img-car1 {
|
background-image: url("../../assets/ypccche.png");
|
position: absolute;
|
background-repeat: no-repeat;
|
background-attachment: local;
|
min-height: 400px;
|
width: 200px;
|
max-width: 100%;
|
background-size: 200px 170px;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.custom-dialog {
|
max-height: 90vh; /* 最大高度为视口高度的90% */
|
overflow-y: auto; /* 对话框内部出现垂直滚动条 */
|
}
|
</style>
|
