xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

* add: 添加监控中心-设备监测页面

Browse Source
This commit is contained in:
fks-yangshouda
2024-07-08 10:03:22 +08:00
parent a16b26370f
commit 287dc9262b
10 changed files with 948 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<a-table :columns="columns" :data-source="data" bordered />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
const data = [
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '3',
name: 'AC_004（给排水电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
];
export default defineComponent({
name: 'EnvironmentTable',
setup() {
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => {
let rowSpan = 1;
for (let i = data.indexOf(record) + 1; i < data.length; i++) {
let shouldMerge = true;
for (const dependent of dependents) {
if (data[i][dependent] !== record[dependent]) {
shouldMerge = false;
break;
}
}
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
rowSpan++;
} else {
break;
}
}
return rowSpan;
};
const columns: TableColumnType[] = [
{
title: '序号',
dataIndex: 'key',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('name', record, data);
if (rowIndex != 0 && data[rowIndex-1].key == record.key) {
return {
rowSpan: 0,
colSpan: 0,
}
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '设备名称',
dataIndex: 'name',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('name', record, data);
if (rowIndex != 0 && data[rowIndex-1].name == record.name) {
return {
rowSpan: 0,
colSpan: 0,
}
}
return {
rowSpan: rowSpan,
};
// if (rowIndex === data.indexOf(record)) {
// return {
// rowSpan: rowSpan,
// };
// }
// return {
// rowSpan: 0,
// colSpan: 0,
// };
},
},
{
title: '设备点位',
dataIndex: 'position',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('position', record, data, ['name']);
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position) {
return {
rowSpan: 0,
colSpan: 0,
}
}
return {
rowSpan: rowSpan,
};
// if (rowIndex === data.indexOf(record)) {
// return {
// rowSpan: rowSpan,
// };
// }
// return {
// rowSpan: 0,
// colSpan: 0,
// };
},
},
{
title: '计量单位',
dataIndex: 'unit',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) {
return {
rowSpan: 0,
colSpan: 0,
}
}
return {
rowSpan: rowSpan,
};
// if (rowIndex === data.indexOf(record)) {
// return {
// rowSpan: rowSpan,
// };
// }
// return {
// rowSpan: 0,
// colSpan: 0,
// };
},
},
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
];
return {
data,
columns,
};
},
});
</script>
<style lang="less" scoped></style>