展会页面

wang

2024-04-23 81754ac5b49cdd16a713d86f88019be0e5ccd859

展会页面

 UI-Project/src/assets/d1.png

 UI-Project/src/assets/d2.png

 UI-Project/src/assets/d3.png

 UI-Project/src/assets/lpla.jpg

 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'

 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>


 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;

 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>

 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;

 UI-Project/src/views/Visualization/screen.vue

New file
@@ -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>

 UI-Project/src/views/Visualization/screenone.vue

New file
@@ -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>

 UI-Project/src/views/Visualization/screenthree.vue

New file
@@ -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>

 UI-Project/src/views/Visualization/screentwo.vue

New file
@@ -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>