From e339917989dcd29c08a0000deb41f10ded43dd5d Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期三, 29 五月 2024 09:27:29 +0800
Subject: [PATCH] 增加联机状态,更改json文件位置
---
UI-Project/src/views/Slicecage/slicecage.vue | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 334 insertions(+), 25 deletions(-)
diff --git a/UI-Project/src/views/Slicecage/slicecage.vue b/UI-Project/src/views/Slicecage/slicecage.vue
index 9c7b9f9..22d0adc 100644
--- a/UI-Project/src/views/Slicecage/slicecage.vue
+++ b/UI-Project/src/views/Slicecage/slicecage.vue
@@ -3,13 +3,35 @@
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(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 = [
@@ -20,7 +42,7 @@
c: '123456789',
d: '1568251',
e: '1',
- f: '100',
+ f: '100*100',
g: '',
},
]
@@ -32,7 +54,7 @@
c: '123456789',
d: '1568251',
e: '1',
- f: '100',
+ f: '100*100',
g: '',
}
]
@@ -59,6 +81,115 @@
})
})
}
+
+ 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==220){
+ timers1.value=false;
+ }else if(carposition1.value==60){
+ timers1.value=true;
+ }
+ if(timers1.value==true){
+ carposition1.value=carposition1.value+16;
+ }else{
+ carposition1.value=carposition1.value-16;
+ }
+
+
+ if(carposition2.value==220){
+ timers2.value=false;
+ }else if(carposition2.value==60){
+ 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);
+
+ 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' :{
@@ -72,7 +203,7 @@
}
}
}
-
+
const gridOptions = reactive({
border: "full",//琛ㄦ牸鍔犺竟妗�
keepSource: true,//淇濇寔婧愭暟鎹�
@@ -111,7 +242,7 @@
],
})
</script>
-
+
<template>
<div style="height: 700px;">
<!-- <el-button style="margin-top: 5px;margin-left: 10px;" id="searchButton" type="primary" @click="dialogFormVisible = true">鎵嬪姩杩涚墖</el-button> -->
@@ -133,7 +264,9 @@
<el-table-column prop="d" align="center" label="娴佺▼鍗″彿" min-width="120" />
<el-table-column prop="e" align="center" label="閽㈠寲鐗堝浘鍙�" min-width="157" />
<el-table-column prop="f" align="center" label="灏哄" min-width="120" />
- <el-table-column prop="g" align="center" label="缁撴潫浠诲姟" min-width="120" />
+ <el-table-column prop="g" align="center" label="缁撴潫浠诲姟" min-width="120">
+ <el-button style="margin-top: 5px;margin-left: 10px;" id="searchButton" type="text">瀹屾垚浠诲姟</el-button>
+</el-table-column>
</el-table>
</div>
</el-card>
@@ -149,30 +282,128 @@
<el-table-column prop="d" align="center" label="娴佺▼鍗″彿" min-width="120" />
<el-table-column prop="e" align="center" label="閽㈠寲鐗堝浘鍙�" min-width="157" />
<el-table-column prop="f" align="center" label="灏哄" min-width="120" />
- <el-table-column prop="g" align="center" label="缁撴潫浠诲姟" min-width="120" />
+ <el-table-column prop="g" align="center" label="缁撴潫浠诲姟" min-width="120">
+ <el-button style="margin-top: 5px;margin-left: 10px;" id="searchButton" type="text">瀹屾垚浠诲姟</el-button>
+</el-table-column>
</el-table>
</div>
</el-card>
<div style="padding: 10px;display: flex;height:110px;">
- <div v-for="n in 9" :key="n" id="occupy">
+ <div id="occupy">
<el-col style="text-align:left;font-weight: bold;">#1</el-col>
<el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
- <span id="biao">浣跨敤鐜�</span><span id="zhi">33%</span>
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
</el-col>
<hr style="width:80%;margin: 0 auto;" />
<el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
- <span id="biao">绌洪棿锛堢墖鏁帮級</span><span id="zhi">555</span>
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
</el-col>
- </div>
+ </div>
+ <div id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#2</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div>
+ <div id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#3</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div>
+ <div id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#4</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div>
+ <div id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#5</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div>
+ <div id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#6</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div>
+ <div id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#7</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div>
+ <div id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#8</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div>
+ <!-- <div v-for="n in 8" :key="n" id="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#1</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">浣跨敤鐜�</span><span id="zhi">35%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span id="biao">绌洪棽锛堟牸瀛愭暟锛�</span><span id="zhi">555</span>
+ </el-col>
+ </div> -->
</div>
<!-- <div id="awatch">
- <img src="../../assets/lpl.jpg" alt="" style="width: 10%;height: 10%;margin-left: 160px;">
+ <img src="../../assets/cp.png" alt="" style="width: 70%;height: 70%;margin-left: 160px;">
</div> -->
-
-
- <div id="awatch">
- <img src="../../assets/cp.png" alt="" style="width: 1305px;height: 400px;margin-left: 240px;margin-top: 50px;">
+<!-- // 鐖剁骇妗� -->
+<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:#409EFF;"></div>
+ </div>
+ <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;">
@@ -347,10 +578,10 @@
<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{
@@ -371,7 +602,7 @@
}
#occupy {
height: 100%;
- width: 10%;
+ width: 15%;
background-color: white;
margin: 0px 8px 0px 8px;
border: 1px #EBEEF5 solid;
@@ -398,7 +629,7 @@
width: 0 !important;height: 0;
}
.img-list{
-
+
position:relative;
}
.data-img{
@@ -409,14 +640,14 @@
background: rgba(0, 0, 0, 0);
opacity: 1;
border-radius: 0.5rem 0.5rem 0px 0px;
-
+
}
.check-img{
position: absolute;
width: 3.3125rem;
height: 2.9375rem;
top:20rem;
- right: 52rem;
+ right: 57rem;
z-index: 10;
}
@@ -425,9 +656,87 @@
width: 3.3125rem;
height: 2.9375rem;
top:15rem;
- right: 37rem;
+ 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/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-car2{
+ 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
+}
+.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>
\ No newline at end of file
--
Gitblit v1.8.0