From 81754ac5b49cdd16a713d86f88019be0e5ccd859 Mon Sep 17 00:00:00 2001
From: wang <3597712270@qq.com>
Date: 星期二, 23 四月 2024 19:11:27 +0800
Subject: [PATCH] 展会页面

---
 UI-Project/src/views/Identify/identify.vue           |   84 +++-
 UI-Project/src/views/Visualization/screenthree.vue   |  160 ++++++++
 UI-Project/src/assets/d2.png                         |    0 
 UI-Project/src/views/Caching/caching.vue             |    4 
 UI-Project/src/views/Visualization/screentwo.vue     |  160 ++++++++
 UI-Project/src/views/UnLoadGlass/loadmachinerack.vue |    2 
 UI-Project/src/views/Slicecage/slicecage.vue         |  147 +++++++
 UI-Project/src/assets/d1.png                         |    0 
 UI-Project/src/assets/lpla.jpg                       |    0 
 UI-Project/src/views/Visualization/screen.vue        |   49 ++
 UI-Project/src/router/index.js                       |   24 +
 UI-Project/src/assets/d3.png                         |    0 
 UI-Project/src/views/Visualization/screenone.vue     |  393 +++++++++++++++++++++
 13 files changed, 983 insertions(+), 40 deletions(-)

diff --git a/UI-Project/src/assets/d1.png b/UI-Project/src/assets/d1.png
new file mode 100644
index 0000000..c903c4b
--- /dev/null
+++ b/UI-Project/src/assets/d1.png
Binary files differ
diff --git a/UI-Project/src/assets/d2.png b/UI-Project/src/assets/d2.png
new file mode 100644
index 0000000..de73a96
--- /dev/null
+++ b/UI-Project/src/assets/d2.png
Binary files differ
diff --git a/UI-Project/src/assets/d3.png b/UI-Project/src/assets/d3.png
new file mode 100644
index 0000000..1651775
--- /dev/null
+++ b/UI-Project/src/assets/d3.png
Binary files differ
diff --git a/UI-Project/src/assets/lpla.jpg b/UI-Project/src/assets/lpla.jpg
new file mode 100644
index 0000000..d66b84d
--- /dev/null
+++ b/UI-Project/src/assets/lpla.jpg
Binary files differ
diff --git a/UI-Project/src/router/index.js b/UI-Project/src/router/index.js
index 8ca7249..2ecd57e 100644
--- a/UI-Project/src/router/index.js
+++ b/UI-Project/src/router/index.js
@@ -173,6 +173,30 @@
             }
           ]
         },
