| | |
| | | <div
|
| | | slot="header"
|
| | | class="clearfix"
|
| | | style="display: flex; align-items: center"
|
| | | style="display: flex; align-items: center;margin-top: -20px;"
|
| | | >
|
| | | <!-- 左侧按钮组 -->
|
| | | <div>
|
| | |
| | | >
|
| | | <el-button type="success" size="mini">吊装位入库</el-button>
|
| | | </div>
|
| | |
|
| | | <!-- 右侧选择框 -->
|
| | | <el-form-item style="margin-top: 15px; width: 150px">
|
| | | <el-form-item style="margin-top: 15px; width: 150px;margin-left: 10px;">
|
| | | <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-tag>
|
| | | </template>
|
| | | </el-table-column>
|
| | |
|
| | | <!-- 操作列 -->
|
| | | <el-table-column label="操作" width="250">
|
| | | <template #default="{ row }">
|
| | |
| | | </el-tag>
|
| | | </template>
|
| | | </el-table-column>
|
| | |
|
| | | <!-- 操作列 -->
|
| | | <el-table-column label="操作" width="350">
|
| | | <template #default="{ row }">
|
| | |
| | | </el-table-column>
|
| | | </el-table>
|
| | | </el-card>
|
| | |
|
| | | <div class="img-ypcc">
|
| | | <div
|
| | | class="img-car1"
|
| | |
| | | ></div>
|
| | | </div>
|
| | | </div>
|
| | |
|
| | | <!-- 入库对话框 -->
|
| | | <el-dialog
|
| | | title="入库"
|
| | |
| | |
|
| | |
|
| | | <script setup>
|
| | | import { ref, onMounted, onBeforeUnmount } from "vue"; // 导入 Vue 3 的模块
|
| | | 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';
|
| | |
| | | const handleCurrentChange = (val) => {
|
| | | currentPage.value = val;
|
| | | };
|
| | |
|
| | | const formatTaskType = (row, column) => {
|
| | | if (row.taskType === "从仓位到吊装位") {
|
| | | return `从仓位${row.shelfRack}到吊装位${row.loadRack}`;
|
| | |
| | | return `从吊装位${row.loadRack}到仓位${row.shelfRack}`;
|
| | | }
|
| | | };
|
| | |
|
| | | const getTagType2 = (status) => {
|
| | | switch (status) {
|
| | | case "completed":
|
| | |
| | | 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(() => {
|
| | | initializeWebSocket(socketUrl, handleMessage);
|
| | | socket = initializeWebSocket(socketUrl, handleMessage);
|
| | | });
|
| | | onUnmounted(() => {
|
| | | if (socket) {
|
| | | closeWebSocket(socket);
|
| | | }
|
| | | });
|
| | | onBeforeUnmount(() => {
|
| | | console.log("关闭了");
|
| | | closeWebSocket();
|
| | | });
|
| | |
|
| | | const tasktableData = ref([]);
|
| | |
|
| | | const dialogVisible = ref(false);
|
| | | const formData = ref({
|
| | | number: "",
|
| | |
| | | pieces: "",
|
| | | loadRack: 1,
|
| | | });
|
| | |
|
| | | const formData2 = ref({
|
| | | dzw: "",
|
| | | });
|
| | |
|
| | | const handleDelete = (row) => {
|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
| | | ElMessageBox.confirm("确定要执行删除操作吗?", "确认删除", {
|
| | |
| | | })
|
| | | .then(() => {
|
| | | // 点击确认按钮的回调,执行出库操作
|
| | |
|
| | | const intNumber = {
|
| | | id: parseInt(row.number),
|
| | | };
|
| | | deleteRawUsage(intNumber);
|
| | |
|
| | | console.log("执行删除操作");
|
| | | })
|
| | | .catch(() => {
|
| | |
| | | console.log("取消删除操作");
|
| | | });
|
| | | };
|
| | |
|
| | | const handleCheckout = (row) => {
|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
| | | ElMessageBox.confirm("确定要执行出库操作吗?", "确认出库", {
|
| | |
| | | console.log("取消出库操作");
|
| | | });
|
| | | };
|
| | |
|
| | | const handleInbound = () => {
|
| | | // 打开入库对话框
|
| | | dialogVisible.value = true;
|
| | | };
|
| | |
|
| | | const storage = () => {
|
| | | // 打开入库对话框
|
| | | Hidden.value = true;
|
| | | };
|
| | |
|
| | | const handleCloseDialog = () => {
|
| | | // 关闭对话框时重置表单数据
|
| | | formData.value = {
|
| | |
| | | };
|
| | | dialogVisible.value = false;
|
| | | };
|
| | |
|
| | | const handleConfirmInbound = () => {
|
| | | inStorage(formData.value);
|
| | | // 处理确认入库逻辑,可以在这里提交表单或者执行其他操作
|
| | |
| | | // 关闭对话框
|
| | | dialogVisible.value = false;
|
| | | };
|
| | |
|
| | | const dialogVisible3 = ref(false);
|
| | | const colors = ref([
|
| | | { "0_glass_id": "Red" },
|
| | |
| | | { "0_glass_id": "Blue" },
|
| | | // Add more colors as needed
|
| | | ]);
|
| | |
|
| | | const formData3 = ref({
|
| | | selectedColor: "",
|
| | | wid: "",
|
| | |
| | | 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: "",
|
| | |
| | | });
|
| | | const editFormRef = ref(null);
|
| | | let currentRow = ref(null);
|
| | |
|
| | | // 处理行点击事件
|
| | | const edithandleRowClick = (row) => {
|
| | | currentRow.value = row;
|
| | |
| | | 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.rawThickness = editForm.value.rawThickness;
|
| | | // 调用更新函数,并处理其返回的 Promise
|
| | | updateRawUsage(editForm.value);
|
| | |
|
| | | // 关闭对话框
|
| | | editdialogVisible.value = false;
|
| | | };
|
| | |
|
| | | // 对话框关闭时重置编辑表单和当前行数据
|
| | | const edithandleDialogClose = () => {
|
| | | editForm.value.pieces = "";
|
| | |
| | | editForm.value.rawWidth = "";
|
| | | editForm.value.rawHeight = "";
|
| | | editForm.value.rawThickness = "";
|
| | |
|
| | | currentRow.value = null;
|
| | | };
|
| | |
|
| | | const handleRestart = (row) => {
|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
| | | ElMessageBox.confirm("确定要执行重新开始操作吗?", "确认重新开始", {
|
| | |
| | | Type:"重新开始"
|
| | | }
|
| | | taskUpdate(taskdata);
|
| | | |
| | |
|
| | | console.log("执行重新开始操作", row);
|
| | | })
|
| | | .catch(() => {
|
| | |
| | | console.log("取消重新开始操作");
|
| | | });
|
| | | };
|
| | |
|
| | | const handleDeletetask = (row) => {
|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
| | | ElMessageBox.confirm("确定要执行删除任务操作吗?", "确认删除任务", {
|
| | |
| | | console.log("取消删除任务操作");
|
| | | });
|
| | | };
|
| | |
|
| | | const handleComplete = (row) => {
|
| | | // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
| | | ElMessageBox.confirm("确定要执行任务完成操作吗?", "确认任务完成", {
|
| | |
| | | type: "warning",
|
| | | })
|
| | | .then(() => {
|
| | |
|
| | | const taskdata={
|
| | | id:row.id,
|
| | | Type:"完成"
|
| | |
| | | });
|
| | | };
|
| | | </script>
|
| | |
|
| | | <style scoped>
|
| | | #dt {
|
| | | display: block;
|
| | |
| | | text-align: center;
|
| | | margin-top: -15px;
|
| | | }
|
| | |
|
| | | .img-ypcc {
|
| | | margin-left: 80px;
|
| | | background-image: url("../../assets/ypcc.png");
|
| | |
| | | position: relative;
|
| | | margin-top: 0px;
|
| | | }
|
| | |
|
| | | .img-car1 {
|
| | | background-image: url("../../assets/ypccche.png");
|
| | | position: absolute;
|
| | |
| | | overflow: hidden;
|
| | | position: relative;
|
| | | }
|
| | |
|
| | | .custom-dialog {
|
| | | max-height: 90vh; /* 最大高度为视口高度的90% */
|
| | | overflow-y: auto; /* 对话框内部出现垂直滚动条 */
|
| | | }
|
| | | </style>
|
| | | </style> |