fks-xuxinyue
4 months ago
6 changed files with 228 additions and 282 deletions
@ -1,179 +0,0 @@ |
|||||
<template> |
|
||||
<a-table :columns="columns" :data-source="data" bordered /> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { defineComponent, watch, ref, onMounted } from 'vue'; |
|
||||
import type { TableColumnType } from 'ant-design-vue'; |
|
||||
import { inject } from 'vue'; |
|
||||
|
|
||||
// let data: any[] = []; |
|
||||
|
|
||||
export default defineComponent({ |
|
||||
name: 'EnvironmentTable', |
|
||||
setup() { |
|
||||
let data = ref<any[]>([]); |
|
||||
let columns = ref<TableColumnType[]>([]); |
|
||||
|
|
||||
interface PageData { |
|
||||
tableList: any[]; |
|
||||
tableColumns: any[]; |
|
||||
graphList: any[]; |
|
||||
} |
|
||||
const pageData = inject<PageData>('pageData'); |
|
||||
|
|
||||
if (!pageData) { |
|
||||
throw new Error('pageData is not provided'); |
|
||||
} |
|
||||
// 监听 pageData 的变化 |
|
||||
watch( |
|
||||
() => pageData as PageData, |
|
||||
(_newValue, _oldValue) => { |
|
||||
data.value = pageData.tableList; |
|
||||
|
|
||||
let columnA: any[] = [...column]; |
|
||||
columnA.push(...pageData.tableColumns); |
|
||||
columns.value = columnA; |
|
||||
// pageData.graphList; |
|
||||
// 执行你的逻辑代码 |
|
||||
}, |
|
||||
{ deep: true }, |
|
||||
); |
|
||||
|
|
||||
const getRowSpan = (dataIndex: string, record: any, data: any, 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 column: TableColumnType[] = [ |
|
||||
{ |
|
||||
title: '序号', |
|
||||
dataIndex: 'key', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
if (rowIndex == undefined) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
const rowSpan = getRowSpan('name', record, data.value); |
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '设备名称', |
|
||||
dataIndex: 'name', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
if (rowIndex == undefined) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
const rowSpan = getRowSpan('name', record, data.value); |
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '设备点位', |
|
||||
dataIndex: 'position', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
if (rowIndex == undefined) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
const rowSpan = getRowSpan('position', record, data.value, ['name']); |
|
||||
if ( |
|
||||
rowIndex != 0 && |
|
||||
data.value[rowIndex - 1].name == record.name && |
|
||||
data.value[rowIndex - 1].position == record.position |
|
||||
) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '计量单位', |
|
||||
dataIndex: 'unit', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
if (rowIndex == undefined) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']); |
|
||||
if ( |
|
||||
rowIndex != 0 && |
|
||||
data.value[rowIndex - 1].name == record.name && |
|
||||
data.value[rowIndex - 1].position == record.position && |
|
||||
data.value[rowIndex - 1].unit == record.unit |
|
||||
) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
data.value = pageData.tableList; |
|
||||
|
|
||||
let columnA: any[] = [...column]; |
|
||||
columnA.push(...pageData.tableColumns); |
|
||||
columns.value = columnA; |
|
||||
}); |
|
||||
return { |
|
||||
data, |
|
||||
column, |
|
||||
columns, |
|
||||
pageData, |
|
||||
}; |
|
||||
}, |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less" scoped></style> |
|
Loading…
Reference in new issue