1

z8018

2025-06-10 e46aa927d231af83724683c7286d9db503e24cf7

 ÏîÄ¿´úÂë/WCS/WIDESEAWCS_Client/src/views/bigdata.vue

@@ -7,33 +7,36 @@
      :id="item.stationCode"
      @click="handleClick"
    >
      <h1>{{ item.stationCode }}--{{ item.orderData.length > 0 ?item.orderData[0].orderCode +"-"+ item.orderData[0].cusName + "-" +item.orderData[0].orderName : '暂无订单'}}</h1>
      <h1>{{ item.stationCode }}--{{ item.orderData.length > 0 ?item.orderCode +"-"+ item.cusName + "-" +item.orderName : '暂无订单'}}</h1>
      <!-- <h1></h1> -->
      <div class="bigdata-content">
        <div class="content-item" :data-value="item.sortedNum">已分拣数量</div>
        <div class="content-item" :data-value="item.unsortedNum">未分拣数量</div>
        <div class="content-item" :data-value="item.orderTotalNum">订单总数量</div>
        <div class="content-item" :data-value="item.stationSortedNum">工位数</div>
        <div class="content-item" :data-value="item.sortedNum">已分拣</div>
        <div class="content-item" :data-value="item.unsortedNum">未分拣</div>
        <div class="content-item" :data-value="item.orderTotalNum">订单数</div>
      </div>
      <div class="bigdata-table">
        <table>
          <thead>
            <tr>
              <th>订单编号</th>
              <th>客户名称</th>
              <th>订单名称</th>
              <th>批次</th>
              <th>产品名称</th>
              <th>工件名</th>
              <th>物料名</th>
              <th>尺寸</th>
              <th>工序</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(order,index) in item.orderData" :key="index">
              <td>{{ order.orderCode }}</td>
              <td>{{ order.cusName }}</td>
              <td>{{ order.orderName }}</td>
              <td>{{ order.batch }}</td>
              <td>{{ order.productName }}</td>
              <td>{{ order.name }}</td>
              <td>{{ order.baseName }}</td>
              <td>{{ order.size }}</td>
              <td>{{ order.process }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div :id="item.stationCode + '-modal'" class="modal-overlay">
        <div class="modal-content">请放行</div>
      </div>
    </div>
  </div>
@@ -149,15 +152,62 @@
    this.getStations(deviceCode);
  },
  methods: {
    modalOverlay(stationCode, show) {
      const modal = document.getElementById(stationCode + "-modal");
      if (modal) {
        if (show) {
          const element = document.getElementById(stationCode); // èŽ·å–元素
          modal.style.display = "flex"; // æ˜¾ç¤ºé®ç½©å±‚
          modal.style.left = element.offsetLeft + "px"; // è®¾ç½®é®ç½©å±‚位置
          modal.style.top = element.offsetTop + "px"; // è®¾ç½®é®ç½©å±‚位置
          modal.style.width = element.offsetWidth + "px"; // è®¾ç½®é®ç½©å±‚宽度
          modal.style.height = element.offsetHeight + "px"; // è®¾ç½®é®ç½©å±‚高度
        } else {
          modal.style.display = "none"; // éšè—é®ç½©å±‚
        }
        // modal.classList.add("modal-blink"); // æ·»åŠ é—ªçƒæ•ˆæžœ
      }
    },
    handleClick() {
      const parent = event.target.closest(".bigdata");
      parent.classList.remove("flash-bg");
      void parent.offsetWidth; // å¼ºåˆ¶DOM重绘
      parent.classList.add("flash-bg");

      const stationCode = parent.id;
      this.modalOverlay(stationCode, true); // æ˜¾ç¤ºé®ç½©å±‚

      setTimeout(() => {
        this.modalOverlay(stationCode, false); // éšè—é®ç½©å±‚
      }, 10000); // 2秒后隐藏遮罩层
    },
    handleBackgroundColor(stationCode) {
      const element = document.getElementById(stationCode);
      if (element) {
        element.classList.remove("flash-bg");
        void element.offsetWidth; // å¼ºåˆ¶DOM重绘
        element.classList.add("flash-bg");
      }
    },
    clearStationContent(stationCode) {
      this.contentData.find(
        item => item.stationCode === stationCode
      ).orderTotalNum = 0;
      this.contentData.find(
        item => item.stationCode === stationCode
      ).sortedNum = 0;
      this.contentData.find(
        item => item.stationCode === stationCode
      ).unsortedNum = 0;
      this.contentData.find(
        item => item.stationCode === stationCode
      ).stationSortedNum = 0;
      this.contentData.find(
        item => item.stationCode === stationCode
      ).orderData = [];
    },
    createSocket(url) {
      // åˆ›å»ºWebSocket连接
      //"ws://127.0.0.1:9295/admin"
      this.client = new WebSocket(url);
      var _this = this; // ä¿å­˜this的引用
      this.client.onopen = function() {
@@ -173,17 +223,67 @@
      this.client.onerror = function() {};
    },
    handleMessage(event) {
      console.log(this.contentData);
      const data = JSON.parse(event.data);
      console.log("收到消息：", event.data);
      if (data.release === 1) {
        this.clearStationContent(data.stationCode);
      } else {
        const stationCode = data.stationCode;
        const orderData = data.orderData;
        const orderTotalNum = data.orderTotalNum;
        const sortedNum = data.sortedNum;
        const unsortedNum = data.unsortedNum;
        const stationSortedNum = data.stationSortedNum;
        const orderCode = data.orderCode;
        const cusName = data.cusName;
        const orderName = data.orderName;
        const orderId = data.orderId;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).orderId = orderId;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).orderCode = orderCode;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).cusName = cusName;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).orderName = orderName;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).orderData = orderData;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).orderTotalNum = orderTotalNum;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).sortedNum = sortedNum;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).unsortedNum = unsortedNum;
        this.contentData.find(
          item => item.stationCode === stationCode
        ).stationSortedNum = stationSortedNum;

        this.handleBackgroundColor(stationCode);

        this.contentData.forEach(item => {
          if (item.orderId === orderId) {
            item.sortedNum = sortedNum;
            item.unsortedNum = unsortedNum;
          }
        });
      }
    },
    getStations(deviceCode){
    getStations(deviceCode) {
      this.http
        .post(
          "/api/Container/GetPutStations?deviceCode=" + deviceCode,
          {},
          true
        )
        .then((x) => {
        .then(x => {
          if (!x.status) return this.$message.error(x.message);
          this.contentData = x.data;
        });
@@ -193,14 +293,58 @@
</script>

<style scoped>
.modal-overlay {
  display: none; /* é»˜è®¤ä¸æ˜¾ç¤º */
  position: fixed; /* å…¨å±å®šä½ */
  background-color: rgba(0, 0, 0, 1); /* åŠé€æ˜Žé»‘色遮罩 */
  z-index: 5; /* ç¡®ä¿é®ç½©åœ¨å†…容之下 */
  opacity: 1; /* åˆå§‹å®Œå…¨ä¸é€æ˜Ž */
  animation: modal-overlay 1.5s infinite; /* 1秒闪烁一次，无限次重复 */
}

@keyframes modal-overlay {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.modal-content {
  position: absolute; /* ç›¸å¯¹å®šä½ */
  top: 50%; /* åž‚直居中 */
  left: 50%; /* æ°´å¹³å±…中 */
  transform: translate(-50%, -50%); /* ç²¾ç¡®å±…中 */
  padding: 20px; /* å†…边距 */
  border-radius: 10px; /* åœ†è§’ */
  font-size: 20px; /* å­—体大小 */
  animation: modal-content 1.5s infinite; /* 1秒闪烁一次，无限次重复 */
  font-family: "Microsoft YaHei", sans-serif; /* å­—体样式 */
  color: #f0f0f0; /* å­—体颜色 */
}

@keyframes modal-content {
  0%,
  100% {
    font-size: 40px;
    color: #f0f0f0;
  }
  50% {
    font-size: 20px;
    color: #000000;
  }
}

.bigdata-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  padding: 20px;
  gap: 5px;
  padding: 10px;
  background: #f8f9fa;
}

@@ -208,7 +352,7 @@
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  padding: 5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e9ecef;
  overflow: hidden; /* å¤–层容器隐藏溢出 */
@@ -228,7 +372,7 @@
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border-radius: 5px;
  animation: bg-flash 1s ease-in-out;
  z-index: 1;
}
@@ -254,8 +398,8 @@

/* ä¿®å¤è¡¨æ ¼å®¹å™¨æ ·å¼ */
.bigdata-table {
  margin-top: 15px;
  padding-top: 10px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #eee;
  flex: 1;
  overflow: hidden;
@@ -264,10 +408,10 @@
}

.bigdata h1 {
  font-size: 20px;
  font-size: 14px;
  color: #2d8cf0;
  font-weight: 700;
  margin-bottom: 15px;
  margin-bottom: 5px;
  text-shadow: 1px 1px 2px rgba(45, 140, 240, 0.15);
  letter-spacing: 0.5px;
  font-family: "Microsoft YaHei", sans-serif;
@@ -275,18 +419,18 @@

.bigdata-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 5px 0;
}

.content-item {
  position: relative;
  background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  padding: 16px 12px;
  border-radius: 5px;
  padding: 5px 5px;
  color: #343a40;
  font-size: 18px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
@@ -299,7 +443,7 @@
.content-item::after {
  content: attr(data-value);
  color: #2d8cf0;
  font-size: 24px;
  font-size: 50px;
  font-weight: 800;
  margin-top: 12px;
  text-shadow: 0 2px 4px rgba(45, 140, 240, 0.15);
@@ -334,7 +478,7 @@
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  margin-top: 5px;
  max-height: 290px; /* æ ¹æ®å®žé™…需要调整 */
  display: block;
  overflow-y: hidden; /* éšè—æ»šåŠ¨æ¡ */
@@ -347,6 +491,7 @@
  z-index: 2;
  background: linear-gradient(145deg, #e6f3ff 0%, #d4e7ff 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  opacity: 1;
}

/* è°ƒæ•´tbody显示高度 */
@@ -385,9 +530,10 @@
  background: linear-gradient(145deg, #e6f3ff 0%, #d4e7ff 100%);
  color: #2d8cf0;
  font-weight: 600;
  padding: 14px 12px;
  padding: 5px 12px;
  border-bottom: 2px solid #2d8cf0;
  letter-spacing: 0.5px;
  font-size: 12px;
}

/* è¡¨æ ¼å•å…ƒæ ¼ */
@@ -395,7 +541,7 @@
  padding: 12px;
  border-bottom: 1px solid rgba(233, 236, 239, 0.8);
  color: #495057;
  font-size: 14px;
  font-size: 12px;
  transition: all 0.25s ease;
}

@@ -438,14 +584,14 @@
.bigdata-table td:first-child {
  font-weight: 500;
  color: #2d8cf0;
  text-align: left; /* é¦–列保持左对齐 */
  padding-left: 24px; /* å¢žåŠ å·¦ä¾§é—´è· */
  text-align: center; /* é¦–列保持左对齐 */
  padding-left: 5px; /* å¢žåŠ å·¦ä¾§é—´è· */
}

/* æœ€åŽå•å…ƒæ ¼å³å¯¹é½ */
.bigdata-table td:last-child {
  text-align: right;
  padding-right: 24px;
  padding-right: 5px;
}

@keyframes scroll {