采集设备样式调整

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',

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: '设备运行报表',

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-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormNameLabel')">
-        <el-input v-model="referForm.name" :disabled="isEdit" />
+        <el-input v-model="referForm.name" :disabled="isEdit" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormNamePlaceholder')"/>
       </el-form-item>
-      <el-form-item label="数据类型">
+      <el-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormDataTypeLabel')">
-        <el-input v-model="referForm.dataType" :disabled="isEdit" />
+        <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-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormDataUnitLabel')" prop="dataUnit">
-        <el-select v-model="referForm.dataUnit" :disabled="isEdit" placeholder="请选择单位" class="!w-1/1">
+        <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-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormRemarkLabel')">
-        <el-input v-model="referForm.remark" type="textarea" :disabled="isEdit" />
+        <el-input v-model="referForm.remark" type="textarea" :disabled="isEdit" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormRemarkPlaceholder')" />
       </el-form-item>
-      <el-form-item label="参考值">
+      <el-form-item :label="t('RecipeManagement.RecipeLibrary.nanualFormReferLabel')">
-        <el-input v-model="referForm.refer" />
+        <el-input v-model="referForm.refer" :placeholder="t('RecipeManagement.RecipeLibrary.nanualFormReferPlaceholder')" />
       </el-form-item>
     </el-form>
     <template #footer>

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>