From 06fd17d2a1c0155e6432b2bce7e644a119fc77b5 Mon Sep 17 00:00:00 2001 From: wuyouming666 <2265557248@qq.com> Date: 星期三, 05 六月 2024 08:25:03 +0800 Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes --- UI-Project/src/views/Caching/cachingun.vue | 140 ++++++++++++++++++++++++++++------------------ 1 files changed, 86 insertions(+), 54 deletions(-) diff --git a/UI-Project/src/views/Caching/cachingun.vue b/UI-Project/src/views/Caching/cachingun.vue index a291137..d454956 100644 --- a/UI-Project/src/views/Caching/cachingun.vue +++ b/UI-Project/src/views/Caching/cachingun.vue @@ -1,35 +1,42 @@ <script setup> - - - -import { initializeWebSocket } from '@/utils/WebSocketService'; - import { WebSocketHost } from '@/utils/constants'; +import {Search} from "@element-plus/icons-vue"; +import {reactive} from "vue"; +import {useRouter} from "vue-router" +const router = useRouter() +const adda = ref(false) +import { WebSocketHost ,host} from '@/utils/constants' import request from "@/utils/request" -import { ref, onMounted } from "vue"; +import { ref, onMounted , onBeforeUnmount} from "vue"; +import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; // import { ref } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' // import LanguageMixin from './lang/LanguageMixin' - + const tableData = ref([]) const slot = ref('') +const adjustedRects = ref([]); -const updatetable = async () => { - - await request.get("/unLoadGlass/downStorage/selectStorageCage").then((res) => { - if (res.code == 200) { - - console.log(res.data); - tableData.value = res.data - console.log(res.data[0].slot); - } else { - ElMessage.warning(res.msg) - - } - }); - - - } - +onMounted(async () => { + try { + const response = await request.get('/unLoadGlass/downStorage/selectStorageCage'); // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (response.code === 200) { + const rawRects = response.data; // 璁剧疆鐭╁舰鏁版嵁 + tableData.value = response.data + console.log(response.data); + adjustedRects.value = rawRects.map(rect => ({ + ...rect, // 澶嶅埗鍘熷瀵硅薄鐨勫叾浠栧睘鎬� + width: rect.width * 0.5 , + id: rect.id * 10, + })); + console.log(adjustedRects.value); + } else { + ElMessage.warning(res.msg) + } + } catch (error) { + // console.error('Error fetching rects :', error); + } +}); + const open = async(row) => { try { const confirmResult = await ElMessageBox.confirm( @@ -43,7 +50,7 @@ ); if (confirmResult === 'confirm') { // 鐢ㄦ埛鐐瑰嚮浜嗏�滄槸鈥濓紝鐜板湪璋冪敤鍒犻櫎鎺ュ彛 - var url="/unLoadGlass/downStorage/deleteDownStorageCage?downStorageCageId="+row.id; + var url="/cacheGlass/edgStorageCage/edgStorageCageGlass?edgStorageCageId="+row.id; console.log(url); const response = await request.post(url, { esdId: row.esdId @@ -61,26 +68,44 @@ console.error('鍙戠敓閿欒:', error); } }; - -const socketUrl = `ws://${WebSocketHost}:88/api/unLoadGlass/api/talk/downcache`; +const toggleEnableState = async (row) => { + const newState = row.enable_state === 1 ? 0 : 1; + // 鍙戦�佽姹傚埌鍚庣鏇存柊鐘舵�侊紙杩欓噷鐪佺暐浜嗗疄闄呯殑璇锋眰閫昏緫锛� + const response = await request.post('/unLoadGlass/downStorage/updateDownStorageCage', { id: row.id, enablestate: newState }); + if (response.code === 200) { + ElMessage.success(response.message); + } else { + ElMessage.error(response.message); + } + row.enable_state = newState; +}; +const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass`; // 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺 const handleMessage = (data) => { - // 鏇存柊 tableData 鐨勬暟鎹� - // tableData.splice(0, tableData.length, ...data.params2[0]); - tableData.value = data.params2[0] - console.log("鏇存柊鍚庢暟鎹�", data.params2[0]); + tableData.splice(0, tableData.length, ...data.params[0]); + // tableData.value = data.params[0] + // adjustedRects.value = data.EdgStorageCageinfos[0] + adjustedRects.value = data.params[0].map(rect => ({ + ...rect, // 澶嶅埗鍘熷瀵硅薄鐨勫叾浠栧睘鎬� + width: rect.width * 0.5 , + id: rect.id * 10, + })); }; - - +// 鍒濆鍖� WebSocket锛屽苟浼犻�掓秷鎭鐞嗗嚱鏁� onMounted(() => { - updatetable() + // fetchFlowCardId(); + // fetchTableData(); // 鑾峰彇鏁版嵁 initializeWebSocket(socketUrl, handleMessage); }); +onBeforeUnmount(() => { + console.log("鍏抽棴浜�") + closeWebSocket(); +}); </script> - + <template> <div> <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> @@ -93,14 +118,22 @@ <el-table-column prop="width" align="center" label="瀹�" min-width="120" /> <el-table-column prop="height" align="center" label="楂�" min-width="120" /> <el-table-column - align="center" + align="center" label="鍚敤鐘舵��" min-width="80" prop="enable_state" > - <template #default="scope"> + <template #default="scope"> + <el-tag + :type="scope.row.enable_state === 1 ? 'success' : 'danger'" + @click="toggleEnableState(scope.row)" + > + {{ scope.row.enable_state === 1 ? '鍚敤' : '绂佺敤' }} + </el-tag> + </template> + <!-- <template #default="scope"> <el-tag type="success" >{{ scope.row.enable_state==1?"鍚敤":"鏈惎鐢�" }}</el-tag> - </template> + </template> --> </el-table-column> <el-table-column fixed="right" label="鎿嶄綔" align="center" width="200"> <template #default="scope"> @@ -111,27 +144,25 @@ </el-table> </div> </el-card> - <!-- <el-dialog v-model="adda" top="30vh" width="25%" title="鏄惁鍒犻櫎璇ユ潯淇℃伅?" > - <template #footer> - <div id="dialog-footer"> - <el-button type="primary" @click="handleConfirma"> - 纭 - </el-button> - <el-button @click="adda = false">鍙栨秷</el-button> - </div> - </template> - </el-dialog> --> </div> <div id="awatch"> - <img src="../../assets/woshihuancun.png" alt="" style="width: 60%;height: 90%;margin-left: 260px;margin-top: 20px;"> -<div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: -124px;margin-left: 480px;"></div> -<div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: -30px;margin-left: 850px;"></div> -<div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: 30px;margin-left: 695px;"></div> + <img src="../../assets/woshihuancun.png" alt="" style="width: 60%;height: 90%;margin-left: 260px;margin-top: 20px;position: relative;"> + <div style="position: absolute; width: 500px;height: 95px;margin-top: -165px;margin-left: 450px;"> + <div + v-for="(rect, index) in adjustedRects" + :key="rect" + :style="{ position: 'absolute', + top: `${rect.id}px`, left: `10px`, width: `${rect.width}px`, height: `5px`, + backgroundColor: '#409EFF' + }" + > + </div> + </div> </div> </template> - + <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{ @@ -149,6 +180,7 @@ } #awatch{ height: 460px; + width: 1500px; /* margin-top: -60px; */ } </style> \ No newline at end of file -- Gitblit v1.8.0