设备监控页面更新

chenyong

2024-12-19 8331bf651646bbbb3d9afc4b95ac2f256e23cd00

设备监控页面更新

 Code Management/WCS/WIDESEAWCS_Client/src/components/DeviceLineVo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
<template>
     <div class="Linebox">
    <div class="card">
      <div class="card-header">
        <div id="lines2" >
          <div class="card-body">{{device.deviceName}}<br/>
            -{{ device.data.childDeviceCode }}-
          </div>
        </div>
      </div>
      <div class="card-body">
        <ul class="list-group lis">
          <li class="list-group-item list-group-item-dark">读取信号</li>
          <li class="list-group-item list-group-item-secondary">任务号：{{ device.data.commandAfter.conveyorLineTaskNum }}</li>
          <li class="list-group-item list-group-item-secondary">托盘号：{{ device.data.commandAfter.conveyorLineBarcode }}</li>
          <li class="list-group-item list-group-item-secondary">终点地址：{{ device.data.commandAfter.conveyorLineTargetAddress }}</li>
          <li class="list-group-item list-group-item-secondary">是否有盘：{{ device.data.commandAfter.hasPallet }}</li>
          <li class="list-group-item list-group-item-secondary">报警代码：{{ device.data.commandAfter.conveyorLineAlarm }}</li>
          <li class="list-group-item list-group-item-secondary">请求反馈：{{ device.data.commandAfter.responState }}</li>
          <li  :class="device.data.commandAfter.interactiveSignal !=0 ? 'list-group-item list-group-item-success'  :'list-group-item list-group-item-danger'">交互信号</li>
        </ul> 
      </div>
    </div>
</div>
</template>
<script setup>
import { defineProps } from "vue";

// å®šä¹‰ç»„件属性
const props = defineProps({
    device: {
        type: Object,
        required: true
    }
});

// èŽ·å–信号类名
const getSignalClass = (signal) => {
    // console.log("🚀 ~ getSignalClass ~ signal:", signal)
    return signal !== true ? 'list-group-item list-group-item-danger' : 'list-group-item list-group-item-success';
};
</script>

<style scoped>
.Stackerbox {
  width: 220px;
  float: left;
}
.Linebox {
  width: 300px;
  float: left;
}
.box1 {
  float: left;
}
.card-body {
  text-align: center;
  border-radius: 6%;
}
.Stacker {
  background-color: burlywood;
}
.lis {
  float: left;
  width: 266px;
}
</style>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/AgingLibrary.vue

@@ -1,78 +1,74 @@
<template>
  <div>
    <div>
      <div class="Stackerbox">
        <div class="card">
          <div class="card-header">
            <div>
              <div class="card-body Stacker">
                {{ StackerOne.deviceName }}
              </div>
            </div>
          </div>
          <div class="card-body">
            <ul class="list-group">
              <li class="list-group-item list-group-item-secondary">
                ä»»åŠ¡å·ï¼š{{ StackerOne.data.currentTaskNum || '暂无任务号' }}
              </li>
              <li :class="getStatusClass(StackerOne.data.stackerCraneAutoStatusDes)">
                å·¥ä½œæ¨¡å¼ï¼š{{ StackerOne.data.stackerCraneAutoStatusDes }}
              </li>
              <li :class="getStatusClass(StackerOne.data.stackerCraneStatusDes)">
                è®¾å¤‡çŠ¶æ€ï¼š{{ StackerOne.data.stackerCraneStatusDes }}
              </li>
              <li :class="getStatusClass(StackerOne.data.stackerCraneWorkStatusDes)">
                å·¥ä½œçŠ¶æ€ï¼š{{ StackerOne.data.stackerCraneWorkStatusDes }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <device-line v-for="device in devices" :key="device.deviceName" :device="device" />
  </div>
 <el-row>
    <el-col :span="3">
     
      <device-stacker v-for="stacker in Stackers" :key="stacker.deviceName" :Stacker="stacker"></device-stacker>
    </el-col>
    <el-col :span="21">
      <device-line v-for="device in devices" :key="device.deviceName" :device="device" />
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, reactive, toRefs } from "vue";
import eventBus from "@/uitils/eventBus";
import DeviceLine from "@/components/DeviceLine.vue";
import DeviceStacker from "@/components/DeviceStacker.vue";

