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

1.监控中心 - 设备监测 左侧树与右侧组件联动

Browse Source 
2.对接设备类型接口
This commit is contained in:
fks-yangshouda
2024-07-09 16:08:31 +08:00
parent 50ca1daca4
commit a0d928feaa
5 changed files with 607 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
View File

@@ -3,184 +3,177 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
import { defineComponent, watch, ref, onMounted } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
import { inject } from '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',
},
];
// let data: any[] = [];
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;
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;
}
}
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
rowSpan++;
} else {
break;
}
}
return rowSpan;
};
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,
const column: TableColumnType[] = [
{
title: '序号',
dataIndex: 'key',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
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,
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,
};
// 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,
// };
rowSpan: rowSpan,
};
},
},
},
{
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) {
{
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: 0,
colSpan: 0,
}
}
return {
rowSpan: rowSpan,
};
// if (rowIndex === data.indexOf(record)) {
// return {
// rowSpan: rowSpan,
// };
// }
// return {
// rowSpan: 0,
// colSpan: 0,
// };
rowSpan: rowSpan,
};
},
},
},
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
];
{
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,
};
},
},
];
return {
data,
columns,
};
},
});
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>