feature/进程首页流转卡号状态展示

src/components/MessageBox/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-show="modelValue" class="body">
+    <div class="item" @click="sendMessage">消息记录</div>
+    <el-scrollbar class="itemScrollbar">
+      <div class="item" v-for="item in 12"></div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+const porps = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+const messages = ref([]);
+const ws = new WebSocket(
+  `ws://192.168.101.4:8079/websocket/${localStorage.getItem("token")}`
+);
+const sendMessage = () => {
+  if (ws.readyState === WebSocket.OPEN) {
+    ws.send("确认啊啊啊啊");
+  } else {
+    console.error("WebSocket is not open");
+  }
+};
+ws.onopen = () => {
+  console.log("实时已连接");
+};
+ws.onmessage = (event) => {
+  const receivedMessage = event.data;
+  console.log("Received message:", receivedMessage);
+  messages.value.push(receivedMessage);
+};
+ws.onclose = () => {
+  console.log("实时连接断开");
+};
+const emits = defineEmits(["update:modelValue"]);
+</script>
+<style scoped lang="scss">
+.body {
+  width: 260px;
+  height: 40vh;
+  position: fixed;
+  right: 20px;
+  top: 80px;
+  z-index: 3;
+  background-color: red;
+  border-radius: 16px;
+  overflow: hidden;
+
+  .itemScrollbar {
+    height: calc(100% - 80px);
+  }
+
+  .item {
+    width: 100%;
+    height: 60px;
+    background-color: aqua;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/layout/components/header.vue

@@ -13,8 +13,8 @@
     </div>
     <div>
       <el-space>
-        <div class="">
-          <svg-icon icon-class="lingdang" size="48" class="activeNotice" />
+        <div>
+          <svg-icon @click="messageStatus = !messageStatus" icon-class="lingdang" size="48" class="activeNotice" />
         </div>
         <div class="task">
           <el-progress :percentage="processCount" :show-text="false" :stroke-width="10" />
@@ -38,6 +38,7 @@
         </el-dropdown>
       </el-space>
     </div>
+    <MessageBox v-model="messageStatus" />
   </div>
 </template>
 
@@ -61,6 +62,7 @@ const date = dayjs().format("YYYY-MM-DD");
 const time = ref(dayjs().format("HH:mm:ss"));
 
 const processCount = ref(50);
+const messageStatus = ref(false);
 
 const headUrl = ref("");
 

src/views/process/components/scanCode.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 扫码板块 -->
   <div class="icon">
-    <img class="imgIcon" src="@/assets/icons/shaoma.svg" @click="toProSteps" />
+    <img class="imgIcon" src="@/assets/icons/shaoma.svg" />
   </div>
   <div class="body">
     <ScanCodeInput v-model="inputValue" @keyup.enter="toProSteps" />
@@ -16,6 +16,7 @@ const store = useProcessStore();
 const router = useRouter();
 const inputValue = ref("");
 const toProSteps = () => {
+  if (inputValue.value == "") return ElMessage.error("二维码不能为空！");
   store.odersData.qrCode = inputValue.value;
   getScanData();
 };

src/views/process/components/transferNum.vue

@@ -4,14 +4,16 @@
     <el-scrollbar class="scrollbar">
       <Empty v-if="selectSeqArray.length < 1" />
 
-      <div class="row" v-for="(item, index) in selectSeqArray" :key="index">
-        <el-tooltip effect="dark" :content="item.seqNo" placement="right" trigger="click" @click="clickCardNum(index)">
+      <div class="row" @click="clickCardNum(index)" v-for="(item, index) in selectSeqArray" :key="index">
+        <el-tooltip effect="dark" :content="item.seqNo" placement="right" trigger="click">
           <span :class="index == selectSeqIndex ? 'describeText active' : 'describeText'
             " style="cursor: pointer">{{ item.seqNo }}</span>
         </el-tooltip>
 
         <div class="status">
-          {{ dictS.getLableByValue("work_order_seq_state", item.state) }}
+          {{
+            dictS.getLableByValue("work_order_seq_state", String(item.state))
+          }}
         </div>
       </div>
     </el-scrollbar>
@@ -38,9 +40,16 @@ const clickCardNum = (index: number) => {
 
   .row {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    vertical-align: center;
 
     .status {
-      width: 60px;
+      width: 100px;
+      font-size: $f24;
+      line-height: 24px;
+      margin-bottom: 10px;
+      text-align: center;
     }
   }
 }

src/views/traceability/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="mainContentBox">生产履！</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+
+</style>