From 00c4dfc5ac687c93e0b7abafc33abb693b38edd6 Mon Sep 17 00:00:00 2001 From: 严智鑫 <test> Date: 星期一, 05 八月 2024 09:14:33 +0800 Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes --- UI-Project/src/views/Caching/cachingbefore.vue | 292 +++++++++++++++++++++++----------------------------------- 1 files changed, 115 insertions(+), 177 deletions(-) diff --git a/UI-Project/src/views/Caching/cachingbefore.vue b/UI-Project/src/views/Caching/cachingbefore.vue index 5cf4a38..e4c67f3 100644 --- a/UI-Project/src/views/Caching/cachingbefore.vue +++ b/UI-Project/src/views/Caching/cachingbefore.vue @@ -4,224 +4,160 @@ 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,onUnmounted} from "vue"; +import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; // import { ref } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' // import LanguageMixin from './lang/LanguageMixin' +import { useI18n } from 'vue-i18n' + const { t } = useI18n() + let language = ref(localStorage.getItem('lang') || 'zh') const tableData = ref([]) const slot = ref('') - - -request.post("/cacheGlass/edgStorageCage/selectEdgStorageCage").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) - - } - }); - -// const getTableRow = (row,type) =>{ -// switch (type) { -// case 'delete':{ -// let flowData = ref({ -// id:0, -// slot:row.slot -// }) -// request.post("/cacheGlass/edgStorageCage/edgStorageCageGlass",flowData.value).then((res) => { -// if(res.code==200){ -// ElMessage.success(t('searchOrder.msgDeleteSuccess')) -// router.push({path:'/main/delivery/selectDelivery',query:{random:Math.random()}}) -// }else{ -// ElMessage.warning(res.msg) -// router.push("/login") -// } -// }) - -// return -// } -// } -// } -// let slots = ref({ -// id:0, -// slot: slot.value -// }) -const open = async(row) => { +const adjustedRects = ref([]); +onMounted(async () => { try { - const confirmResult = await ElMessageBox.confirm( - '鏄惁鍒犻櫎璇ユ潯淇℃伅?', - '鎻愮ず', - { - confirmButtonText: '鏄�', - cancelButtonText: '鍙栨秷', - type: 'warning', + const response = await request.post('/cacheGlass/edgStorageCage/selectEdgStorageCage'); // 鏇挎崲涓轰綘鐨凙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 toggleEnableState = async (row) => { + const newState = row.enable_state === 1 ? 0 : 1; + // 鍙戦�佽姹傚埌鍚庣鏇存柊鐘舵�侊紙杩欓噷鐪佺暐浜嗗疄闄呯殑璇锋眰閫昏緫锛� + const response = await request.post('/cacheGlass/edgStorageCage/updateEdgStorageCage', { id: row.id, enableState: newState }); + if (response.code === 200) { + ElMessage.success(response.message); + } else { + ElMessage.error(response.message); } + row.enable_state = newState; +}; +const open = async(row) => { + try { + const confirmResult = await ElMessageBox.confirm( + t('sorter.information'), + t('sorter.prompt'), + { + confirmButtonText: t('sorter.yes'), + cancelButtonText: t('sorter.cancel'), + type: 'warning', + } ); if (confirmResult === 'confirm') { - // 鐢ㄦ埛鐐瑰嚮浜嗏�滄槸鈥濓紝鐜板湪璋冪敤鍒犻櫎鎺ュ彛 - const deleteResponse = await request.post("/cacheGlass/edgStorageCage/edgStorageCageGlass", { - id:0, - slot: row.slot + var url="/cacheGlass/edgStorageCage/edgStorageCageGlass?edgStorageCageId="+row.id; + console.log(url); + const response = await request.post(url, { + esdId: row.esdId }) - if (response.code == 200) { - // 鍒犻櫎鎴愬姛锛屾偍鍙互鏍规嵁闇�瑕佸鐞嗘垚鍔熺殑鎯呭喌 - alert('鍒犻櫎鎴愬姛锛�'); + if (response.code === 200) { + ElMessage.success(response.message); } else { - // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 - alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); + ElMessage.error(response.msg); } } } catch (error) { - // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 console.error('鍙戠敓閿欒:', error); } -}; -// const open = () => { -// ElMessageBox.confirm( -// '鏄惁鍒犻櫎璇ユ潯淇℃伅?', -// '鎻愮ず', -// { -// confirmButtonText: '鏄�', -// cancelButtonText: '鍙栨秷', -// type: 'warning', -// } -// ) -// .then(() => { -// ElMessage({ -// type: 'success', -// message: '鍒犻櫎鎴愬姛锛�', -// }) -// }) -// .catch(() => { -// ElMessage({ -// type: 'info', -// message: '鍒犻櫎澶辫触', -// }) -// }) -// } -// 鍒犻櫎 -// const handleBindRacka = (row) => { -// adda.value = true; // 鎵撳紑缁戝畾鏋跺瓙瀵硅瘽妗� -// }; -// // 鍒犻櫎 -// const handleConfirma = async () => { -// try { -// window.localStorage.setItem('slot', res.data.slot) -// let slot = window.localStorage.getItem('slot') -// const response = await request.post('/cacheGlass/edgStorageCage/edgStorageCageGlass', { -// slot: slot.value, -// id: 0 -// }); - -// if (response.code == 200) { -// // 缁戝畾鎴愬姛锛屽鐞嗛�昏緫 -// ElMessage.success(response.message); -// adda.value = false; -// } else { -// // 璇锋眰澶辫触锛屾樉绀洪敊璇秷鎭� -// ElMessage.error(response.msg); -// } -// } catch (error) { -// // 澶勭悊閿欒 -// console.error(error); -// } -// }; +}; +let socket = null; +const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`; +// 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺 +const handleMessage = (data) => { + // 鏇存柊 tableData 鐨勬暟鎹� + tableData.value = data.EdgStorageCageinfos[0] + // adjustedRects.value = data.EdgStorageCageinfos[0] + adjustedRects.value = data.EdgStorageCageinfos[0].map(rect => ({ + ...rect, // 澶嶅埗鍘熷瀵硅薄鐨勫叾浠栧睘鎬� + width: rect.width * 0.5 , + id: rect.id * 10, + })); -const gridOptions = reactive({ - border: "full",//琛ㄦ牸鍔犺竟妗� - keepSource: true,//淇濇寔婧愭暟鎹� - align: 'center',//鏂囧瓧灞呬腑 - stripe:true,//鏂戦┈绾� - rowConfig: {isCurrent: true, isHover: true,height: 50},//榧犳爣绉诲姩鎴栭�夋嫨楂樹寒 - id: 'OrderList', - showFooter: true,//鏄剧ず鑴� - printConfig: {}, - importConfig: {}, - exportConfig: {}, - scrollY:{ enabled: true },//寮�鍚櫄鎷熸粴鍔� - showOverflow:true, - columnConfig: { - resizable: true, - useKey: true - }, - filterConfig: { //绛涢�夐厤缃」 - remote: true - }, - customConfig: { - storage: true - }, - editConfig: { - trigger: 'click', - mode: 'row', - showStatus: true - }, - data: [ - { - 'id': '1', - 'long': '5', - 'wide': '1005', - 'thick': '183.6', +}; +// 鍒濆鍖� WebSocket锛屽苟浼犻�掓秷鎭鐞嗗嚱鏁� +onMounted(() => { + socket = initializeWebSocket(socketUrl, handleMessage); +}); + onUnmounted(() => { + if (socket) { + closeWebSocket(socket); } - ] - -}) - - - + }); +onBeforeUnmount(() => { + console.log("鍏抽棴浜�") + closeWebSocket(); +}); </script> <template> - <div> + <div style="height: 500px;"> <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> <el-table height="240" ref="table" @selection-change="handleSelectionChange" :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> - <el-table-column prop="slot" align="center" label="鏍呮牸鍙�" min-width="80" /> - <el-table-column prop="glass_id" align="center" label="鐜荤拑缂栧彿" min-width="80" /> - <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 prop="slot" align="center" :label="$t('sorter.gridnumber')" min-width="80" /> + <el-table-column prop="glass_id" align="center" :label="$t('sorter.glassnumber')" min-width="80" /> + <el-table-column prop="width" align="center" :label="$t('sorter.width')" min-width="120" /> + <el-table-column prop="height" align="center" :label="$t('sorter.height')" min-width="120" /> <el-table-column align="center" - label="鍚敤鐘舵��" + :label="$t('sorter.startstatus')" 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 ? $t('sorter.start') : $t('sorter.disable') }} + </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"> + <el-table-column fixed="right" :label="$t('sorter.operate')" align="center" width="200"> <template #default="scope"> <!-- <el-button size="mini" type="text" plain @click="handleBindRacka(scope.row)">鎶ョ己</el-button> --> - <el-button size="mini" type="text" plain @click="open(scope.row)">鎶ョ己</el-button> + <el-button size="mini" type="text" plain @click="open(scope.row)">{{ $t('sorter.deficiencieste') }}</el-button> </template> </el-table-column> </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 class="awatch"> + <img src="../../assets/woshihuancun.png" alt="" style="width: 70%;height: 90%;margin-left: 200px;margin-top: 20px;position: relative;"> + <div style="position: relative; 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 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> + </div> +</div> </div> </template> @@ -242,8 +178,10 @@ background-color: #337ecc; margin-left: 28%; } -#awatch{ +.awatch{ height: 460px; - /* margin-top: -60px; */ + width: 1500px; + max-width: 100%; } -</style> \ No newline at end of file + +</style> -- Gitblit v1.8.0