feature/消息界面

src/api/message/index.ts

@@ -0,0 +1,16 @@
+import request from "@/utils/request";
+//确认消息
+export function confirmMessage(data: any) {
+  return request({
+    url: "/api/v1/sys/message/confirmMessage",
+    method: "post",
+    data,
+  });
+}
+export function dataList(data: any) {
+  return request({
+    url: "/api/v1/sys/message/stationMessage",
+    method: "post",
+    data,
+  });
+}

src/components/MessageBox/index.vue

@@ -102,7 +102,7 @@ watch(
   position: fixed;
   right: 20px;
   top: 80px;
-  z-index: 3;
+  z-index: 666;
   background-color: white;
   border-radius: 16px;
   overflow: hidden;

src/components/RealTimeMsg/index.vue

@@ -69,9 +69,7 @@ const submit = async (item, index) => {
 const ws = new WebSocket(
   `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
 );
-ws.onopen = () => {
-  console.log("实时已连接");
-};
+ws.onopen = () => {};
 ws.onmessage = (event) => {
   const receivedMessage = event.data;
   messages.value = JSON.parse(receivedMessage).content;

src/router/modules/message.ts

@@ -1,5 +1,5 @@
 const Layout = () => import("@/layout/index.vue");
-
+import { useUserStore } from "@/store/modules/user";
 export default {
   path: "/message",
   name: "message",
@@ -16,4 +16,12 @@ export default {
       },
     },
   ],
+  beforeEnter: (to, from, next) => {
+    const store = useUserStore();
+    if (store.user.stationType == "16") {
+      next();
+    } else {
+      next({ path: "/" });
+    }
+  },
 };

src/router/modules/process.ts

@@ -184,6 +184,8 @@ export default {
     const store = useUserStore();
     if (store.user.stationType == "5") {
       next({ path: "/prepare" });
+    } else if (store.user.stationType == "16") {
+      next({ path: "/message" });
     } else {
       next();
     }

src/views/message/index.vue

@@ -11,19 +11,22 @@
     </div>
     <div class="body">
       <div class="left">
-        <div class="headers">未读消息（20条）</div>
+        <div class="headers">未读消息（{{ newMsg.length }}条）</div>
         <el-scrollbar class="msgs">
-          <div class="item" v-for="items in 16">
-            <div class="text"></div>
+          <div class="item" v-for="item in newMsg" :key="item">
+            <div>
+              <div class="text">{{ item.title }} {{ item.created }}</div>
+              <div class="text">{{ item.content }}</div>
+            </div>
             <div class="action">
-              <el-button type="success" @click="submit" class="btn"
+              <el-button type="success" @click="submit(item.id)" class="btn"
                 >确认收到</el-button
               >
             </div>
           </div>
         </el-scrollbar>
         <div class="bottomBtn">
-          <el-button
+          <!-- <el-button
             type="primary"
             :disabled="setNextStatus1"
             @click="setPage1(1)"
@@ -37,17 +40,22 @@
             @click="setPage1(-1)"
           >
             上一页
-          </el-button>
+          </el-button> -->
         </div>
       </div>
       <div class="right">
-        <div class="headers">已读消息（20条）</div>
+        <div class="headers">已确认消息（{{ totalCount2 }}条）</div>
         <el-scrollbar class="msgs">
-          <div class="item" style="overflow: hidden" v-for="items in 16">
-            <div
-              class="text"
-              style="background-color: rgba(0, 128, 0, 0.5)"
-            ></div>
+          <div
+            class="item"
+            style="overflow: hidden; background-color: rgba(0, 128, 0, 0.5)"
+            v-for="item in msgData2"
+            :key="item"
+          >
+            <div>
+              <div class="text">{{ item.title }} {{ item.created }}</div>
+              <div class="text">{{ item.content }}</div>
+            </div>
           </div>
         </el-scrollbar>
         <div class="bottomBtn">
@@ -60,7 +68,7 @@
           >
           <el-button
             class="btn"
-            :disabled="page == 1"
+            :disabled="page2 == 1"
             type="primary"
             @click="setPage2(-1)"
           >
@@ -73,59 +81,51 @@
 </template>
 
 <script setup>
+import { confirmMessage, dataList } from "@/api/message";
 defineOptions({ name: "MessageMain" });
-const page1 = ref(1);
-const pageSize1 = ref(5);
-const msgData1 = ref([]);
-const totalCount1 = ref(0);
+const newMsg = ref([]);
+//连接地址
+const ws = new WebSocket(
+  `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
+);
+const submit = async (id) => {
+  const { code } = await confirmMessage([id]);
+  if (code == "200") {
+    ElMessage.success("操作成功");
+    getPageInfo2();
+  }
+};
+ws.onopen = () => {};
+ws.onmessage = (event) => {
+  newMsg.value = JSON.parse(event.data).content;
+};
+ws.onclose = () => {};
 const page2 = ref(1);
 const pageSize2 = ref(5);
 const msgData2 = ref([]);
 const totalCount2 = ref(0);
-const getPageInfo1 = async () => {
-  const { data, code } = await userMessage({
-    pageNo: page1.value,
-    pageSize: pageSize1.value,
-  });
-  if (code == "200") {
-    msgData1.value = data.records;
-    totalCount1.value = data.totalCount;
-  }
-};
 const getPageInfo2 = async () => {
-  const { data, code } = await userMessage({
+  const { data, code } = await dataList({
     pageNo: page2.value,
     pageSize: pageSize2.value,
+    readState: 1,
   });
   if (code == "200") {
     msgData2.value = data.records;
     totalCount2.value = data.totalCount;
   }
 };
-const setNextStatus1 = computed(() => {
-  return totalCount1.value - page1.value * pageSize1.value > 0 ? false : true;
-});
+
 const setNextStatus2 = computed(() => {
   return totalCount2.value - page2.value * pageSize2.value > 0 ? false : true;
 });
-const setPage1 = (num) => {
-  page1.value = page1.value + num;
-  getPageInfo1();
-};
 const setPage2 = (num) => {
   page2.value = page2.value + num;
   getPageInfo2();
 };
-const reset1 = () => {
-  page1.value = 0;
-  msgData1.value = [];
-  totalCount1.value = 0;
-};
-const reset2 = () => {
-  page2.value = 0;
-  msgData2.value = [];
-  totalCount2.value = 0;
-};
+onMounted(() => {
+  getPageInfo2();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -158,7 +158,7 @@ const reset2 = () => {
   flex-direction: column;
   height: calc(100vh - 100px);
   .body {
-    height: calc(100vh - 164px);
+    height: calc(100vh - 184px);
     display: flex;
 
     .left {
@@ -187,9 +187,10 @@ const reset2 = () => {
     background-color: rgba(255, 165, 0, 0.4);
     border-radius: 16px;
     display: flex;
+    padding: 10px 0;
     .text {
       flex: 1;
-      padding: 10px;
+      padding: 3px 10px;
       font-size: 16px;
       font-weight: 500;
     }