From d368d765d9ca1384cec38988db3d97f093ae5ee3 Mon Sep 17 00:00:00 2001 From: ZengTao <2773468879@qq.com> Date: 星期三, 14 八月 2024 15:22:20 +0800 Subject: [PATCH] 调整界面表格高度,修改下片前卧式理片破损接口 --- UI-Project/src/views/Caching/cachingun.vue | 270 +++++++++++++++++++++++++++-------------------------- 1 files changed, 138 insertions(+), 132 deletions(-) diff --git a/UI-Project/src/views/Caching/cachingun.vue b/UI-Project/src/views/Caching/cachingun.vue index d7676bf..8e0a488 100644 --- a/UI-Project/src/views/Caching/cachingun.vue +++ b/UI-Project/src/views/Caching/cachingun.vue @@ -2,159 +2,152 @@ <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 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-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-table-column align="center" :label="$t('sorter.startstatus')" min-width="80" prop="enable_state"> + <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> --> </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> + <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-column> </el-table> </div> </el-card> - <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`, + <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> -</div> </template> <script setup> -import {Search,Lock,Avatar} from "@element-plus/icons-vue"; -import {reactive} from "vue"; -import {useRouter} from "vue-router" +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 { WebSocketHost, host } from '@/utils/constants' import request from "@/utils/request" -import { ref, onMounted , onBeforeUnmount,onUnmounted} 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() +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) => { + +onMounted(async () => { try { - const confirmResult = await ElMessageBox.confirm( - t('sorter.information'), - t('sorter.prompt'), - { - confirmButtonText: t('sorter.yes'), + 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') { + type: 'warning', + } + ); + if (confirmResult === 'confirm') { // 鐢ㄦ埛鐐瑰嚮浜嗏�滄槸鈥濓紝鐜板湪璋冪敤鍒犻櫎鎺ュ彛 - var url="/unLoadGlass/downStorage/deleteDownStorageCage?downStorageCageId="+row.id; + var url = "/unLoadGlass/downStorage/deleteDownStorageCage"; console.log(url); const response = await request.post(url, { - esdId: row.esdId + glassId: row.glass_id, + state: 9, + line: 1001, + workingProcedure: '纾ㄨ竟鍓嶇悊鐗囩', }) if (response.code === 200) { ElMessage.success(response.message); - } else { - // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 + } else { + // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 ElMessage.error(response.message); - // alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); - } - } - } - catch (error) { - // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 - console.error('鍙戠敓閿欒:', error); + // alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); + } } -}; + } + catch (error) { + // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 + console.error('鍙戠敓閿欒:', error); +} +}; // 浜哄伐涓嬬墖 -const opena = async(row) => { +const opena = async (row) => { try { - const confirmResult = await ElMessageBox.confirm( - t('sorter.infor'), - t('sorter.prompt'), - { - confirmButtonText: t('sorter.yes'), + const confirmResult = await ElMessageBox.confirm( + t('sorter.infor'), + t('sorter.prompt'), + { + confirmButtonText: t('sorter.yes'), cancelButtonText: t('sorter.cancel'), - type: 'warning', - } - ); + 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 { + if (response.code === 200) { + ElMessage.success(response.message); + } else { // 鍒犻櫎澶辫触锛屾偍鍙互澶勭悊閿欒鎴栨樉绀洪敊璇俊鎭粰鐢ㄦ埛 - ElMessage.error(response.message); + ElMessage.error(response.message); // alert('鍒犻櫎澶辫触锛�' + deleteResponse.message); - } - } - } - catch (error) { + } + } + } + catch (error) { // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 - console.error('鍙戠敓閿欒:', error); - } -}; + console.error('鍙戠敓閿欒:', error); + } +}; // const open = async(row) => { // const { t } = useI18n(); // try { @@ -184,23 +177,23 @@ // } // } // } - - + + // catch (error) { // // 澶勭悊鍙兘鍑虹幇鐨勯敊璇紝姣斿 ElMessageBox 鎶涘嚭鐨勫紓甯哥瓑 // console.error('鍙戠敓閿欒:', error); // } // }; -const toggleEnableState = async (row) => { - const newState = row.enable_state === 1 ? 0 : 1; +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 }); + 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; + ElMessage.success(response.message); + } else { + ElMessage.error(response.message); + } + row.enable_state = newState; }; @@ -213,44 +206,57 @@ 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, - })); + 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) { +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%; -- Gitblit v1.8.0