修复idcardbug

src/pages/Index/Index.vue

@@ -279,7 +279,7 @@
       v-if="idCardInserted"
       :visible="idCardInserted"
       title="检测到id卡插入"
-      message="是否保存id卡信息"
+      :message="idCardMessage"
       cancelText="返回"
       icon="/src/assets/update-pin-icon.svg"
       confirmText="确认保存"
@@ -389,6 +389,7 @@ const emergencyStore = useEmergencyStore()
 const shutdownMessage = ref('正在关机中…')
 const confirmInfo = ref({})
 const confirmVisible = ref(false)
+const idCardMessage = ref('是否保存id卡信息')
 
 const failMessage = ref({
   title: '检测失败',
@@ -463,19 +464,25 @@ const handleSocketClose = (num: number) => {
 }
 
 // 处理应用事件消息
+// const formatDate = (date: any) => new Date(date).toLocaleDateString()
 const handleAppEvent = (data: AppEventMessage['data']) => {
   console.log('🚀 ~ handleAppEvent ~ data:', data)
   if (data.typeName === 'AppPromptEvent') {
     eventReports.value.push(data)
     showEventReportDlg.value = true
   } else if (data.typeName === 'AppIDCardMountEvent') {
-    // let mock = reportText
-    // eventReports.value.push(mock)
-    // showEventReportDlg.value = true
     consumableStore.setIdCardInserted(true)
+    let projectInfo = data.projectInfo
+    consumableStore.setIdCardInfo(projectInfo)
+    //显示部分id卡信息。 项目名称，过期时间，批次号
     idCardInserted.value = true
+    idCardMessage.value = `<div>
+      <div>项目名称：${projectInfo.projName}, 批次号：${projectInfo.lotId}, 过期时间：${formatDate(projectInfo.expiryDate)}</div>
+      <div>id卡已插入，是否确保？</div>
+    </div>`
   } else if (data.typeName === 'AppIDCardUnmountEvent') {
     consumableStore.setIdCardInserted(false)
+    consumableStore.setIdCardInfo(null)
     idCardInserted.value = false
   }
 }

src/pages/Index/components/Consumables/IdCardInfo.vue

@@ -42,13 +42,13 @@
           </table>
         </div>
         <div class="pagination-container">
-          <div class="pagination-info">
+          <!-- <div class="pagination-info">
             <select v-model="pageSize" @change="handlePageSizeChange" class="custom-select" style="font-size:14px;width:120px">
               <option v-for="size in pageSizeList" :key="size" :value="size" style="font-size:10px">
                 {{ size }} 条/页
               </option>
             </select>
-          </div>
+          </div> -->
           <div class="pagination-buttons">
             <button @click="prevPage" :disabled="currentPage === 1">
               上一页
@@ -101,14 +101,14 @@
           </div>
         </div>
       </div>
-
+      <Confirm :isLoading="confirmVisible" :confirmInfo="confirmInfo"></Confirm>
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue'
-import { getIdCardList } from '@/services/index'
+import { getIdCardList, delCard } from '@/services/index'
 import type { ItemData } from '@/types/Index'
 import { useConsumablesStore } from '@/store'
 const consumableStore = useConsumablesStore()
@@ -116,7 +116,6 @@ const props = defineProps({
   modelValue: Boolean,
 })
 const emit = defineEmits(['update:modelValue'])
-const pageSizeList:number[] = [5,10,20]
 const visible = ref(props.modelValue)
 //总条数
 let totalPage = ref(0)
@@ -128,12 +127,28 @@ watch(
 )
 const confirmDeleteVisible = ref(false) // 控制删除确认层的显示
 const confirmExistVisible = ref(false) // 控制删除确认层的显示
+const confirmVisible = ref(false)
+const confirmInfo = ref({})
 
 // 打开删除确认层
 const handleDelete = () => {
   if(!selectedItems.value.length){
     return
   }
+  if(selectedItems.value.length > 1){
+    confirmVisible.value = true;
+    confirmInfo.value = {
+      title: '提示',
+      message: '不可批量操作',
+      OkBtn: '确认',
+      confirmCallback:async()=>{
+        confirmVisible.value = false
+      },
+      
+    }
+    return;
+  }
+  
   //检查删除的卡与现有的耗材批次，如果存在则不参删除
   let lotList = selectedItems.value.map(item => item.lotId)
   //获取耗材数据
@@ -146,7 +161,6 @@ const handleDelete = () => {
       isExist = true;
     }
   }
-  console.log('isExist--', isExist)
   if(isExist){
     confirmExistVisible.value = true;
     return;
@@ -155,13 +169,17 @@ const handleDelete = () => {
 }
 
 // 确认删除操作
-const confirmDelete = () => {
-  tableData.value = tableData.value.filter(
-    (item) => !selectedItems.value.includes(item),
-  )
+const confirmDelete = async() => {
+  // tableData.value = tableData.value.filter(
+  //   (item) => !selectedItems.value.includes(item),
+  // )
+  let ids = selectedItems.value.map(item => item.id)
+  await delCard(ids[0])
   selectedItems.value = [] // 清空已选中项
   selectAll.value = false // 取消全选状态
   confirmDeleteVisible.value = false // 关闭确认删除层
+  getCardList()
+
 }
 
 // 取消删除操作
@@ -182,7 +200,7 @@ const getCardList = async () => {
   }
   tableData.value = res.data.list
   totalItems.value = res.data.list.length
-  totalPage.value = res.data.totalPage;
+  totalPage.value = res.data.total;
   console.log('tableData.value===', tableData.value)
 }
 
@@ -203,7 +221,7 @@ const handleConfirm = () => {
   emit('update:modelValue', false)
   console.log('已选择的项目:', selectedItems.value)
 }
-let defaultSize = 5
+let defaultSize = 10
 const currentPage = ref(1)
 const pageSize = ref(defaultSize)
 const tableData = ref<ItemData[]>([])
@@ -211,7 +229,7 @@ const totalItems = ref(0)
 const selectedItems = ref<ItemData[]>([]) // 选中的项目数组
 const selectAll = ref(false) // 全选状态
 
-const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value))
+const totalPages = computed(() => Math.ceil(totalPage.value / pageSize.value))
 //搜索
 // const _searchValue = ref<string>('')
 const prevPage = () => {
@@ -234,6 +252,8 @@ const formatDate = (date: any) => new Date(date).toLocaleDateString()
 // 显示的页码按钮逻辑
 const displayedPages = computed(() => {
   const pages:any = [];
+  console.log('totalPages---', totalPages)
+  console.log('currentPage---', currentPage)
   if (totalPages.value <= 5) {
     for (let i = 1; i <= totalPages.value; i++) {
       pages.push(i)
@@ -294,11 +314,13 @@ const handlePageSizeChange = () => {
 /* 弹窗主体样式 */
 .modal {
   background: white;
-  width: 1000px;
+  width: 90%;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-
+  .modal-body{
+    height:42rem;
+  }
   .modal-header {
     display: flex;
     width: 100%;
@@ -428,16 +450,15 @@ const handlePageSizeChange = () => {
   }
 
   .pagination-container {
-    display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 10px;
-
+    text-align: right;
     .pagination-buttons button {
       margin: 0 2px;
       padding: 5px 10px;
       font-size: 26px;
-
+      
       &.active {
         background: #007bff;
         color: white;

src/pages/Index/components/Consumables/MoveLiquidArea.vue

@@ -108,13 +108,12 @@
           <button
             class="id-button"
             @click="openIdCardTableModal"
-            :disabled="!consumableStore.isIdCardInserted"
           >
-            <span class="button-text">
-              {{
-                consumableStore.isIdCardInserted ? '已插入' : '未插入芯片'
-              }}</span
-            >
+            <div v-if="consumableStore.isIdCardInserted">
+              <div>{{ consumableStore.idCardInfo?.projName }}</div>
+              <div>{{ consumableStore.idCardInfo?.lotId }}</div>
+            </div>
+            <span v-else class="button-text">未插入芯片</span>
           </button>
         </div>
         <!--废料区-->

src/pages/Index/components/Consumables/Warn/InitWarn.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="modal-content">
           <h3 class="modal-title">{{ title }}</h3>
-          <p class="modal-message">{{ message }}</p>
+          <p class="modal-message" v-html="contentMessage"></p>
           <!-- 错误提示信息 -->
           <p v-if="errorTip" class="modal-error">{{ errorTip }}</p>
         </div>
@@ -49,10 +49,10 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['close', 'confirm'])
-
 // 设置图标的默认路径，使用 ref 存储动态路径
 const iconSrc = ref('')
-
+let msg = `<div class='modal-message'>${props.message}</div>`
+const contentMessage = ref(msg)
 // 使用 import.meta.glob 动态加载图标
 const icons = import.meta.glob('/src/assets/**/*.svg')
 

src/services/Index/idCard.ts

@@ -39,3 +39,14 @@ export const getMountedCardInfo = async () => {
     console.log('读取已经挂载的id卡信息出错', error)
   }
 }
+//读取已经挂载的id卡信息
+export const delCard = async (id) => {
+  try {
+    const res = await apiClient.post(
+      `/api/v1/app/a8kProjectCard/delete?id=${id}`,
+    )
+    return res.data
+  } catch (error) {
+    console.log('删除卡信息出错', error)
+  }
+}

src/store/modules/consumables.ts

@@ -11,6 +11,7 @@ import * as R from 'ramda'
 import type {
   ConsumablesStateMessage,
   ReactionPlateGroup,
+  IdCardPrompt
 } from '../../websocket/socket'
 
 // id : 1,11,21,31 优先选用  Color10 的索引1的颜色
@@ -49,6 +50,23 @@ export const useConsumablesStore = defineStore(
         isInstall: false,
       })),
     })
+
+    //插入的当前ID卡信息
+    const idCardInfo = ref<IdCardPrompt | null>({
+      color: '',
+      expiryDate: 0,
+      id: 0,
+      lotId: '',
+      palteCode: 0,//palteCode 字段，接口命名错了。应该是plateCode
+      projId: 0,
+      projName: '',
+      updateChipVersion: '',
+    })
+
+    function setIdCardInfo(data: IdCardPrompt | null){
+      idCardInfo.value = data;
+    }
+
     //id卡是否插入
     const isIdCardInserted = ref(false)
 
@@ -165,6 +183,9 @@ export const useConsumablesStore = defineStore(
       projectsAvailable,
 
       projIdColorMap,
+
+      idCardInfo,
+      setIdCardInfo,
     }
   },
   // {

src/websocket/socket.ts

@@ -34,11 +34,24 @@ export type EventName =
   | 'AppIDCardUnmountEvent'
   | 'AppPromptEvent'
 
+  //IDCARD
+export type IdCardPrompt = {
+  color: string,
+  expiryDate: number,
+  id: number,
+  lotId: string,
+  palteCode: number,//palteCode 字段，接口命名错了。应该是plateCode
+  projId: number,
+  projName: string,
+  updateChipVersion: string,
+  
+}
 export interface EventReport {
   typeName: EventName
   timestamp: number
   eventId: string
   prompt: TextPrompt | FormsPrompt | TablePrompt
+  projectInfo: IdCardPrompt
 }
 
 export type TextPrompt = {
@@ -530,6 +543,7 @@ export const createWebSocket = (url: string): WebSocketClient => {
 // 使用示例：
 /*
 import { createWebSocket } from './websocket/socket';
+import { ProjectInfo } from '../types/Index/Emergency';
 
 // 创建 WebSocket 连接
 const ws = createWebSocket('ws://your-websocket-server-url');