Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes

wuyouming666

2024-04-01 c3ddb3eb7e7835d93e7a2751986af59c4690c5db

 UI-Project/src/views/UnLoadGlass/Landingindication.vue

@@ -1,7 +1,7 @@
<template>
  <div class="glass-rack">
    <div >
      <svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
      <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
        <g stroke="null" id="Layer_1">
          <!-- 使用 v-for 循环渲染数据 -->
          <g v-for="(rack, index) in racks" :key="index">
@@ -11,7 +11,9 @@
              :width="rack.width" 
              :height="rack.height" 
              :fill="rack.fillColor"
              
          :data-index="index" 
          class="rack-rect" 
          @click="showRectInfo(rack)"
            />
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
@@ -30,21 +32,18 @@
</template>

<script>
let socket;
import Swal from 'sweetalert2'
export default {
  data() {
    return {
      racks: [
        { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
        { x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
        { x: 190, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 190, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
        { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 280, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
      ]
    };
  },
  activated() {
    this.initWebSocket();
  },
  methods: {
    // 计算内部物品的 x 坐标位置
@@ -67,59 +66,29 @@
        return rack.y + rack.height - item.height;  // 返回底部对齐的 y 坐标
      }
    },
    initWebSocket() {
      let viewname = "Landingindication";
    showCustomAlert(content) {
      var str="架号   :      111\n" +
        "长     :      111\n" +
        "宽     :      111\n" +
        "厚     :      111\n"+
        "玻璃ID :      111\n"+
        "膜系   :      111\n";

      if (typeof WebSocket === "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        let socketUrl = "ws://" + "localhost:8081" + "/mesModuleTools/api/talk/" + viewname;

        if (socket != null) {
          socket.close();
          socket = null;
        }

        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);

        // 打开事件
        socket.onopen = function () {
          console.log("websocket已打开");
        };

        // 收到消息
        socket.onmessage = (msg) => {
          if (!msg.data) {
            return; // 如果收到空数据，则直接返回，不执行后续逻辑
          }
   

          let obj = JSON.parse(msg.data);

          console.log(obj);

        

        // 关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");
        };

        // 发生错误事件
        socket.onerror = function () {
          console.log("websocket发生了错误");
        };

        this.$router.afterEach(function () {
          socket.close();
        });
      }
    }
Swal.fire({
  title: '玻璃信息',
  html: '<pre>' + str + '</pre>',
  customClass: {
    popup: 'format-pre'
  }
});



  },
    showRectInfo( rectInfo) {
  const content = rectInfo.item.content;
  this.$nextTick(() => {
    this.showCustomAlert(content);
  });
},
  }
};
</script>
@@ -127,7 +96,23 @@
<style scoped>
.glass-rack {
  margin-left: 20px;
  width: 300px;
  width: 500px;
  margin-top: 10px;
  /* background-color: antiquewhite; */
}
.rack-rect:hover {
  cursor: pointer;
}
.custom-popover-class {
  background-color: lightgrey;
  color: black;
  border: 1px solid black;
}
.format-pre pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}

</style>