修改页面样式

wxw

2024-09-27 1ad241932bf44eb214b6eb1104e4cae0ffd3e3fc

 Web/src/views/device/deviceInfo/index.vue

@@ -1,5 +1,5 @@
<template>
   <div class="sys-user-container">
   <div class="sys-user-container" style="overflow: hidden;">
      <el-row>
         <el-col :span="3">
            <el-collapse v-model="activeName">
@@ -19,6 +19,10 @@
                  <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                     <el-switch v-model="state.boDemo" active-text="" inactive-text="演示模式"
                        @change="handleSwitchChange('boDemo', $event)"></el-switch>
                  </el-card>
                  <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                     <el-switch v-model="state.boDrumReversal" active-text="" inactive-text="滚动反转"
                        @change="handleSwitchChange('boDrumReversal', $event)"></el-switch>
                  </el-card>
               </el-collapse-item>

@@ -81,6 +85,7 @@
import { listStatus, listPosition } from '/@/api/wcs/wcsPlc';
import { signalR } from './signalR';
import { cellsDataLine, cellsDataOne, cellsDataTwo, cellsDataThree } from './data';
import { ElMessage } from "element-plus";

const state = ref<any>({});
const stackers = ref<any>({});
@@ -90,7 +95,7 @@
   var res = await listStatus();
   state.value = res.data.result.modService;
   stackers.value = res.data.result.listPlc.filter(s => s.type == 0);
   conveyors.value = res.data.result.listPlc.filter(s => s.type == 1 || s.type == 4);
   conveyors.value = res.data.result.listPlc.filter(s => s.type == 1);

   var res2 = await listPosition();
   res2.data.result.forEach(s => {
@@ -100,6 +105,7 @@
         if (foundCell) {
            //修改高度
            foundCell.BoxHeight = s.boxHeight;
            foundCell.EndLocat = s.endLocat;
         }
      }
      else if (s.type == 1) {
@@ -135,6 +141,12 @@
   signalR.off('UpdateService');
   signalR.on('UpdateService', (data: any) => {
      state.value = data;
      if (data.error) {
         ElMessage({
            message: data.error,
            type: "error",
         });
      }
   });
   signalR.off('PublicPosition');
   signalR.on('PublicPosition', (data: any) => {
@@ -147,19 +159,47 @@
      }
      else if (data.type == 0) {
         // 更新堆垛机数据
         const foundCell = cellsDataLine.value.find(cell => cell.Code === data.stationNum);
         if (foundCell) {
            //修改高度
            foundCell.BoxHeight = data.boxHeight;
         }
         updateStacker(data)
         // const foundCell = cellsDataLine.value.find(cell => cell.Code === data.stationNum);
         // if (foundCell) {
         //    //修改高度
         //    foundCell.BoxHeight = data.boxHeight;
         // }
      }
   });
});
const handleSwitchChange = (field: string, value: boolean) => {
   const param = { [field]: value };
   debugger;
   signalR.invoke('UpdateService', param);
};
//更新堆垛机
// updateStacker({ stationNum: '10', boxHeight: 200 })
function updateStacker(data: any) {
   debugger;
   const foundCell = cellsDataLine.value.find(cell => cell.Code === data.stationNum);
   if (foundCell) {
      foundCell.EndLocat = data.endLocat;
      const startHeight = foundCell.BoxHeight;
      const targetHeight = data.boxHeight;
      const duration = 1000; // 动画持续时间（毫秒）
      const interval = 50; // 更新间隔（毫秒）
      const step = (targetHeight - startHeight) / (duration / interval);

      const update = () => {
         if ((step > 0 && foundCell.BoxHeight < targetHeight) || (step < 0 && foundCell.BoxHeight > targetHeight)) {
            foundCell.BoxHeight += step;
            if ((step > 0 && foundCell.BoxHeight >= targetHeight) || (step < 0 && foundCell.BoxHeight <= targetHeight)) {
               foundCell.BoxHeight = targetHeight; // 确保最终值准确
               clearInterval(timer);
            }
         } else {
            clearInterval(timer);
         }
      };

      const timer = setInterval(update, interval);
   }
}

// 更新输送线数据的通用函数
function updateCellData(cellsData: any[], data: any) {