模拟

src/pages/Index/History.vue

@@ -151,6 +151,7 @@ import { ElMessage } from 'element-plus'
 import WarnSvg from '@/assets/Index/History/warn.svg'
 import PrintSvg from '@/assets/Index/History/print.svg'
 import ErrorSvg from '@/assets/Warn.svg'
+import Mock from'mockjs';
 // 添加表格引用
 const historyTableRef = ref()
 
@@ -463,10 +464,41 @@ const handleExport = () => {
   warnMessage.value = '导出成功'
   showWarn.value = true
 }
-
+const mockData = Mock.mock({
+  'list|50': [
+    {
+      id: '@increment',
+      creatDate: '@date("YYYY-MM-DD")',
+      projName: '@ctitle(5, 10)',
+      subProjResult1: {
+        result1: '@ctitle(3, 5)',
+        result2: '@ctitle(3, 5)',
+        result3: '@ctitle(3, 5)',
+        errorInfo: ''
+      },
+      subProjResult2: {
+        result1: '@ctitle(3, 5)',
+        result2: '@ctitle(3, 5)',
+        result3: '@ctitle(3, 5)',
+        errorInfo: ''
+      },
+      subProjResult3: {
+        result1: '@ctitle(3, 5)',
+        result2: '@ctitle(3, 5)',
+        result3: '@ctitle(3, 5)',
+        errorInfo: ''
+      },
+      sampleBloodType: '@pick(["A", "B", "AB", "O"])',
+      lotId: '@increment'
+    }
+  ]
+});
 onMounted(() => {
   getTableData()
-})
+  tableData.value = mockData.list;
+  total.value = mockData.list.length;
+  totalPage.value = Math.ceil(mockData.list.length / pageSize.value);
+});
 </script>
 
 <style scoped lang="less">

src/pages/Index/Index.vue

@@ -55,8 +55,7 @@
         </div>
       </div>
     </el-footer>
-  </div>
-  <InitWarn v-if="showModal" :visible="showModal" title="确认操作" message="确认试管架中的试管槽是否取下，避免自检/自动复位时对设备产生损坏！"
+    <InitWarn v-if="showModal" :visible="showModal" title="确认操作" message="确认试管架中的试管槽是否取下，避免自检/自动复位时对设备产生损坏！"
     icon="/src/assets/Warn.svg" cancelText="返回" confirmText="确认取下/开始复位" @close="showModal = false"
     @confirm="handleConfirm" />
   <!-- 通用加载弹窗组件 -->
@@ -76,10 +75,8 @@
     icon="/src/assets/Warn.svg" cancelText="返回" confirmText="确认" @close="confirmError" @confirm="confirmError" />
   <InitWarn v-if="showWarnModal" :visible="showWarnModal" title="注意" :message="WarnMessage" cancelText="返回"
     icon="/src/assets/update-pin-icon.svg" confirmText="确认" @close="confirmWarn" @confirm="confirmWarn" />
-
+  </div>
 </template>
-
-
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import { Time, InitWarn, LoadingModal } from './Components/Consumables';

src/pages/Index/Regular/Running.vue

@@ -40,49 +40,46 @@ font-size: 22px;
  </span>
 </div>
 <!-- 光学模组 -->
-<div style="
+<div 
+style="
 position: fixed;
 top: 650px;right:10px;
 padding: 8px 5px;
 background-color:rgb(223, 237, 248);
 border-radius: 5px;
 ">
- <span style="font-weight: 600;font-size: 18px;display: block;">
+<span style="font-weight: 600;font-size: 18px;display: block;">
  光学模组
  </span>
- <div style="display: flex;">
-  <img src="@/assets/ji.png" alt="" width="20" height="20" style="border-radius: 50%;">
-
-<span style="display: inline-block; background-color:rgb(120, 206, 86);border-radius:5px;height:100px;padding: 5px;display: flex;flex-direction: column;justify-content: space-around;align-items:center;">
-  <img src="@/assets/men.png" alt="" width="20" height="20" style="border-radius: 50%;">
- 
-  <span>
-xxx
-</span>
-<span style="
-font-size: 14px;
-">
- xxxx
-</span>
-<span style="
-font-size: 16px;
-font-weight: 600;
-">
- xxxxxxx
-</span>
-</span>
+  <div v-if="hasEmergencyPosition" style="display: flex;">
+    <img src="@/assets/ji.png" alt="" width="20" height="20" style="border-radius: 50%;">
+    <span style="display: inline-block; background-color:rgb(120, 206, 86);border-radius:5px;height:100px;padding: 5px;display: flex;flex-direction: column;justify-content: space-around;align-items:center;">
+      <img src="@/assets/men.png" alt="" width="20" height="20" style="border-radius: 50%;">
+    <span>
+      xxx
+    </span>
+    <span style="font-size: 14px;">xxxx</span>
+    <span style="font-size: 16px;font-weight: 600;">xxxxxxx</span>
+ </span>
  </div>
