xuziqiang
4 months ago
10 changed files with 359 additions and 394 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