监控优化，代码功能优化

helongyang

2025-11-17 291067c13bfe8fb9c876e3764a828dc3ddd22f99

 ´úÂë¹ÜÀí/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/PpWarehouse.vue

@@ -4,6 +4,7 @@
      <!-- PP仓堆垛机状态面板 -->
      <div class="skuang">
        <div class="zhuname">PP仓堆垛机</div>
        
        <div class="zhankuang">
          <div class="xname">堆垛机状态:</div>
          <div class="xzhi" :title="ppData.R_PP_Status">{{ ppData.R_PP_Status }}</div>
@@ -192,6 +193,39 @@
        </div>
      </div>
    </div>

    <div id="nowcolumn" :class="{ 'abnormal-column': ppData.R_PP_Status !== '正常' }">
      <div>PP堆垛机当前所在列:
        <span :title="ppData.R_PP_Column">{{ ppData.R_PP_Column || '未知' }}</span>
      </div>
    </div>
    
    <div class="column-container" :class="{ 'pp-status-abnormal': ppData.R_PP_Status !== '正常' }">
    <!-- ä¸Šæ–¹1-24列 -->
    <div class="column-grid-container">
      <div 
        v-for="num in 24" 
        :key="num" 
        class="column-grid-item"
        :class="{ 'active': num == ppData.R_PP_Column }"
        :title="`列号: ${num}`"
      >
        {{ num }}
      </div>
    </div>
    <!-- ä¸‹æ–¹25-47列 (23个) -->
    <div class="column-grid-container">
      <div 
        v-for="i in 23"  
        :key="'lower-' + i"  
        class="column-grid-item"
        :class="{ 'active': (24 + i) == ppData.R_PP_Column }" 
        :title="`列号: ${24 + i}`"
      >
        {{ 24 + i }}  
      </div>
    </div>
  </div>
  </div>
</template>

@@ -208,19 +242,19 @@
  },
  setup() {
    const store = useStore();
    // ä»…存储PP数据，避免与ZH数据混淆
    const ppData = ref({});

    // å»¶è¿Ÿæ›´æ–°é…ç½®ï¼Œè§£å†³é«˜é¢‘刷新导致的闪烁
    const UPDATE_DELAY = 300; // å»¶è¿Ÿ300ms更新UI
    let updateTimer = null;   // å®šæ—¶å™¨å®žä¾‹
    // å»¶è¿Ÿæ›´æ–°é…ç½®
    const UPDATE_DELAY = 300;
    let updateTimer = null;

    // PP数据映射规则（仅处理PP相关字段）
    // PP数据映射规则
    const statusMap = {
      R_PP_Status: {
        1: "正常",
        2: "故障",
        3: "急停",
        0: "正常",
        1: "故障",
        2: "急停",
        3: "未知"
      },
      R_PP_AutoStatus: {
        0: "ç»´ä¿®",
@@ -249,7 +283,8 @@
        2: "中托盘(2)",
        3: "大托盘(3)",
        4: "特大托盘(4)",
      }
      },
      R_PP_Column: (val) => val !== undefined ? val : "未知"
    };

    // PP相关布尔字段分组
