Commit 5d7d5127 authored by 蔡伟's avatar 蔡伟

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

feat(*): 表格添加序号

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