| | |
| | | import {reactive} from "vue"; |
| | | import {useRouter} from "vue-router" |
| | | const router = useRouter() |
| | | |
| | | |
| | | 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(60); |
| | | const carposition2 = ref(200); |
| | | const carposition2 = ref(220); |
| | | const carposition3 = ref(60); |
| | | const carposition4 = ref(260); |
| | | const timers1 =ref(true); |
| | | const timers2 =ref(true); |
| | | const timers3 =ref(true); |
| | | const timers4 =ref(true); |
| | | const cellshow=ref(false); |
| | | const cellshow5=ref(false); |
| | | const c1=ref(false); |
| | | const c2=ref(false); |
| | | const cellshow1=ref(true); |
| | | const cellshow2=ref(true); |
| | | const cellshow3=ref(true); |
| | | const cellshow4=ref(true); |
| | | const million=ref(0); |
| | | const million1=ref(0); |
| | | |
| | | const million3=ref(0); |
| | | const million4=ref(0); |
| | | |
| | | const currentPage4 = ref(4) |
| | | const pageSize4 = ref(100) |
| | | const tableData = [ |
| | |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | |
| | | 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){ |
| | | if(carposition1.value==220){ |
| | | timers1.value=false; |
| | | }else if(carposition1.value==60){ |
| | | timers1.value=true; |
| | | } |
| | | if(timers1.value==true){ |
| | | carposition1.value=carposition1.value+14; |
| | | carposition1.value=carposition1.value+16; |
| | | }else{ |
| | | carposition1.value=carposition1.value-14; |
| | | carposition1.value=carposition1.value-16; |
| | | } |
| | | |
| | | |
| | | |
| | | if(carposition2.value==200){ |
| | | if(carposition2.value==220){ |
| | | timers2.value=false; |
| | | }else if(carposition2.value==60){ |
| | | timers2.value=true; |
| | | } |
| | | if(timers2.value==true){ |
| | | carposition2.value+=14; |
| | | carposition2.value+=16; |
| | | }else{ |
| | | carposition2.value-=14; |
| | | carposition2.value-=16; |
| | | } |
| | | }else{ |
| | | |
| | | |
| | | } |
| | | }else{ |
| | | million1.value=million.value; |
| | |
| | | } |
| | | |
| | | }, 1000); |
| | | |
| | | |
| | | |
| | | var timer=setInterval(() => { |
| | | console.log(million3.value,million4.value); |
| | | million3.value+=1; |
| | | if(million3.value-million4.value!==12){ |
| | | |
| | | if(million3.value-million4.value>=2){ |
| | | if(carposition3.value==260){ |
| | | timers3.value=false; |
| | | }else if(carposition3.value==60){ |
| | | timers3.value=true; |
| | | } |
| | | if(timers3.value==true){ |
| | | carposition3.value=carposition3.value+20; |
| | | }else{ |
| | | carposition3.value=carposition3.value-20; |
| | | } |
| | | |
| | | |
| | | if(carposition4.value==260){ |
| | | timers4.value=false; |
| | | }else if(carposition4.value==60){ |
| | | timers4.value=true; |
| | | } |
| | | if(timers4.value==true){ |
| | | carposition4.value+=20; |
| | | }else{ |
| | | carposition4.value-=20; |
| | | } |
| | | }else{ |
| | | |
| | | } |
| | | }else{ |
| | | million4.value=million3.value; |
| | | if(cellshow5.value==true){ |
| | | cellshow5.value=false; |
| | | |
| | | }else{ |
| | | cellshow5.value=true; |
| | | |
| | | } |
| | | if(cellshow3.value==true){ |
| | | cellshow3.value=false; |
| | | }else{ |
| | | cellshow3.value=true; |
| | | } |
| | | if(cellshow4.value==true){ |
| | | cellshow4.value=false; |
| | | }else{ |
| | | cellshow4.value=true; |
| | | } |
| | | } |
| | | |
| | | }, 1000); |
| | | |
| | | const getTableRow = (row,type) =>{ |
| | | switch (type) { |
| | | case 'edit' :{ |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | const gridOptions = reactive({ |
| | | border: "full",//表格加边框 |
| | | keepSource: true,//保持源数据 |
| | |
| | | ], |
| | | }) |
| | | </script> |
| | | |
| | | |
| | | <template> |
| | | <div style="height: 700px;"> |
| | | <!-- <el-button style="margin-top: 5px;margin-left: 10px;" id="searchButton" type="primary" @click="dialogFormVisible = true">手动进片</el-button> --> |
| | |
| | | <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:#409EFF;"></div> |
| | | </div> |
| | | |
| | | <div class="img-car2" :style="'z-index:999;left:704px;top:' + carposition2 + 'px;position:absolute;'"> |
| | | <div v-show="c1" 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:#409EFF;"></div> |
| | | </div> |
| | | |
| | | <div v-show="c2" class="img-car3" :style="'z-index:999;left:247px;top:' + carposition3 + 'px;position:absolute;'"> |
| | | <div v-show="cellshow3" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div> |
| | | </div> |
| | | <div class="img-car4" :style="'z-index:999;left:704px;top:' + carposition4 + 'px;position:absolute;'"> |
| | | <div v-show="cellshow4" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div> |
| | | </div> |
| | | <div v-show="cellshow" style="width: 200px;height: 5px;position: absolute;top:70px;left: 480px;background-color: #409EFF;"> |
| | | |
| | | </div> |
| | | <div v-show="cellshow5" style="width: 200px;height: 5px;position: absolute;top:70px;left: 480px;background-color: #409EFF;"> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | <el-dialog v-model="dialogFormVisible" top="12vh" width="85%" title="请确认玻璃信息" > |
| | | <div style="margin-left: 50px;margin-bottom: 10px;"> |
| | |
| | | <el-table-column prop="type" align="center" label="操作" min-width="120" /> |
| | | </el-table> |
| | | </el-dialog> |
| | | |
| | | |
| | | </template> |
| | | <style scoped> |
| | | |
| | | |
| | | #dt { display:block; float:left;line-height: 20px;margin-left: 100px;} |
| | | #dta { display:block; float:left;line-height: 20px;margin-left: 80%;} |
| | | #dialog-footer{ |
| | |
| | | width: 0 !important;height: 0; |
| | | } |
| | | .img-list{ |
| | | |
| | | |
| | | position:relative; |
| | | } |
| | | .data-img{ |
| | |
| | | background: rgba(0, 0, 0, 0); |
| | | opacity: 1; |
| | | border-radius: 0.5rem 0.5rem 0px 0px; |
| | | |
| | | |
| | | } |
| | | .check-img{ |
| | | position: absolute; |
| | |
| | | transform: translateX(-50%); |
| | | animation: move-vertical 6s infinite; /* 从上到下动画,持续6秒,无限循环 */ |
| | | } |
| | | |
| | | |
| | | @keyframes move-vertical { |
| | | 0% { |
| | | top: 485px; /* 起始位置 */ |
| | |
| | | top: calc(100% - 210px); /* 从上到下结束位置 */ |
| | | } |
| | | } |
| | | |
| | | |
| | | .img-dlpl{ |
| | | margin-left: 200px; |
| | | background-image:url('../../assets/dlpl.png'); |
| | |
| | | overflow: hidden; |
| | | position:relative |
| | | } |
| | | .img-car3{ |
| | | background-image:url('../../assets/lp.png'); |
| | | 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-car4{ |
| | | background-image:url('../../assets/lpa.png'); |
| | | 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> |