+ <div v-else style="background-color: #ccc; height: 120px;border-radius: 5px;display: flex;justify-content: center;align-items: center;">
+  空闲
+ </div>
+</div>
+
+<div v-for="index in 20" :key="index" class="rectangular-item" :style="getRotationStyle(index, index)" >
+{{ 
+  index+1
+}}
+<div>空</div>
 </div>
-      <!-- 外圈的矩形元素 -->
-      <div v-for="(item, index) in incubationPlates" :key="item.sampleId" class="rectangular-item"
+     <div v-for="(item, index) in incubationPlates" :key="item.sampleId" class="rectangular-item"
         :style="[getRotationStyle(item, index), getItemStyle(item)]"
         @click="!item.isPlaceholder && toggleSelectItem(item,index)">
         <template v-if="item.isPlaceholder">
-          <!-- 占位符 -->
           <span class="placeholder-text">空位</span>
         </template>
         <template v-else>
-          <!-- 正常数据 -->
           <span v-if="item.state == 'RESERVED'" class="">
             <img src="@/assets/being booked.png" alt="" width="20" height="20" style="border-radius: 50%;">
           </span>
@@ -98,16 +95,19 @@ font-weight: 600;
           <span class="time">{{ getRemainingTime(item) }}</span>
         </template>
         <div v-show="currentIndex == index" :style="`margin-top:${item.pos=='EMERGENCY'?'20px':'50px'}`" class="quan">{{ index +1 }}</div>
-      </div>
-      
+      </div> 
     </div>
     <div class="consumables-container">
       <!-- 第一行 -->
       <div class="row-first">
         <!-- 急诊按钮 -->
-        <div class="emergency-button" @click="showEmergencyAlert = !showEmergencyAlert">
-          <span>急诊</span>
-        </div>
+         <div
+      class="emergency-button"
+      :class="{ disabled: hasEmergencyPosition }"
+      @click="!hasEmergencyPosition && (showEmergencyAlert =!showEmergencyAlert)"
+    >
+      <span>急诊</span>
+    </div>
         <!-- 试管架区域 -->
         <div class="test-tube-rack-area">
           <div class="tube-project-tab">
@@ -195,7 +195,7 @@ font-weight: 600;
 import { ref, onMounted, onUnmounted, watch, onActivated, onDeactivated } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useTestTubeStore, useConsumablesStore } from '../../../store'
-import { getBloodTypeLabel, processTubeSettings } from '../Utils'
+import { getBloodTypeLabel, processTubeSettings } from '../utils'
 import {
   SampleDisplay,
   PlateDisplay,
@@ -633,7 +633,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
         startIncubatedTime: 1612347378,
         incubatedTimeSec: 2050,
         errors: []
-    }
+  }
 ]
 }
 
@@ -650,11 +650,16 @@ const fetchTubeRackState = async () => {
     console.error('请求试管架状态接口出错:', err)
   }
 }
-
+const hasEmergencyPosition = ref(false)
 // 页面加载时获取试管架状态
 onMounted(() => {
   fetchTubeRackState()
   setInterval(fetchTubeRackState, 10000) // 每隔指定时间更新状态
+  const route = useRoute()
+  const param = route.query.hasEmergencyPosition
+  if (param === 'true') {
+    hasEmergencyPosition.value = true
+  }
 })
 
 onMounted(() => {

src/pages/Index/components/Running/LittleBufferDisplay.vue

@@ -12,7 +12,6 @@ import type { LittleBottleGroup } from '../../../../websocket/socket'
 
 // 定义组件接收的 props
 defineProps<{ bufferData: LittleBottleGroup[] }>()
-
 // 计算填充样式
 const getFillStyle = (item: LittleBottleGroup) => {
   const percentage = (item.num / 25) * 100

src/pages/Index/components/Running/SampleDisplay.vue

@@ -41,7 +41,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { generateSampleBackground, getBloodTypeLabel } from '../../Utils'
+import { generateSampleBackground, getBloodTypeLabel } from '../../utils'
 import type { TubeHolderStateMessage } from '../../../../websocket/socket'
 defineProps<{
   samples: TubeHolderStateMessage['data']['tubes'] // 接收的样本数据