// å †åž›æœº
const StackerOne = reactive({
  deviceName: "",
  data: {
  }
});
const Stackers = reactive([]);

// è®¾å¤‡åˆ—表（修改重复设备名称）
const devices = reactive([
  { deviceName: "陈化出库输送线", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } },
  { deviceName: "陈化入库输送线", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } },
  // { deviceName: "堆垛机1", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } },
  // Add all devices similarly...
]);
const devices = reactive([]);

// èŽ·å–状态类名（优化状态判断）
const getStatusClass = (status) => {
  if (status === '正常' || status === '自动' || status === '待机') {
    return 'list-group-item list-group-item-success';
  }
  if (status === '故障' || status === '停机') {
    return 'list-group-item list-group-item-danger';
  }
  return 'list-group-item list-group-item-warning'; // é»˜è®¤è­¦å‘ŠçŠ¶æ€
const intToBitArrayFromBinaryString = (num, numBits) => {
  let binaryString = num.toString(2).padStart(numBits, '0');
  return Array.from({ length: numBits }, (_, index) => binaryString[index] === '1');
};

// ç›‘听设备数据变化
onMounted(() => {
  eventBus.on('locationData', eventData => {
    const device = devices.find(d => d.deviceName === eventData.deviceName);
    if (device) {
      // ä½¿ç”¨æ‰©å±•è¿ç®—符更新对象属性，保持响应性
      device.data = { ...device.data, ...eventData.data };
    console.log(eventData)
    if (eventData.deviceName === "陈化入库输送线"||eventData.deviceName === "陈化入库输送线") {

      if (devices.length <= 0) {
        devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.childDeviceCode });
      }
      else {
        const device = devices.find(c => c.childDeviceCode == eventData.childDeviceCode)
        if (device) {
          const number = eventData.data.commandWrite.writeInteractiveSignal;
          const writeInteractiveSignal = intToBitArrayFromBinaryString(number, 8)
          eventData.data.writeInteractiveSignal = writeInteractiveSignal;
          device.data = eventData.data
        }
        else {
          const number = eventData.data.commandWrite.writeInteractiveSignal;
          const writeInteractiveSignal = intToBitArrayFromBinaryString(number, 8)
          eventData.data.writeInteractiveSignal = writeInteractiveSignal;
          devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.childDeviceCode });
        }
      }
    }
  });
  eventBus.on('stackerData', eventData => {
    if (eventData.deviceName == "陈化1号堆垛机"||eventData.deviceName == "陈化2号堆垛机") {
      if (Stackers.length == 0) {
        Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
      }
      else {
        const Stacker = Stackers.find(c => c.deviceName == eventData.deviceName);
        if (Stacker) {
          Stacker.data = eventData.data
        }
        else {
          Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
        }
      }
    }
  })
});
</script>
<style scoped>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/FormationLibrary.vue

@@ -33,7 +33,7 @@
          const writeInteractiveSignal = intToBitArrayFromBinaryString(number, 8)
          eventData.data.writeInteractiveSignal = writeInteractiveSignal;
          device.data = eventData.data
          console.log("🚀 ~ onMounted ~ device:", device.data)
          
        }
        else {
          const number = eventData.data.commandWrite.writeInteractiveSignal;
@@ -47,23 +47,3 @@
});
</script>

<style scoped>
.Linebox{
  width: 573px;
  float: left;
}
.box1{
  float: left;
}
.card-body{
  text-align: center;
  border-radius: 6% ;
}
.Stacker{
  background-color: burlywood;
}
.lis{
  float: left;
  width: 269px;
}
</style>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/Staticlibrary.vue

@@ -29,6 +29,7 @@
// ç›‘听设备数据变化
onMounted(() => {
  eventBus.on('locationData', eventData => {
    console.log(eventData)
    if (eventData.deviceName === "静置输送线") {

      if (devices.length <= 0) {
@@ -66,10 +67,6 @@
        }
      }
    }
    // if (eventData.deviceName == "陈化1号堆垛机") {
    //   StackerOne.deviceName = eventData.deviceName;
    //   StackerOne.data = eventData.data
    // }
  })
});
</script>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/Twoletters.vue

