1

z8018

2025-06-10 e46aa927d231af83724683c7286d9db503e24cf7

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

@@ -7,7 +7,7 @@
      :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.stationSortedNum">工位数</div>
@@ -19,20 +19,18 @@
        <table>
          <thead>
            <tr>
              <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>
@@ -204,13 +202,12 @@
      this.contentData.find(
        item => item.stationCode === stationCode
      ).stationSortedNum = 0;
      his.contentData.find(
      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() {
@@ -226,50 +223,57 @@
      this.client.onerror = function() {};
    },
    handleMessage(event) {
      console.log(this.contentData);
      const data = JSON.parse(event.data);
      console.log("收到消息：", event.data);
      if (data.release == 1) {
      if (data.release === 1) {
        this.clearStationContent(data.stationCode);
        this.modalOverlay(data.stationCode, true); // æ˜¾ç¤ºé®ç½©å±‚
        for (let i = 0; i < this.contentData.length; i++) {
          if (this.contentData[i].orderId === data.data.orderId) {
            this.clearStationContent(this.contentData[i].stationCode);
            this.modalOverlay(this.contentData[i].stationCode, true); // æ˜¾ç¤ºé®ç½©å±‚
          }
        }
      } else if (data.release == 2) {
        this.clearStationContent(data.stationCode);
        this.modalOverlay(data.stationCode, false); // éšè—é®ç½©å±‚
        for (let i = 0; i < this.contentData.length; i++) {
          if (this.contentData[i].orderId === data.data.orderId) {
            this.clearStationContent(this.contentData[i].stationCode);
            this.modalOverlay(this.contentData[i].stationCode, false); // éšè—é®ç½©å±‚
          }
        }
      } else {
        this.contentData
          .find(item => item.stationCode === data.stationCode)
          .orderData.push(data.data.orderData);
        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 === data.stationCode
        ).orderTotalNum = data.data.orderTotalNum;
          item => item.stationCode === stationCode
        ).orderId = orderId;
        this.contentData.find(
          item => item.stationCode === data.stationCode
        ).sortedNum = data.data.sortedNum;
          item => item.stationCode === stationCode
        ).orderCode = orderCode;
        this.contentData.find(
          item => item.stationCode === data.stationCode
        ).unsortedNum = data.data.unsortedNum;
          item => item.stationCode === stationCode
        ).cusName = cusName;
        this.contentData.find(
          item => item.stationCode === data.stationCode
        ).stationSortedNum = data.data.stationSortedNum;
          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;

        for (let i = 0; i < this.contentData.length; i++) {
          if (this.contentData[i].orderId === data.data.orderId) {
            this.contentData[i].sortedNum = data.data.sortedNum;
            this.contentData[i].unsortedNum = data.data.unsortedNum;
        this.handleBackgroundColor(stationCode);

        this.contentData.forEach(item => {
          if (item.orderId === orderId) {
            item.sortedNum = sortedNum;
            item.unsortedNum = unsortedNum;
          }
        }
        this.handleBackgroundColor(data.stationCode);
        });
      }
    },
    getStations(deviceCode) {
@@ -292,7 +296,7 @@
.modal-overlay {
  display: none; /* é»˜è®¤ä¸æ˜¾ç¤º */
  position: fixed; /* å…¨å±å®šä½ */
  background-color: rgba(0, 0, 0, 0.5); /* åŠé€æ˜Žé»‘色遮罩 */
  background-color: rgba(0, 0, 0, 1); /* åŠé€æ˜Žé»‘色遮罩 */
  z-index: 5; /* ç¡®ä¿é®ç½©åœ¨å†…容之下 */
  opacity: 1; /* åˆå§‹å®Œå…¨ä¸é€æ˜Ž */
  animation: modal-overlay 1.5s infinite; /* 1秒闪烁一次，无限次重复 */
@@ -337,10 +341,10 @@
  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: 5px;
  padding: 5px;
  padding: 10px;
  background: #f8f9fa;
}

@@ -439,7 +443,7 @@
.content-item::after {
  content: attr(data-value);
  color: #2d8cf0;
  font-size: 30px;
  font-size: 50px;
  font-weight: 800;
  margin-top: 12px;
  text-shadow: 0 2px 4px rgba(45, 140, 240, 0.15);
@@ -580,7 +584,7 @@
.bigdata-table td:first-child {
  font-weight: 500;
  color: #2d8cf0;
  text-align: left; /* é¦–列保持左对齐 */
  text-align: center; /* é¦–列保持左对齐 */
  padding-left: 5px; /* å¢žåŠ å·¦ä¾§é—´è· */
}