From 56fab901b298857ff4985b7429ef843c9a9d1471 Mon Sep 17 00:00:00 2001 From: wangfei <3597712270@qq.com> Date: 星期三, 28 八月 2024 16:20:02 +0800 Subject: [PATCH] 钢化模块打印功能,新增表格字段 --- UI-Project/src/views/Caching/cachingun.vue | 359 ++++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 240 insertions(+), 119 deletions(-) diff --git a/UI-Project/src/views/Caching/cachingun.vue b/UI-Project/src/views/Caching/cachingun.vue index 8aed036..8e0a488 100644 --- a/UI-Project/src/views/Caching/cachingun.vue +++ b/UI-Project/src/views/Caching/cachingun.vue @@ -1,144 +1,265 @@ -<script setup> -import {Search} from "@element-plus/icons-vue"; -import {reactive} from "vue"; -import {useRouter} from "vue-router" -const router = useRouter() -const adda = ref(false) - -import request from "@/utils/request" -import { ref, onMounted } from "vue"; -// import { ref } from 'vue' -import { ElMessage, ElMessageBox } from 'element-plus' -// import LanguageMixin from './lang/LanguageMixin' - -const tableData = ref([]) -const slot = ref('') -const adjustedRects = ref([]); - -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( - '鏄惁鎶ョ己璇ユ潯淇℃伅?', - '鎻愮ず', - { - confirmButtonText: '鏄�', - cancelButtonText: '鍙栨秷', - type: 'warning', - } - ); - if (confirmResult === 'confirm') { - // 鐢ㄦ埛鐐瑰嚮浜嗏�滄槸鈥濓紝鐜板湪璋冪敤鍒犻櫎鎺ュ彛 - var url="/cacheGlass/edgStorageCage/edgStorageCageGlass?edgStorageCageId="+row.id; - console.log(url); - const response = await request.post(url, { - esdId: row.esdId - }) - if (response.code === 200) { - ElMessage.success(response.message); - } else { - // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 - ElMessage.error(response.msg); - // alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); - } - } - } catch (error) { - // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 - console.error('鍙戠敓閿欒:', error); - } -}; -</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 - align="center" - label="鍚敤鐘舵��" - min-width="80" - prop="enable_state" - > - <template #default="scope"> - <el-tag type="success" >{{ scope.row.enable_state==1?"鍚敤":"鏈惎鐢�" }}</el-tag> - </template> - </el-table-column> - <el-table-column fixed="right" label="鎿嶄綔" align="center" width="200"> + <el-table height="340" ref="table" @selection-change="handleSelectionChange" :data="tableData" + :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"> + <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="$t('sorter.startstatus')" min-width="80" prop="enable_state"> <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-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> - </el-table-column> + <!-- <template #default="scope"> + <el-tag type="success" >{{ scope.row.enable_state==1?"鍚敤":"鏈惎鐢�" }}</el-tag> + </template> --> + </el-table-column> + <el-table-column fixed="right" :label="$t('sorter.operate')" align="center" width="200"> + <template #default="scope"> + <el-button size="mini" type="text" plain @click="open(scope.row)">{{ $t('sorter.deficiencieste') + }}</el-button> + <el-button size="mini" type="text" plain @click="opena(scope.row)">{{ $t('sorter.updown') }}</el-button> + </template> + </el-table-column> </el-table> </div> </el-card> - </div> - <div id="awatch"> - <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`, + <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> </div> </div> -<!-- <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> </template> - +<script setup> +import { Search, Lock, Avatar } 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, 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() +// import i18n from '@/i18n'; +const tableData = reactive([]); +const slot = ref('') +const adjustedRects = ref([]); + +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( + t('sorter.information'), + t('sorter.prompt'), + { + confirmButtonText: t('sorter.yes'), + cancelButtonText: t('sorter.cancel'), + type: 'warning', + } + ); + if (confirmResult === 'confirm') { + // 鐢ㄦ埛鐐瑰嚮浜嗏�滄槸鈥濓紝鐜板湪璋冪敤鍒犻櫎鎺ュ彛 + var url = "/unLoadGlass/downStorage/deleteDownStorageCage"; + console.log(url); + const response = await request.post(url, { + glassId: row.glass_id, + state: 9, + line: 1001, + workingProcedure: '纾ㄨ竟鍓嶇悊鐗囩', + }) + if (response.code === 200) { + ElMessage.success(response.message); + } else { + // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 + ElMessage.error(response.message); + // alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); + } + } + } + catch (error) { + // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 + console.error('鍙戠敓閿欒:', error); +} +}; +// 浜哄伐涓嬬墖 +const opena = async (row) => { + try { + const confirmResult = await ElMessageBox.confirm( + t('sorter.infor'), + t('sorter.prompt'), + { + confirmButtonText: t('sorter.yes'), + cancelButtonText: t('sorter.cancel'), + type: 'warning', + } + ); + if (confirmResult === 'confirm') { + const response = await request.post("/unLoadGlass/downGlassTask/generateOutGlassTask", { + glassId: row.glass_id + }) + if (response.code === 200) { + ElMessage.success(response.message); + } else { + // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 + ElMessage.error(response.message); + // alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); + } + } + } + catch (error) { + // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 + console.error('鍙戠敓閿欒:', error); + } +}; +// const open = async(row) => { +// const { t } = useI18n(); +// try { +// const confirmMessage = t('sorter.prompt'); // 浣跨敤 $t 缈昏瘧鏂囨湰 +// const confirmResult = await ElMessageBox.confirm( +// confirmMessage, +// t('sorter.information'), +// { +// confirmButtonText: t('sorter.yes'), +// cancelButtonText: t('sorter.cancel'), +// type: 'warning', +// } +// ); +// if (confirmResult === 'confirm') { +// // 鐢ㄦ埛鐐瑰嚮浜嗏�滄槸鈥濓紝鐜板湪璋冪敤鍒犻櫎鎺ュ彛 +// var url="/cacheGlass/edgStorageCage/edgStorageCageGlass?edgStorageCageId="+row.id; +// console.log(url); +// const response = await request.post(url, { +// esdId: row.esdId +// }) +// if (response.code === 200) { +// ElMessage.success(response.message); +// } else { +// // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 +// ElMessage.error(response.msg); +// // alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); +// } +// } +// } + + +// catch (error) { +// // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 +// console.error('鍙戠敓閿欒:', error); +// } +// }; +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; +}; + + + +let socket = null; +const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/downcache`; +// 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺 +const handleMessage = (data) => { + // 鏇存柊 tableData 鐨勬暟鎹� + tableData.splice(0, tableData.length, ...data.params2[0]); + // tableData.value = data.params[0] + // adjustedRects.value = data.EdgStorageCageinfos[0] + adjustedRects.value = data.params2[0].map(rect => ({ + ...rect, // 澶嶅埗鍘熷瀵硅薄鐨勫叾浠栧睘鎬� + width: rect.width * 0.5, + id: rect.id * 10, + })); + +}; +onMounted(() => { + socket = initializeWebSocket(socketUrl, handleMessage); +}); +onUnmounted(() => { + if (socket) { + closeWebSocket(socket); + } +}); +onBeforeUnmount(() => { + console.log("鍏抽棴浜�") + closeWebSocket(); +}); +</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{ +#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; } -#message{ + +#message { text-align: center; align-items: center; color: black; - width: 200px; - height: 100px; - background-color: #337ecc; - margin-left: 28%; + width: 200px; + height: 100px; + background-color: #337ecc; + margin-left: 28%; } -#awatch{ + +.awatch { height: 460px; width: 1500px; + max-width: 100%; /* margin-top: -60px; */ } </style> \ No newline at end of file -- Gitblit v1.8.0