From 772190e7b2e3f6ef0695ba54d9209324acdcb30a Mon Sep 17 00:00:00 2001
From: 艺术家 <10819716+q100102@user.noreply.gitee.com>
Date: 星期三, 04 六月 2025 13:57:17 +0800
Subject: [PATCH] 伸缩杆代码提交
---
项目代码/伸缩杆/client/src/views/tts/PickAndDrop/PickAndDrop.vue | 460 ++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 384 insertions(+), 76 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/PickAndDrop.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/PickAndDrop.vue"
index 5337731..bbf06f9 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/PickAndDrop.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/PickAndDrop.vue"
@@ -1,17 +1,23 @@
<template>
<div class="PickAndDrop">
<div class="button">
- <div class="button_l">
- <el-button type="primary" size="small" style="
+ <!-- <div class="button_l">
+ <el-button
+ @click="handleAutoPickAndDrop('浼稿嚭')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -22,20 +28,28 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
- <span style="font-size: 2.25rem; text-align: center">浼稿嚭</span>
+ <span style="font-size: 2.25rem; text-align: center">瀹氫綅浼告寜閽�</span>
</el-button>
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handleAutoPickAndDrop('缂╁洖')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -46,29 +60,80 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
- <span style="font-size: 2.25rem; text-align: center">缂╁洖</span>
+ <span style="font-size: 2.25rem; text-align: center">瀹氫綅缂╂寜閽�</span>
</el-button>
- </div>
+ <el-button
+ @click="handlePouse"
+ type="primary"
+ size="small"
+ style="
+ width: 14.69rem;
+ height: 5.06rem;
+ color: rgba(64, 253, 240, 1);
+ background-color: rgba(6, 229, 231, 0.3);
+ border: none;
+ border-top: 0.25rem solid rgba(6, 229, 231, 1);
+ "
+ >
+ <div class="btnicon">
+ <span
+ style="
+ width: 1rem;
+ height: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50% 50%;
+ border: 0.1rem solid rgb(0, 0, 0);
+ color: rgb(0, 0, 0);
+ font-size: 0.75rem;
+ margin-left: 0.1rem;
+ "
+ >i</span
+ >
+ </div>
+ <span style="font-size: 2.25rem; text-align: center">鏆傚仠</span>
+ </el-button>
+ </div> -->
<div class="button_r">
- <el-button @click="jumpRouter('/Manualcontrol')" class="btn" type="primary" size="small" style="
+ <el-button
+ @click="jumpRouter('/Manualcontrol')"
+ class="btn"
+ type="primary"
+ size="small"
+ style="
width: 27.52rem;
height: 4.29rem;
color: rgba(255, 255, 255, 1);
- ">
- <span class="Aspan" style="font-size: 2.25rem; text-align: center">鎵嬪姩鎺у埗</span>
+ "
+ >
+ <span class="Aspan" style="font-size: 2.25rem; text-align: center"
+ >鎵嬪姩鎺у埗</span
+ >
</el-button>
</div>
</div>
<div v-if="isMobile" class="content">
<div class="content_l">
- <div class="model">宸︿晶浼哥缉鏉�</div>
+ <div class="model">
+ <span
+ >褰撳墠浼哥缉鏉嗕綅缃細{{
+ leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
+ }}</span
+ >
+ <span>宸︿晶浼哥缉鏉�</span>
+ <span></span>
+ </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>
+ <!-- ruleForm.leftPosition -->
+ <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>
@@ -78,14 +143,31 @@
</div>
</div>
</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
+ >
+ <img src="@/assets/imgs/left.png" alt="" />
+ </div>
+ </div>
</div>
<div class="content_r">
- <div class="model">鍙充晶浼哥缉鏉�</div>
+ <div class="model">
+ <span
+ >褰撳墠浼哥缉鏉嗕綅缃細{{
+ rightposition.Rightvalue ? parseInt(rightposition.Rightvalue) : 0
+ }}</span
+ >
+ <span>鍙充晶浼哥缉鏉�</span>
+ <span></span>
+ </div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣�:{{ ruleForm.rightPosition }}</div>
+ <!-- ruleForm.rightPosition -->
+ <div class="item">缂╁埌浣�:{{ 0 }}</div>
+ <div class="item">浼稿嚭閫熷害:{{ ruleForm.retractionSpeed }}</div>
+ <div class="item">缂╁洖閫熷害:{{ ruleForm.retractionSpeed }}</div>
<div class="open">
<div class="city">
<div class="dotted"></div>
@@ -93,18 +175,35 @@
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
+ </div>
+ </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
+ >
+ <img src="@/assets/imgs/right.png" alt="" />
</div>
</div>
</div>
</div>
<div v-else class="content_mobile">
<div class="content_l">
- <div class="model">宸︿晶浼哥缉鏉�</div>
+ <div class="model">
+ <span
+ >褰撳墠浼哥缉鏉嗕綅缃細{{
+ leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
+ }}</span
+ >
+ <span>宸︿晶浼哥缉鏉�</span>
+ <span></span>
+ </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>
+ <!-- ruleForm.leftPosition -->
+ <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>
@@ -114,14 +213,31 @@
</div>
</div>
</div>
+ <div style="display: flex; flex-direction: column; align-items: center">
+ <div class="video_l">
+ <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
+ >瑙嗛鐩戞帶宸︿晶</span
+ >
+ <img src="@/assets/imgs/left.png" alt="" />
+ </div>
+ </div>
</div>
<div class="content_r">
- <div class="model">鍙充晶浼哥缉鏉�</div>
+ <div class="model">
+ <span
+ >褰撳墠浼哥缉鏉嗕綅缃細{{
+ rightposition.Rightvalue ? parseInt(rightposition.Rightvalue) : 0
+ }}</span
+ >
+ <span>鍙充晶浼哥缉鏉�</span>
+ <span></span>
+ </div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣�:{{ ruleForm.rightPosition }}</div>
+ <!-- ruleForm.rightPosition -->
+ <div class="item">缂╁埌浣�:{{ 0 }}</div>
+ <div class="item">浼稿嚭閫熷害:{{ ruleForm.retractionSpeed }}</div>
+ <div class="item">缂╁洖閫熷害:{{ ruleForm.retractionSpeed }}</div>
<div class="open">
<div class="city">
<div class="dotted"></div>
@@ -129,6 +245,14 @@
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
+ </div>
+ </div>
+ <div style="display: flex; flex-direction: column; align-items: center">
+ <div class="video_r">
+ <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
+ >瑙嗛鐩戞帶鍙充晶</span
+ >
+ <img src="@/assets/imgs/right.png" alt="" />
</div>
</div>
</div>
@@ -136,15 +260,134 @@
</div>
</template>
<script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, onUnmounted } from "vue";
import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import {
+ AutoPickAndDrop,
+ Pouse,
+ GetPosition,
+ GetParameter,
+} from "@/api/newapi/Parameters.js";
+
const router = useRouter();
const isMobile = ref(false);
-
+const Position = ref({
+ lift: 0,
+ right: 0,
+});
+const ruleForm = ref({
+ creater: "string",
+ createDate: "2025-03-27T05:48:57.698Z",
+ modifier: "string",
+ modifyDate: "2025-03-27T05:48:57.698Z",
+ id: 0,
+ extendSpeed: 0,
+ retractionSpeed: 0,
+ manualExtend: 0,
+ manualRetraction: 0,
+ // depid: userInfo.depid,
+ // account: userInfo.userName,
+ leftPosition: 0,
+ rightPosition: 0,
+});
+const rightposition = ref({});
+const leftposition = ref({});
+const tableData = ref([]);
+const isStart = ref(false); // 鏄惁寮�濮�
+const timer = ref(null);
+const client = ref(null);
const jumpRouter = (path) => {
router.push(path);
};
+const handleAutoPickAndDrop = async (val) => {
+ try {
+ const response = await AutoPickAndDrop({
+ ExtendedState: val,
+ });
+ if (response.code === 0) {
+ ElMessage.success(`${val}鎴愬姛`);
+ } else {
+ ElMessage.error(`${val}澶辫触`);
+ }
+ } catch (error) {
+ console.error(error);
+ ElMessage.error("鎿嶄綔澶辫触");
+ }
+};
+const handlePouse = async () => {
+ try {
+ const response = await Pouse();
+ if (response.code === 0) {
+ ElMessage.success(response.message);
+ } else {
+ ElMessage.error(response.message);
+ }
+ } catch (error) {
+ console.error(error);
+ ElMessage.error(error);
+ }
+};
+//鑾峰彇褰撳墠浣嶇疆
+// const getPosition = () => {
+// GetPosition().then((res) => {
+// if (res.code == 0) {
+// Position.value.lift = res.data.lift;
+// Position.value.right = res.data.right;
+// }
+// });
+// };
+
+//鑾峰彇鍙傛暟
+const getParameter = () => {
+ GetParameter().then((res) => {
+ 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;
+ }
+ });
+};
+
+const createSocket = (url) => {
+ clearInterval(timer.value);
+ // 鍒涘缓WebSocket杩炴帴
+ //"ws://127.0.0.1:9295/admin"
+ //192.168.1.103
+ client.value = new WebSocket("ws://192.168.1.103:5173/");
+ client.value.onopen = function () {
+ console.log("WebSocket 杩炴帴鎴愬姛");
+ };
+ client.value.onmessage = function (event) {
+ let data = JSON.parse(event.data);
+ if (data.Status) {
+ tableData.value = data.Data;
+ } else if (data.device == "鍙砅lc") {
+ rightposition.value = data;
+ } else if (data.device == "宸lc") {
+ leftposition.value = data;
+ }
+
+ console.log("WebSocket 鎺ユ敹鍒版秷鎭�", data);
+ };
+ client.value.onclose = function () {
+ console.log("WebSocket 杩炴帴鍏抽棴");
+ if (isStart.value) {
+ timer.value = setTimeout(createSocket, 1000);
+ }
+ };
+
+ client.value.onerror = function () {};
+};
onMounted(() => {
// 鐩戝惉绐楀彛澶у皬鍙樺寲
window.addEventListener("resize", () => {
@@ -164,6 +407,19 @@
// 濡傛灉绐楀彛瀹藉害灏忎簬绛変簬1080px锛屾墽琛岀浉搴旂殑鎿嶄綔
isMobile.value = false;
}
+ isStart.value = true; // 璁剧疆涓哄紑濮嬬姸鎬�
+ createSocket();
+ // getPosition();
+ getParameter();
+});
+
+onUnmounted(() => {
+ isStart.value = false;
+ clearInterval(timer.value);
+ if (client.value) {
+ client.value.close();
+ }
+ clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
@@ -175,11 +431,9 @@
.button {
height: 7.83rem;
display: flex;
- justify-content: space-between;
-
+ justify-content: center;
.button_l {
display: flex;
-
.btnicon {
display: flex;
justify-content: center;
@@ -278,6 +532,7 @@
.content_l {
display: flex;
+ flex-direction: column;
justify-content: space-between;
width: 50%;
height: 45rem;
@@ -285,10 +540,12 @@
color: rgba(16, 16, 16, 1);
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
border: 0.06rem solid rgba(6, 229, 231, 1);
-
+ padding: 2rem 0rem;
.model {
color: #fff;
- text-align: center;
+ display: flex;
+ justify-content: space-between;
+ padding: 0rem 2rem;
width: 100%;
font-size: 2rem;
}
@@ -296,19 +553,22 @@
.operate {
display: flex;
flex-direction: column;
- padding: 0.88rem 0.88rem;
+ align-items: flex-end;
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
justify-content: center;
width: 8.75rem;
- height: 4.19rem;
+ height: 3.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -403,10 +663,22 @@
}
}
}
+ .video_l {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 80%;
+ border: 0.25rem solid rgba(255, 255, 255, 0.8);
+ img {
+ width: 6rem;
+ height: 8rem;
+ }
+ }
}
.content_r {
display: flex;
+ flex-direction: column;
justify-content: space-between;
width: 50%;
height: 45rem;
@@ -415,10 +687,12 @@
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
border: 0.06rem solid rgba(6, 229, 231, 1);
margin-left: 2rem;
-
+ padding: 2rem 0rem;
.model {
color: #fff;
- text-align: center;
+ display: flex;
+ justify-content: space-between;
+ padding: 0rem 2rem;
width: 100%;
font-size: 2rem;
}
@@ -426,19 +700,21 @@
.operate {
display: flex;
flex-direction: column;
- padding: 0.88rem 0.88rem;
-
+ align-items: flex-end;
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
justify-content: center;
width: 8.75rem;
- height: 4.19rem;
+ height: 3.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -531,6 +807,17 @@
height: 4.375rem;
opacity: 0;
}
+ }
+ }
+ .video_r {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 80%;
+ border: 0.25rem solid rgba(255, 255, 255, 0.8);
+ img {
+ width: 6rem;
+ height: 8rem;
}
}
}
@@ -543,25 +830,26 @@
.content_l {
display: flex;
justify-content: space-between;
+ flex-direction: column;
width: 100%;
- height: 45rem;
background-color: rgba(9, 48, 104, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
border: 0.06rem solid rgba(6, 229, 231, 1);
-
+ padding: 2rem 0rem;
.model {
color: #fff;
- text-align: center;
+ display: flex;
+ justify-content: space-between;
+ padding: 0rem 2rem;
width: 100%;
font-size: 2rem;
}
-
.operate {
display: flex;
flex-direction: column;
+ align-items: flex-end;
padding: 0.88rem 0.88rem;
-
.item {
display: flex;
flex-direction: column;
@@ -569,10 +857,12 @@
width: 8.75rem;
height: 4.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -666,23 +956,32 @@
opacity: 0;
}
}
+ }
+ .video_l {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 70rem;
+ border: 0.75rem solid rgba(255, 255, 255, 0.8);
}
}
.content_r {
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ justify-content: space-around;
width: 100%;
- height: 45rem;
background-color: rgba(9, 48, 104, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
border: 0.06rem solid rgba(6, 229, 231, 1);
margin-top: 10%;
-
+ padding: 2rem 0rem;
.model {
color: #fff;
- text-align: center;
+ display: flex;
+ justify-content: space-between;
+ padding: 0rem 2rem;
width: 100%;
font-size: 2rem;
}
@@ -690,8 +989,8 @@
.operate {
display: flex;
flex-direction: column;
+ align-items: flex-end;
padding: 0.88rem 0.88rem;
-
.item {
display: flex;
flex-direction: column;
@@ -699,10 +998,12 @@
width: 8.75rem;
height: 4.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -797,7 +1098,14 @@
}
}
}
+ .video_r {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 70rem;
+ border: 0.75rem solid rgba(255, 255, 255, 0.8);
+ }
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3