From 6ce08fb7e3ac056ef2cda917232b4b72ffcdb157 Mon Sep 17 00:00:00 2001
From: liutao <790864623@qq.com>
Date: Thu, 26 Mar 2026 15:20:03 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E9=85=8D=E6=96=B9=E5=BA=93=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/recipepointrecord/index.ts        |   4 +
 .../components/FormulaLibraryDetailTabs.vue   | 193 +++++++++++-------
 2 files changed, 127 insertions(+), 70 deletions(-)

diff --git a/src/api/iot/recipepointrecord/index.ts b/src/api/iot/recipepointrecord/index.ts
index 8f4e2ee0..423518f9 100644
--- a/src/api/iot/recipepointrecord/index.ts
+++ b/src/api/iot/recipepointrecord/index.ts
@@ -12,6 +12,10 @@ export interface RecipePointRecordVO {
 
 export const RecipePointRecordApi = {
   // 新增记录
+  createRecipePointRecord: async (data: RecipePointRecordVO) => {
+    return await request.post({ url: `/iot/recipe-point-record/create`, data })
+  },
+  // 批量新增记录
   createRecipePointRecordBatch: async (data: RecipePointRecordVO[]) => {
     return await request.post({ url: `/iot/recipe-point-record/batch-create`, data })
   },
diff --git a/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue b/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue
index 3e48583d..976d7b37 100644
--- a/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue
+++ b/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue
@@ -46,58 +46,62 @@
       />
     </el-tab-pane>
     <el-tab-pane :label="t('RecipeManagement.RecipeLibrary.detailTabManualLabel')" name="manual">
-      <!-- <el-form
+      <el-form
         class="-mb-15px"
         :model="queryParams"
         ref="queryFormRef"
         :inline="true"
         label-width="68px"
       >
-        <el-form-item label="名称" prop="name">
-          <el-input
-            v-model="queryParams.name"
-            placeholder="请输入名称"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item label="参考值" prop="refer">
-          <el-input
-            v-model="queryParams.refer"
-            placeholder="请输入参考值"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item label="单位" prop="dataUnit">
-          <el-input
-            v-model="queryParams.dataUnit"
-            placeholder="请输入单位"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input
-            v-model="queryParams.remark"
-            placeholder="请输入备注"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          />
-        </el-form-item>
+        <!--        <el-form-item label="名称" prop="name">
+                  <el-input
+                    v-model="queryParams.name"
+                    placeholder="请输入名称"
+                    clearable
+                    @keyup.enter="handleQuery"
+                    class="!w-240px"
+                  />
+                </el-form-item>
+                <el-form-item label="参考值" prop="refer">
+                  <el-input
+                    v-model="queryParams.refer"
+                    placeholder="请输入参考值"
+                    clearable
+                    @keyup.enter="handleQuery"
+                    class="!w-240px"
+                  />
+                </el-form-item>
+                <el-form-item label="单位" prop="dataUnit">
+                  <el-input
+                    v-model="queryParams.dataUnit"
+                    placeholder="请输入单位"
+                    clearable
+                    @keyup.enter="handleQuery"
+                    class="!w-240px"
+                  />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                  <el-input
+                    v-model="queryParams.remark"
+                    placeholder="请输入备注"
+                    clearable
+                    @keyup.enter="handleQuery"
+                    class="!w-240px"
+                  />
+                </el-form-item>-->
         <el-form-item>
-          <el-button @click="handleQuery">
-            <Icon icon="ep:search" class="mr-5px" /> 查询
-          </el-button>
-          <el-button @click="resetQuery">
-            <Icon icon="ep:refresh" class="mr-5px" /> 重置
+          <!--          <el-button @click="handleQuery">
+                      <Icon icon="ep:search" class="mr-5px" /> 查询
+                    </el-button>
+                    <el-button @click="resetQuery">
+                      <Icon icon="ep:refresh" class="mr-5px" /> 重置
+                    </el-button>-->
+          <el-button type="primary" plain @click="openCReferDialog()">
+            <Icon icon="ep:plus" class="mr-5px" />
+            {{ t('RecipeManagement.RecipeLibrary.createButtonText') }}
           </el-button>
         </el-form-item>
-      </el-form> -->
+      </el-form>
       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id">
         <!-- <el-table-column type="index" :label="t('RecipeManagement.RecipeLibrary.detailIndexColumn')" align="center" width="70" /> -->
         <el-table-column
@@ -105,13 +109,13 @@
           align="center"
           prop="name"
           min-width="140"
-         sortable />
+          sortable />
         <el-table-column
           :label="t('RecipeManagement.RecipeLibrary.manualTableDataTypeColumn')"
           align="center"
           prop="dataType"
           width="140"
-         sortable />
+          sortable />
         <el-table-column
           :label="t('RecipeManagement.RecipeLibrary.manualTableDataUnitColumn')"
           align="center"
@@ -155,18 +159,28 @@
   </el-tabs>
 
   <Dialog v-model="referDialogVisible" title="补录采集值" width="520px">
-    <el-form :model="referForm" label-width="90px">
+    <el-form ref="referFormRef" :model="referForm" label-width="90px">
       <el-form-item label="名称">
-        <el-input :model-value="referForm.name" disabled />
+        <el-input v-model="referForm.name" :disabled="isEdit" />
       </el-form-item>
       <el-form-item label="数据类型">
-        <el-input :model-value="referForm.dataType" disabled />
+        <el-input v-model="referForm.dataType" :disabled="isEdit" />
       </el-form-item>
-      <el-form-item label="单位">
-        <el-input :model-value="referForm.dataUnitLabel" disabled />
+<!--      <el-form-item label="单位">
+        <el-input v-model="referForm.dataUnitLabel" :disabled="isEdit" />
+      </el-form-item>-->
+      <el-form-item label="单位" prop="dataUnit">
+        <el-select v-model="referForm.dataUnit" :disabled="isEdit" placeholder="请选择单位" class="!w-1/1">
+          <el-option
+            v-for="item in unitList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="备注">
-        <el-input :model-value="referForm.remark" type="textarea" disabled />
+        <el-input v-model="referForm.remark" type="textarea" :disabled="isEdit" />
       </el-form-item>
       <el-form-item label="参考值">
         <el-input v-model="referForm.refer" />
@@ -183,10 +197,12 @@
 
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { RecipePointRecordApi } from '@/api/iot/recipepointrecord'
+import {RecipePointRecordApi, RecipePointRecordVO} from '@/api/iot/recipepointrecord'
 import { RecipeDeviceRecordApi } from '@/api/iot/recipeDeviceRecord'
 import { RecipePointVO } from '@/api/iot/recipePoint'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
+import {ElMessage} from "element-plus";
+import {ErrorRecordVO} from "@/api/mes/errorrecord";
 
 defineOptions({ name: 'FormulaLibraryDetailTabs' })
 
@@ -203,7 +219,7 @@ const props = defineProps({
 const activeTab = ref<'detail' | 'manual'>('detail')
 
 const detailList = ref<{ key: string; pointName: string; value: string; unit: string }[]>([])
-
+const isEdit = ref(true)
 const loading = ref(false)
 const list = ref<RecipePointVO[]>([])
 const total = ref(0)
@@ -318,10 +334,10 @@ const resetQuery = () => {
   queryFormRef.value?.resetFields?.()
   handleQuery()
 }
-
+const referFormRef = ref()
 const referDialogVisible = ref(false)
 const referSubmitting = ref(false)
-const referForm = reactive({
+const referForm = ref({
   id: '' as string,
   recipeId: '' as string,
   name: '' as string,
@@ -333,10 +349,35 @@ const referForm = reactive({
   remark: '' as string,
   refer: '' as string
 })
+const openCReferDialog =  () => {
+  isEdit.value = false
+  resetDialogForm()
+  referDialogVisible.value = true
+}
+const resetDialogForm = () => {
+    referForm.value.id= undefined
+    referForm.value.recipeId= undefined,
+    referForm.value.name= '' as string,
+    referForm.value.max= '' as string,
+    referForm.value.min='' as string,
+    referForm.value.dataType= '' as string,
+    referForm.value.dataUnit= '' as string,
+    referForm.value.dataUnitLabel= '' as string,
+    referForm.value.remark= '' as string,
+    referForm.value.refer= '' as string
+/*  const form = unref(referFormRef)
+  if (!form) {
+    ElMessage.warning('表单实例未找到')
+    return
+  }
+  // 重置表单
+  form.resetFields()*/
+  //referFormRef.value?.resetFields?.()
+}
 
 const openReferDialog = (row: RecipePointVO) => {
   const id = row?.id === undefined || row?.id === null ? '' : String(row.id)
-  referForm.id = id
+/*  referForm.id = id
   referForm.recipeId = row?.recipeId === undefined || row?.recipeId === null ? '' : String(row.recipeId)
   referForm.name = row?.name ?? ''
   referForm.max = row?.max ?? ''
@@ -345,27 +386,38 @@ const openReferDialog = (row: RecipePointVO) => {
   referForm.dataUnit = row?.dataUnit ?? ''
   referForm.dataUnitLabel = getUnitLabel(row?.dataUnit)
   referForm.remark = row?.remark ?? ''
-  referForm.refer = row?.refer ?? ''
+  referForm.refer = row?.refer ?? ''*/
+  referForm.value =row
+  referForm.value.id = id
+  isEdit.value = true
   referDialogVisible.value = true
 }
 
 const submitRefer = async () => {
   if (referSubmitting.value) return
-  if (!referForm.id) return
+  // if (!referForm.id) return
   referSubmitting.value = true
   try {
-    await RecipePointRecordApi.updateRecipePointRecord({
-      id: referForm.id,
-      recipeId: referForm.recipeId ? referForm.recipeId : undefined,
-      name: referForm.name,
-      max: referForm.max,
-      min: referForm.min,
-      dataType: referForm.dataType,
-      dataUnit: referForm.dataUnit,
-      remark: referForm.remark,
-      refer: referForm.refer
-    })
-    message.success(t('common.updateSuccess'))
+    if(!referForm.value.id){
+      await referFormRef.value.validate()
+      referForm.value.recipeId = props.recipeId !== undefined && props.recipeId !== null ? String(props.recipeId) : undefined
+      const data = referForm.value as unknown as RecipePointRecordVO
+      await RecipePointRecordApi.createRecipePointRecord(data)
+      message.success(t('common.createSuccess'))
+    }else{
+      await RecipePointRecordApi.updateRecipePointRecord({
+        id: referForm.value.id,
+        recipeId: referForm.value.recipeId ? referForm.value.recipeId : undefined,
+        name: referForm.value.name,
+        max: referForm.value.max,
+        min: referForm.value.min,
+        dataType: referForm.value.dataType,
+        dataUnit: referForm.value.dataUnit,
+        remark: referForm.value.remark,
+        refer: referForm.value.refer
+      })
+      message.success(t('common.updateSuccess'))
+    }
     referDialogVisible.value = false
     await refreshManual()
   } finally {
@@ -380,6 +432,7 @@ watch(
     getList()
   },
   { immediate: true }
+
 )
 
 watch(

From 3d79f40c91ae3e2a20a9555aee4823b779d4dd10 Mon Sep 17 00:00:00 2001
From: liutao <790864623@qq.com>
Date: Fri, 27 Mar 2026 14:29:48 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E9=87=87=E9=9B=86=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.ts                             |   22 +-
 src/locales/zh-CN.ts                          |   21 +-
 .../components/FormulaLibraryDetailTabs.vue   |   28 +-
 src/views/iot/device/index.vue                |  370 +++++-
 src/views/mes/deviceledger/index.vue          | 1016 +++++++++++++----
 5 files changed, 1211 insertions(+), 246 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index af7f1607..524e1fc5 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -2983,7 +2983,22 @@ export default {
       manualTableDataTypeColumn: 'Data Type',
       manualTableDataUnitColumn: 'Unit',
       manualTableReferColumn: 'Reference Value',
-      manualTableRemarkColumn: 'Remark'
+      manualTableRemarkColumn: 'Remark',
+      manualTableInputTimeColumn: 'Input Time',
+      manualTableEnteringAction:'Re-enroll',
+      manualFormTitleLabel: 'Re-recorded collected values',
+      nanualFormNameLabel:'Name',
+      nanualFormNamePlaceholder:'Please enter name',
+      nanualFormDataTypeLabel:'Data Type',
+      nanualFormDataTypePlaceholder:'Please select data type',
+      nanualFormDataUnitLabel:'Unit',
+      nanualFormDataUnitPlaceholder:'Please select unit',
+      nanualFormReferLabel:'Reference Value',
+      nanualFormReferPlaceholder:'Please enter reference value',
+      nanualFormRemarkLabel:'Remark',
+      nanualFormRemarkPlaceholder:'Please enter remark',
+      nanualFormInputTimeLabel:'Input Time',
+      nanualFormInputTimePlaceholder:'Please select input time',
     }
   },
   EnergyManagement: {
@@ -3974,7 +3989,10 @@ export default {
       attributeValidatorRemarkTooLong: 'Remark can not exceed 100 characters',
 
       messageSelectDeviceRequired: 'Please select a device',
-      messageDeviceInfoMissingForRules: 'Device information is missing, unable to load point rules'
+      messageDeviceInfoMissingForRules: 'Device information is missing, unable to load point rules',
+
+      gridView:'gridView',
+      sudoku:'sudoku',
     },
     RunReport: {
       moduleName: 'Device Operation Report',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 8e0409cc..3c0ec079 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -2504,7 +2504,21 @@ export default {
       manualTableDataTypeColumn: '数据类型',
       manualTableDataUnitColumn: '单位',
       manualTableReferColumn: '参考值',
-      manualTableRemarkColumn: '备注'
+      manualTableRemarkColumn: '备注',
+      manualTableInputTimeColumn: '录入时间',
+      manualTableEnteringAction: '补录',
+      manualFormTitleLabel: '补录采集值',
+      nanualFormNameLabel: '名称',
+      nanualFormNamePlaceholder: '请输入名称',
+      nanualFormDataTypeLabel: '数据类型',
+      nanualFormDataTypePlaceholder: '请输入数据类型',
+      nanualFormDataUnitLabel: '单位',
+      nanualFormDataUnitPlaceholder: '请选择单位',
+      nanualFormReferLabel: '参考值',
+      nanualFormReferPlaceholder: '请输入参考值',
+      nanualFormRemarkLabel: '备注',
+      nanualFormRemarkPlaceholder: '请输入备注',
+
     }
   },
   FactoryModeling: {
@@ -3813,7 +3827,10 @@ export default {
       attributeValidatorRemarkTooLong: '备注不能超过100字',
 
       messageSelectDeviceRequired: '请选择一个物联设备',
-      messageDeviceInfoMissingForRules: '设备信息缺失，无法加载点位规则'
+      messageDeviceInfoMissingForRules: '设备信息缺失，无法加载点位规则',
+
+      gridView:'表格视图',
+      sudoku:'九宫格',
     },
     RunReport: {
       moduleName: '设备运行报表',
diff --git a/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue b/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue
index 976d7b37..435ada21 100644
--- a/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue
+++ b/src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue
@@ -138,14 +138,14 @@
           prop="remark"
           min-width="180"
         />
-        <el-table-column label="录入时间" align="center" prop="updateTime" min-width="180" sortable>
+        <el-table-column :label="t('RecipeManagement.RecipeLibrary.manualTableInputTimeColumn')" align="center" prop="updateTime" min-width="180" sortable>
           <template #default="scope">
             {{ formatTime(scope.row?.updateTime) }}
           </template>
         </el-table-column>
-        <el-table-column align="center" fixed="right" label="操作" width="120">
+        <el-table-column align="center" fixed="right" :label="t('RecipeManagement.RecipeLibrary.tableOperateColumn')" width="120">
           <template #default="scope">
-            <el-button link type="primary" @click="openReferDialog(scope.row)">补录</el-button>
+            <el-button link type="primary" @click="openReferDialog(scope.row)">{{t('RecipeManagement.RecipeLibrary.manualTableEnteringAction')}}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -158,19 +158,19 @@
     </el-tab-pane>
   </el-tabs>
 
-  <Dialog v-model="referDialogVisible" title="补录采集值" width="520px">
+  <Dialog v-model="referDialogVisible" :title="t('RecipeManagement.RecipeLibrary.manualFormTitleLabel')" width="520px">
     <el-form ref="referFormRef" :model="referForm" label-width="90px">
-      <el-form-item label="名称">
-        <el-input v-model="referForm.name" :disabled="isEdit" />
+      <el-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormNameLabel')">
+        <el-input v-model="referForm.name" :disabled="isEdit" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormNamePlaceholder')"/>
       </el-form-item>
-      <el-form-item label="数据类型">
-        <el-input v-model="referForm.dataType" :disabled="isEdit" />
+      <el-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormDataTypeLabel')">
+        <el-input v-model="referForm.dataType" :disabled="isEdit" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormDataTypePlaceholder')" />
       </el-form-item>
 <!--      <el-form-item label="单位">
         <el-input v-model="referForm.dataUnitLabel" :disabled="isEdit" />
       </el-form-item>-->
-      <el-form-item label="单位" prop="dataUnit">
-        <el-select v-model="referForm.dataUnit" :disabled="isEdit" placeholder="请选择单位" class="!w-1/1">
+      <el-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormDataUnitLabel')" prop="dataUnit">
+        <el-select v-model="referForm.dataUnit" :disabled="isEdit" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormDataUnitPlaceholder')" class="!w-1/1">
           <el-option
             v-for="item in unitList"
             :key="item.id"
@@ -179,11 +179,11 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="备注">
-        <el-input v-model="referForm.remark" type="textarea" :disabled="isEdit" />
+      <el-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormRemarkLabel')">
+        <el-input v-model="referForm.remark" type="textarea" :disabled="isEdit" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormRemarkPlaceholder')" />
       </el-form-item>
-      <el-form-item label="参考值">
-        <el-input v-model="referForm.refer" />
+      <el-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormReferLabel')">
+        <el-input v-model="referForm.refer" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormReferPlaceholder')" />
       </el-form-item>
     </el-form>
     <template #footer>
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index 3fb15e83..ce699d16 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -64,12 +64,22 @@
         <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['iot:device:delete']">
           <Icon icon="ep:delete" class="mr-5px" /> {{ t('DataCollection.Device.batchDelete') }}
         </el-button>
+        <!-- 视图切换按钮 -->
+        <el-button
+          :type="currentView === 'grid' ? 'primary' : 'default'"
+          :icon="currentView === 'grid' ? Menu : Grid"
+          @click="toggleView"
+          class="view-toggle-btn"
+        >
+          {{ currentView === 'grid' ? t('DataCollection.Device.gridView') : t('DataCollection.Device.sudoku') }}
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
-  <!-- 列表 -->
+  <!-- 列表 GridView  Sudoku-->
   <ContentWrap>
+    <div v-show="currentView === 'table'" class="simple-table-view">
     <el-table
       ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
       @selection-change="handleSelectionChange" @row-click="handleShowAttribute">
@@ -179,6 +189,81 @@
     <Pagination
 :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
+    </div>
+
+    <!-- 九宫格视图 -->
+    <div v-show="currentView === 'grid'" class="simple-grid-view">
+      <div v-if="!list || list.length === 0" class="empty-grid">
+        <el-empty description="暂无设备数据"/>
+      </div>
+
+      <div v-else class="grid-container">
+        <div
+          v-for="(item, index) in list"
+          :key="item.id || index"
+          class="grid-card"
+          @click="handleShowAttribute(item)"
+        >
+          <!-- 设备状态指示 status-${item.deviceStatus} -->
+          <div class="status-indicator" :class="getStatusText(item.operatingStatus)"></div>
+
+          <!-- 设备图标 -->
+<!--          <div class="card-icon">
+            <el-icon :size="32" :color="getEquipmentColor(item.type)">
+              <component :is="getEquipmentIcon(item.type)"/>
+            </el-icon>
+          </div>-->
+          <!-- 设备基本信息 -->
+          <div class="card-content">
+            <!-- 设备状态 -->
+            <div class="card-status">
+              <el-tag
+                :type="getStatusTag(item.operatingStatus)"
+                size="small"
+                class="status-tag"
+              >
+                {{ item.operatingStatus }}
+              </el-tag>
+            </div>
+            <div class="card-title"> {{ t('DataCollection.Device.deviceName') }}:{{ item.deviceName }}</div>
+            <div class="card-code"> {{ t('DataCollection.Device.deviceCode') }}:{{ item.deviceCode }}</div>
+            <div class="card-model"> {{ t('DataCollection.Device.collectionTime') }}:{{ item.collectionTime }}</div>
+
+
+
+<!--            &lt;!&ndash; 运行信息 &ndash;&gt;
+            <div v-if="item.runningHours" class="card-running">
+              <span>运行: {{ formatRunningHours(item.runningHours) }}</span>
+            </div>
+
+            &lt;!&ndash; 位置信息 &ndash;&gt;
+            <div v-if="item.location" class="card-location">
+              <el-icon :size="12">
+                <Location/>
+              </el-icon>
+              <span>{{ item.location }}</span>
+            </div>-->
+          </div>
+        </div>
+      </div>
+      <Pagination
+        :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+        @pagination="getList"/>
+      <!-- 分页 -->
+      <!--          <div class="simple-pagination">
+                  <el-pagination
+                    v-model:current-page="queryParams.pageNo"
+                    v-model:page-size="queryParams.pageSize"
+                    :page-sizes="[12, 24, 48, 96]"
+                    layout="total, sizes, prev, pager, next"
+                    :total="total"
+                    @size-change="handleSizeChange"
+                    @current-change="handlePageChange"
+                  />
+                </div>-->
+    </div>
+
+
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -600,7 +685,77 @@ import request from '@/config/axios'
 import { DeviceApi, DeviceConnectParams, DeviceVO } from '@/api/iot/device'
 import DeviceForm from './DeviceForm.vue'
 import DeviceAttributeList from './components/DeviceAttributeList.vue'
+import {
+  Refresh,
+  Grid,
+  Menu,
+  Search,
+  Location
+} from '@element-plus/icons-vue'
+import {useRouter} from "vue-router";
+
+const currentView = ref('table') // 'table' 或 'grid'
+// 路由
+const router = useRouter()
+// 查看详情
+const handleView = (row) => {
+  router.push({
+    path: '/equipment/detail',
+    query: {id: row.id}
+  })
+}
+/** 设备类型 列表 */
+//defineOptions({name: 'DeviceLedger'})
+const getEquipmentColor = (type) => {
+  const colorMap = {
+    'production': '#409eff',
+    'inspection': '#67c23a',
+    'packaging': '#e6a23c',
+    'transport': '#f56c6c',
+    'other': '#909399'
+  }
+  return colorMap[type] || '#409eff'
+}
 
+const getEquipmentIcon = (type) => {
+  const iconMap = {
+    'production': 'Monitor',
+    'inspection': 'Search',
+    'packaging': 'Box',
+    'transport': 'Truck',
+    'other': 'Tools'
+  }
+  return iconMap[type] || 'Tools'
+}
+
+// 工具函数
+const getStatusTag = (status) => {
+  const tagMap = {
+    '运行': 'success',//running
+    '待机中': 'info',//standby
+    '故障中': 'danger',//fault
+    '报警中': 'warning',//maintenance
+    '离线': 'info'//stopped
+  }
+  return tagMap[status] || 'info'
+}
+
+const getStatusText = (status) => {
+  const textMap = {
+    '运行': 'status-running',
+    '待机中': 'status-standby',
+    '故障中': 'status-fault',
+    '报警中': 'status-maintenance',
+    '离线': 'status-stopped'
+  }
+  return textMap[status] || '未知'
+}
+// 切换视图
+const toggleView = () => {
+  currentView.value = currentView.value === 'table' ? 'grid' : 'table'
+  // 保存视图偏好
+  localStorage.setItem('equipment-view', currentView.value)
+}
 
 /** 物联设备 列表 */
 defineOptions({ name: 'Device' })
@@ -1342,3 +1497,216 @@ const handleShowDeviceAlarmHistory = async () => {
 }
 
 </script>
+
+<style lang="scss" scoped>
+.simple-grid-view {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  max-height: calc(100vh - 546px);
+  overflow-y: auto;
+
+  .empty-grid {  // 注意：这里缩进要与上面一致
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+    padding: 8px;
+
+    .grid-card {
+      position: relative;
+      border: 1px solid #ebeef5;
+      border-radius: 8px;
+      padding: 18px;
+      background-color: #fafafa;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+
+      &:hover {
+        border-color: #409eff;
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+        transform: translateY(-2px);
+        background-color: #fff;
+      }
+
+      .status-indicator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 6px;
+        height: 100%;
+        border-radius: 8px 0 0 8px;
+
+        &.status-running {
+          background-color: #67c23a;
+        }
+
+        &.status-standby {
+          background-color: #909399;
+        }
+
+        &.status-fault {
+          background-color: #f56c6c;
+        }
+
+        &.status-maintenance {
+          background-color: #e6a23c;
+        }
+
+        &.status-stopped {
+          background-color: #909399;
+        }
+      }
+
+      .card-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60px;
+        height: 60px;
+        background-color: #f5f7fa;
+        border-radius: 8px;
+      }
+
+      .card-content {
+        flex: 1;
+        min-width: 0;
+
+        .card-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-left: 50px;
+        }
+
+        .card-code {
+          font-size: 12px;
+          color: #909399;
+          margin-bottom: 2px;
+          margin-left: 50px;
+        }
+
+        .card-model {
+          font-size: 13px;
+          color: #606266;
+          margin-bottom: 8px;
+          margin-left: 50px;
+        }
+
+        .card-status {
+          margin-bottom: 8px;
+
+          .status-tag {
+            width: 50px;
+            justify-content: center;
+          }
+        }
+
+        .card-running {
+          font-size: 12px;
+          color: #606266;
+          margin-bottom: 4px;
+        }
+
+        .card-location {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 12px;
+          color: #909399;
+
+          .el-icon {
+            color: #909399;
+          }
+        }
+      }
+    }
+  }
+
+  .simple-pagination {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #ebeef5;
+    text-align: center;
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .equipment-simple {
+    padding: 12px;
+
+    .simple-toolbar {
+      flex-direction: column;
+      gap: 12px;
+
+      .toolbar-left {
+        width: 100%;
+
+        .simple-search {
+          flex: 1;
+          width: 100%;
+        }
+
+        .status-filter,
+        .type-filter {
+          width: 100px;
+        }
+      }
+
+      .toolbar-right {
+        width: 100%;
+        justify-content: flex-end;
+      }
+    }
+
+    .simple-grid-view {
+      .grid-container {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .equipment-simple {
+    .simple-grid-view {
+      .grid-container {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .simple-toolbar {
+      .toolbar-left {
+        flex-wrap: wrap;
+
+        .simple-search {
+          width: 100%;
+        }
+
+        .status-filter,
+        .type-filter {
+          flex: 1;
+          min-width: 120px;
+        }
+      }
+    }
+  }
+}
+
+</style>
diff --git a/src/views/mes/deviceledger/index.vue b/src/views/mes/deviceledger/index.vue
index f2179aa4..38d7ef70 100644
--- a/src/views/mes/deviceledger/index.vue
+++ b/src/views/mes/deviceledger/index.vue
@@ -2,159 +2,309 @@
   <div class="device-ledger-layout">
     <ContentWrap class="device-ledger-left">
       <el-tree
-v-loading="typeTreeLoading" :data="typeTreeData" node-key="id" highlight-current :props="typeTreeProps"
-        :default-expanded-keys="typeTreeExpandedKeys" :expand-on-click-node="false" @node-click="handleTypeNodeClick" />
+        v-loading="typeTreeLoading" :data="typeTreeData" node-key="id" highlight-current
+        :props="typeTreeProps"
+        :default-expanded-keys="typeTreeExpandedKeys" :expand-on-click-node="false"
+        @node-click="handleTypeNodeClick"/>
     </ContentWrap>
 
     <div class="device-ledger-right">
       <ContentWrap>
-        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="60px">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" prop="deviceCode">
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"
+                 label-width="60px">
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')"
+                        prop="deviceCode">
             <el-input
-v-model="queryParams.deviceCode" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')" clearable @keyup.enter="handleQuery"
-              class="!w-240px" />
+              v-model="queryParams.deviceCode"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')"
+              clearable @keyup.enter="handleQuery"
+              class="!w-240px"/>
           </el-form-item>
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')" prop="deviceName">
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')"
+                        prop="deviceName">
             <el-input
-v-model="queryParams.deviceName" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')" clearable @keyup.enter="handleQuery"
-              class="!w-240px" />
+              v-model="queryParams.deviceName"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')"
+              clearable @keyup.enter="handleQuery"
+              class="!w-240px"/>
           </el-form-item>
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')" prop="deviceStatus">
-            <el-select v-model="queryParams.deviceStatus" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceStatus')" clearable class="!w-240px">
-              <el-option v-for="dict in tzStatusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')"
+                        prop="deviceStatus">
+            <el-select v-model="queryParams.deviceStatus"
+                       :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceStatus')"
+                       clearable class="!w-240px">
+              <el-option v-for="dict in tzStatusOptions" :key="dict.value" :label="dict.label"
+                         :value="dict.value"/>
             </el-select>
           </el-form-item>
           <el-form-item>
             <el-button @click="handleQuery">
-              <Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}
+              <Icon icon="ep:search" class="mr-5px"/>
+              {{ t('common.query') }}
             </el-button>
             <el-button @click="resetQuery">
-              <Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}
+              <Icon icon="ep:refresh" class="mr-5px"/>
+              {{ t('common.reset') }}
             </el-button>
-            <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mes:device-ledger:create']">
-              <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
+            <el-button type="primary" plain @click="openForm('create')"
+                       v-hasPermi="['mes:device-ledger:create']">
+              <Icon icon="ep:plus" class="mr-5px"/>
+              {{ t('action.add') }}
             </el-button>
-            <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['mes:device-ledger:delete']">
-              <Icon icon="ep:delete" class="mr-5px" /> {{ t('EquipmentManagement.EquipmentLedger.batchDelete') }}
+            <el-button type="danger" plain @click="handleBatchDelete"
+                       v-hasPermi="['mes:device-ledger:delete']">
+              <Icon icon="ep:delete" class="mr-5px"/>
+              {{ t('EquipmentManagement.EquipmentLedger.batchDelete') }}
             </el-button>
             <el-button
-type="success" plain @click="handleExport" :loading="exportLoading"
+              type="success" plain @click="handleExport" :loading="exportLoading"
               v-hasPermi="['mes:device-ledger:export']">
-              <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+              <Icon icon="ep:download" class="mr-5px"/>
+              {{ t('action.export') }}
             </el-button>
+            <!-- 视图切换按钮 -->
+<!--            <el-button
+              :type="currentView === 'grid' ? 'primary' : 'default'"
+              :icon="currentView === 'grid' ? Menu : Grid"
+              @click="toggleView"
+              class="view-toggle-btn"
+            >
+              {{ currentView === 'grid' ? '表格视图' : '九宫格' }}
+            </el-button>-->
           </el-form-item>
         </el-form>
       </ContentWrap>
 
       <ContentWrap>
-        <el-table
-ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
-          row-key="id" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55" fixed="left" reserve-selection />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.serialNumber')" align="center" width="50" fixed="left">
-            <template #default="scope">
-              {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" align="center" prop="deviceCode" min-width="160px"  sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceName')" align="center" prop="deviceName" min-width="140px"  sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceType')" align="center" prop="deviceType" min-width="110px" sortable>
-            <template #default="scope">
-              <el-tag effect="light">
-                {{ getDeviceTypeName(scope.row.deviceTypeName ?? scope.row.deviceType) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')" align="center" prop="deviceStatus" sortable>
-            <template #default="scope">
-              <el-tag
-:type="getTzStatusTagType(scope.row.deviceStatus)"
-                :color="getTzStatusTagColor(scope.row.deviceStatus)"
-                :style="getTzStatusTagStyle(scope.row.deviceStatus)" effect="light" disable-transitions>
-                {{ getTzStatusLabel(scope.row.deviceStatus) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')" align="center" prop="deviceSpec" />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceModel')" align="center" prop="deviceModel" />
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" align="center" prop="deviceBrand" /> -->
-          <el-table-column
-:label="t('EquipmentManagement.EquipmentLedger.productionDate')" align="center" prop="productionDate" :formatter="dateFormatter2"
-            width="120px"  sortable />
-          <el-table-column
-:label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" align="center" prop="factoryEntryDate" :formatter="dateFormatter2"
-            width="120px"  sortable />
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.supplier')" align="center" prop="supplier" width="110px" /> -->
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')" align="center" prop="workshop" width="110px" /> -->
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')" align="center" prop="workshopName" min-width="150px"  sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')" align="center" prop="deviceLocation" min-width="150px" />
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.systemOrg')" align="center" prop="systemOrg" width="110px" /> -->
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')" align="center" prop="deviceManagerName" width="150px"  sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center" prop="remark" />
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px"  sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px"  sortable /> -->
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px"  sortable /> -->
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.operate')" align="center" min-width="160px" fixed="right">
-            <template #default="scope">
-              <el-button link @click="handleDetail(scope.row.id)">{{ t('EquipmentManagement.EquipmentLedger.detail') }}</el-button>
-              <el-button
-link type="primary" @click="openForm('update', scope.row.id)"
-                v-hasPermi="['mes:device-ledger:update']">
-                {{ t('EquipmentManagement.EquipmentLedger.edit') }}
-              </el-button>
-              <el-button
-link type="danger" @click="handleDelete(scope.row.id)"
-                v-hasPermi="['mes:device-ledger:delete']">
-                {{ t('EquipmentManagement.EquipmentLedger.delete') }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <Pagination
-:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-          @pagination="getList" />
+        <div v-show="currentView === 'table'" class="simple-table-view">
+          <el-table
+            ref="tableRef" v-loading="loading" :data="list" :stripe="true"
+            :show-overflow-tooltip="true"
+            row-key="id" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" fixed="left" reserve-selection/>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.serialNumber')"
+                             align="center" width="50" fixed="left">
+              <template #default="scope">
+                {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceCode')"
+                             align="center" prop="deviceCode" min-width="160px" sortable/>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceName')"
+                             align="center" prop="deviceName" min-width="140px" sortable/>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceType')"
+                             align="center" prop="deviceType" min-width="110px" sortable>
+              <template #default="scope">
+                <el-tag effect="light">
+                  {{ getDeviceTypeName(scope.row.deviceTypeName ?? scope.row.deviceType) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')"
+                             align="center" prop="deviceStatus" sortable>
+              <template #default="scope">
+                <el-tag
+                  :type="getTzStatusTagType(scope.row.deviceStatus)"
+                  :color="getTzStatusTagColor(scope.row.deviceStatus)"
+                  :style="getTzStatusTagStyle(scope.row.deviceStatus)" effect="light"
+                  disable-transitions>
+                  {{ getTzStatusLabel(scope.row.deviceStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')"
+                             align="center" prop="deviceSpec"/>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceModel')"
+                             align="center" prop="deviceModel"/>
+            <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" align="center" prop="deviceBrand" /> -->
+            <el-table-column
+              :label="t('EquipmentManagement.EquipmentLedger.productionDate')" align="center"
+              prop="productionDate" :formatter="dateFormatter2"
+              width="120px" sortable/>
+            <el-table-column
+              :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" align="center"
+              prop="factoryEntryDate" :formatter="dateFormatter2"
+              width="120px" sortable/>
+            <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.supplier')" align="center" prop="supplier" width="110px" /> -->
+            <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')" align="center" prop="workshop" width="110px" /> -->
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')"
+                             align="center" prop="workshopName" min-width="150px" sortable/>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')"
+                             align="center" prop="deviceLocation" min-width="150px"/>
+            <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.systemOrg')" align="center" prop="systemOrg" width="110px" /> -->
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')"
+                             align="center" prop="deviceManagerName" width="150px" sortable/>
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center"
+                             prop="remark"/>
+            <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px"  sortable />
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px"  sortable /> -->
+            <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px"  sortable /> -->
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.operate')"
+                             align="center" min-width="160px" fixed="right">
+              <template #default="scope">
+                <el-button link @click="handleDetail(scope.row.id)">
+                  {{ t('EquipmentManagement.EquipmentLedger.detail') }}
+                </el-button>
+                <el-button
+                  link type="primary" @click="openForm('update', scope.row.id)"
+                  v-hasPermi="['mes:device-ledger:update']">
+                  {{ t('EquipmentManagement.EquipmentLedger.edit') }}
+                </el-button>
+                <el-button
+                  link type="danger" @click="handleDelete(scope.row.id)"
+                  v-hasPermi="['mes:device-ledger:delete']">
+                  {{ t('EquipmentManagement.EquipmentLedger.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <Pagination
+            :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+            @pagination="getList"/>
+        </div>
+
+        <!-- 九宫格视图 -->
+        <div v-show="currentView === 'grid'" class="simple-grid-view">
+          <div v-if="!list || list.length === 0" class="empty-grid">
+            <el-empty description="暂无设备数据"/>
+          </div>
+
+          <div v-else class="grid-container">
+            <div
+              v-for="(item, index) in list"
+              :key="item.id || index"
+              class="grid-card"
+              @click="handleView(item, index)"
+            >
+              <!-- 设备状态指示 -->
+              <div class="status-indicator" :class="`status-${item.deviceStatus}`"></div>
+
+              <!-- 设备图标 -->
+              <div class="card-icon">
+                <el-icon :size="32" :color="getEquipmentColor(item.type)">
+                  <component :is="getEquipmentIcon(item.type)"/>
+                </el-icon>
+              </div>
+
+              <!-- 设备基本信息 -->
+              <div class="card-content">
+                <div class="card-title">{{ item.name }}</div>
+                <div class="card-code">{{ item.code }}</div>
+                <div class="card-model">{{ item.model }}</div>
+
+                <!-- 设备状态 -->
+                <div class="card-status">
+                  <el-tag
+                    :type="getStatusTag(item.status)"
+                    size="small"
+                    class="status-tag"
+                  >
+                    {{ getStatusText(item.status) }}
+                  </el-tag>
+                </div>
+
+                <!-- 运行信息 -->
+                <div v-if="item.runningHours" class="card-running">
+                  <span>运行: {{ formatRunningHours(item.runningHours) }}</span>
+                </div>
+
+                <!-- 位置信息 -->
+                <div v-if="item.location" class="card-location">
+                  <el-icon :size="12">
+                    <Location/>
+                  </el-icon>
+                  <span>{{ item.location }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <Pagination
+            :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[12, 24, 48, 96]"
+            @pagination="getList"/>
+          <!-- 分页 -->
+<!--          <div class="simple-pagination">
+            <el-pagination
+              v-model:current-page="queryParams.pageNo"
+              v-model:page-size="queryParams.pageSize"
+              :page-sizes="[12, 24, 48, 96]"
+              layout="total, sizes, prev, pager, next"
+              :total="total"
+              @size-change="handleSizeChange"
+              @current-change="handlePageChange"
+            />
+          </div>-->
+        </div>
+
       </ContentWrap>
 
       <ContentWrap v-if="detailVisible" v-loading="detailLoading">
         <div class="device-ledger-detail-header">
-          <div class="device-ledger-detail-title">{{ t('EquipmentManagement.EquipmentLedger.detail') }}</div>
+          <div class="device-ledger-detail-title">{{
+              t('EquipmentManagement.EquipmentLedger.detail')
+            }}
+          </div>
           <el-button link @click="closeDetail">
-            <Icon icon="ep:close" />
+            <Icon icon="ep:close"/>
           </el-button>
         </div>
         <el-descriptions :column="3" class="device-ledger-detail-desc">
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceNo')">{{ detailData?.deviceCode ?? '' }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')">{{ detailData?.deviceName ?? '' }}</el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceNo')">
+            {{ detailData?.deviceCode ?? '' }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')">
+            {{ detailData?.deviceName ?? '' }}
+          </el-descriptions-item>
           <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')">
-            <dict-tag type="mes_tz_status" :value="detailData?.deviceStatus" />
+            <dict-tag type="mes_tz_status" :value="detailData?.deviceStatus"/>
           </el-descriptions-item>
           <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')">{{ detailData?.deviceBrand ?? '' }}</el-descriptions-item> -->
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">{{ detailData?.deviceModel ?? '' }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">{{ detailData?.deviceSpec ?? '' }}</el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
+            {{ detailData?.deviceModel ?? '' }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">
+            {{ detailData?.deviceSpec ?? '' }}
+          </el-descriptions-item>
           <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')">
-            <el-tag effect="light">{{ getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType)
-            }}</el-tag>
+            <el-tag effect="light">{{
+                getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType)
+              }}
+            </el-tag>
           </el-descriptions-item>
           <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.supplier')">{{ detailData?.supplier ?? '' }}</el-descriptions-item> -->
           <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.workshop')">{{ detailData?.workshop ?? '' }}</el-descriptions-item> -->
           <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.systemOrg')">{{ detailData?.systemOrg ?? '' }}</el-descriptions-item> -->
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')">{{ detailData?.deviceLocation ?? '' }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">{{ detailData?.deviceManagerName ?? '' }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">{{ formatDetailDate(detailData?.productionDate) }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">{{ formatDetailDate(detailData?.factoryEntryDate)
-          }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.remark')">{{ detailData?.remark ?? detailData?.deviceRemark ?? ''
-          }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.creatorName')">{{ detailData?.creatorName ?? '' }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.createTime')">{{ formatDetailDate(detailData?.createTime) }}</el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.updateTime')">{{ formatDetailDate(detailData?.updateTime) }}</el-descriptions-item>
-
-
- <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px"  sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px"  sortable /> -->
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px"  sortable /> -->
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')">
+            {{ detailData?.deviceLocation ?? '' }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">
+            {{ detailData?.deviceManagerName ?? '' }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">
+            {{ formatDetailDate(detailData?.productionDate) }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">
+            {{
+              formatDetailDate(detailData?.factoryEntryDate)
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.remark')">{{
+              detailData?.remark ?? detailData?.deviceRemark ?? ''
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.creatorName')">
+            {{ detailData?.creatorName ?? '' }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.createTime')">
+            {{ formatDetailDate(detailData?.createTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.updateTime')">
+            {{ formatDetailDate(detailData?.updateTime) }}
+          </el-descriptions-item>
 
 
+          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px"  sortable />
+                   <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px"  sortable /> -->
+          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px"  sortable /> -->
 
 
         </el-descriptions>
@@ -162,62 +312,93 @@ link type="danger" @click="handleDelete(scope.row.id)"
           <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.checkHistory')" name="check">
             <div style="margin-bottom: 16px;">
               <el-date-picker
-v-model="inspectionDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
-                :start-placeholder="t('common.startTimeText')" :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
-                class="mr-10px" />
-              <el-button type="primary" plain @click="handleQueryInspection">{{ t('common.query') }}</el-button>
+                v-model="inspectionDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
+                :start-placeholder="t('common.startTimeText')"
+                :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
+                class="mr-10px"/>
+              <el-button type="primary" plain @click="handleQueryInspection">{{
+                  t('common.query')
+                }}
+              </el-button>
               <el-button @click="handleResetInspection">{{ t('common.reset') }}</el-button>
               <el-button
-type="success" plain :loading="inspectionExportLoading" @click="handleExportInspection"
+                type="success" plain :loading="inspectionExportLoading"
+                @click="handleExportInspection"
                 v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+                <Icon icon="ep:download" class="mr-5px"/>
+                {{ t('action.export') }}
               </el-button>
             </div>
-            <el-empty v-if="!inspectionStepGroups.length" />
+            <el-empty v-if="!inspectionStepGroups.length"/>
             <el-steps
-v-else direction="vertical" :active="inspectionStepGroups.length"
+              v-else direction="vertical" :active="inspectionStepGroups.length"
               class="device-ledger-history-steps">
-              <el-step v-for="group in inspectionStepGroups" :key="group.key" style="margin-top:8px">
+              <el-step v-for="group in inspectionStepGroups" :key="group.key"
+                       style="margin-top:8px">
                 <template #title>
                   <div class="device-ledger-history-title">
                     <span class="device-ledger-history-time">[{{ group.time }}]</span>
-                    <span class="device-ledger-history-operator">{{ t('EquipmentManagement.EquipmentLedger.operator') }}: {{ group.operator }}</span>
+                    <span class="device-ledger-history-operator">{{
+                        t('EquipmentManagement.EquipmentLedger.operator')
+                      }}: {{ group.operator }}</span>
                   </div>
                 </template>
                 <template #description>
                   <div class="device-ledger-history-items">
-                    <div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
+                    <div v-for="item in group.items" :key="item.key"
+                         class="device-ledger-history-item">
                       <div class="device-ledger-history-item-head">
-                        <el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
+                        <el-tag :type="getResultTagType(item.result)">{{
+                            getResultLabel(item.result)
+                          }}
+                        </el-tag>
                         <span class="device-ledger-history-item-text">{{ item.name }}</span>
                       </div>
                       <div class="device-ledger-history-item-body">
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.checkMethod') }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.checkMethod')
+                            }}</span>
                           <span class="device-ledger-history-item-value">
-                            <dict-tag type="Inspection_method" :value="item.method" />
+                            <dict-tag type="Inspection_method" :value="item.method"/>
                           </span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.criteria') }}</span>
-                          <span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.criteria')
+                            }}</span>
+                          <span class="device-ledger-history-item-value">{{
+                              item.criteria ?? '-'
+                            }}</span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.checkTime') }}</span>
-                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.taskTime)
-                          }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.checkTime')
+                            }}</span>
+                          <span class="device-ledger-history-item-value">{{
+                              formatHistoryTime(item.taskTime)
+                            }}</span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.createTime') }}</span>
-                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.createTime) }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.createTime')
+                            }}</span>
+                          <span class="device-ledger-history-item-value">{{
+                              formatHistoryTime(item.createTime)
+                            }}</span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
-                          <span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.remark')
+                            }}</span>
+                          <span class="device-ledger-history-item-value">{{
+                              item.remark ?? '-'
+                            }}</span>
                         </div>
                         <div v-if="item.images?.length" class="device-ledger-history-item-images">
                           <el-image
-v-for="img in item.images" :key="img" :src="img" :preview-src-list="item.images"
+                            v-for="img in item.images" :key="img" :src="img"
+                            :preview-src-list="item.images"
                             preview-teleported fit="cover" class="device-ledger-history-item-image">
                             <template #error>
                               <div class="device-ledger-history-image-error">图片加载失败</div>
@@ -231,66 +412,95 @@ v-for="img in item.images" :key="img" :src="img" :preview-src-list="item.images"
               </el-step>
             </el-steps>
           </el-tab-pane>
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.maintainHistory')" name="maintain">
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.maintainHistory')"
+                       name="maintain">
             <div style="margin-bottom: 16px;">
               <el-date-picker
-v-model="maintainDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
-                :start-placeholder="t('common.startTimeText')" :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
-                class="mr-10px" />
-              <el-button type="primary" plain @click="handleQueryMaintain">{{ t('common.query') }}</el-button>
+                v-model="maintainDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
+                :start-placeholder="t('common.startTimeText')"
+                :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
+                class="mr-10px"/>
+              <el-button type="primary" plain @click="handleQueryMaintain">{{
+                  t('common.query')
+                }}
+              </el-button>
               <el-button @click="handleResetMaintain">{{ t('common.reset') }}</el-button>
               <el-button
-type="success" plain :loading="maintainExportLoading" @click="handleExportMaintain"
+                type="success" plain :loading="maintainExportLoading" @click="handleExportMaintain"
                 v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+                <Icon icon="ep:download" class="mr-5px"/>
+                {{ t('action.export') }}
               </el-button>
             </div>
-            <el-empty v-if="!maintainStepGroups.length" />
+            <el-empty v-if="!maintainStepGroups.length"/>
             <el-steps
-v-else direction="vertical" class="device-ledger-history-steps"
+              v-else direction="vertical" class="device-ledger-history-steps"
               :active="maintainStepGroups.length">
               <el-step v-for="group in maintainStepGroups" :key="group.key" style="margin-top:8px">
                 <template #title>
                   <div class="device-ledger-history-title">
                     <span class="device-ledger-history-time">[{{ group.time }}]</span>
-                    <span class="device-ledger-history-operator">{{ t('EquipmentManagement.EquipmentLedger.operator') }}: {{ group.operator }}</span>
+                    <span class="device-ledger-history-operator">{{
+                        t('EquipmentManagement.EquipmentLedger.operator')
+                      }}: {{ group.operator }}</span>
                   </div>
                 </template>
                 <template #description>
                   <div class="device-ledger-history-items">
-                    <div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
+                    <div v-for="item in group.items" :key="item.key"
+                         class="device-ledger-history-item">
                       <div class="device-ledger-history-item-head">
-                        <el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
+                        <el-tag :type="getResultTagType(item.result)">{{
+                            getResultLabel(item.result)
+                          }}
+                        </el-tag>
                         <span class="device-ledger-history-item-text">{{ item.name }}</span>
                       </div>
                       <div class="device-ledger-history-item-body">
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.maintainMethod') }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.maintainMethod')
+                            }}</span>
                           <span class="device-ledger-history-item-value">
-                            <dict-tag type="Inspection_method" :value="item.method" />
+                            <dict-tag type="Inspection_method" :value="item.method"/>
                           </span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.criteria') }}</span>
-                          <span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.criteria')
+                            }}</span>
+                          <span class="device-ledger-history-item-value">{{
+                              item.criteria ?? '-'
+                            }}</span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.maintainTime') }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.maintainTime')
+                            }}</span>
                           <span class="device-ledger-history-item-value">
-                            {{ String(formatHistoryTime(item.taskTime))}}
+                            {{ String(formatHistoryTime(item.taskTime)) }}
                           </span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.createTime') }}</span>
-                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.createTime) }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.createTime')
+                            }}</span>
+                          <span class="device-ledger-history-item-value">{{
+                              formatHistoryTime(item.createTime)
+                            }}</span>
                         </div>
                         <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
-                          <span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
+                          <span class="device-ledger-history-item-label">{{
+                              t('EquipmentManagement.EquipmentLedger.remark')
+                            }}</span>
+                          <span class="device-ledger-history-item-value">{{
+                              item.remark ?? '-'
+                            }}</span>
                         </div>
                         <div v-if="item.images?.length" class="device-ledger-history-item-images">
                           <el-image
-v-for="img in item.images" :key="img" :src="img" :preview-src-list="item.images"
+                            v-for="img in item.images" :key="img" :src="img"
+                            :preview-src-list="item.images"
                             preview-teleported fit="cover" class="device-ledger-history-item-image">
                             <template #error>
                               <div class="device-ledger-history-image-error">图片加载失败</div>
@@ -304,21 +514,27 @@ v-for="img in item.images" :key="img" :src="img" :preview-src-list="item.images"
               </el-step>
             </el-steps>
           </el-tab-pane>
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.repairHistory')" name="repair">
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.repairHistory')"
+                       name="repair">
             <div style="margin-bottom: 16px;">
               <el-date-picker
-v-model="repairDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
-                :start-placeholder="t('common.startTimeText')" :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
-                class="mr-10px" />
-              <el-button type="primary" plain @click="handleQueryRepair">{{ t('common.query') }}</el-button>
+                v-model="repairDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
+                :start-placeholder="t('common.startTimeText')"
+                :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
+                class="mr-10px"/>
+              <el-button type="primary" plain @click="handleQueryRepair">{{
+                  t('common.query')
+                }}
+              </el-button>
               <el-button @click="handleResetRepair">{{ t('common.reset') }}</el-button>
               <el-button
-type="success" plain :loading="repairExportLoading" @click="handleExportRepair"
+                type="success" plain :loading="repairExportLoading" @click="handleExportRepair"
                 v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+                <Icon icon="ep:download" class="mr-5px"/>
+                {{ t('action.export') }}
               </el-button>
             </div>
-            <el-empty v-if="!repairGroups.length" />
+            <el-empty v-if="!repairGroups.length"/>
             <el-collapse v-else v-model="repairActiveNames" class="device-ledger-repair-collapse">
               <el-collapse-item v-for="group in repairGroups" :key="group.key" :name="group.key">
                 <template #title>
@@ -329,19 +545,28 @@ type="success" plain :loading="repairExportLoading" @click="handleExportRepair"
                 </template>
                 <div class="device-ledger-history-items">
                   <div
-v-for="row in group.items" :key="String(row.id ?? row.subjectId ?? row.subjectCode)"
+                    v-for="row in group.items"
+                    :key="String(row.id ?? row.subjectId ?? row.subjectCode)"
                     class="device-ledger-history-item">
                     <div class="device-ledger-history-item-head">
                       <el-tag type="info" effect="light">{{ row.subjectCode ?? '-' }}</el-tag>
-                      <span class="device-ledger-history-item-text">{{ row.subjectName ?? '-' }}</span>
+                      <span class="device-ledger-history-item-text">{{
+                          row.subjectName ?? '-'
+                        }}</span>
                     </div>
                     <div class="device-ledger-history-item-body">
                       <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.projectName') }}</span>
-                        <span class="device-ledger-history-item-value">{{ row.subjectContent ?? '-' }}</span>
+                        <span class="device-ledger-history-item-label">{{
+                            t('EquipmentManagement.EquipmentLedger.projectName')
+                          }}</span>
+                        <span class="device-ledger-history-item-value">{{
+                            row.subjectContent ?? '-'
+                          }}</span>
                       </div>
                       <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.repairResult') }}</span>
+                        <span class="device-ledger-history-item-label">{{
+                            t('EquipmentManagement.EquipmentLedger.repairResult')
+                          }}</span>
                         <span class="device-ledger-history-item-value">
                           <el-tag :type="getResultTagType(row.result ?? row.repairResult)">
                             {{ getResultLabel(row.repairResult ?? row.result) }}
@@ -349,17 +574,25 @@ v-for="row in group.items" :key="String(row.id ?? row.subjectId ?? row.subjectCo
                         </span>
                       </div>
                       <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
-                        <span class="device-ledger-history-item-value">{{ row.remark ?? '-' }}</span>
+                        <span class="device-ledger-history-item-label">{{
+                            t('EquipmentManagement.EquipmentLedger.remark')
+                          }}</span>
+                        <span class="device-ledger-history-item-value">{{
+                            row.remark ?? '-'
+                          }}</span>
                       </div>
                       <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.finishDate') }}</span>
+                        <span class="device-ledger-history-item-label">{{
+                            t('EquipmentManagement.EquipmentLedger.finishDate')
+                          }}</span>
                         <span class="device-ledger-history-item-value">{{
-                          String(formatHistoryTime(row.finishDate)).split(' ')[0] }}</span>
+                            String(formatHistoryTime(row.finishDate)).split(' ')[0]
+                          }}</span>
                       </div>
-                      <div v-if="row.malfunctionImages?.length" class="device-ledger-history-item-images">
+                      <div v-if="row.malfunctionImages?.length"
+                           class="device-ledger-history-item-images">
                         <el-image
-v-for="img in row.malfunctionImages" :key="img" :src="img"
+                          v-for="img in row.malfunctionImages" :key="img" :src="img"
                           :preview-src-list="row.malfunctionImages" preview-teleported fit="cover"
                           class="device-ledger-history-item-image">
                           <template #error>
@@ -373,50 +606,73 @@ v-for="img in row.malfunctionImages" :key="img" :src="img"
               </el-collapse-item>
             </el-collapse>
           </el-tab-pane>
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" name="criticalComponent">
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')"
+                       name="criticalComponent">
             <div class="device-ledger-tab-toolbar">
               <el-button
-type="success" plain :loading="criticalExportLoading" @click="handleExportCriticalComponent"
+                type="success" plain :loading="criticalExportLoading"
+                @click="handleExportCriticalComponent"
                 v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+                <Icon icon="ep:download" class="mr-5px"/>
+                {{ t('action.export') }}
               </el-button>
             </div>
             <el-table
-v-loading="loading" :data="detailData?.componentList" :stripe="true"
+              v-loading="loading" :data="detailData?.componentList" :stripe="true"
               :show-overflow-tooltip="true">
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentCode')" align="center" prop="code" min-width="140"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentName')" align="center" prop="name" min-width="140"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentDesc')" align="center" prop="description" min-width="180" />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center" prop="remark" min-width="180" />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180"  sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentCode')"
+                               align="center" prop="code" min-width="140" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentName')"
+                               align="center" prop="name" min-width="140" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentDesc')"
+                               align="center" prop="description" min-width="180"/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')"
+                               align="center" prop="remark" min-width="180"/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')"
+                               align="center" prop="createTime" :formatter="dateFormatter"
+                               width="180" sortable/>
             </el-table>
           </el-tab-pane>
           <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.sparePart')" name="component">
             <div class="device-ledger-tab-toolbar">
               <el-button
-type="success" plain :loading="spareExportLoading" @click="handleExportSpareBased"
+                type="success" plain :loading="spareExportLoading" @click="handleExportSpareBased"
                 v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+                <Icon icon="ep:download" class="mr-5px"/>
+                {{ t('action.export') }}
               </el-button>
             </div>
-            <el-table v-loading="loading" :data="detailData?.beijianList" :stripe="true" :show-overflow-tooltip="true">
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareCode')" align="center" prop="barCode"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareName')" align="left" prop="name" width="220px"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.category')" align="center" prop="categoryName"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.unit')" align="center" prop="unitName"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px"  sortable />
+            <el-table v-loading="loading" :data="detailData?.beijianList" :stripe="true"
+                      :show-overflow-tooltip="true">
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareCode')"
+                               align="center" prop="barCode" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareName')"
+                               align="left" prop="name" width="220px" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.category')"
+                               align="center" prop="categoryName" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.unit')" align="center"
+                               prop="unitName" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')"
+                               align="center" prop="createTime" :formatter="dateFormatter"
+                               width="180px" sortable/>
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="模具" name="mold">
-            <el-table v-loading="loading" :data="detailData?.moldList" :stripe="true" :show-overflow-tooltip="true">
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldCode')" align="center" prop="code" min-width="140"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldName')" align="center" prop="name" min-width="140"  sortable />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldRemark')" align="center" prop="remark" min-width="180" />
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180"  sortable />
+            <el-table v-loading="loading" :data="detailData?.moldList" :stripe="true"
+                      :show-overflow-tooltip="true">
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldCode')"
+                               align="center" prop="code" min-width="140" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldName')"
+                               align="center" prop="name" min-width="140" sortable/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldRemark')"
+                               align="center" prop="remark" min-width="180"/>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')"
+                               align="center" prop="createTime" :formatter="dateFormatter"
+                               width="180" sortable/>
             </el-table>
             <Pagination
-:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-              @pagination="getList" />
+              :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+              @pagination="getList"/>
           </el-tab-pane>
         </el-tabs>
       </ContentWrap>
@@ -424,27 +680,109 @@ type="success" plain :loading="spareExportLoading" @click="handleExportSpareBase
   </div>
 
   <!-- 表单弹窗：添加/修改 -->
-  <DeviceLedgerForm ref="formRef" @success="getList" />
+  <DeviceLedgerForm ref="formRef" @success="getList"/>
 </template>
 
 <script setup lang="ts">
-import { dateFormatter, dateFormatter2, formatDate } from '@/utils/formatTime'
+import {dateFormatter, dateFormatter2, formatDate} from '@/utils/formatTime'
 import download from '@/utils/download'
-import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
-import { DeviceTypeApi, DeviceTypeTreeVO } from '@/api/mes/devicetype'
-import { CriticalComponentApi } from '@/api/mes/criticalComponent'
-import { TicketManagementApi } from '@/api/mes/ticketManagement'
-import { DvRepairApi } from '@/api/mes/dvrepair'
+import {DeviceLedgerApi, DeviceLedgerVO} from '@/api/mes/deviceledger'
+import {DeviceTypeApi, DeviceTypeTreeVO} from '@/api/mes/devicetype'
+import {CriticalComponentApi} from '@/api/mes/criticalComponent'
+import {TicketManagementApi} from '@/api/mes/ticketManagement'
+import {DvRepairApi} from '@/api/mes/dvrepair'
 import DeviceLedgerForm from './DeviceLedgerForm.vue'
