From 554ea194fa4332e97c3def7e010acecde26b48d5 Mon Sep 17 00:00:00 2001
From: yanjinhui <3306209981@qq.com>
Date: 星期四, 28 八月 2025 10:17:04 +0800
Subject: [PATCH] 前端页面的修改
---
项目代码/前端/后台/src/views/tts/PickAndDrop/PickAndDrop.vue | 300 +++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 196 insertions(+), 104 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\220\216\345\217\260/src/views/tts/PickAndDrop/PickAndDrop.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\220\216\345\217\260/src/views/tts/PickAndDrop/PickAndDrop.vue"
index 1729b30..0383d24 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\220\216\345\217\260/src/views/tts/PickAndDrop/PickAndDrop.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\220\216\345\217\260/src/views/tts/PickAndDrop/PickAndDrop.vue"
@@ -115,7 +115,7 @@
<div v-if="isMobile" class="content">
<div class="content_l">
<div class="model">宸︿晶浼哥缉鏉�</div>
- <div class="operate" style="opacity: 0">
+ <div class="operate" style="opacity: 100">
<div class="item">浼稿埌浣�</div>
<div class="item">缂╁埌浣�</div>
<div class="item">浼稿嚭閫熷害</div>
@@ -138,7 +138,7 @@
</div>
<div class="content_r">
<div class="model">鍙充晶浼哥缉鏉�</div>
- <div class="operate" style="opacity: 0">
+ <div class="operate" style="opacity: 100">
<div class="item">浼稿埌浣�</div>
<div class="item">缂╁埌浣�</div>
<div class="item">浼稿嚭閫熷害</div>
@@ -164,9 +164,9 @@
<div v-else class="content_mobile">
<div class="content_l">
<div style="display: flex; align-items: center">
- <div class="model">宸︿晶浼哥缉鏉�</div>
+ <div class="model">宸︿晶绔栧睆浼哥缉鏉�</div>
<div class="mode"></div>
- <div class="operate" style="opacity: 0">
+ <div class="operate" style="opacity:100">
<div class="item">浼稿埌浣�</div>
<div class="item">缂╁埌浣�</div>
<div class="item">浼稿嚭閫熷害</div>
@@ -190,9 +190,9 @@
</div>
<div class="content_r">
<div style="display: flex; align-items: center">
- <div class="model">鍙充晶浼哥缉鏉�</div>
+ <div class="model">鍙充晶绔栧睆浼哥缉鏉�</div>
<div class="mode"></div>
- <div class="operate" style="opacity: 0">
+ <div class="operate" style="opacity: 100">
<div class="item">浼稿埌浣�</div>
<div class="item">缂╁埌浣�</div>
<div class="item">浼稿嚭閫熷害</div>
@@ -221,6 +221,7 @@
<!-- 閫氳繃鏍囩椤靛垏鎹㈤儴闂紝骞跺姩鎬佸姞杞借閮ㄩ棬鐨勪綅缃暟鎹�� -->
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane v-for="item in list" :key="item.id" :label="item.name" :name="item.id">
+ <!-- Manualcontrol锛氭帶鍒舵í灞� -->
<div class="Manualcontrol">
<div class="button">
<el-button
@@ -304,10 +305,10 @@
</div>
</div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣峽{ruleForm.leftPosition}}</div>
+ <div class="item">缂╁埌浣峽{0}}</div>
+ <div class="item">浼稿嚭閫熷害{{ruleForm.extendSpeed}}</div>
+ <div class="item">缂╁洖閫熷害{{ruleForm.extendSpeed}}</div>
<!-- <div class="open">
<div class="city">
<div class="dotted"></div>
@@ -406,10 +407,10 @@
</div>
</div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣峽{ruleForm.leftPosition}}</div>
+ <div class="item">缂╁埌浣峽{0}}</div>
+ <div class="item">浼稿嚭閫熷害{{ruleForm.extendSpeed}}</div>
+ <div class="item">缂╁洖閫熷害{{ruleForm.extendSpeed}}</div>
<!-- <div class="open">
<div class="city">
<div class="dotted"></div>
@@ -499,17 +500,17 @@
<span style="font-size: 1.25rem; text-align: center">鐐瑰姩缂�</span>
</el-button>
</div>
- <div style="color: #fff; font-size: 1.5rem"> 宸︿晶浼哥缉鏉� </div>
+ <div style="color: #fff; font-size: 1.5rem"> 宸︿晶绔栧睆鎵嬪姩浼哥缉鏉� </div>
<div style="color: #fff; font-size: 1.5rem">
<!-- 褰撳墠浼哥缉鏉嗕綅缃�:{{ Position.left }} -->
</div>
</div>
<!-- 鎶� style鍘绘帀灏辨樉绀轰簡-->
- <div class="operate" style="opacity: 0">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="operate" style="opacity: 100">
+ <div class="item">浼稿埌浣峽{ruleForm.leftPosition}}</div>
+ <div class="item">缂╁埌浣峽{0}}</div>
+ <div class="item">浼稿嚭閫熷害{{ruleForm.extendSpeed}}</div>
+ <div class="item">缂╁洖閫熷害{{ruleForm.extendSpeed}}</div>
<!-- <div class="open">
<div class="city">
<div class="dotted"></div>
@@ -521,11 +522,21 @@
</div>
<div style="display: flex; flex-direction: column; align-items: center">
<div class="video_l">
- <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
+ <!-- <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
>绔栧睆鎵嬪姩瑙嗛鐩戞帶宸︿晶</span
>
- <img src="@/assets/imgs/right.png" alt="" />
+ <img src="@/assets/imgs/right.png" alt="" /> -->
+ <video
+ id="video_left"
+ autoplay
+ muted
+ controls
+ playsinline
+ width="100%"
+ height="100%"
+ ></video>
</div>
+
</div>
</div>
<div class="content_r">
@@ -596,16 +607,16 @@
<span style="font-size: 1.25rem; text-align: center">鐐瑰姩缂�</span>
</el-button>
</div>
- <div style="color: #fff; font-size: 1.5rem"> 鍙充晶浼哥缉鏉� </div>
+ <div style="color: #fff; font-size: 1.5rem"> 鍙充晶绔栧睆鎵嬪姩浼哥缉鏉� </div>
<div style="color: #fff; font-size: 1.5rem">
<!-- 褰撳墠浼哥缉鏉嗕綅缃�:{{ Position.right }} -->
</div>
</div>
- <div class="operate" style="opacity: 0">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="operate" style="opacity:100">
+ <div class="item">浼稿埌浣峽{ruleForm.leftPosition}}</div>
+ <div class="item">缂╁埌浣峽{0}}</div>
+ <div class="item">浼稿嚭閫熷害{{ruleForm.extendSpeed}}</div>
+ <div class="item">缂╁洖閫熷害{{ruleForm.extendSpeed}}</div>
<!-- <div class="open">
<div class="city">
<div class="dotted"></div>
@@ -617,11 +628,20 @@
</div>
<div style="display: flex; flex-direction: column; align-items: center">
<div class="video_r">
- <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
+ <!-- <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
>瑙嗛鐩戞帶鍙充晶58</span
>
- <img src="@/assets/imgs/left.png" alt="" />
+ <img src="@/assets/imgs/left.png" alt="" /> -->
+ <video
+ id="video_left"
+ autoplay
+ muted
+ controls
+ playsinline
+ width="100%"
+ height="100%"
+ ></video>
</div>
</div>
</div>
@@ -639,6 +659,7 @@
<el-radio :value="3">妫�淇亾涓�</el-radio>
<el-radio :value="4">妫�淇亾鍥�</el-radio>
<el-radio :value="5">妫�淇亾浜�</el-radio>
+ <el-radio :value="6">妫�淇亾鍏�</el-radio>
</el-radio-group>
</div>
<template #footer>
@@ -653,7 +674,7 @@
import { ref, onMounted, nextTick ,onUnmounted,onActivated,onDeactivated ,onBeforeUnmount} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
-import { AutoPickAndDrop, ManualOperation, Pause, GetPosition } from '@/api/newapi/Parameters.js'
+import { AutoPickAndDrop, ManualOperation, Pause, GetPosition,BackfillSpeed } from '@/api/newapi/Parameters.js'
const activeName = ref('first')
const router = useRouter()
const isShow = ref(false)
@@ -749,6 +770,49 @@
console.log(res)
}, 2000)
+//瀹氫箟浼哥缉鏉嗚繑鍥為�熷害鍙傛暟
+const ruleForm = ref({
+ id: 0,
+ extendSpeed: 0,
+ retractionSpeed: 0,
+ manualExtend: 0,
+ manualRetraction: 0,
+ leftPosition: 0,
+ rightPosition: 0,
+});
+
+//璋冪敤杩斿洖浼哥缉鏉嗚缃弬鏁�
+const GetfillSpeed= async(DeptId)=>{
+ try{
+ const res = await BackfillSpeed(DeptId)
+ // console.log('DeptId',DeptId)
+ console.log("杩斿洖閫熷害淇℃伅",res)
+ if(res.status === true){
+ if(res.code === 0){
+ ruleForm.value.extendSpeed = res.data == null ? 0 : res.data.extendSpeed;
+ ruleForm.value.retractionSpeed =
+ res.data == null ? 0 : res.data.retractionSpeed;
+ ruleForm.value.manualExtend =
+ res.data == null ? 0 : res.data.manualExtend;
+ ruleForm.value.manualRetraction =
+ res.data == null ? 0 : res.data.manualRetraction;
+ ruleForm.value.leftPosition =
+ res.data == null ? 0 : res.data.leftPosition;
+ ruleForm.value.rightPosition =
+ res.data == null ? 0 : res.data.rightPosition;
+ }else{
+ ElMessage.error(res.message)
+ }
+ }else{
+ ElMessage.error('鑾峰彇浼哥缉鏉嗛�熷害澶辫触')
+ }
+ }
+ catch(error){
+ console.error(error)
+ ElMessage.error('鑾峰彇浼哥缉鏉嗛�熷害澶辫触')
+ }
+}
+
// 閫氳繃鏍囩椤靛垏鎹㈤儴闂紝骞跺姩鎬佸姞杞借閮ㄩ棬鐨勪綅缃暟鎹��
@@ -781,17 +845,17 @@
const webRtcServer_left = ref(null)
const webRtcServer_right = ref(null)
+
//鍒囨崲鏍囩
const handleClick = (tab, event) => {
destroyVideo()//鍒囨崲鐨勬椂鍊欐秷闄や笂娆＄殑瑙嗛鐩戞帶娴�
- console.log(tab.index);
+ console.log("褰撳墠鏍囩涓嬭〃",tab.index);
DeptId.value = Number(tab.index) + 1
- // GetPosition(DeptId.value).then((res) => {
- // Position.value.left = res.data.lift
- // Position.value.right = res.data.right
- // })
+ console.log('褰撳墠閮ㄩ棬ID:', DeptId.value)
+ GetfillSpeed(DeptId.value)
+
rstp.value=srtpaddres[tab.index].left
rstp1.value=srtpaddres[tab.index].right
}
@@ -895,12 +959,13 @@
}
onMounted(() => {
+ GetfillSpeed(1) //鑾峰彇浼哥缉鏉嗛�熷害
initVideo()//寮�濮嬬殑鏃跺�欏鍏ヨ棰戠洃鎺ф祦
// 鐩戝惉绐楀彛澶у皬鍙樺寲
window.addEventListener('resize', () => {
nextTick(() => {
if (window.innerWidth > 1200) {
- isMobile.value = true
+ isMobile.value = true //榛樿鏄í灞�
} else {
isMobile.value = false
}
@@ -980,20 +1045,6 @@
top: -0.25rem;
border-radius: 50%;
}
-
- // .Aspan::after {
- // content: '';
- // position: absolute;
- // height: 0.66rem;
- // /* 璁剧疆杈规鐨勯暱搴� */
- // width: 0.66rem;
- // /* 璁剧疆杈规鐨勫搴� */
- // background-color: rgba(102, 255, 255, 1);
- // /* 璁剧疆杈规鐨勯鑹� */
- // right: -9.5rem;
- // top: -0.25rem;
- // border-radius: 50%;
- // }
}
.btn::after {
@@ -1033,9 +1084,9 @@
.content {
display: flex;
.content_l {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ // display: flex;
+ // flex-direction: column;
+ // justify-content: space-between;
width: 50%;
height: 45rem;
background-color: rgba(9, 48, 104, 1);
@@ -1050,11 +1101,19 @@
font-size: 2rem;
}
+ //妯睆鑷姩椤甸潰宸﹁竟
.operate {
+ // display: flex;
+ // margin-left: auto;
+ // flex-direction: column;
+ // align-items: flex-end;
+ // padding: 0.58rem 0.58rem;
display: flex;
- flex-direction: column;
- align-items: flex-end;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
padding: 0.58rem 0.58rem;
+ margin-bottom: 10px;
.item {
display: flex;
@@ -1074,6 +1133,7 @@
font-size: 1.13rem;
padding-left: 0.69rem;
margin-top: 0.88rem;
+ margin-left: 1rem;
}
.open {
@@ -1176,10 +1236,11 @@
}
}
+ //妯睆鑷姩椤甸潰鍙宠竟
.content_r {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ // display: flex;
+ // flex-direction: column;
+ // justify-content: space-between;
width: 50%;
height: 45rem;
background-color: rgba(9, 48, 104, 1);
@@ -1195,11 +1256,18 @@
font-size: 2rem;
}
+ //妯睆鑷姩椤甸潰鍙宠竟
.operate {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
+ // display: flex;
+ // flex-direction: column;
+ // align-items: flex-end;
+ // padding: 0.58rem 0.58rem;
+ display: flex;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
padding: 0.58rem 0.58rem;
+ margin-bottom: 10px;
.item {
display: flex;
flex-direction: column;
@@ -1218,6 +1286,7 @@
font-size: 1.13rem;
padding-left: 0.69rem;
margin-top: 0.88rem;
+ margin-left: 10px;
}
.open {
@@ -1321,6 +1390,7 @@
}
}
+// 鎺у埗绔栧睆鏍峰紡
.content_mobile {
display: flex;
flex-direction: column;
@@ -1343,10 +1413,15 @@
}
.operate {
+ // display: flex;
+ // flex-direction: column;
+ // align-items: flex-end;
+ // padding: 0 0.88rem;
display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding: 0 0.88rem;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
@@ -1365,6 +1440,7 @@
font-size: 1.13rem;
padding-left: 0.69rem;
margin-top: 0.88rem;
+ margin-right: 1rem;
}
.open {
@@ -1483,10 +1559,15 @@
}
.operate {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding: 0 0.88rem;
+ // display: flex;
+ // flex-direction: column;
+ // align-items: flex-end;
+ // padding: 0 0.88rem;
+ display: flex;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
@@ -1505,6 +1586,7 @@
font-size: 1.13rem;
padding-left: 0.69rem;
margin-top: 0.88rem;
+ margin-right: 1rem;
}
.open {
@@ -1639,20 +1721,6 @@
top: -0.25rem;
border-radius: 50%;
}
-
- // .Aspan::after {
- // content: '';
- // position: absolute;
- // height: 0.66rem;
- // /* 璁剧疆杈规鐨勯暱搴� */
- // width: 0.66rem;
- // /* 璁剧疆杈规鐨勫搴� */
- // background-color: rgba(102, 255, 255, 1);
- // /* 璁剧疆杈规鐨勯鑹� */
- // right: -11.8rem;
- // top: -0.25rem;
- // border-radius: 50%;
- // }
}
.btn::after {
@@ -1691,9 +1759,9 @@
.content {
display: flex;
.content_l {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ // display: flex;
+ // flex-direction: column;
+ // // justify-content: space-between;
width: 50%;
height: 45rem;
background-color: rgba(9, 48, 104, 1);
@@ -1723,8 +1791,11 @@
.operate {
display: flex;
- flex-direction: column;
- align-items: flex-end;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
+ padding: 0.58rem 0.58rem;
+
.item {
display: flex;
flex-direction: column;
@@ -1732,6 +1803,7 @@
width: 8.75rem;
height: 3.19rem;
border-radius: 0.31rem;
+ margin-left:0.5rem ;
background: linear-gradient(
90deg,
rgba(0, 224, 255, 0.74) 0%,
@@ -1742,7 +1814,8 @@
color: rgb(255, 255, 255);
font-size: 1.13rem;
padding-left: 0.69rem;
- margin-top: 0.88rem;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.open {
@@ -1846,9 +1919,9 @@
}
.content_r {
- display: flex;
- justify-content: space-between;
- flex-direction: column;
+ // display: flex;
+ // justify-content: space-between;
+ // flex-direction: column;
width: 50%;
height: 45rem;
background-color: rgba(9, 48, 104, 1);
@@ -1880,9 +1953,14 @@
}
.operate {
- display: flex;
- align-items: flex-end;
- flex-direction: column;
+ // display: flex;
+ // align-items: flex-end;
+ // flex-direction: column;
+ // padding: 0.58rem 0.58rem;
+ display: flex;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
padding: 0.58rem 0.58rem;
.item {
@@ -1891,6 +1969,7 @@
justify-content: center;
width: 8.75rem;
height: 3.19rem;
+ margin-left:0.5rem ;
border-radius: 0.31rem;
background: linear-gradient(
90deg,
@@ -1902,7 +1981,8 @@
color: rgb(255, 255, 255);
font-size: 1.13rem;
padding-left: 0.69rem;
- margin-top: 0.88rem;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.open {
@@ -2043,10 +2123,15 @@
}
.operate {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding: 0.88rem 0.58rem;
+ // display: flex;
+ // flex-direction: column;
+ // align-items: flex-end;
+ // padding: 0.88rem 0.58rem;
+ display: flex;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
@@ -2054,6 +2139,7 @@
width: 8.75rem;
height: 4.19rem;
border-radius: 0.31rem;
+ margin-right: 1rem;
background: linear-gradient(
90deg,
rgba(0, 224, 255, 0.74) 0%,
@@ -2199,10 +2285,15 @@
}
.operate {
- display: flex;
- flex-direction: column;
- padding: 0 0.88rem;
- align-items: flex-end;
+ // display: flex;
+ // flex-direction: column;
+ // padding: 0 0.88rem;
+ // align-items: flex-end;
+ display: flex;
+ flex-direction: row; // 妯悜鎺掑垪
+ align-items: center; // 鍨傜洿灞呬腑
+ justify-content: flex-start; // 闈犲乏
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
@@ -2210,6 +2301,7 @@
width: 8.75rem;
height: 4.19rem;
border-radius: 0.31rem;
+ margin-right: 1rem;
background: linear-gradient(
90deg,
rgba(0, 224, 255, 0.74) 0%,
--
Gitblit v1.9.3