@@ -46,24 +46,3 @@
  });
});
</script>

<style scoped>
.Linebox{
  width: 573px;
  float: left;
}
.box1{
  float: left;
}
.card-body{
  text-align: center;
  border-radius: 6% ;
}
.Stacker{
  background-color: burlywood;
}
.lis{
  float: left;
  width: 269px;
}
</style>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/Volume.vue

@@ -1,9 +1,58 @@
<template>
    <div>
        åˆ†å®¹åº“
    </div>
  <el-row>
    <el-col :span="3">
      <device-stacker v-for="stacker in Stackers" :key="stacker.deviceName" :Stacker="stacker"></device-stacker>
    </el-col>
    <el-col :span="21">
      <DeviceLineVo v-for="device in devices" :key="device.deviceName" :device="device" />
    </el-col>
  </el-row>
</template>
<script setup>
import { onMounted, ref, reactive, toRaw } from "vue";
import eventBus from "@/uitils/eventBus";
import DeviceLineVo from "@/components/DeviceLineVo.vue";
import DeviceStacker from "@/components/DeviceStacker.vue";
// å †åž›æœº
const Stackers = reactive([]);
var  i=0;
// è®¾å¤‡åˆ—表（修改重复设备名称）
const devices = reactive([]);
const num = reactive([])
onMounted(() => {
  eventBus.on('stackerData', eventData => { 
    if (eventData.deviceName === "分容3线入库输送线"||eventData.deviceName === "分容出库输送线") {
    if (devices.length <= 0) {
        devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
      }
      else {
        const device = devices.find(c => c.childDeviceCode == eventData.data.childDeviceCode)
        if(device){
          device.data = eventData.data
        }else{
          devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
        }
      }
    }
  })
  eventBus.on('stackerData', eventData => {
    if (eventData.deviceName == "分容3号堆垛机"||eventData.deviceName == "分容2号堆垛机") {
      if (Stackers.length == 0) {
        Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
      }
      else {
        const Stacker = Stackers.find(c => c.deviceName == eventData.deviceName);
        if (Stacker) {
          Stacker.data = eventData.data
        }
        else {
          Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
        }
      }
    }
  })
})
</script>
<style scoped>


</script>
</style>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/baozhuang.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,42 @@
<template>
  <el-row>
    <el-col :span="21">
      <DeviceLineVo v-for="device in devices" :key="device.deviceName" :device="device" />
    </el-col>
  </el-row>
</template>
<script setup>
import { onMounted, ref, reactive, toRaw } from "vue";
import eventBus from "@/uitils/eventBus";
import DeviceLineVo from "@/components/DeviceLineVo.vue";
import DeviceStacker from "@/components/DeviceStacker.vue";
// å †åž›æœº
const Stackers = reactive([]);
var  i=0;
// è®¾å¤‡åˆ—表（修改重复设备名称）
const devices = reactive([]);
const num = reactive([])
onMounted(() => {
  eventBus.on('stackerData', eventData => {
    if (eventData.deviceName === "包装出库输送线") {
    if (devices.length <= 0) {
        devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
      }
      else {
        const device = devices.find(c => c.childDeviceCode == eventData.data.childDeviceCode)
        if(device){
          device.data = eventData.data
        }else{
          devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
        }
      }
    
    }
  })

})

</script>
<style scoped>

</style>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/hightemperature.vue

@@ -1,9 +1,63 @@
<template>
    <div>
        é«˜æ¸©åº“
    </div>
  <el-row>
    <el-col :span="3">
      <device-stacker v-for="stacker in Stackers" :key="stacker.deviceName" :Stacker="stacker"></device-stacker>
    </el-col>
    <el-col :span="21">
      <DeviceLineVo v-for="device in devices" :key="device.deviceName" :device="device" />
    </el-col>
  </el-row>
