修改大屏动画

ZengTao

2025-03-10 ed01c3b91928b1b375e43451db995d4950e20072

修改大屏动画

 UI-Project/src/views/largescreendisplay/screendisplay.vue

@@ -47,6 +47,7 @@
let socket2 = null;
const temperingTaskType = ref([])
const temperingGlassInfoList = ref([])
const temperingGlassInfoOutList = ref([])
const socketUrl2 = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/largenScreen`;
const handleMessage2 = (data) => {
  temperingTaskType.value = data.temperingTaskType[0];
@@ -55,7 +56,25 @@
    numBoxes3.value =temperingTaskType.value;
    boxStart3();
  }
  
  temperingGlassInfoOutList.value = data.temperingGlassInfoOutList[0];
  if(numBoxes4.value !=temperingGlassInfoOutList.value){
    numBoxes4.value =temperingGlassInfoOutList.value;
    boxStart3();
  }
};

let socket3 = null;
const bigStorageCageUsage = ref([])
const socketUrl3 = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/largenScreen`;
const handleMessage3 = (data) => {
  bigStorageCageUsage.value = data.bigStorageCageUsage[0];
};

let socket4 = null;
const hollowBigStorageCageUsage = ref([])
const socketUrl4 = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/largenScreen`;
const handleMessage4 = (data) => {
  hollowBigStorageCageUsage.value = data.hollowBigStorageCageUsage[0];
};


@@ -81,22 +100,6 @@
  films: ''
})

// const tableDatac = ref([]);
// const patternUsage = async () => {
//   try {
//     const response = await request.post('/glassStorage/rawGlassStorageDetails/patternUsage?width=' + ptnusage.value.width + '&height=' + ptnusage.value.height + '&thickness=' + ptnusage.value.thickness + '&films=' + ptnusage.value.films);
//     if (response.code == 200) {
//       ElMessage.success(response.message);
//       tableDatad.value = response.data;
//     } else {
//       ElMessage.error(response.message);
//     }
//   }
//   catch (error) {
//     console.error(error);
//   }
// }


// 点击下方弹窗
const handlehistorical = (row) => {
@@ -108,10 +111,13 @@
  boxStart();
  boxStart2();
  boxStart3();
  boxStart4();
  requestAnimationFrame(animate);
  socket = initializeWebSocket(socketUrl, handleMessage);
  socket1 = initializeWebSocket(socketUrl1, handleMessage1);
  socket2 = initializeWebSocket(socketUrl2, handleMessage2);
  socket3 = initializeWebSocket(socketUrl3, handleMessage3);
  socket4 = initializeWebSocket(socketUrl4, handleMessage4);
  const endTime = dayjs().startOf('minute'); // 当前时间，精确到分钟
  const startTime = endTime.subtract(1, 'day').startOf('minute'); // 当前时间的前一天，精确到分钟
  // 设置时间范围为 [开始时间, 结束时间]
@@ -125,6 +131,8 @@
    closeWebSocket(socket);
    closeWebSocket(socket1);
    closeWebSocket(socket2);
    closeWebSocket(socket3);
    closeWebSocket(socket4);
  }
});
onBeforeUnmount(() => {
@@ -134,7 +142,8 @@

const numBoxes = ref(5);
const numBoxes2 = ref(5); 
const numBoxes3 = ref(5); // 可动态修改的 div 数量
const numBoxes3 = ref(5);
const numBoxes4 = ref(1);
const speed = 0.1;
const maxX = 200; // 终点X坐标
const maxY = -73; // 终点Y坐标
@@ -142,11 +151,14 @@
const maxY2 = -165; // 终点Y坐标
const maxX3 = 100; // 终点X坐标
const maxY3 = -75; // 终点Y坐标
const maxX4 = 60; // 终点X坐标
const maxY4 = 0; // 终点Y坐标
const delayFrames = 600; // 每个 div 的延迟帧数

const boxes = ref([]);
const boxes2 = ref([]);
const boxes3 = ref([]);
const boxes4 = ref([]);

// 初始化 div 数据
const boxStart = () => {
@@ -205,6 +217,24 @@
}
}

const boxStart4 = () => {
  boxes4.value = [];
  for (let i = 0; i < numBoxes4.value; i++) {
  boxes4.value.push({
    x: 0,
    y: 0, // 初始位置在底部
    direction: 'right',
    delay: i * delayFrames,
    style: {
      width: '15px',
      height: '15px',
      backgroundColor: i % 2 === 0 ? 'red' : 'blue',
      position: 'absolute',
      transform: `translate(0px, 0px)`
    }
  });
}
}


const animate = () => {
@@ -287,6 +317,27 @@
      transform: `translate(${box.x}px, ${box.y}px)`
    };
  });

  boxes4.value.forEach((box) => {
    if (box.delay > 0) {
      box.delay--;
      return;
    }
    
    if (box.direction === 'right') {
      box.x += speed;
      if (box.x >= maxX4) {
        // box.y = 0; // 确保不会超出界限
        box.x = 0;
        box.y = 0; // 重新回到底部
      }
    } 
    box.style = {
      ...box.style,
      transform: `translate(${box.x}px, ${box.y}px)`
    };
  });

  requestAnimationFrame(animate);
};

@@ -326,15 +377,26 @@
          <div v-for="(box, index) in boxes" :key="index" class="box" :style="box.style"></div>
        </div>
        <div class="container" style="position: relative;width: 20px;height: 20px;top: 625px;left: 700px;border: 1px solid #000;position: absolute;">
          <div v-for="(box, index) in boxes2" :key="index" class="box1" :style="box.style"></div>
          <div v-for="(box, index) in boxes2" :key="index" class="box" :style="box.style"></div>
        </div>
        <!-- 钢化运动色块 -->
        <div class="container" style="position: relative;width: 20px;height: 20px;top: 438px;left: 196px;border: 1px solid #000;position: absolute;">
          <div v-for="(box, index) in boxes3" :key="index" class="box1" :style="box.style"></div>
          <div v-for="(box, index) in boxes3" :key="index" class="box" :style="box.style"></div>
        </div>
        <!-- <div class="raw" style="width: 31px;height: 32px;top: 571px;left: 300px;position: absolute;background-color: red;">
          <div v-for="(item,index) in rawGlassStorageDetailList.slice(0,7)" :key="index" :style='"width: "+item.remainQuantity+"px;height: 5px;background-color: red;"'></div>
        </div> -->
        <div class="container" style="position: relative;width: 20px;height: 20px;top: 355px;left: 496px;border: 1px solid #000;position: absolute;">
          <div v-for="(box, index) in boxes4" :key="index" class="box" :style="box.style"></div>
        </div>
        <!-- 钢化前大理片色块 -->
        <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(0,1)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 447px;left: 314px;position: absolute;background-color: red;"'></div>
        <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(1,2)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 463px;left: 314px;position: absolute;background-color: red;"'></div>
        <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(2,3)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 478px;left: 314px;position: absolute;background-color: red;"'></div>
        <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(3,4)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 493px;left: 314px;position: absolute;background-color: red;"'></div>
        <!-- 中空前大理片色块 -->
        <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(0,1)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 337px;left: 671px;position: absolute;background-color: red;"'></div>
        <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(1,2)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 353px;left: 671px;position: absolute;background-color: red;"'></div>
        <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(2,3)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 369px;left: 671px;position: absolute;background-color: red;"'></div>
        <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(3,4)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 385px;left: 671px;position: absolute;background-color: red;"'></div>
        <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(4,5)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 401px;left: 671px;position: absolute;background-color: red;"'></div>
      </div>
      <div class="clickable-area" @click="handlehistorical"
        style="position: relative;width: 110px;height: 140px;top: 603px;left: 297px;"></div>

 hangzhoumesParent/moduleService/CacheVerticalGlassModule/src/main/java/com/mes/job/OPCPlcSlicecage.java

@@ -12,6 +12,7 @@
import com.mes.bigstoragecagetask.entity.BigStorageTaskVO;
import com.mes.bigstoragecagetask.service.BigStorageCageTaskService;
import com.mes.common.config.Const;
import com.mes.engineering.entity.Engineering;
import com.mes.glassinfo.service.GlassInfoService;
import com.mes.temperingglass.entity.TemperingGlassInfo;
import com.mes.temperingglass.service.TemperingGlassInfoService;
@@ -203,4 +204,27 @@
            e.printStackTrace();
        }
    }

    @Scheduled(fixedDelay = 1000)
    public void largenScreen() {
        JSONObject jsonObject = new JSONObject();
        //理片笼使用情况
        List<Map<String, Object>> bigStorageCageUsage = bigStorageCageService.selectBigStorageCageUsage();
        jsonObject.append("bigStorageCageUsage", bigStorageCageUsage);
        ArrayList<WebSocketServer> sendwServer = WebSocketServer.sessionMap.get("largenScreen");
        if (sendwServer != null) {
            for (WebSocketServer webserver : sendwServer) {
                if (webserver != null) {
                    webserver.sendMessage(jsonObject.toString());
                    List<String> messages = webserver.getMessages();
                    if (!messages.isEmpty()) {
                        // // 将最后一个消息转换为整数类型的列表
                        webserver.clearMessages();
                    }
                } else {
                    log.info("largenScreen is closed");
                }
            }
        }
    }
}

 hangzhoumesParent/moduleService/TemperingGlassModule/src/main/java/com/mes/job/PlcTemperingGlassTask.java

@@ -120,6 +120,14 @@
                        .groupBy(TemperingGlassInfo::getEngineerId, TemperingGlassInfo::getTemperingLayoutId) // 按 engineerId 和 temperingLayoutId 分组
        );
        jsonObject.append("temperingGlassInfoList", temperingGlassInfoList.size());
        //大屏钢化信息
        List<TemperingGlassInfo> temperingGlassInfoOutList = temperingAgoService.list(
                new LambdaQueryWrapper<TemperingGlassInfo>()
                        .select(TemperingGlassInfo::getEngineerId, TemperingGlassInfo::getTemperingLayoutId) // 选择要去重的字段
                        .eq(TemperingGlassInfo::getState, Const.TEMPERING_SUCCESS)
                        .groupBy(TemperingGlassInfo::getEngineerId, TemperingGlassInfo::getTemperingLayoutId) // 按 engineerId 和 temperingLayoutId 分组
        );
        jsonObject.append("temperingGlassInfoOutList", temperingGlassInfoOutList.size());
        ArrayList<WebSocketServer> sendwServer = WebSocketServer.sessionMap.get("largenScreen");
        if (sendwServer != null) {
            for (WebSocketServer webserver : sendwServer) {

 hangzhoumesParent/moduleService/hollowGlassModule/src/main/java/com/mes/job/PushMessageToIndex.java

@@ -64,16 +64,15 @@
    public void hollowGlassTask() {
        List<HollowGlassOutRelationInfo> taskList = hollowGlassOutRelationInfoService.list(new LambdaQueryWrapper<HollowGlassOutRelationInfo>()
                .in(HollowGlassOutRelationInfo::getState, Const.HOLLOW_FLOW_CARD_START));
        if (CollectionUtil.isEmpty(taskList)) {
            return;
        }
        JSONObject jsonObject = new JSONObject();
        List<Long> taskIdList = taskList.stream().map(HollowGlassOutRelationInfo::getId).collect(Collectors.toList());
        List<HollowGlassQueueInfo> list = hollowGlassQueueInfoService.list(new LambdaQueryWrapper<HollowGlassQueueInfo>().in(HollowGlassQueueInfo::getRelationId, taskIdList));
        Map<Integer, List<HollowGlassQueueInfo>> listMap = list.stream().collect(Collectors.groupingBy(HollowGlassQueueInfo::getCell));
        jsonObject.append("930", listMap.get(930));
        jsonObject.append("931", listMap.get(931));
        jsonObject.append("932", listMap.get(932));
        if (CollectionUtil.isNotEmpty(taskList)) {
            List<Long> taskIdList = taskList.stream().map(HollowGlassOutRelationInfo::getId).collect(Collectors.toList());
            List<HollowGlassQueueInfo> list = hollowGlassQueueInfoService.list(new LambdaQueryWrapper<HollowGlassQueueInfo>().in(HollowGlassQueueInfo::getRelationId, taskIdList));
            Map<Integer, List<HollowGlassQueueInfo>> listMap = list.stream().collect(Collectors.groupingBy(HollowGlassQueueInfo::getCell));
            jsonObject.append("930", listMap.get(930));
            jsonObject.append("931", listMap.get(931));
            jsonObject.append("932", listMap.get(932));
        }
        try {
            //930空闲信号
            ReadWriteEntity freeOneRequestEntity = miloService.readFromOpcUa("CMJ1.CMJ1.isFree");
@@ -209,4 +208,26 @@
        jsonObject.append("bigStorageCageUsageSummary", bigStorageCageUsageSummary);
    }

    @Scheduled(fixedDelay = 1000)
    public void largenScreen() {
        JSONObject jsonObject = new JSONObject();
        //理片笼使用情况
        List<Map<String, Object>> hollowBigStorageCageUsage = hollowBigStorageCageService.selectBigStorageCageUsage();
        jsonObject.append("hollowBigStorageCageUsage", hollowBigStorageCageUsage);
        ArrayList<WebSocketServer> sendwServer = WebSocketServer.sessionMap.get("largenScreen");
        if (sendwServer != null) {
            for (WebSocketServer webserver : sendwServer) {
                if (webserver != null) {
                    webserver.sendMessage(jsonObject.toString());
                    List<String> messages = webserver.getMessages();
                    if (!messages.isEmpty()) {
                        // // 将最后一个消息转换为整数类型的列表
                        webserver.clearMessages();
                    }
                } else {
                    log.info("largenScreen is closed");
                }
            }
        }
    }
}