-import { getIntDictOptions } from '@/utils/dict'
-import { isHexColor } from '@/utils/color'
-import { useDictStoreWithOut } from '@/store/modules/dict'
-
+import {getIntDictOptions} from '@/utils/dict'
+import {isHexColor} from '@/utils/color'
+import {useDictStoreWithOut} from '@/store/modules/dict'
+import {ref} from "vue";
+import {
+  Refresh,
+  Grid,
+  Menu,
+  Search,
+  Location
+} from '@element-plus/icons-vue'
+import {useRouter} from "vue-router";
+
+const currentView = ref('table') // 'table' 或 'grid'
+// 路由
+const router = useRouter()
+// 查看详情
+const handleView = (row) => {
+  router.push({
+    path: '/equipment/detail',
+    query: {id: row.id}
+  })
+}
 /** 设备类型 列表 */
-defineOptions({ name: 'DeviceLedger' })
+defineOptions({name: 'DeviceLedger'})
+const getEquipmentColor = (type) => {
+  const colorMap = {
+    'production': '#409eff',
+    'inspection': '#67c23a',
+    'packaging': '#e6a23c',
+    'transport': '#f56c6c',
+    'other': '#909399'
+  }
+  return colorMap[type] || '#409eff'
+}
 
+const getEquipmentIcon = (type) => {
+  const iconMap = {
+    'production': 'Monitor',
+    'inspection': 'Search',
+    'packaging': 'Box',
+    'transport': 'Truck',
+    'other': 'Tools'
+  }
+  return iconMap[type] || 'Tools'
+}
+
+// 工具函数
+const getStatusTag = (status) => {
+  const tagMap = {
+    'running': 'success',
+    'standby': 'info',
+    'fault': 'danger',
+    'maintenance': 'warning',
+    'stopped': 'info'
+  }
+  return tagMap[status] || 'info'
+}
+
+const getStatusText = (status) => {
+  const textMap = {
+    'running': '运行中',
+    'standby': '待机',
+    'fault': '故障',
+    'maintenance': '维修中',
+    'stopped': '已停用'
+  }
+  return textMap[status] || '未知'
+}
+
+// 分页
+const handleSizeChange = (size) => {
+  queryParams.pageSize = size
+  getList()
+}
+
+const handlePageChange = (page) => {
+  queryParams.pageNo = page
+  getList()
+}
+
+
+const formatRunningHours = (hours) => {
+  if (!hours) return '0h'
+  if (hours < 24) return `${hours}h`
+  const days = Math.floor(hours / 24)
+  const remainingHours = hours % 24
+  return remainingHours > 0 ? `${days}d ${remainingHours}h` : `${days}d`
+}
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+const {t} = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<DeviceLedgerVO[]>([]) // 列表的数据
@@ -474,6 +812,14 @@ const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
 }
 