@@ -284,14 +319,15 @@
    // å¤„理PP原始数据
    const processPPData = (rawData) => {
      if (!rawData) return {};
      
      // å¤åˆ¶åŽŸå§‹æ•°æ®ï¼Œé¿å…ç›´æŽ¥ä¿®æ”¹
      const processed = { ...rawData };

      // å¤„理状态字段映射
      Object.keys(statusMap).forEach(key => {
        if (processed.hasOwnProperty(key)) {
          processed[key] = statusMap[key][processed[key]] || processed[key];
          const mapper = statusMap[key];
          processed[key] = typeof mapper === 'function' 
            ? mapper(processed[key]) 
            : (mapper[processed[key]] || processed[key]);
        }
      });

@@ -307,20 +343,12 @@
      return processed;
    };

    // å»¶è¿Ÿæ›´æ–°PP数据，避免高频刷新
    // å»¶è¿Ÿæ›´æ–°PP数据
    const delayedUpdatePPData = (newRawData) => {
      // æ¸…除之前的定时器，确保只执行最后一次更新
      if (updateTimer) {
        clearTimeout(updateTimer);
      }

      // å»¶è¿ŸæŒ‡å®šæ—¶é—´åŽæ›´æ–°æ•°æ®
      if (updateTimer) clearTimeout(updateTimer);
      updateTimer = setTimeout(() => {
        // åªå¤„理包含PP特征字段的数据
        if (newRawData && newRawData.R_PP_Status !== undefined) {
          ppData.value = processPPData(newRawData);
          
          // æ›´æ–°æ ·å¼
          nextTick(() => {
            const valueElements = document.getElementsByClassName("xzhi");
            for (let i = 0; i < valueElements.length; i++) {
@@ -336,30 +364,24 @@
    };

    onMounted(() => {
      // åˆå§‹åŠ è½½æ•°æ®
      const initialData = store.state.homedata;
      if (initialData && initialData.R_PP_Status !== undefined) {
        ppData.value = processPPData(initialData);
      }

      // ç›‘听数据变化，只处理PP数据
      
      const unwatch = watch(
        () => store.state.homedata,
        (newData) => {
          // ä»…当数据包含PP特征字段时才更新
          if (newData && newData.R_PP_Status !== undefined) {
            delayedUpdatePPData(newData);
          }
        },
        { deep: true } // æ·±åº¦ç›‘听对象内部变化
        { deep: true }
      );

      // ç»„件卸载时清理资源
      onUnmounted(() => {
        unwatch();
        if (updateTimer) {
          clearTimeout(updateTimer);
        }
        if (updateTimer) clearTimeout(updateTimer);
      });
    });

@@ -506,6 +528,89 @@
  background: rgba(255, 255, 255, 0.2);
  margin-left: 1.7%;
  border-radius: 10px;
  padding-bottom: 20px;
}
</style>
    

/* å †åž›æœºå½“前列样式 */
#nowcolumn {
  width: 100%;
  height: 70px;
  float: left;
  display: flex;        
  justify-content: center; 
  align-items: center;     
  font-size: 1.5cqw;      
  font-weight: bold; 
  color: #00ff4c;
}

/* å †åž›æœºçŠ¶æ€å¼‚常时，当前列文字变为红色 */
#nowcolumn.abnormal-column {
  color: red !important;
}
#nowcolumn.abnormal-column span {
  color: red !important;
}

/* åˆ—容器 */
.column-container {
  width: 95%;
  margin: 0 auto;
  position: relative;
  clear: both;
  padding-top: 15px;
}

/* è“è‰²åˆ†å‰²çº¿ */
.column-separator {
  width: 100%;
  height: 20px;
  background-color: #3bc0ed;
  position: absolute;
  top: 0; /* è°ƒæ•´åˆ°æ–¹æ ¼é¡¶éƒ¨å¯¹é½ */
  left: 0;
  z-index: 1; /* ç¡®ä¿åœ¨æ–¹æ ¼ä¸‹æ–¹ */
  border-radius: 4px 4px 0 0;
}

.column-grid-container {
  width: 100%;
  display: flex;
  flex-wrap: nowrap; /* ç¦æ­¢æ¢è¡Œ */
  justify-content: space-between; /* å‡åŒ€åˆ†å¸ƒ */
  align-items: center;
  gap: 2px; /* æ–¹æ ¼ä¹‹é—´çš„间距 */
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  padding: 0 2px; /* é¿å…è¾¹ç¼˜æ–¹æ ¼è´´è¾¹ */
}

/* åˆ—方格样式 - å…³é”®ä¿®æ”¹ */
.column-grid-item {
  flex: 1; /* æ ¸å¿ƒï¼šæ¯ä¸ªæ–¹æ ¼å¹³å‡åˆ†é…å‰©ä½™ç©ºé—´ */
  min-width: 24px; /* æœ€å°å®½åº¦ï¼ˆé¿å…è¿‡å°ï¼‰ */
  max-width: 60px; /* æœ€å¤§å®½åº¦ï¼ˆé¿å…è¿‡å¤§ï¼‰ */
  height: 30px;
  border: 1px solid #fff;
  border-radius:8px 8px 0 0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8px, 1vw, 14px); /* è‡ªé€‚应字体 */
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

/* å½“前列高亮（正常状态） */
.column-grid-item.active {
  background-color: green;
  font-weight: bold;
}

/* å †åž›æœºçŠ¶æ€å¼‚常时，当前列高亮为红色 */
.pp-status-abnormal .column-grid-item.active {
  background-color: red !important;
}
</style>