Merge branch 'feat/layout-style' into 'dev'

feat(*): 表格添加序号

See merge request !6

src/views/dustOverview/index.vue

@@ -48,7 +48,7 @@
             <el-input
               v-model="formInline.deviceName"
               placeholder="请输入除尘器名称"
-              style="width: 200px"
+              style="width: 240px"
               clearable
             />
           </el-form-item>
@@ -80,21 +80,24 @@
             jumper: '跳至',
           }"
         >
+          <template #index="{ $index }">
+            {{ getIndex($index) }}
+          </template>
           <template #status="{ row }">
             <el-tag :type="getStatusType(row.status)" effect="light">
               {{ row.status }}
             </el-tag>
           </template>
 
-          <template #healthScore="{ row }">
-            <span :style="{ color: getHealthScoreColor(row.healthScore) }">
-              {{ row.healthScore }}
+          <template #alarmCount="{ row }">
+            <span :style="{ color: getHealthScoreColor(row.alarmCount) }">
+              {{ row.alarmCount }}
             </span>
           </template>
 
           <template #operation="{ row }">
             <el-button type="primary" link @click="handleView(row)">
-              查看详情
+              详情
             </el-button>
             <el-button type="primary" link @click="handleEdit(row)">
               编辑
@@ -115,57 +118,70 @@ const formInline = ref({
   region: 1,
 });
 
+const currentPage = ref(1);
+const pageSize = ref(10);
+
 const options = ref([
   {
-    value: "1",
+    value: 1,
     label: "转炉",
   },
   {
-    value: "2",
+    value: 2,
     label: "炼铁",
   },
 ]);
 
 const tableColumns = ref([
+  {
+    prop: "index",
+    label: "序号",
+    width: "5%",
+  },
   {
     prop: "deviceName",
     label: "除尘器名称",
     width: "15%",
   },
+  {
+    prop: "deviceName",
+    label: "除尘器编号",
+    width: "15%",
+  },
   {
     prop: "process",
-    label: "工序",
-    width: "10%",
+    label: "所属工序",
+    width: "5%",
   },
   {
     prop: "healthScore",
-    label: "健康度",
-    width: "10%",
+    label: "仓室数量",
+    width: "5%",
+  },
+  {
+    prop: "health2Score",
+    label: "电磁阀数量",
+    width: "5%",
   },
   {
     prop: "status",
-    label: "运行状态",
-    width: "10%",
+    label: "仓室健康状态",
+    width: "25%",
   },
   {
     prop: "alarmCount",
-    label: "告警数量",
-    width: "10%",
+    label: "健康度",
+    width: "5%",
   },
   {
     prop: "lastAlarmTime",
-    label: "最近告警时间",
-    width: "15%",
-  },
-  {
-    prop: "location",
-    label: "安装位置",
-    width: "15%",
+    label: "合理压差范围",
+    width: "10%",
   },
   {
     prop: "operation",
     label: "操作",
-    width: "15%",
+    width: "10%",
   },
 ]);
 
@@ -173,66 +189,33 @@ const tableData = [
   {
     deviceName: "1#除尘器",
     process: "转炉",
-    healthScore: "98%",
+    healthScore: 24,
+    health2Score: 120,
     status: "正常运行",
-    alarmCount: 0,
+    alarmCount: "98%",
     lastAlarmTime: "-",
     location: "一号转炉东侧",
   },
   {
     deviceName: "2#除尘器",
     process: "转炉",
-    healthScore: "45%",
+    healthScore: 24,
+    health2Score: 120,
     status: "故障",
-    alarmCount: 2,
-    lastAlarmTime: "2024-03-19 14:30",
+    alarmCount: "45%",
+    lastAlarmTime: "100～3000",
     location: "二号转炉西侧",
   },
   {
     deviceName: "3#除尘器",
     process: "炼铁",
-    healthScore: "78%",
+    healthScore: 24,
+    health2Score: 120,
     status: "轻微异常",
-    alarmCount: 1,
-    lastAlarmTime: "2024-03-19 10:15",
+    alarmCount: "78%",
+    lastAlarmTime: "100～3000",
     location: "炼铁区域北侧",
   },
-  {
-    deviceName: "4#除尘器",
-    process: "炼铁",
-    healthScore: "89%",
-    status: "正常运行",
-    alarmCount: 0,
-    lastAlarmTime: "-",
-    location: "炼铁区域南侧",
-  },
-  {
-    deviceName: "5#除尘器",
-    process: "转炉",
-    healthScore: "92%",
-    status: "正常运行",
-    alarmCount: 0,
-    lastAlarmTime: "-",
-    location: "三号转炉东侧",
-  },
-  {
-    deviceName: "6#除尘器",
-    process: "炼铁",
-    healthScore: "95%",
-    status: "正常运行",
-    alarmCount: 0,
-    lastAlarmTime: "-",
-    location: "炼铁区域东侧",
-  },
-  {
-    deviceName: "7#除尘器",
-    process: "转炉",
-    healthScore: "87%",
-    status: "正常运行",
-    alarmCount: 0,
-    lastAlarmTime: "-",
-    location: "四号转炉西侧",
-  },
 ];
 
 const getStatusType = (status) => {
@@ -251,6 +234,10 @@ const getHealthScoreColor = (score) => {
   return "#F56C6C";
 };
 
+const getIndex = (index) => {
+  return (currentPage.value - 1) * pageSize.value + index + 1;
+};
+
 const handleView = (row) => {
   console.log("查看详情", row);
 };
@@ -260,6 +247,8 @@ const handleEdit = (row) => {
 };
 
 const handlePaginationChange = (pagination) => {
+  currentPage.value = pagination.currentPage;
+  pageSize.value = pagination.pageSize;
   console.log("分页变化", pagination);
 };