MeiRuiAn/HuaiAn.git

<template>
  <div id="title">
    <div id="bkuang" style="border-top: none">
      <!-- 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>
        </div>
        <div class="zhankuang">
          <div class="xname">堆垛机手自动状态:</div>
          <div class="xzhi" :title="ppData.R_PP_AutoStatus">{{ ppData.R_PP_AutoStatus }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">正在执行的任务号:</div>
          <div class="xzhi" :title="ppData.R_PP_TaskNum">{{ ppData.R_PP_TaskNum }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">堆垛机工作状态:</div>
          <div class="xzhi" :title="ppData.R_PP_WorkStatus">{{ ppData.R_PP_WorkStatus }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">作业类型:</div>
          <div class="xzhi" :title="ppData.R_PP_WorkType">{{ ppData.R_PP_WorkType }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">托盘类型:</div>
          <div class="xzhi" :title="ppData.R_PP_TrayType">{{ ppData.R_PP_TrayType }}</div>
        </div>
      </div>
 
      <!-- PP关联站台（入库2004+出库2005） -->
      <div class="skuang">
        <div class="zhuname">入库2004站台</div>
        <div class="zhankuang">
          <div class="xname">读取箱体码(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Boxcode">{{ ppData.R_PP_Boxcode || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">握手信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_HandShake4">{{ ppData.R_PP_HandShake4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否联机(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Online4">{{ ppData.R_PP_Online4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否空闲(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Free4">{{ ppData.R_PP_Free4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否有货(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Goods4">{{ ppData.R_PP_Goods4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否故障(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Alarm4">{{ ppData.R_PP_Alarm4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_STB4">{{ ppData.R_PP_STB4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_ACK4">{{ ppData.R_PP_ACK4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_STB4">{{ ppData.W_PP_STB4 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_ACK4">{{ ppData.W_PP_ACK4 || '-' }}</div>
        </div>
 
        <div class="zhuname">出库2005站台</div>
        <div class="zhankuang">
          <div class="xname">握手信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_HandShake5">{{ ppData.R_PP_HandShake5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否联机(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Online5">{{ ppData.R_PP_Online5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否空闲(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Free5">{{ ppData.R_PP_Free5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否有货(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Goods5">{{ ppData.R_PP_Goods5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否故障(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Alarm5">{{ ppData.R_PP_Alarm5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_STB5">{{ ppData.R_PP_STB5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_ACK5">{{ ppData.R_PP_ACK5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_STB5">{{ ppData.W_PP_STB5 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_ACK5">{{ ppData.W_PP_ACK5 || '-' }}</div>
        </div>
      </div>
 
      <!-- PP关联站台（出库2016+出库2017） -->
      <div class="skuang">
        <div class="zhuname">出库2016站台</div>
        <div class="zhankuang">
          <div class="xname">握手信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_HandShake6">{{ ppData.R_PP_HandShake6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否联机(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Online6">{{ ppData.R_PP_Online6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否空闲(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Free6">{{ ppData.R_PP_Free6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否有货(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Goods6">{{ ppData.R_PP_Goods6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否故障(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Alarm6">{{ ppData.R_PP_Alarm6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_STB6">{{ ppData.R_PP_STB6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_ACK6">{{ ppData.R_PP_ACK6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_STB6">{{ ppData.W_PP_STB6 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_ACK6">{{ ppData.W_PP_ACK6 || '-' }}</div>
        </div>
 
        <div class="zhuname">出库2017站台</div>
        <div class="zhankuang">
          <div class="xname">握手信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_HandShake7">{{ ppData.R_PP_HandShake7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否联机(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Online7">{{ ppData.R_PP_Online7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否空闲(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Free7">{{ ppData.R_PP_Free7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否有货(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Goods7">{{ ppData.R_PP_Goods7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">是否故障(读):</div>
          <div class="xzhi" :title="ppData.R_PP_Alarm7">{{ ppData.R_PP_Alarm7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_STB7">{{ ppData.R_PP_STB7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(读):</div>
          <div class="xzhi" :title="ppData.R_PP_ACK7">{{ ppData.R_PP_ACK7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">请求信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_STB7">{{ ppData.W_PP_STB7 || '-' }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">响应信号(写):</div>
          <div class="xzhi" :title="ppData.W_PP_ACK7">{{ ppData.W_PP_ACK7 || '-' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { ref, nextTick, watch, onUnmounted } from "vue";
import { useStore } from "vuex";
import { onMounted } from "vue";
 
export default {
  data() {
    return {
      xuan: 0
    };
  },
  setup() {
    const store = useStore();
    // 仅存储PP数据，避免与ZH数据混淆
    const ppData = ref({});
 
    // 延迟更新配置，解决高频刷新导致的闪烁
    const UPDATE_DELAY = 300; // 延迟300ms更新UI
    let updateTimer = null;   // 定时器实例
 
    // PP数据映射规则（仅处理PP相关字段）
    const statusMap = {
      R_PP_Status: {
        1: "正常",
        2: "故障",
        3: "急停",
      },
      R_PP_AutoStatus: {
        0: "维修",
        1: "手动",
        2: "半自动",
        3: "自动",
      },
      R_PP_WorkStatus: {
        0: "待机",
        1: "取货中",
        2: "取货完成",
        4: "放货中",
        5: "放货完成",
        6: "任务完成",
      },
      R_PP_WorkType: {
        0: "无作业任务(0)",
        1: "取放货作业(1)",
        2: "只取货作业(2)",
        3: "只放货作业(3)",
        4: "移动到指定位置"
      },
      R_PP_TrayType: {
        "-1": "空箱(-1)",
        1: "小托盘(1)",
        2: "中托盘(2)",
        3: "大托盘(3)",
        4: "特大托盘(4)",
      }
    };
 
    // PP相关布尔字段分组
    const fieldGroups = {
      online: {
        fields: ["R_PP_Online6", "R_PP_Online4", "R_PP_Online5", "R_PP_Online7"],
        map: { true: "联机", false: "脱机" }
      },
      alarm: {
        fields: ["R_PP_Alarm6", "R_PP_Alarm4", "R_PP_Alarm5", "R_PP_Alarm7"],
        map: { true: "故障", false: "正常" }
      },
      free: {
        fields: ["R_PP_Free6", "R_PP_Free4", "R_PP_Free5", "R_PP_Free7"],
        map: { true: "空闲", false: "繁忙" }
      },
      goods: {
        fields: ["R_PP_Goods6", "R_PP_Goods4", "R_PP_Goods5", "R_PP_Goods7"],
        map: { true: "有货", false: "无货" }
      },
      signal: {
        fields: [
          "R_PP_HandShake4", "R_PP_STB4", "R_PP_ACK4", "W_PP_STB4", "W_PP_ACK4",
          "R_PP_HandShake5", "R_PP_STB5", "R_PP_ACK5", "W_PP_STB5", "W_PP_ACK5",
          "R_PP_HandShake6", "R_PP_STB6", "R_PP_ACK6", "W_PP_STB6", "W_PP_ACK6",
          "R_PP_HandShake7", "R_PP_STB7", "R_PP_ACK7", "W_PP_STB7", "W_PP_ACK7"
        ],
        map: { true: "是", false: "否" }
      }
    };
 
    // 处理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];
        }
      });
 
      // 处理布尔型字段映射
      Object.values(fieldGroups).forEach(group => {
        group.fields.forEach(key => {
          if (processed.hasOwnProperty(key)) {
            processed[key] = group.map[processed[key]] || processed[key];
          }
        });
      });
 
      return processed;
    };
 
    // 延迟更新PP数据，避免高频刷新
    const delayedUpdatePPData = (newRawData) => {
      // 清除之前的定时器，确保只执行最后一次更新
      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++) {
              if (valueElements[i].innerHTML === "是") {
                valueElements[i].style.color = "yellow";
              } else if (valueElements[i].innerHTML === "否") {
                valueElements[i].style.color = "red";
              }
            }
          });
        }
      }, UPDATE_DELAY);
    };
 
    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 } // 深度监听对象内部变化
      );
 
      // 组件卸载时清理资源
      onUnmounted(() => {
        unwatch();
        if (updateTimer) {
          clearTimeout(updateTimer);
        }
      });
    });
 
    return {
      ppData
    };
  }
};
</script>
 
<style scoped>
.ding {
  float: left;
  width: 20px;
  height: 20px;
  margin-top: 7px;
}
.yan {
  color: white;
  float: left;
  font-size: 25px;
}
.dakuang {
  width: 250px;
  height: 50px;
  position: absolute;
  top: 150px;
  left: 200px;
}
#xiugai {
  width: 100px;
  height: 30px;
  float: left;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid white;
  color: white;
  background: rgba(255, 255, 255, 0.5);
  font-size: 25px;
  position: absolute;
  top: 150px;
  left: 450px;
}
#xiugai:hover {
  background: #f60;
}
#shu1,
#shu2 {
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 0px;
  margin-right: 0px;
  border-radius: 5px;
  border: 1px solid white;
}
#guan {
  width: 40px;
  height: 40px;
  float: left;
  font-size: 1.1cqw;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin-left: 560px;
  color: white;
  position: absolute;
}
#ti {
  width: 600px;
  height: 300px;
  position: relative;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  top: 230px;
  left: 35%;
  display: none;
  background-image: url("../../img/1.png");
  background-repeat: no-repeat;
  background-size: 170%;
  background-position: -220px 0px;
}
.zhuname {
  width: 100%;
  height: 5vh;
  float: left;
  text-align: center;
  line-height: 50px;
  font-weight: 700;
  font-size: 1.1cqw;
  color: white;
}
.xname {
  width: 70%;
  height: 80px;
  float: left;
  line-height: 7vh;
  font-size: 1.1cqw;
  color: white;
}
.xzhi {
  width: 30%;
  height: 7vh;
  float: left;
  line-height: 50px;
  font-size: 1.1cqw;
  color: rgb(242, 242, 50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zhankuang {
  width: 45%;
  height: 3vh;
  margin-top: 10px;
  margin-left: 5%;
  float: left;
}
#title {
  float: left;
  width: 95%;
  height: 88vh;
  margin-top: 40px;
  margin-left: 3%;
  background-image: url("../../img/1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  container-type: inline-size;
}
#bkuang {
  width: 100%;
  height: 55vh;
  float: left;
}
.skuang {
  width: 31%;
  height: 55vh;
  float: left;
  border-top: none;
  border-left: none;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.2);
  margin-left: 1.7%;
  border-radius: 10px;
}
</style>