Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes

严智鑫

2024-04-24 18f6e14f2cb0e19fc8726e9821bc4db172a04d17

 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: 510px; /* 初始位置 */
    left: 899px; /* 水平居中 */
    transform: translateX(-50%);
    animation: move-vertical 6s infinite; /* 从上到下动画，持续6秒，无限循环 */
}

@keyframes move-vertical {
    0% {
        top: 510px; /* 起始位置 */
    }
    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>