<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>
|
