伸缩杆代码提交

艺术家

2025-06-04 772190e7b2e3f6ef0695ba54d9209324acdcb30a

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

@@ -120,15 +120,20 @@
    <div v-if="isMobile" class="content">
      <div class="content_l">
        <div class="model">
          <span>当前伸缩杆位置：{{ Position.right }}</span>
          <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>
@@ -143,21 +148,26 @@
            <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
              >视频监控左侧</span
            >
            <img src="@/assets/imgs/right.png" alt="" />
            <img src="@/assets/imgs/left.png" alt="" />
          </div>
        </div>
      </div>
      <div class="content_r">
        <div class="model">
          <span>当前伸缩杆位置：{{ Position.right }}</span>
          <span>左侧伸缩杆</span>
          <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>
@@ -172,7 +182,7 @@
            <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
              >视频监控右侧</span
            >
            <img src="@/assets/imgs/left.png" alt="" />
            <img src="@/assets/imgs/right.png" alt="" />
          </div>
        </div>
      </div>
@@ -180,15 +190,20 @@
    <div v-else class="content_mobile">
      <div class="content_l">
        <div class="model">
          <span>当前伸缩杆位置：{{ Position.left }}</span>
          <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>
@@ -203,21 +218,26 @@
            <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
              >视频监控左侧</span
            >
            <img src="@/assets/imgs/right.png" alt="" />
            <img src="@/assets/imgs/left.png" alt="" />
          </div>
        </div>
      </div>
      <div class="content_r">
        <div class="model">
          <span>当前伸缩杆位置：{{ Position.right }}</span>
          <span>左侧伸缩杆</span>
          <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>
@@ -232,7 +252,7 @@
            <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
              >视频监控右侧</span
            >
            <img src="@/assets/imgs/left.png" alt="" />
            <img src="@/assets/imgs/right.png" alt="" />
          </div>
        </div>
      </div>
@@ -240,22 +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,
  Pouse,
  GetPosition,
  GetParameter,
} from "@/api/newapi/Parameters.js";

const router = useRouter();
const isMobile = ref(false);
const Position = ref({
  left: 0,
  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);
};
@@ -289,13 +330,63 @@
};

//获取当前位置
const getPosition = () => {
  GetPosition().then((res) => {
// 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) {
      Position.value.left = res.data.lift;
      Position.value.right = res.data.right;
      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(() => {
  // ç›‘听窗口大小变化
@@ -316,7 +407,19 @@
    // å¦‚果窗口宽度小于等于1080px，执行相应的操作
    isMobile.value = false;
  }
  getPosition();
  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>