</template>
<script setup>
import { onMounted, ref, reactive, toRaw } from "vue";
import eventBus from "@/uitils/eventBus";
import DeviceLineVo from "@/components/DeviceLineVo.vue";
import DeviceStacker from "@/components/DeviceStacker.vue";
// å †åž›æœº
const Stackers = reactive([]);
var  i=0;
// è®¾å¤‡åˆ—表（修改重复设备名称）
const devices = reactive([]);
const num = reactive([])
onMounted(() => {
  eventBus.on('stackerData', eventData => {
    // console.log(eventData)
   
      console.log(eventData)
    
    if (eventData.deviceName === "老化入库输送线") {
    if (devices.length <= 0) {
        devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
      }
      else {
        const device = devices.find(c => c.childDeviceCode == eventData.data.childDeviceCode)
        if(device){
          device.data = eventData.data
        }else{
          devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
        }
      }
    
    }
  })
  eventBus.on('stackerData', eventData => {
    if (eventData.deviceName == "老化1号堆垛机") {
      if (Stackers.length == 0) {
        Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
      }
      else {
        const Stacker = Stackers.find(c => c.deviceName == eventData.deviceName);
        if (Stacker) {
          Stacker.data = eventData.data
        }
        else {
          Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
        }
      }
    }
  })
})
</script>
<style scoped>


</script>
</style>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/roomtemperature.vue

@@ -1,9 +1,63 @@
<template>
    <div>
        å¸¸æ¸©åº“
    </div>
  <el-row>
    <el-col :span="3">
      <device-stacker v-for="stacker in Stackers" :key="stacker.deviceName" :Stacker="stacker"></device-stacker>
    </el-col>
    <el-col :span="21">
      <DeviceLineVo v-for="device in devices" :key="device.deviceName" :device="device" />
    </el-col>
  </el-row>
</template>
<script setup>
import { onMounted, ref, reactive, toRaw } from "vue";
import eventBus from "@/uitils/eventBus";
import DeviceLineVo from "@/components/DeviceLineVo.vue";
import DeviceStacker from "@/components/DeviceStacker.vue";
// å †åž›æœº
const Stackers = reactive([]);
var  i=0;
// è®¾å¤‡åˆ—表（修改重复设备名称）
const devices = reactive([]);
const num = reactive([])
onMounted(() => {
  eventBus.on('stackerData', eventData => {
    // console.log(eventData)
   
      console.log(eventData)
    
    if (eventData.deviceName === "常温入库输送线") {
    if (devices.length <= 0) {
        devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
      }
      else {
        const device = devices.find(c => c.childDeviceCode == eventData.data.childDeviceCode)
        if(device){
          device.data = eventData.data
        }else{
          devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.data.childDeviceCode });
        }
      }
    
    }
  })
  eventBus.on('stackerData', eventData => {
    if (eventData.deviceName == "常温1号堆垛机"||eventData.deviceName == "常温2号堆垛机"||eventData.deviceName == "常温3号堆垛机"||eventData.deviceName == "常温4号堆垛机") {
      if (Stackers.length == 0) {
        Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
      }
      else {
        const Stacker = Stackers.find(c => c.deviceName == eventData.deviceName);
        if (Stacker) {
          Stacker.data = eventData.data
        }
        else {
          Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
        }
      }
    }
  })
})
</script>
<style scoped>


</script>
</style>

 Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/indexLibrary.vue

@@ -5,14 +5,15 @@
       <RouterLink class="navlink" to="/AgingLibrary" >陈化库</RouterLink>
       <RouterLink class="navlink" to="/FormationLibrary" >化成库</RouterLink>
       <RouterLink class="navlink" to="/StaticLibrary" >静置库</RouterLink>
       <RouterLink class="navlink" to="/Twoletters" >二封库</RouterLink>
       <RouterLink class="navlink" to="/Twoletters" >二封</RouterLink>
       <RouterLink class="navlink" to="/Volume" >分容库</RouterLink>
       <RouterLink class="navlink" to="/highTemperature" >高温库</RouterLink>
       <RouterLink class="navlink" to="/highTemperature" >老化库</RouterLink>
       <RouterLink class="navlink" to="/roomTemperature" >常温库</RouterLink>
       <RouterLink class="navlink" to="/Baozhuang" >包装</RouterLink>
    </div>
     <!--注意事项-->
    <div class="area">
           <RouterView></RouterView>
           <RouterView :key="$route.fullPath" ></RouterView>
    </div>
</template>
<script setup>