| UI-Project/src/router/index.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/Caching/cachingbefore.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/Caching/cachingun.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/Identify/identifwutwo.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
UI-Project/src/router/index.js
@@ -73,6 +73,11 @@ name: 'identifwu', component: () => import('../views/Identify/identifwu.vue') }, { path: '/Identify/identifwutwo', name: 'identifwutwo', component: () => import('../views/Identify/identifwutwo.vue') }, ] }, /*----------- 卧式缓存 ----------------*/ UI-Project/src/views/Caching/cachingbefore.vue
@@ -210,40 +210,24 @@ label: t('sorter.straighttasks'), } ] function getStatusTypea(taskRunning) { switch (taskRunning) { case 0: return 'info'; function getStatusTypea(taskType) { switch (taskType) { case 1: return 'success'; return 'info'; case 2: return 'success'; case 3: return 'success'; case 4: return 'success'; case 5: return 'danger'; case 6: return 'info'; } } function getStatusTexta(taskRunning) { switch (taskRunning) { case 0: return t('sorter.emptymissions'); function getStatusTexta(taskType) { switch (taskType) { case 1: return t('sorter.advancetask'); case 2: return t('sorter.outputtasks'); case 3: return t('sorter.straighttasks'); case 4: return t('searchOrder.infilm'); case 5: return t('sorter.endingtask'); case 6: return t('sorter.another'); } } function getStatusTypeb(taskState) { @@ -252,34 +236,14 @@ return 'info'; case 1: return 'success'; case 2: return 'success'; case 3: return 'success'; case 4: return 'success'; case 5: return 'danger'; case 6: return 'info'; } } function getStatusTextb(taskState) { switch (taskState) { case 0: return t('sorter.emptymissions'); return t('searchOrder.empty'); case 1: return t('sorter.advancetask'); case 2: return t('sorter.outputtasks'); case 3: return t('sorter.straighttasks'); case 4: return t('searchOrder.infilm'); case 5: return t('sorter.endingtask'); case 6: return t('sorter.another'); return t('searchOrder.endtask'); } } // 格式化时间戳为年月日时间字符串的函数 @@ -359,35 +323,10 @@ <el-table height="90" ref="table" @selection-change="handleSelectionChange" :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" /> <el-table-column prop="glassIdIn" align="center" :label="$t('searchOrder.intoglassid')" min-width="80" /> <el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" /> <el-table-column prop="currentCell" align="center" :label="$t('sorter.layernow')" min-width="80" /> <el-table-column prop="startCell" align="center" :label="$t('processCard.layer')" min-width="120" /> <el-table-column align="center" :label="$t('sorter.place')" min-width="80" prop="inPlace" > <template #default="scope"> <el-tag :type="scope.row.inPlace === 1 ? 'success' : 'warning'" > {{ scope.row.inPlace === 1 ? $t('sorter.inPlace') : $t('sorter.ninPlace') }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('sorter.taskRunning')" min-width="80" prop="taskRunning" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskRunning)"> {{ getStatusTexta(scope.row.taskRunning) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.taskstatus')" @@ -397,6 +336,18 @@ <template #default="scope"> <el-tag :type="getStatusTypeb(scope.row.taskState)"> {{ getStatusTextb(scope.row.taskState) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.enabletype')" min-width="80" prop="taskType" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskType)"> {{ getStatusTexta(scope.row.taskType) }} </el-tag> </template> </el-table-column> @@ -458,35 +409,10 @@ }}</el-button> </div> <el-table ref="table" style="margin-top: 20px;height: 650px;" :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table-column prop="glassIdIn" align="center" :label="$t('searchOrder.intoglassid')" min-width="80" /> <el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" /> <el-table-column prop="currentCell" align="center" :label="$t('sorter.layernow')" min-width="80" /> <el-table-column prop="startCell" align="center" :label="$t('processCard.layer')" min-width="120" /> <el-table-column align="center" :label="$t('sorter.place')" min-width="80" prop="inPlace" > <template #default="scope"> <el-tag :type="scope.row.inPlace === 1 ? 'success' : 'warning'" > {{ scope.row.inPlace === 1 ? $t('sorter.inPlace') : $t('sorter.ninPlace') }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('sorter.taskRunning')" min-width="80" prop="taskRunning" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskRunning)"> {{ getStatusTexta(scope.row.taskRunning) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.taskstatus')" @@ -499,6 +425,18 @@ </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.enabletype')" min-width="80" prop="taskType" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskType)"> {{ getStatusTexta(scope.row.taskType) }} </el-tag> </template> </el-table-column> <el-table-column prop="createTime" align="center" :label="$t('film.createtime')" min-width="120" /> <el-table-column prop="updateTime" align="center" :label="$t('sorter.updateTime')" min-width="120" /> </el-table> UI-Project/src/views/Caching/cachingun.vue
@@ -210,40 +210,24 @@ label: t('sorter.straighttasks'), } ] function getStatusTypea(taskRunning) { switch (taskRunning) { case 0: return 'info'; function getStatusTypea(taskType) { switch (taskType) { case 1: return 'success'; return 'info'; case 2: return 'success'; case 3: return 'success'; case 4: return 'success'; case 5: return 'danger'; case 6: return 'info'; } } function getStatusTexta(taskRunning) { switch (taskRunning) { case 0: return t('sorter.emptymissions'); function getStatusTexta(taskType) { switch (taskType) { case 1: return t('sorter.advancetask'); case 2: return t('sorter.outputtasks'); case 3: return t('sorter.straighttasks'); case 4: return t('searchOrder.infilm'); case 5: return t('sorter.endingtask'); case 6: return t('sorter.another'); } } function getStatusTypeb(taskState) { @@ -252,34 +236,14 @@ return 'info'; case 1: return 'success'; case 2: return 'success'; case 3: return 'success'; case 4: return 'success'; case 5: return 'danger'; case 6: return 'info'; } } function getStatusTextb(taskState) { switch (taskState) { case 0: return t('sorter.emptymissions'); return t('searchOrder.empty'); case 1: return t('sorter.advancetask'); case 2: return t('sorter.outputtasks'); case 3: return t('sorter.straighttasks'); case 4: return t('searchOrder.infilm'); case 5: return t('sorter.endingtask'); case 6: return t('sorter.another'); return t('searchOrder.endtask'); } } // 格式化时间戳为年月日时间字符串的函数 @@ -359,35 +323,10 @@ <el-table height="90" ref="table" @selection-change="handleSelectionChange" :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" /> <el-table-column prop="glassIdIn" align="center" :label="$t('searchOrder.intoglassid')" min-width="80" /> <el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" /> <el-table-column prop="currentCell" align="center" :label="$t('sorter.layernow')" min-width="80" /> <el-table-column prop="startCell" align="center" :label="$t('processCard.layer')" min-width="120" /> <el-table-column align="center" :label="$t('sorter.place')" min-width="80" prop="inPlace" > <template #default="scope"> <el-tag :type="scope.row.inPlace === 1 ? 'success' : 'warning'" > {{ scope.row.inPlace === 1 ? $t('sorter.inPlace') : $t('sorter.ninPlace') }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('sorter.taskRunning')" min-width="80" prop="taskRunning" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskRunning)"> {{ getStatusTexta(scope.row.taskRunning) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.taskstatus')" @@ -397,6 +336,18 @@ <template #default="scope"> <el-tag :type="getStatusTypeb(scope.row.taskState)"> {{ getStatusTextb(scope.row.taskState) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.enabletype')" min-width="80" prop="taskType" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskType)"> {{ getStatusTexta(scope.row.taskType) }} </el-tag> </template> </el-table-column> @@ -458,35 +409,10 @@ }}</el-button> </div> <el-table ref="table" style="margin-top: 20px;height: 650px;" :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table-column prop="glassIdIn" align="center" :label="$t('searchOrder.intoglassid')" min-width="80" /> <el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" /> <el-table-column prop="currentCell" align="center" :label="$t('sorter.layernow')" min-width="80" /> <el-table-column prop="startCell" align="center" :label="$t('processCard.layer')" min-width="120" /> <el-table-column align="center" :label="$t('sorter.place')" min-width="80" prop="inPlace" > <template #default="scope"> <el-tag :type="scope.row.inPlace === 1 ? 'success' : 'warning'" > {{ scope.row.inPlace === 1 ? $t('sorter.inPlace') : $t('sorter.ninPlace') }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('sorter.taskRunning')" min-width="80" prop="taskRunning" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskRunning)"> {{ getStatusTexta(scope.row.taskRunning) }} </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.taskstatus')" @@ -499,6 +425,18 @@ </el-tag> </template> </el-table-column> <el-table-column align="center" :label="$t('film.enabletype')" min-width="80" prop="taskType" > <template #default="scope"> <el-tag :type="getStatusTypea(scope.row.taskType)"> {{ getStatusTexta(scope.row.taskType) }} </el-tag> </template> </el-table-column> <el-table-column prop="createTime" align="center" :label="$t('film.createtime')" min-width="120" /> <el-table-column prop="updateTime" align="center" :label="$t('sorter.updateTime')" min-width="120" /> </el-table> UI-Project/src/views/Identify/identifwutwo.vue
New file @@ -0,0 +1,330 @@ <template> <div style="height: 500px;"> <div style="display: flex;"> <el-input v-model="inputValue" style="margin-left: 15px;margin-top: 10px;width: 240px" placeholder="请输入工程号" @blur="handleBlur"/> <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :size="size" :disabled="disabled" layout="prev, pager, next, jumper" :total="totalPages" @current-change="handleCurrentChange" /> </div> <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading"> <el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;"> <div style="position: relative;"> <div v-for="(rect, index) in adjustedRects" :key="rect.glass_id" class="rect" @click="showDialog(rect.glass_id)" :style="{ position: 'absolute', top: `${rect.y_axis}px`, left: `${rect.x_axis}px`, width: `${rect.width}px`, height: `${rect.height}px`, backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor(rect.glass_state) }" > <!-- 箭头 --> <!-- <div id="arrow"></div> <div id="line"></div> --> <div class="centered-text"> <div>{{ rect.glass_id }}</div> <div>{{ rect.widtha }}*{{ rect.heighta }}</div> </div> </div> </div> </el-scrollbar> <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose"> <el-button :disabled="currentGlassRect?.glass_state === 8 || currentGlassRect?.glass_state === 9" type="warning" plain :icon="Delete" @click="handleDamage(currentGlassId)" style="width: 140px;margin-left: 10px;"> {{ $t('order.dilapidation') }} </el-button> <el-button :disabled="currentGlassRect?.glass_state === 9 || currentGlassRect?.glass_state === 8" type="danger" plain @click="handleManualTake(currentGlassId)" style="width: 140px;margin-top: 10px;"> <el-icon class="el-icon--right"> <Upload/> </el-icon> {{ $t('order.takeaway') }} </el-button> </el-dialog> </el-card> </div> </template> <script setup lang="ts"> import {ElMessage} from 'element-plus' import {computed, onMounted, onUnmounted, ref} from 'vue'; import request from "@/utils/request" import {host, WebSocketHost} from '@/utils/constants' import {useI18n} from 'vue-i18n' const {t} = useI18n() let language = ref(localStorage.getItem('lang') || 'zh') const blind = ref(false) const olWidth = ref(); const olHeight = ref(); const glass_id = ref(); const inputValue = ref(''); const currentGlassId = ref(null); // 存储当前点击矩形的 glass_id const currentstate = ref(null); const adjustedRects = ref([]); const raw = ref([]); let webSocket: WebSocket | null = null; const totalPages = ref(0); const pageSize = ref(1); const currentPage = ref(''); const disabled = false; const size = 'small'; const rawData = ref([]); // const handleBind = (row) => { // blind.value = true; // 打开绑定架子对话框 // }; // 显示对话框并设置当前 glass_id const currentGlassRect = computed(() => { return adjustedRects.value.find(rect => rect.glass_id === currentGlassId.value); }); function showDialog(glassId: number) { currentGlassId.value = glassId; blind.value = true; adjustedRects.value = adjustedRects.value.map(rect => rect.glass_id === glassId ? {...rect, isActive: true} : rect ); } const handleDialogClose = () => { adjustedRects.value = adjustedRects.value.map(rect => ({ ...rect, isActive: false })); } // 破损 const handleDamage = async () => { try { const response = await request.post('/cacheGlass/taskCache/identControls', { glassId: currentGlassId.value, state: 8, line: 1001, workingProcedure: '切割', }) if (response.code == 200) { ElMessage.success(response.message); // window.location.reload() blind.value = false; updateRectStatus(currentGlassId.value, 8); findEngineering() } else { // 请求失败，显示错误消息 ElMessage.error(response.msg); } } catch (error) { // 处理错误 console.error(error); } } // 人工拿走 const handleManualTake = async () => { try { // var url="/cacheGlass/taskCache/identControls?identId="+currentGlassId.value+'&controlsId='+200; // console.log(url); // const response = await request.post(url) const response = await request.post('/cacheGlass/taskCache/identControls', { glassId: currentGlassId.value, state: 9, line: 1001, workingProcedure: '切割', }) if (response.code == 200) { // 绑定成功，处理逻辑 ElMessage.success(response.message); // window.location.reload() blind.value = false; updateRectStatus(currentGlassId.value, 9); findEngineering() } else { // 请求失败，显示错误消息 ElMessage.error(response.msg); } } catch (error) { // 处理错误 console.error(error); } } const handleBlur = async () => { if (inputValue.value) { var url = "/cacheGlass/taskCache/cutTerritory?current=" + inputValue.value; const response = await request.post(url) if (response.code === 200) { const rawRects = response.data[0]; rawData.value = response.data; totalPages.value = rawData.value.length; const scaleFactor = 1621.78 / 6000; const scaleFactory = 750 / 3300; adjustedRects.value = rawRects.map(rect => ({ ...rect, x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor, y_axis: rect.y_axis * scaleFactory, width: rect.width * scaleFactor, widtha: rect.width, heighta: rect.height, height: rect.height * scaleFactory, glass_state: rect.glass_state })); // 如果WebSocket已连接，则关闭 if (webSocket) { webSocket.close(); webSocket = null; } currentPage.value = 1; } } else { connectWebSocket(); } }; const findEngineering = async () => { if (inputValue.value) { var url = "/cacheGlass/taskCache/cutTerritory?current=" + inputValue.value; const response = await request.post(url) if (response.code === 200) { rawData.value = response.data; } } else { } }; const handleCurrentChange = (val: number) => { currentPage.value = val; // window.localStorage.setItem('pagenumber', currentPage.value). const page = currentPage.value - 1 const scaleFactor = 1621.78 / 6000; const scaleFactory = 750 / 3300; adjustedRects.value = rawData.value[page]?.map(rect => ({ // adjustedRects.value = rawRects.map(rect => ({ ...rect, x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor, y_axis: rect.y_axis * scaleFactory, width: rect.width * scaleFactor, widtha: rect.width, heighta: rect.height, height: rect.height * scaleFactory, glass_state: rect.glass_state })); }; function getRectColor(state: number): string { switch (state) { case 0: return '#e1f3d8'; case 100: return '#c8c9cc'; case 110: return '#b3e19d'; case 120: return '#f89898'; case 8: return '#911005'; case 9: return '#f3d19e'; } } // 更新矩形状态 function updateRectStatus(glassId: string, status: number) { adjustedRects.value.forEach(rect => { if (rect.glass_id === glassId) { rect.glass_state = status; // 更新矩形的状态 } }); } const connectWebSocket = () => { if (!webSocket) { const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`; webSocket = new WebSocket(socketUrl); webSocket.onmessage = (event) => { const data = JSON.parse(event.data); const scaleFactor = 1621.78 / 6000; const scaleFactory = 750 / 3300; if (data.currentCutTerritory && data.currentCutTerritory.length > 0) { const newRects = data.currentCutTerritory[0].map(rect => { const existingRect = adjustedRects.value.find(r => r.glass_id === rect.glass_id); if (existingRect) { return { ...existingRect, x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor, y_axis: rect.y_axis * scaleFactory, width: rect.width * scaleFactor, height: rect.height * scaleFactory, widtha: rect.width, heighta: rect.height, glass_state: rect.glass_state, // 保持 isActive 状态不变 }; } else { // 如果不存在，则添加新矩形，默认 isActive 为 false return { ...rect, x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor, y_axis: rect.y_axis * scaleFactory, width: rect.width * scaleFactor, height: rect.height * scaleFactory, widtha: rect.width, heighta: rect.height, glass_state: rect.glass_state, isActive: false, glass_id: rect.glass_id, }; } }); adjustedRects.value = newRects; } else if (data.currentCutTerritory == '') { adjustedRects.value = []; } }; } }; onMounted(() => { // 初始时，如果输入框为空，则连接WebSocket if (!inputValue.value) { connectWebSocket(); } }); onUnmounted(() => { if (webSocket) { webSocket.close(); } }); </script> <style scoped> .rect { border: 1px solid black; /* 设置矩形的边框 */ /* background-color: lightblue; 设置矩形的背景色 */ } .centered-text { /* 设置文字居中样式 */ /* display: flex; */ justify-content: center; align-items: center; height: 100%; /* 确保div占据整个矩形的高度 */ font-size: small; } #rect { position: relative; /* 确保箭头可以相对于矩形定位 */ /* 其他样式 */ } #arrow { position: absolute; top: 70%; /* 箭头位于矩形中间 */ left: 200px; /* 箭头在矩形左侧一些距离 */ transform: translateY(-50%); /* 垂直居中 */ width: 0; height: 0; border-top: 10px solid transparent; /* 上边框 */ border-bottom: 10px solid transparent; /* 下边框 */ border-right: 20px solid #911005; /* 右边框，形成箭头 */ /* 根据需要调整边框大小和颜色 */ } #line { position: absolute; top: 70%; /* 直线位于矩形中间 */ left: 210px; /* 直线在箭头右侧一些距离 */ transform: translateY(-50%); /* 垂直居中 */ height: 2px; /* 直线的高度 */ width: 240px; /* 直线的长度，根据需要调整 */ background-color: #911005; /* 直线的颜色 */ } </style>
