From 77ee85a249a26fcf47c28aebc9cd89b187f9d4dc Mon Sep 17 00:00:00 2001
From: dengjunjie <dengjunjie@hnkhzn.com>
Date: 星期四, 27 六月 2024 17:57:16 +0800
Subject: [PATCH] 优化WMS库区前端界面
---
代码管理/WMS/WMS_Client/src/views/Home.vue | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 166 insertions(+), 9 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WMS_Client/src/views/Home.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WMS_Client/src/views/Home.vue"
index 21c88a6..dab8c02 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WMS_Client/src/views/Home.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WMS_Client/src/views/Home.vue"
@@ -1,24 +1,181 @@
<template>
- <div class="title">Welcome To WMS!</div>
+ <div class="fixed-row">
+
+ <span style="margin-left: 40px;font-size: 20px;">
+ <el-button circle style="background-color: #409eff;color: #000;width: 70px;height: 50px;">鏈夎揣</el-button>
+ <el-button circle style="background-color: lightgreen;color: #000;width: 70px;height: 50px;">绌鸿揣浣�</el-button>
+ <el-button circle style="background-color: yellow;color: #000;width: 70px;height: 50px;">鍑哄叆搴撳崰鐢�</el-button>
+ <el-button circle style="background-color: red;color: #000;width: 70px;height: 50px;">寮傚父</el-button>
+ <el-button circle style="background-color: #C0C4CC;color: #000;width: 70px;height: 50px;">绂佺敤</el-button>
+ </span>
+ </div>
+ <div style="height: 50px;">
+
+ </div>
+ <div v-for="(index,inst) in datalist.length" :key="inst" style="padding: 10px;">
+ <h1 style="border-bottom: 1px dashed silver; padding: 5px;;height: 52px;">
+ <span v-if="inst==0">澶栧崗鍖�</span>
+ <span v-else-if="inst==1">鎵樼洏鍙犳斁鍖�</span>
+ <!-- <span v-else-if="inst==1">涓婃枡鍖�</span>
+ <span v-else-if="inst==2">涓嬫枡鍖�</span>
+ <span v-else-if="inst==3">澶栧崗鍖�</span>
+ <span v-else-if="inst==4">鍙犵洏鍖�</span> -->
+ <span v-else>{{inst}}搴撳尯</span>
+ </h1>
+ <div class="table-container">
+ <div class="scrollable-table">
+ <table class="one_tal" >
+ <tr v-for="(item, k) in datalist[inst].item2" :key="k">
+ <td v-for="items in filteredItems(datalist[inst].item1, k+1)" :key="items.stationCode"
+ :style="{ 'background-color': getBackgroundColor(items.enable,items.location_state) }">
+ <el-tooltip class="item" effect="dark" placement="right" >
+ <template #content v-if="items.stationType!=='' && items.bindSN !== '' && items.stationType!==null && items.bindSN !== null">
+ <div>搴撲綅缂栧彿锛歿{ items.stationCode }}</div>
+ <div>鐗╂枡绫诲瀷(鍥惧彿)锛� {{ items.stationType }}</div>
+ <div>鐐夊彿锛� {{ items.heatNumber }}</div>
+ <div>杞﹁疆SN鍙凤細{{ items.bindSN }}</div>
+ <div>閽㈠澂鍙凤細{{ items.billetID }}</div>
+ </template>
+ <template #content v-else-if="items.area==3 && items.tray_status=='EmptyTray'">
+ <div v-if="item.tray_type==SmallTray">灏忔墭鐩�</div>
+ <div v-else>澶ф墭鐩�</div>
+ <div>鏁伴噺锛歿{ items.quantity }}</div>
+ </template>
+ <template #content v-else>
+ <div>鐩墠鏆傛棤淇℃伅</div>
+ </template>
+ <template #content v-if="items.area==11">
+ <div>灏忔墭鐩�</div>
+ <div>鏁伴噺锛歿{ items.quantity }}</div>
+ </template>
+ <template #content v-if="items.area==10">
+ <div>澶ф墭鐩�</div>
+ <div>鏁伴噺锛歿{ items.quantity }}</div>
+ </template>
+ <template #content v-if="items.area==12">
+ <div v-if="item.tray_type==SmallTray">灏忔墭鐩�</div>
+ <div v-else>澶ф墭鐩�</div>
+ <div>鏁伴噺锛歿{ items.quantity }}</div>
+ </template>
+
+ <div>{{ items.stationCode}}</div>
+ </el-tooltip>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import { ref, reactive } from 'vue'
-
export default {
- setup() {
+ data() {
return {
+ visible: false,
+ datalist:[],
+ };
+ },
+ mounted() {
+ setInterval(() => {
+ this.selList(); // 浣跨敤绠ご鍑芥暟缁戝畾this
+ }, 3000);
+ },
+ methods: {
+
+ selList(){
+ this.loading=true
+ this.http.post("/api/dt_stationinfo/dt_stationinfolist").then(x => {
+ this.datalist = x.data;
+ })
+ .catch(error => {
+ console.error('璇锋眰鍑洪敊锛�', error);
+ });
+ },
+ getBackgroundColor(enable,locationState) {
+
+ if (enable=='0') {
+ return '#C0C4CC';
+ }
+ else{
+ switch (locationState) {
+ case 'Stroge':
+ return '#409eff';
+ case 'Empty':
+ return 'lightgreen';
+ case 'InBusy':
+ return 'yellow';
+ case 'OutBusy':
+ return 'yellow';
+ case 'Busy':
+ return 'yellow';
+ case 'Abnormal':
+ return 'red';
+ case 'Abnormal':
+ return 'yellow';
+ default:
+ return 'transparent';
+ }
+ }
+
+ }
+ },
+ computed: {
+ filteredItems() {
+ return (itemList, line) => {
+ return itemList.filter(item => item.line === line);
+ };
}
}
-}
+};
</script>
<style scoped>
-.title {
- line-height: 70vh;
+.table-container {
+ overflow-x: auto;
+}
+
+.scrollable-table {
+ width: 100%;
+}
+
+.one_tal {
+ margin-top: 10px;
+ padding: 5px;
+ white-space: nowrap;
+ border-spacing: 10px;
+ padding-right: 500px;
+}
+.one_tal tr{
+
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+.one_tal td {
+ width: 200px;
+ height: 40px;
+ background-color: rgb(36, 227, 241);
text-align: center;
- font-size: 28px;
- color: orange;
+ border-radius: 10px;
+}
+.table-container::-webkit-scrollbar {
+ width: 1px;
+ height: 15px;
+}
+
+.table-container::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.table-container::-webkit-scrollbar-thumb {
+ background-color: #ccc;
+}
+
+.fixed-row {
+ position: fixed;
+ width: 100%; /* 璁╄鐨勫搴﹀崰婊℃暣涓绐� */
+ background-color: #fff; /* 濡傛灉闇�瑕侊紝璁剧疆鑳屾櫙鑹� */
+ z-index: 3; /* 纭繚鍥哄畾琛屽湪鍏朵粬鍐呭涔嬩笂 */
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3