伸缩杆代码提交

艺术家

2025-06-04 772190e7b2e3f6ef0695ba54d9209324acdcb30a

 ÏîÄ¿´úÂë/ÉìËõ¸Ë/client/src/views/tts/PickAndDrop/PickAndDrop.vue

@@ -1,7 +1,7 @@
<template>
  <div class="PickAndDrop">
    <div class="button">
      <div class="button_l">
      <!-- <div class="button_l">
        <el-button
          @click="handleAutoPickAndDrop('伸出')"
          type="primary"
@@ -32,7 +32,7 @@
              >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
          @click="handleAutoPickAndDrop('缩回')"
@@ -64,9 +64,41 @@
              >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')"
@@ -87,12 +119,21 @@
    </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>
@@ -102,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>
@@ -117,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>
@@ -138,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>
@@ -153,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>
@@ -160,14 +260,43 @@
  </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 } from "@/api/newapi/Parameters.js";
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);
};
@@ -185,6 +314,79 @@
    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 == "右Plc") {
      rightposition.value = data;
    } else if (data.device == "å·¦Plc") {
      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(() => {
  // ç›‘听窗口大小变化
@@ -205,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>
@@ -216,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;
@@ -319,6 +532,7 @@

    .content_l {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 50%;
      height: 45rem;
@@ -326,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;
      }
@@ -337,14 +553,15 @@
      .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,
@@ -446,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;
@@ -458,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;
      }
@@ -469,14 +700,14 @@
      .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,
@@ -576,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;
        }
      }
    }
@@ -588,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;
@@ -713,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;
      }
@@ -737,8 +989,8 @@
      .operate {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0.88rem 0.88rem;

        .item {
          display: flex;
          flex-direction: column;
@@ -846,6 +1098,13 @@
          }
        }
      }
      .video_r {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70rem;
        border: 0.75rem solid rgba(255, 255, 255, 0.8);
      }
    }
  }
}