修改SignalR事件名及前端展示逻辑

肖洋

2024-12-13 27aa02de7f3e5079334fb2d13b6facf67eec813c

 Code Management/WCS/WIDESEAWCS_Client/src/views/Home.vue

@@ -1,5 +1,106 @@
<template>
  <div class="title"></div>
  <div class="home-contianer">
    <div>
      <el-tabs type="border-card" @tab-click="handleClick" style="width: 100%; height: 100%;">
        <el-tab-pane label="陈化库" style="width: 100%;height: 100%;">
          <div class="StackerOne">
            <div class="content">{{ this.StackerOne.deviceName }}:</div>
            <!-- <div :class="this.ConveyorlineOut.data.command.interactiveSignal==1 ? 'bool_false' : 'bool_true'"></div> -->
            <div class="content">任务号：{{ this.StackerOne.data.currentTaskNum }}</div>
            <div class="content display">
              <div>工作模式：{{ this.StackerOne.data.stackerCraneAutoStatusDes }}</div>
              <div :class="this.StackerOne.data.stackerCraneAutoStatusDes != '自动' ? 'bool_false' : 'bool_true'"></div>
            </div>
            <div class="content display">
              <div>设备状态：{{ this.StackerOne.data.stackerCraneStatusDes }}</div>
              <div :class="this.StackerOne.data.stackerCraneStatusDes != '正常' ? 'bool_false' : 'bool_true'"></div>
            </div>
            <div class="content display">
              <div>作业状态：{{ this.StackerOne.data.stackerCraneWorkStatusDes }}</div>
              <div :class="this.StackerOne.data.stackerCraneWorkStatusDes != '待机' ? 'bool_false' : 'bool_true'"></div>
            </div>
          </div>
          <div class="ConveyorlineOut">
            <div class="content">{{ this.ConveyorlineOut.deviceName }}-----{{
              this.ConveyorlineOut.data.childDeviceCode}}:</div>
            <div class="display">
              <div>
                <div class="Signal">读取信号：</div>
                <div class="content ">任务号：{{ this.ConveyorlineOut.data.command.taskNum }}</div>
                <div class="content ">托盘号：{{ this.ConveyorlineOut.data.command.barcode }}</div>
                <div class="content ">终点地址：{{ this.ConveyorlineOut.data.command.targetAddress}}</div>
                <div class="content display">
                  <div>扫码站台入库请求：</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[0] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
                <div class="content display">
                  <div>堆垛机出库站台请求：</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[2] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
                <div class="content display">
                  <div>堆垛机入库站台请求</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[4] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
                <div class="content display">
                  <div>线体出库口请求：</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[6] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
              </div>
              <div style="margin-left: 40px;">
                <div class="Signal">写入信号：</div>
                <div class="content ">任务号：{{ this.ConveyorlineOut.data.commandWrite.taskNum }}</div>
                <div class="content ">托盘号：{{ this.ConveyorlineOut.data.commandWrite.barcode }}</div>
                <div class="content ">终点地址：{{ this.ConveyorlineOut.data.commandWrite.targetAddress}}</div>
                <div class="content display">
                  <div>扫码站台入库请求：</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[1] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
                <div class="content display">
                  <div>堆垛机出库站台请求：</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[3] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
                <div class="content display">
                  <div>堆垛机入库站台请求</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[5] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
                <div class="content display">
                  <div>线体出库口请求：</div>
                  <div
                    :class="this.ConveyorlineOut.data.writeInteractiveSignal[7] != true ? 'bool_false' : 'bool_true'">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="静置库" id="print-content">

        </el-tab-pane>
        <el-tab-pane label="分容库" id="print-content">

        </el-tab-pane><el-tab-pane label="高温库" id="print-content">

        </el-tab-pane>
        <el-tab-pane label="常温库" id="print-content">

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
@@ -8,17 +109,62 @@
export default {
  setup() {
    return {
      StackerOne: {
        deviceName: "",
        data: {},
      },
      ConveyorlineOut: {
        deviceName: "",
        data: {
          command: {},
          commandWrite: {},
          writeInteractiveSignal:[],
        },
      },
      ConveyorlineIn: {
        deviceName: "",
        data: {
          command: {},
          commandWrite: {},
          writeInteractiveSignal:[],
        },
      }
    }


  },

  created() {
  methods: {
     intToBitArrayFromBinaryString (num, numBits){
        // 将整数转换为二进制字符串，并使用padStart方法补足到指定的位数（前面补0）
        let binaryString = num.toString(2).padStart(numBits, '0');
        let bitArray = [];
        for (let i = 0; i < numBits; i++) {
            // 直接根据字符串中字符是否为'1'来确定每一位的值（转换为布尔值）
            bitArray.push(binaryString[i] === '1');
        }
        return bitArray;
    }
  },
  mounted() {
    eventBus.on('stackerData', eventData => {
      console.log(eventData);
      if (eventData.deviceName == "陈化1号堆垛机") {
        this.StackerOne.deviceName = eventData.deviceName;
        this.StackerOne.data = eventData.data
      }
      // console.log(eventData);
    })
    eventBus.on('locationData', eventData => {
      console.log(eventData);
      if (eventData.deviceName == "陈化出库输送线") {
        this.ConveyorlineOut.deviceName = eventData.deviceName;
        this.ConveyorlineOut.data = eventData.data
      }
      if (eventData.data.childDeviceCode == '1018') {
        this.ConveyorlineIn.deviceName = eventData.deviceName;
        this.ConveyorlineIn.data = eventData.data
        let number = eventData.data.commandWrite.writeInteractiveSignal
        this.ConveyorlineIn.data.writeInteractiveSignal = this.intToBitArrayFromBinaryString(number, 8);
        console.log(this.ConveyorlineIn.data.writeInteractiveSignal);
      }
    })
  }
}
@@ -31,4 +177,54 @@
  font-size: 28px;
  color: orange;
}

.bool_true {
  width: 30px;
  height: 20px;
  margin-top: 10px;
  margin-left: 10px;
  background-color: rgb(99, 155, 16);
}

.bool_info {
  width: 30px;
  height: 10px;
  background-color: #ccc;
}

.StackerOne {
  width: 100%;
  margin-bottom: 10px;
  padding-left: 30px;
  font-size: 25px;
  border: 1px solid #ccc;
}

.ConveyorlineOut {
  width: 100%;
  margin-bottom: 10px;
  padding-left: 30px;
  font-size: 25px;
  border: 1px solid #ccc;
}

.bool_false {
  display: block;
  width: 30px;
  height: 20px;
  margin-top: 10px;
  margin-left: 10px;
  background-color: rgb(204, 71, 71);
}

.content {
  margin-bottom: 20px;
}
.Signal{
  margin-bottom: 20px;
  color:blueviolet;
}
.display {
  display: flex;
}
</style>