历史记录

src/components/Setting/components/History.vue

@@ -14,7 +14,55 @@
     </div>
     <div class="detail_modal" v-if="showDetailVisible">
       <div class="table_wrap">
-        <div class="table_title_wrap"></div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+            <p class="line"></p>
+          </div>
+        </div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+          </div>
+        </div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+          </div>
+        </div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+          </div>
+        </div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+          </div>
+        </div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+          </div>
+        </div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+          </div>
+        </div>
+        <div class="table_column">
+          <p class="title">时间</p>
+          <div class="first_box">
+            <p class="content">2022-20-10</p>
+          </div>
+        </div>
       </div>
       <div class="bottom_line">
         <div class="return_btn" @click="showDetailVisible = false">返回</div>
@@ -123,16 +171,49 @@ const showDetailModal = () => {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    background: url(../../../assets/img/history.png) no-repeat;
+    background-size: 100% 100%;
     .table_wrap {
       flex: 1;
       display: flex;
-      flex-direction: column;
-      .table_title_wrap {
-        width: 1224px;
-        height: 80.29px;
-        box-sizing: border-box;
-        border-radius: 16px 16px 0px 0px;
-        background: #f6f6f6;
+      justify-content: space-evenly;
+      align-items: center;
+      .table_column {
+        height: 100%;
+        .title {
+          height: 80px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: Source Han Sans CN;
+          font-size: 18px;
+          font-weight: normal;
+          line-height: normal;
+          letter-spacing: 0.07em;
+          color: #999999;
+        }
+        .first_box {
+          position: relative;
+          .content {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: Source Han Sans CN;
+            font-size: 18px;
+            font-weight: normal;
+            line-height: normal;
+            letter-spacing: 0.07em;
+            color: #191919;
+          }
+          .line {
+            position: absolute;
+            left: -1000%;
+            width: 2000%;
+            height: 1px;
+            background: #f6f6f6;
+          }
+        }
       }
     }
     .bottom_line {

src/components/Setting/index.vue

@@ -33,8 +33,8 @@
       </div>
       <div class="tab_wrap" @click="changeActiveTab(7)">
         <p class="active_line" v-show="activeTab == 7"></p>
-        <p :class="activeTab == 6 ? 'title active' : 'title'">历史记录</p>
-        <div :class="activeTab == 6 ? 'btn style-btn' : 'dis_btn'">查看</div>
+        <p :class="activeTab == 7 ? 'title active' : 'title'">历史记录</p>
+        <div :class="activeTab == 7 ? 'btn style-btn' : 'dis_btn'">查看</div>
       </div>
     </div>
     <div class="right_container">
@@ -57,7 +57,7 @@ import Device from './components/Device.vue'
 import User from './components/User.vue'
 import ExportExcel from './components/ExportExcel.vue'
 import History from './components/History.vue'
-import { getAllUserJSON } from '@/mock/command'
+import { getAllUserJSON, getAllLocalHistoryData } from '@/mock/command'
 import { useWebSocketStore } from '@/store'
 
 const webSocketStore = useWebSocketStore()
@@ -69,6 +69,10 @@ const changeActiveTab = index => {
   if (index == 3) {
     webSocketStore.sendCommandMsg(getAllUserJSON)
   }
+  if (index == 7) {
+    // 查询历史记录
+    webSocketStore.sendCommandMsg(getAllLocalHistoryData)
+  }
 }
 </script>
 

src/mock/command.js

@@ -302,3 +302,12 @@ export const updateAllFormulaJSON = data => {
     ...data,
   }
 }
+
+// 获取本机历史数据
+export const getAllLocalHistoryData = {
+  command: 'getAllLocalHistoryData',
+  messageId: 'getAllLocalHistoryData',
+}
+
+// 根据消毒id获取本次消毒所有详细信息
+export const getDetailInfoById = id => {}

src/store/modules/history.js

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+export const useHistoryStore = defineStore({
+  id: 'history', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      historyDataList: [],
+      detailData: [],
+    }
+  },
+  // actions
+  actions: {
+    updateHistoryDataList(historyDataList) {
+      this.historyDataList = historyDataList
+    },
+    updateDetailData(detailData) {
+      this.detailData = detailData
+    },
+  },
+})