+
+         /*----------- 鍙鍖栫郴缁� ----------------*/
+         {
+          path: 'Visualization',
+          name: 'screen',
+          component: () => import('../views/Visualization/screen.vue'),
+          children:[
+            {
+              path: '/Visualization/screenone',
+              name: 'screenone',
+              component: () => import('../views/Visualization/screenone.vue')
+            },
+            {
+              path: '/Visualization/screentwo',
+              name: 'screentwo',
+              component: () => import('../views/Visualization/screentwo.vue')
+            },
+            {
+              path: '/Visualization/screenthree',
+              name: 'screenthree',
+              component: () => import('../views/Visualization/screenthree.vue')
+            }
+          ]
+        },
         {
           path: '',
           redirect:'/Slicecage/slicecage'
diff --git a/UI-Project/src/views/Caching/caching.vue b/UI-Project/src/views/Caching/caching.vue
index 1734d49..7ed5e6a 100644
--- a/UI-Project/src/views/Caching/caching.vue
+++ b/UI-Project/src/views/Caching/caching.vue
@@ -166,7 +166,9 @@
   </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>
 </template>
 
diff --git a/UI-Project/src/views/Identify/identify.vue b/UI-Project/src/views/Identify/identify.vue
index 13a7185..d2babdd 100644
--- a/UI-Project/src/views/Identify/identify.vue
+++ b/UI-Project/src/views/Identify/identify.vue
@@ -1,20 +1,25 @@
 <template>
   <el-card style="margin-left: 10px; margin-top: 10px; margin-right: 10px;" v-loading="loading">
-    <div style="display: flex;margin-bottom: 30px;">
+    <div style="display: flex;">
       <div style="margin-left: 400px; font-size: 20px;">宸ョ▼鍙凤細P20240305001 </div>
       <div style="margin-left: 150px; font-size: 20px;">鐗堝浘缂栧彿锛�1</div>
     </div>
-    <el-scrollbar height="650px">
-      <div id="home-card">
-      <div id="home-item">
-    <svg width="100%" height="400" xmlns="http://www.w3.org/2000/svg" style="margin-top: -100px;margin-left: -80px;" :data="tableData">
-      <!-- 绠ご -->
+    <svg width="100%" height="690" xmlns="http://www.w3.org/2000/svg" style="margin-top: -40px;">
       <defs>
             <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6"
                 refY="6" orient="auto">
                 <path d="M2,2 L10,6 L2,10 L2,2" style="fill: #911005;" />
             </marker>
         </defs>
+        <!--  <el-scrollbar height="630px">
+      <div id="home-card">
+      <div id="home-item" v-for="n in 20" :key="n">
+            <div id="box" style="width: 100px;height: 165px;">100*65</div>
+            <div id="box" style="width: 107px;height: 150px;">107*60</div>
+            <div id="box" style="width: 107px;height: 155px;">109*60</div>
+      </div>
+    </div>
+  </el-scrollbar> -->
       <g v-for="(rack, index) in racks" :key="index">
         <rect 
           :x="rack.x" 
@@ -27,12 +32,26 @@
           style="stroke:#c8c9cc;stroke-width:3;"
           @click="showRectInfo(rack)"
         />
-        <!-- 绠ご -->
         <line x1='510' y1='309' x2='260' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
+        </line>
+        <line x1='850' y1='309' x2='1100' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
+        </line>
+        <line x1='510' y1='409' x2='260' y2='410' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
+        </line>
+        <line x1='1200' y1='650' x2='1200' y2='470' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
         </line>
         <text x="370" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-01</text> 
         <text x="370" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text> 
 
+        <text x="970" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-02</text> 
+        <text x="970" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text> 
+
+        <text x="600" y="500" dominant-baseline="middle" text-anchor="middle">NG2024030501A-03</text> 
+        <text x="600" y="520" dominant-baseline="middle" text-anchor="middle">800*450</text> 
+
+        
+        <text x="1280" y="520" dominant-baseline="middle" text-anchor="middle">NG2024030501A-04</text> 
+        <text x="1280" y="540" dominant-baseline="middle" text-anchor="middle">400*300</text> 
         <g v-for="(item, itemIndex) in rack.items" :key="itemIndex">
           <rect 
             :x="calculateItemXPosition(rack, item, itemIndex)" 
@@ -44,36 +63,22 @@
         </g>
       </g>
     </svg>
-    </div>
-    </div>
-    </el-scrollbar>
   </el-card>
 </template>
 
 <script>
 import Swal from 'sweetalert2'
 import request from "@/utils/request";
-// const tableData = ref([])
 
 
-request.post("/cacheGlass/taskCache/currentCutTerritory").then((res) => {
+request.get("/TidyUpGlassModule/CurrentCutTerritory").then((res) => {
           if (res.code == 200) {
           console.log(res.data);
-          tableData.value = res.data
           } else {
           ElMessage.warning(res.msg)
-        
+          router.push("/login")
           }
           });
-
-// request.get("/TidyUpGlassModule/CurrentCutTerritory").then((res) => {
-//           if (res.code == 200) {
-//           console.log(res.data);
-//           } else {
-//           ElMessage.warning(res.msg)
-//           router.push("/login")
-//           }
-//           });
 
 export default {
   data() {
@@ -88,6 +93,30 @@
             { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG12345678' }
           ]
         },
+        { 
+          x: 685, y: 126, width: 600, height: 240,  fillColor: '#93d2f3', 
+          items: [
+            { position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
+            { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
+            { position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }
+          ]
+        },
+        { 
+          x: 70, y: 380, width: 1100, height: 260, fillColor: '#81b337', 
+          items: [
+            { position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
+            { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
+            { position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }
+          ]
+        },
+        { 
+          x: 1185, y: 380, width: 200, height: 300,fillColor: '#81b337', 
+          items: [
+            { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
+            { position: 'top-right',width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
+            { position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' },
+          ]
+        }
         
         // Add more racks and items here as needed
       ],
@@ -171,18 +200,17 @@
     display: flex;
     flex-wrap: wrap;
     #home-item {
-      /* border-style: solid; */
-      /* border-width: 1px;
-      border-color: red; */
+      border-style: solid;
+      border-width: 1px;
+      border-color: #E4E4E4;
       width: calc(34% - 20px);
       padding: 20px 0px 20px 20px;
-      margin-right: 20px;
+      margin-right: 10px;
       margin-bottom: 10px;
       display: flex;
       justify-content: center;
       /* align-items: center; */
       background: #fff;
-      width: 700px;
       #home-img {
         display: inline-block;
         width: 160px;
diff --git a/UI-Project/src/views/Slicecage/slicecage.vue b/UI-Project/src/views/Slicecage/slicecage.vue
index 21b2c91..c03bae9 100644
--- a/UI-Project/src/views/Slicecage/slicecage.vue
+++ b/UI-Project/src/views/Slicecage/slicecage.vue
@@ -6,9 +6,20 @@
 
 import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { tr } from "element-plus/es/locale";
 const dialogFormVisible = ref(false)
 const dialogFormVisiblea = ref(false)
 const dialogFormVisibleb = ref(false)
+
+const carposition1 = ref(40);
+const carposition2 = ref(200);
+const timers1 =ref(true);
+const timers2 =ref(true);
+const cellshow=ref(false);
+const cellshow1=ref(true);
+const cellshow2=ref(true);
+const million=ref(0);
+const million1=ref(0);
 
 const currentPage4 = ref(4)
 const pageSize4 = ref(100)
@@ -59,6 +70,62 @@
       })
     })
 }
+
+  var timer=setInterval(() => {
+    console.log(million.value,million1.value);
+    million.value+=1;
+    if(million.value-million1.value!==12){
+      
+      if(million.value-million1.value>=2){
+        if(carposition1.value==200){
+          timers1.value=false;
+        }else if(carposition1.value==40){
+          timers1.value=true;
+        }
+        if(timers1.value==true){
+          carposition1.value=carposition1.value+16;
+        }else{
+          carposition1.value=carposition1.value-16;
+        }
+
+        
+        if(carposition2.value==200){
+          timers2.value=false;
+        }else if(carposition2.value==40){
+          timers2.value=true;
+        }
+        if(timers2.value==true){
+          carposition2.value+=16;
+        }else{
+          carposition2.value-=16;
+        }
+      }else{
+
+      }
+    }else{
+      million1.value=million.value;
+      if(cellshow.value==true){
+        cellshow.value=false;
+        
+      }else{
+        cellshow.value=true;
+        
+      }
+      if(cellshow1.value==true){
+        cellshow1.value=false;
+      }else{
+        cellshow1.value=true;
+      }
+      if(cellshow2.value==true){
+        cellshow2.value=false;
+      }else{
+        cellshow2.value=true;
+      }
+    }
+    
+  }, 1000);
+
+
 const getTableRow = (row,type) =>{
   switch (type) {
     case 'edit' :{
@@ -249,17 +316,23 @@
                     </el-col>
                 </div> -->
     </div>
-    <div id="awatch">
+    <!-- <div id="awatch">
   <img src="../../assets/cp.png" alt="" style="width: 70%;height: 70%;margin-left: 160px;">
-</div>
+</div> -->
 <!-- // 鐖剁骇妗� -->
-	<!-- <div class="img-list">   -->
-	<!-- // 娴湪涓婃柟鐨勫浘鐗�  -->
-  <!-- <img class="check-img" src="../../assets/lpl.jpg" alt="" style="width: 13%;height: 12%;margin-left: 160px;"> -->
-  <!-- <img class="check-imga" src="../../assets/lpl.jpg" alt="" style="width: 13%;height: 12%;margin-left: 160px;"> -->
-	<!-- // 搴曞浘 -->
-  <!-- <img class="data-img " src="../../assets/dlpl.png" alt="" style="width: 1200px;height: 400px;margin-left: 130px;margin-top: 50px;"> -->
-	<!-- </div> -->
+<div class="img-dlpl" >
+    <div class="img-car1" :style="'z-index:999;left:247px;top:' + carposition1 + 'px;position:absolute;'">
+      <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:red;"></div>
+    </div>
+    
+    <div class="img-car2" :style="'z-index:999;left:704px;top:' + carposition2 + 'px;position:absolute;'">
+      <div v-show="cellshow2" style="margin-top:10px;width:200px;height:5px;background-color:red;"></div>
+    </div>
+    <div v-show="cellshow" style="width: 200px;height: 5px;position: absolute;top:60px;left: 490px;background-color: red;">
+
+    </div>
+</div>
+	
   </div>
 <el-dialog v-model="dialogFormVisible" top="12vh" width="85%" title="璇风‘璁ょ幓鐠冧俊鎭�" >
   <div style="margin-left: 50px;margin-bottom: 10px;">
@@ -512,9 +585,63 @@
   width: 3.3125rem;
   height: 2.9375rem;
   top:15rem;
-  right: 29rem;
+  right: 28.5rem;
   z-index: 10;
   
 }
+.vertical {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 485px; /* 鍒濆浣嶇疆 */
+    left: 899px; /* 姘村钩灞呬腑 */
+    transform: translateX(-50%);
+    animation: move-vertical 6s infinite; /* 浠庝笂鍒颁笅鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
 
+@keyframes move-vertical {
+    0% {
+        top: 485px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        top: calc(100% - 210px); /* 浠庝笂鍒颁笅缁撴潫浣嶇疆 */
+    }
+}
+
+.img-dlpl{
+  margin-left: 200px;
+  background-image:url('../../assets/dlpl.png');
+  background-repeat: no-repeat;
+    background-attachment: local;
+    min-height: 400px;
+    width: 1200px;
+    max-width: 100%;
+    background-size: 1200px 400px;
+    overflow: hidden;
+    position:relative
+}
+.img-car1{
+  background-image:url('../../assets/lpl.jpg');
+  position: absolute;
+  background-repeat: no-repeat;
+    background-attachment: local;
+    min-height: 200px;
+    width: 200px;
+    max-width: 100%;
+    background-size: 200px 70px;
+    overflow: hidden;
+    position:relative
+}
+.img-car2{
+  background-image:url('../../assets/lpla.jpg');
+  position: absolute;
+  background-repeat: no-repeat;
+    background-attachment: local;
+    min-height: 200px;
+    width: 200px;
+    max-width: 100%;
+    background-size: 200px 70px;
+    overflow: hidden;
+    position:relative
+}
 </style>
\ No newline at end of file
diff --git a/UI-Project/src/views/UnLoadGlass/loadmachinerack.vue b/UI-Project/src/views/UnLoadGlass/loadmachinerack.vue
index ed2d9fb..efc6711 100644
--- a/UI-Project/src/views/UnLoadGlass/loadmachinerack.vue
+++ b/UI-Project/src/views/UnLoadGlass/loadmachinerack.vue
@@ -390,7 +390,7 @@
 }
 #main-body{
   margin-top: -20px;
-  margin-left: 300px;
+  margin-left: 200px;
 }
 #main-bodya{
   margin-top: -10px;
diff --git a/UI-Project/src/views/Visualization/screen.vue b/UI-Project/src/views/Visualization/screen.vue
new file mode 100644
index 0000000..d0567d3
--- /dev/null
+++ b/UI-Project/src/views/Visualization/screen.vue
@@ -0,0 +1,49 @@
+<script setup>
+import {ArrowLeftBold, ArrowRight, Search} from "@element-plus/icons-vue"
+import {useRouter} from "vue-router";
+let indexFlag=$ref(1)
+function changeRouter(index){
+  indexFlag=index
+}
+
+</script>
+
+<template>
+  <!-- <div id="main-div"> -->
+   
+
+    <div id="main-body">
+      <router-view  />
+    </div>
+  <!-- </div> -->
+</template>
+
+<style scoped>
+#main-div{
+  width: 100%;
+  height: 100%;
+}
+#div-title{
+  height: 2%;
+  width: 100%;
+}
+#searchButton{
+  margin-top: -5px;
+  margin-left: 1rem;
+}
+/* #searchButton1{
+//margin-left: 10rem;
+} */
+/*main-body鏍峰紡*/
+#main-body{
+  width: 100%;
+  height: 95%;
+  /* margin-top: 1%; */
+}
+#select{
+  margin-left:0.5rem;
+}
+:deep(.indexTag .el-breadcrumb__inner){
+  color: #5CADFE !important;
+}
+</style>
\ No newline at end of file
diff --git a/UI-Project/src/views/Visualization/screenone.vue b/UI-Project/src/views/Visualization/screenone.vue
new file mode 100644
index 0000000..f6001bc
--- /dev/null
+++ b/UI-Project/src/views/Visualization/screenone.vue
@@ -0,0 +1,393 @@
+<script setup>
+import {Search} from "@element-plus/icons-vue";
+import {reactive} from "vue";
+import {useRouter} from "vue-router"
+const router = useRouter()
+
+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 fetchTableData = async () => {
+//   try {
+//     // 鍙戦�佽幏鍙栬〃鏍兼暟鎹殑璇锋眰锛屽苟绛夊緟鍝嶅簲
+//     // const response = await request.post("/loadGlass/optimizeProject/listByState", requestData);
+//     const response = await request.get("unLoadGlass/downStorage/selectStorageCage");
+
+//     // 妫�鏌ュ搷搴旂姸鎬�
+//     if (response.code === 200) {
+//       // 鏇存柊琛ㄦ牸鏁版嵁
+//       console.log('鎴愬姛鑾峰彇琛ㄦ牸鏁版嵁:', response.data);
+//       tableData.splice(0, tableData.length, ...response.data);
+//     } else {
+//       // 璇锋眰澶辫触锛屾樉绀洪敊璇秷鎭�
+//       ElMessage.error(response.msg);
+//     }
+//   } catch (error) {
+//     // 澶勭悊璇锋眰澶辫触鐨勬儏鍐�
+//    ElMessage.error('鑾峰彇琛ㄦ牸鏁版嵁澶辫触锛岃閲嶈瘯');
+//   }
+// };
+// onMounted(fetchTableData);
+
+
+
+request.get("unLoadGlass/downStorage/selectStorageCage").then((res) => {
+          if (res.code == 200) {
+          console.log(res.data);
+          tableData.value = res.data
+          } else {
+          ElMessage.warning(res.msg)
+        
+          }
+          });
+
+const dialogForm = () => {
+  ElMessageBox.confirm(
+    '鏄惁鎶ョ己?',
+    '鎻愮ず',
+    {
+      confirmButtonText: '鏄�',
+      cancelButtonText: '鍙栨秷',
+      type: 'warning',
+    }
+  )
+  .then(() => {
+    // this.boxa = true
+    // this.box = false
+      
+    })
+}
+const open = () => {
+  ElMessageBox.confirm(
+    '鏄惁鍒犻櫎璇ユ潯淇℃伅?',
+    '鎻愮ず',
+    {
+      confirmButtonText: '鏄�',
+      cancelButtonText: '鍙栨秷',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '鍒犻櫎鎴愬姛锛�',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '鍒犻櫎澶辫触',
+      })
+    })
+}
+const getTableRow = (row,type) =>{
+  switch (type) {
+    case 'edit' :{
+      //alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑缂栬緫淇℃伅')
+      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
+      break
+    }
+    case 'delete':{
+      alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑鍒犻櫎淇℃伅')
+      break
+    }
+  }
+}
+
+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',
+    }
+  ]
+ 
+})
+
+
+
+</script>
+
+<template>
+<!-- 鐖剁骇妗� -->
+<div class="container">
+    <img src="../../assets/d1.png" style="width: 1500px;height: 750px;" alt="Your Image">
+    <div class="moving-rect vertical"></div>
+    <div class="moving-rect all"></div>
+    <div class="moving-rect horizontal"></div>
+    <div class="moving-rect xiao"></div>
+    <div class="moving-rect zhan"></div>
+    <div class="moving-rect tu"></div>
+    <div class="moving-rect zi"></div>
+    <div class="moving-rect xia"></div>
+    <div class="moving-rect zan"></div>
+    <div class="moving-rect fa"></div>
+    <div class="moving-rect hua"></div>
+    <div class="moving-rect shui"></div>
+</div>
+</template>
+
+<style scoped>
+.container {
+    position: relative;
+    display: inline-block; /* 浣垮鍣ㄥぇ灏忛�傚簲鍥剧墖澶у皬 */
+}
+
+img {
+    display: block; /* 璁╁浘鐗囦互鍧楃骇鍏冪礌鏄剧ず */
+    max-width: 100%; /* 纭繚鍥剧墖涓嶈秴鍑哄鍣� */
+}
+
+.moving-rect {
+    width: 100px;
+    height: 50px;
+    position: absolute;
+}
+
+.vertical {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 485px; /* 鍒濆浣嶇疆 */
+    left: 899px; /* 姘村钩灞呬腑 */
+    transform: translateX(-50%);
+    animation: move-vertical 6s infinite; /* 浠庝笂鍒颁笅鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+
+@keyframes move-vertical {
+    0% {
+        top: 485px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        top: calc(100% - 210px); /* 浠庝笂鍒颁笅缁撴潫浣嶇疆 */
+    }
+}
+.all {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 490px; /* 鍨傜洿灞呬腑 */
+    right: 560px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-all 6s infinite; /* 浠庡彸鍒板乏鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-all {
+    0% {
+        right: 560px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 863px); /* 浠庡彸鍒板乏缁撴潫浣嶇疆 */
+    }
+}
+.horizontal {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 488px; /* 鍨傜洿灞呬腑 */
+    right: 210px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-horizontal 6s infinite; /* 浠庡彸鍒板乏鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+
+@keyframes move-horizontal {
+    0% {
+        right: 210px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 1030px); /* 浠庡彸鍒板乏缁撴潫浣嶇疆 */
+    }
+}
+
+.xiao {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 569px; /* 鍨傜洿灞呬腑 */
+    right: 660px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-xiao 6s infinite; /* 浠庡彸鍒板乏鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-xiao {
+    0% {
+        right: 660px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 820px); /* 浠庡彸鍒板乏缁撴潫浣嶇疆 */
+    }
+}
+.tu {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 569px; /* 鍨傜洿灞呬腑 */
+    right: 778px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-tu 6s infinite; /* 浠庡彸鍒板乏鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-tu {
+    0% {
+        right: 778px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 580px); /* 浠庡彸鍒板乏缁撴潫浣嶇疆 */
+    }
+}
+.zhan {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 632px; /* 鍨傜洿灞呬腑 */
+    right: 572px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-zhan 6s infinite; /* 浠庡彸鍒板乏鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-zhan {
+    0% {
+        right: 572px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 885px); /* 浠庡彸鍒板乏缁撴潫浣嶇疆 */
+    }
+}
+.zi {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 632px; /* 鍨傜洿灞呬腑 */
+    right: 710px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-zi 6s infinite; /* 浠庡彸鍒板乏鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-zi {
+    0% {
+        right: 710px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 645px); /* 浠庡彸鍒板乏缁撴潫浣嶇疆 */
+    }
+}
+.xia {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 628px; /* 鍨傜洿灞呬腑 */
+    right: 1185px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-xia 6s infinite; /* 浠庡彸鍒板乏鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-xia {
+    0% {
+        right: 1185px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 198px); /* 浠庡彸鍒板乏缁撴潫浣嶇疆 */
+    }
+}
+
+.zan {
+    width: 25px;
+    height: 45px;
+    background-color: #409EFF;
+    top: 570px; /* 鍒濆浣嶇疆 */
+    left: 172px; /* 姘村钩灞呬腑 */
+    transform: translateX(-50%);
+    animation: move-zan 6s infinite; /* 浠庝笂鍒颁笅鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+
+@keyframes move-zan {
+    0% {
+        top: 570px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        top: calc(100% - 242px); /* 浠庝笅鍒颁笂缁撴潫浣嶇疆 */
+    }
+}
+.fa {
+    width: 25px;
+    height: 45px;
+    background-color: #409EFF;
+    top: 150px; /* 鍒濆浣嶇疆 */
+    left: 172px; /* 姘村钩灞呬腑 */
+    transform: translateX(-50%);
+    animation: move-fa 6s infinite; /* 浠庝笂鍒颁笅鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+
+@keyframes move-fa {
+    0% {
+        top: 150px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        top: calc(100% - 660px); /* 浠庝笅鍒颁笂缁撴潫浣嶇疆 */
+    }
+}
+.hua {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 117px; /* 鍨傜洿灞呬腑 */
+    right: 1250px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-hua 6s infinite; /* 浠庡乏鍒板彸鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-hua {
+    0% {
+      right: 1250px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 360px); /* 缁撴潫浣嶇疆 */
+    }
+}
+.shui {
+    width: 45px;
+    height: 25px;
+    background-color: #409EFF;
+    top: 117px; /* 鍨傜洿灞呬腑 */
+    right: 1050px; /* 鍒濆浣嶇疆 */
+    transform: translateY(-50%);
+    animation: move-shui 6s infinite; /* 浠庡乏鍒板彸鍔ㄧ敾锛屾寔缁�6绉掞紝鏃犻檺寰幆 */
+}
+@keyframes move-shui {
+    0% {
+      right: 1050px; /* 璧峰浣嶇疆 */
+    }
+    100% {
+        right: calc(100% - 610px); /* 缁撴潫浣嶇疆 */
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/UI-Project/src/views/Visualization/screenthree.vue b/UI-Project/src/views/Visualization/screenthree.vue
new file mode 100644
index 0000000..5f115a1
--- /dev/null
+++ b/UI-Project/src/views/Visualization/screenthree.vue
@@ -0,0 +1,160 @@
+<script setup>
+import {Search} from "@element-plus/icons-vue";
+import {reactive} from "vue";
+import {useRouter} from "vue-router"
+const router = useRouter()
+
+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 fetchTableData = async () => {
+//   try {
+//     // 鍙戦�佽幏鍙栬〃鏍兼暟鎹殑璇锋眰锛屽苟绛夊緟鍝嶅簲
+//     // const response = await request.post("/loadGlass/optimizeProject/listByState", requestData);
+//     const response = await request.get("unLoadGlass/downStorage/selectStorageCage");
+
+//     // 妫�鏌ュ搷搴旂姸鎬�
+//     if (response.code === 200) {
+//       // 鏇存柊琛ㄦ牸鏁版嵁
+//       console.log('鎴愬姛鑾峰彇琛ㄦ牸鏁版嵁:', response.data);
+//       tableData.splice(0, tableData.length, ...response.data);
+//     } else {
+//       // 璇锋眰澶辫触锛屾樉绀洪敊璇秷鎭�
+//       ElMessage.error(response.msg);
+//     }
+//   } catch (error) {
+//     // 澶勭悊璇锋眰澶辫触鐨勬儏鍐�
+//    ElMessage.error('鑾峰彇琛ㄦ牸鏁版嵁澶辫触锛岃閲嶈瘯');
+//   }
+// };
+// onMounted(fetchTableData);
+
+
+
+request.get("unLoadGlass/downStorage/selectStorageCage").then((res) => {
+          if (res.code == 200) {
+          console.log(res.data);
+          tableData.value = res.data
+          } else {
+          ElMessage.warning(res.msg)
+        
+          }
+          });
+
+const dialogForm = () => {
+  ElMessageBox.confirm(
+    '鏄惁鎶ョ己?',
+    '鎻愮ず',
+    {
+      confirmButtonText: '鏄�',
+      cancelButtonText: '鍙栨秷',
+      type: 'warning',
+    }
+  )
+  .then(() => {
+    // this.boxa = true
+    // this.box = false
+      
+    })
+}
+const open = () => {
+  ElMessageBox.confirm(
+    '鏄惁鍒犻櫎璇ユ潯淇℃伅?',
+    '鎻愮ず',
+    {
+      confirmButtonText: '鏄�',
+      cancelButtonText: '鍙栨秷',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '鍒犻櫎鎴愬姛锛�',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '鍒犻櫎澶辫触',
+      })
+    })
+}
+const getTableRow = (row,type) =>{
+  switch (type) {
+    case 'edit' :{
+      //alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑缂栬緫淇℃伅')
+      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
+      break
+    }
+    case 'delete':{
+      alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑鍒犻櫎淇℃伅')
+      break
+    }
+  }
+}
+
+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',
+    }
+  ]
+ 
+})
+
+
+
+</script>
+
+<template>
+
+  <div id="awatch">
+    <img src="../../assets/d3.png" alt="" style="width: 100%;height: 160%;margin-top: 20px;">
+
+</div>
+</template>
+
+<style scoped>
+
+#awatch{
+  height: 460px;
+  /* margin-top: -60px; */
+}
+</style>
\ No newline at end of file
diff --git a/UI-Project/src/views/Visualization/screentwo.vue b/UI-Project/src/views/Visualization/screentwo.vue
new file mode 100644
index 0000000..24f0168
--- /dev/null
+++ b/UI-Project/src/views/Visualization/screentwo.vue
@@ -0,0 +1,160 @@
+<script setup>
+import {Search} from "@element-plus/icons-vue";
+import {reactive} from "vue";
+import {useRouter} from "vue-router"
+const router = useRouter()
+
+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 fetchTableData = async () => {
+//   try {
+//     // 鍙戦�佽幏鍙栬〃鏍兼暟鎹殑璇锋眰锛屽苟绛夊緟鍝嶅簲
+//     // const response = await request.post("/loadGlass/optimizeProject/listByState", requestData);
+//     const response = await request.get("unLoadGlass/downStorage/selectStorageCage");
+
+//     // 妫�鏌ュ搷搴旂姸鎬�
+//     if (response.code === 200) {
+//       // 鏇存柊琛ㄦ牸鏁版嵁
+//       console.log('鎴愬姛鑾峰彇琛ㄦ牸鏁版嵁:', response.data);
+//       tableData.splice(0, tableData.length, ...response.data);
+//     } else {
+//       // 璇锋眰澶辫触锛屾樉绀洪敊璇秷鎭�
+//       ElMessage.error(response.msg);
+//     }
+//   } catch (error) {
+//     // 澶勭悊璇锋眰澶辫触鐨勬儏鍐�
+//    ElMessage.error('鑾峰彇琛ㄦ牸鏁版嵁澶辫触锛岃閲嶈瘯');
+//   }
+// };
+// onMounted(fetchTableData);
+
+
+
+request.get("unLoadGlass/downStorage/selectStorageCage").then((res) => {
+          if (res.code == 200) {
+          console.log(res.data);
+          tableData.value = res.data
+          } else {
+          ElMessage.warning(res.msg)
+        
+          }
+          });
+
+const dialogForm = () => {
+  ElMessageBox.confirm(
+    '鏄惁鎶ョ己?',
+    '鎻愮ず',
+    {
+      confirmButtonText: '鏄�',
+      cancelButtonText: '鍙栨秷',
+      type: 'warning',
+    }
+  )
+  .then(() => {
+    // this.boxa = true
+    // this.box = false
+      
+    })
+}
+const open = () => {
+  ElMessageBox.confirm(
+    '鏄惁鍒犻櫎璇ユ潯淇℃伅?',
+    '鎻愮ず',
+    {
+      confirmButtonText: '鏄�',
+      cancelButtonText: '鍙栨秷',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '鍒犻櫎鎴愬姛锛�',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '鍒犻櫎澶辫触',
+      })
+    })
+}
+const getTableRow = (row,type) =>{
+  switch (type) {
+    case 'edit' :{
+      //alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑缂栬緫淇℃伅')
+      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
+      break
+    }
+    case 'delete':{
+      alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑鍒犻櫎淇℃伅')
+      break
+    }
+  }
+}
+
+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',
+    }
+  ]
+ 
+})
+
+
+
+</script>
+
+<template>
+
+  <div id="awatch">
+    <img src="../../assets/d2.png" alt="" style="width: 100%;height: 160%;margin-top: 20px;">
+
+</div>
+</template>
+
+<style scoped>
+
+#awatch{
+  height: 460px;
+  /* margin-top: -60px; */
+}
+</style>
\ No newline at end of file

--
Gitblit v1.8.0