数据渲染

src/components/Setting/components/History.vue

@@ -12,64 +12,37 @@
         class="bottom_arrow"
         alt=""
       />
-      <div class="data_line">
-        <p class="title">2023-0824-234048</p>
+      <div
+        class="data_line"
+        v-for="item in historyStore.historyDataList"
+        :key="item"
+      >
+        <p class="title">{{ item }}</p>
         <div class="btns">
-          <div class="btn" @click="showDetailModal">详情</div>
+          <div class="btn" @click="showDetailModal(item)">详情</div>
         </div>
       </div>
     </div>
     <div class="detail_modal" v-if="showDetailVisible">
-      <div class="table_wrap">
-        <div class="table_column">
-          <p class="title">时间</p>
-          <div class="first_box">
-            <p class="content">2022-20-10</p>
+      <img :src="Top" @click.prevent="topContainer2" class="top_arrow" alt="" />
+      <img
+        :src="Down"
+        @click.prevent="bottomContainer2"
+        class="bottom_arrow"
+        alt=""
+      />
+      <div class="table_wrap" id="tabledetail_device_container">
+        <div
+          class="table_column"
+          v-for="(item, index) in historyStore.tableData"
+          :key="index"
+        >
+          <p class="title">{{ item.title }}</p>
+          <div class="first_box" v-for="it in item.data" :key="it">
+            <p class="content">{{ it }}</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>
@@ -82,8 +55,12 @@
 import { ref } from 'vue'
 import Down from '@/assets/img/arrow/down.png'
 import Top from '@/assets/img/arrow/top.png'
+import { useHistoryStore, useWebSocketStore } from '@/store'
+import { getDetailInfoById } from '@/mock/command'
 
 const showDetailVisible = ref(false)
+const historyStore = useHistoryStore()
+const webSocketStore = useWebSocketStore()
 
 const topContainer = () => {
   const ele = document.getElementById('set_device_container')
@@ -95,7 +72,19 @@ const bottomContainer = () => {
   ele.scrollTop = ele.scrollTop + 100
 }
 
-const showDetailModal = () => {
+const topContainer2 = () => {
+  const ele = document.getElementById('tabledetail_device_container')
+  ele.scrollTop = ele.scrollTop - 100 < 0 ? 0 : ele.scrollTop - 100
+}
+
+const bottomContainer2 = () => {
+  const ele = document.getElementById('tabledetail_device_container')
+  ele.scrollTop = ele.scrollTop + 100
+}
+
+const showDetailModal = item => {
+  // 根据这个item获取详细信息
+  webSocketStore.sendCommandMsg(getDetailInfoById(item))
   showDetailVisible.value = true
 }
 </script>
@@ -210,15 +199,36 @@ const showDetailModal = () => {
     overflow: hidden;
     background: url(../../../assets/img/history.png) no-repeat;
     background-size: 100% 100%;
+    .top_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      right: 50px;
+      top: 145px;
+      z-index: 4;
+    }
+    .bottom_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      right: 50px;
+      bottom: 111px;
+      z-index: 4;
+    }
     .table_wrap {
       flex: 1;
+      width: 1220px;
       display: flex;
       justify-content: space-evenly;
       align-items: center;
+      overflow: scroll;
       .table_column {
         height: 100%;
+        position: relative;
         .title {
           height: 80px;
+          position: sticky;
+          top: 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -228,6 +238,10 @@ const showDetailModal = () => {
           line-height: normal;
           letter-spacing: 0.07em;
           color: #999999;
+          white-space: nowrap;
+          margin: 0 20px;
+          background: #f6f6f6;
+          z-index: 2;
         }
         .first_box {
           position: relative;
@@ -257,7 +271,7 @@ const showDetailModal = () => {
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      padding: 20px 30px;
+      padding: 20px 80px;
       .return_btn {
         width: 91px;
         height: 40px;

src/mock/command.js

@@ -305,9 +305,15 @@ export const updateAllFormulaJSON = data => {
 
 // 获取本机历史数据
 export const getAllLocalHistoryData = {
-  command: 'getAllLocalHistoryData',
-  messageId: 'getAllLocalHistoryData',
+  command: 'disinfectionLogsGetList',
+  messageId: 'disinfectionLogsGetList',
 }
 
 // 根据消毒id获取本次消毒所有详细信息
-export const getDetailInfoById = id => {}
+export const getDetailInfoById = id => {
+  return {
+    command: 'disinfectionLogsGetRecord',
+    messageId: 'disinfectionLogsGetRecord',
+    disinfectionLogName: id,
+  }
+}

src/store/index.js

@@ -10,6 +10,7 @@ import { usePreStore } from './modules/preinstall'
 import { useAuditStore } from './modules/audit'
 import { useFormulaStore } from './modules/formula'
 import { useRunningStore } from './modules/running'
+import { useHistoryStore } from './modules/history'
 const store = createPinia()
 
 export default store
@@ -20,6 +21,7 @@ export {
   useRunningStore,
   useSettingStore,
   useOperatorStore,
+  useHistoryStore,
   useWebSocketStore,
   useDeviceStore,
   useEchartsStore,

src/store/modules/history.js

@@ -17,4 +17,25 @@ export const useHistoryStore = defineStore({
       this.detailData = detailData
     },
   },
+  getters: {
+    tableData(state) {
+      const result = []
+      const headerArr = state.detailData[0].split(',')
+      const len = headerArr.length
+      for (let i = 0; i < len; i++) {
+        const obj = {}
+        obj.title = headerArr[i]
+        let realData = []
+        state.detailData.map((item, index) => {
+          if (index != 0) {
+            const arr = item.split(',')
+            realData.push(arr[i])
+          }
+        })
+        obj.data = realData
+        result.push(obj)
+      }
+      return result
+    },
+  },
 })

src/store/modules/websocket.js

@@ -8,6 +8,7 @@ import { useDeviceStore } from './device'
 import { useTestStore } from './test'
 import { useAuditStore } from './audit'
 import { useFormulaStore } from './formula'
+import { useHistoryStore } from './history'
 import { useEchartsStore } from './echarts'
 import { useRunningStore } from './running'
 import { showSuccessToast, showFailToast } from 'vant'
@@ -38,6 +39,7 @@ export const useWebSocketStore = defineStore({
       const auditStore = useAuditStore()
       const formulaStore = useFormulaStore()
       const runningStore = useRunningStore()
+      const historyStore = useHistoryStore()
       init.connect()
       init.ws.onmessage = function (ev) {
         const { messageId, timeStamp } = JSON.parse(ev.data)
@@ -179,6 +181,20 @@ export const useWebSocketStore = defineStore({
             }
           case 'startDisinfection':
             break
+          case 'disinfectionLogsGetList':
+            const { ackcode: disinfectionLogsCode, disinfectionLogList } =
+              JSON.parse(ev.data) || {}
+            if (disinfectionLogsCode == 0) {
+              historyStore.updateHistoryDataList(disinfectionLogList)
+            }
+            break
+          case 'disinfectionLogsGetRecord':
+            const { ackcode: logDetailCode, record } = JSON.parse(ev.data) || {}
+            const { content } = record || {}
+            if (logDetailCode == 0) {
+              historyStore.updateDetailData(content)
+            }
+            break
           case 'stopDisinfection':
             break
           case 'exportUserBehaviorRecord':