+
+// 切换视图
+const toggleView = () => {
+  currentView.value = currentView.value === 'table' ? 'grid' : 'table'
+  // 保存视图偏好
+  localStorage.setItem('equipment-view', currentView.value)
+}
+
 const dictStore = useDictStoreWithOut()
 const dictReady = ref(false)
 
@@ -568,7 +914,7 @@ const buildStepGroups = (rows: any[], options: { timeField: string; nameFieldCan
     }
 
     if (!groups.has(groupKey)) {
-      groups.set(groupKey, { key: groupKey, time, operator, items: [item] })
+      groups.set(groupKey, {key: groupKey, time, operator, items: [item]})
     } else {
       groups.get(groupKey)!.items.push(item)
     }
@@ -648,7 +994,7 @@ const repairGroups = computed<RepairHistoryGroup[]>(() => {
 
 const fetchInspectionHistory = async () => {
   if (!selectedDetailId.value) return
-  const params: any = { deviceId: selectedDetailId.value }
+  const params: any = {deviceId: selectedDetailId.value}
   if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
     params.startTime = inspectionDateRange.value[0]
     params.endTime = inspectionDateRange.value[1]
@@ -676,7 +1022,7 @@ const handleResetInspection = async () => {
 
 const fetchMaintainHistory = async () => {
   if (!selectedDetailId.value) return
-  const params: any = { deviceId: selectedDetailId.value }
+  const params: any = {deviceId: selectedDetailId.value}
   if (maintainDateRange.value && maintainDateRange.value.length === 2) {
     params.startTime = maintainDateRange.value[0]
     params.endTime = maintainDateRange.value[1]
@@ -704,7 +1050,7 @@ const handleResetMaintain = async () => {
 
 const fetchRepairHistory = async () => {
   if (!selectedDetailId.value) return
-  const params: any = { deviceId: selectedDetailId.value }
+  const params: any = {deviceId: selectedDetailId.value}
   if (repairDateRange.value && repairDateRange.value.length === 2) {
     params.startTime = repairDateRange.value[0]
     params.endTime = repairDateRange.value[1]
@@ -744,7 +1090,7 @@ const selectedDetailId = ref<number | undefined>()
 
 const typeTreeLoading = ref(false)
 const typeTreeData = ref<DeviceTypeTreeVO[]>([])
-const typeTreeProps = { label: 'name', children: 'children' }
+const typeTreeProps = {label: 'name', children: 'children'}
 const typeTreeExpandedKeys = ref<number[]>([0])
 const deviceTypeNameMap = ref<Record<number, string>>({})
 
@@ -762,9 +1108,16 @@ const buildDeviceTypeNameMap = (nodes: DeviceTypeTreeVO[]) => {
 const getTypeTree = async () => {
   typeTreeLoading.value = true
   try {
-    const data = await DeviceTypeApi.getDeviceTypeTree({ pageNo: 1, pageSize: 10 })
+    const data = await DeviceTypeApi.getDeviceTypeTree({pageNo: 1, pageSize: 10})
     const treeChildren = JSON.parse(JSON.stringify(data ?? []))
-    typeTreeData.value = [{ id: 0, code: '', name: '全部', remark: '', sort: 0, children: treeChildren } as any]
+    typeTreeData.value = [{
+      id: 0,
+      code: '',
+      name: '全部',
+      remark: '',
+      sort: 0,
+      children: treeChildren
+    } as any]
     buildDeviceTypeNameMap(treeChildren)
     typeTreeExpandedKeys.value = [0]
   } finally {
@@ -912,7 +1265,8 @@ const handleDelete = async (ids: number | number[]) => {
     tableRef.value?.clearSelection?.()
     // 刷新列表
     await getList()
-  } catch { }
+  } catch {
+  }
 }
 
 const handleBatchDelete = async () => {
@@ -950,7 +1304,7 @@ const handleExportCriticalComponent = async () => {
   try {
     await message.exportConfirm()
     criticalExportLoading.value = true
-    const data = await CriticalComponentApi.exportDeviceComponent({ id: selectedDetailId.value })
+    const data = await CriticalComponentApi.exportDeviceComponent({id: selectedDetailId.value})
     download.excel(data, '关键件.xls')
   } catch {
   } finally {
@@ -966,7 +1320,7 @@ const handleExportSpareBased = async () => {
   try {
     await message.exportConfirm()
     spareExportLoading.value = true
-    const data = await DeviceLedgerApi.exportSpareBased({ id: selectedDetailId.value })
+    const data = await DeviceLedgerApi.exportSpareBased({id: selectedDetailId.value})
     download.excel(data, '备件.xls')
   } catch {
   } finally {
@@ -982,7 +1336,7 @@ const handleExportInspection = async () => {
   try {
     await message.exportConfirm()
     inspectionExportLoading.value = true
-    const params: any = { deviceId: selectedDetailId.value }
+    const params: any = {deviceId: selectedDetailId.value}
     if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
       params.startTime = inspectionDateRange.value[0]
       params.endTime = inspectionDateRange.value[1]
@@ -1003,7 +1357,7 @@ const handleExportMaintain = async () => {
   try {
     await message.exportConfirm()
     maintainExportLoading.value = true
-    const params: any = { deviceId: selectedDetailId.value }
+    const params: any = {deviceId: selectedDetailId.value}
     if (maintainDateRange.value && maintainDateRange.value.length === 2) {
       params.startTime = maintainDateRange.value[0]
       params.endTime = maintainDateRange.value[1]
@@ -1024,7 +1378,7 @@ const handleExportRepair = async () => {
   try {
     await message.exportConfirm()
     repairExportLoading.value = true
-    const params: any = { deviceId: selectedDetailId.value }
+    const params: any = {deviceId: selectedDetailId.value}
     if (repairDateRange.value && repairDateRange.value.length === 2) {
       params.startTime = repairDateRange.value[0]
       params.endTime = repairDateRange.value[1]
@@ -1046,7 +1400,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .device-ledger-layout {
   display: flex;
   gap: 12px;
@@ -1194,4 +1548,212 @@ onMounted(async () => {
 .device-ledger-history-item-text {
   color: var(--el-text-color-regular);
 }
+
+.simple-grid-view {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  height: calc(100vh - 600px);
+  overflow-y: auto;
+
+  .empty-grid {  // 注意：这里缩进要与上面一致
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+    padding: 8px;
+
+    .grid-card {
+      position: relative;
+      border: 1px solid #ebeef5;
+      border-radius: 8px;
+      padding: 20px;
+      background-color: #fafafa;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      &:hover {
+        border-color: #409eff;
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+        transform: translateY(-2px);
+        background-color: #fff;
+      }
+
+      .status-indicator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 6px;
+        height: 100%;
+        border-radius: 8px 0 0 8px;
+
+        &.status-running {
+          background-color: #67c23a;
+        }
+
+        &.status-standby {
+          background-color: #909399;
+        }
+
+        &.status-fault {
+          background-color: #f56c6c;
+        }
+
+        &.status-maintenance {
+          background-color: #e6a23c;
+        }
+
+        &.status-stopped {
+          background-color: #909399;
+        }
+      }
+
+      .card-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60px;
+        height: 60px;
+        background-color: #f5f7fa;
+        border-radius: 8px;
+      }
+
+      .card-content {
+        flex: 1;
+        min-width: 0;
+
+        .card-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .card-code {
+          font-size: 12px;
+          color: #909399;
+          margin-bottom: 2px;
+        }
+
+        .card-model {
+          font-size: 13px;
+          color: #606266;
+          margin-bottom: 8px;
+        }
+
+        .card-status {
+          margin-bottom: 8px;
+
+          .status-tag {
+            width: 100%;
+            justify-content: center;
+          }
+        }
+
+        .card-running {
+          font-size: 12px;
+          color: #606266;
+          margin-bottom: 4px;
+        }
+
+        .card-location {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 12px;
+          color: #909399;
+
+          .el-icon {
+            color: #909399;
+          }
+        }
+      }
+    }
+  }
+
+  .simple-pagination {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #ebeef5;
+    text-align: center;
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .equipment-simple {
+    padding: 12px;
+
+    .simple-toolbar {
+      flex-direction: column;
+      gap: 12px;
+
+      .toolbar-left {
+        width: 100%;
+
+        .simple-search {
+          flex: 1;
+          width: 100%;
+        }
+
+        .status-filter,
+        .type-filter {
+          width: 100px;
+        }
+      }
+
+      .toolbar-right {
+        width: 100%;
+        justify-content: flex-end;
+      }
+    }
+
+    .simple-grid-view {
+      .grid-container {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .equipment-simple {
+    .simple-grid-view {
+      .grid-container {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .simple-toolbar {
+      .toolbar-left {
+        flex-wrap: wrap;
+
+        .simple-search {
+          width: 100%;
+        }
+
+        .status-filter,
+        .type-filter {
+          flex: 1;
+          min-width: 120px;
+        }
+      }
+    }
+  }
+}
+
+
 </style>