优化 监控中心 前台页面
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
bordered
|
||||
:pagination="false"
|
||||
style="width: 99%; height: 75%; margin-left: 0.5%"
|
||||
:scroll="{ x: 2000, y: 450 }" />
|
||||
:scroll="{ x: x, y: 450 }" />
|
||||
<a-pagination
|
||||
:total="total"
|
||||
:show-total="(total, range) => ` 共 ${total} 条`"
|
||||
@@ -36,6 +36,8 @@
|
||||
const total = ref<number>();
|
||||
// 分页后的展示数据
|
||||
let data = ref<any[]>([]);
|
||||
|
||||
const x = ref(2000);
|
||||
// 原始数据
|
||||
let dataList = ref<any[]>([]);
|
||||
let columns = ref<TableColumnType[]>([]);
|
||||
@@ -97,6 +99,7 @@
|
||||
{
|
||||
title: '序号',
|
||||
width: 50,
|
||||
align: 'center',
|
||||
customRender: ({ record, index }) => {
|
||||
// 自定义单元格内容,这里返回序号
|
||||
if (index == 0) {
|
||||
@@ -139,6 +142,8 @@
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'deviceName',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -161,6 +166,8 @@
|
||||
{
|
||||
title: '设备点位',
|
||||
dataIndex: 'devicePositionName',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -187,6 +194,8 @@
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'devicePositionUnit',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -217,6 +226,8 @@
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'time',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -227,8 +238,9 @@
|
||||
let columnA: any[] = [...column];
|
||||
let columnB: any[] = [];
|
||||
pageData.tableColumns.forEach((item) => {
|
||||
columnB.push({ title: item, dataIndex: item });
|
||||
columnB.push({ title: item, dataIndex: item, width: 60, align: 'center' });
|
||||
});
|
||||
x.value = 450 + pageData.tableColumns.length * 60;
|
||||
columnA.push(...columnB);
|
||||
columns.value = columnA;
|
||||
total.value = dataList.value.length;
|
||||
@@ -244,9 +256,14 @@
|
||||
pageData,
|
||||
total,
|
||||
onChange,
|
||||
x,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
::v-deep .ant-table-container table > thead > tr:first-child th:last-child {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
@@ -500,7 +500,7 @@
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
draw();
|
||||
// draw();
|
||||
});
|
||||
|
||||
// 下载图表
|
||||
|
@@ -155,7 +155,7 @@
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
draw();
|
||||
// draw();
|
||||
});
|
||||
|
||||
// 下载图表
|
||||
@@ -177,6 +177,7 @@
|
||||
downloadChart,
|
||||
data,
|
||||
haveData,
|
||||
draw,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@@ -99,6 +99,11 @@
|
||||
iconName.value = 'zhexiantu';
|
||||
} else {
|
||||
iconName.value = 'biaoge1';
|
||||
if (activeKey.value == '1') {
|
||||
treeRef.value.getSelectGraph(activeKey.value);
|
||||
} else {
|
||||
treeRef.value.getSelectAnalyse(activeKey.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@@ -480,8 +480,8 @@
|
||||
expandedKeys.value = getAllKeys(treeData2.value);
|
||||
if (treeData2.value?.length >= 2) {
|
||||
checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
|
||||
getSelect(null);
|
||||
}
|
||||
getSelect(null);
|
||||
})
|
||||
.finally(() => {
|
||||
treeLoading.value = false;
|
||||
|
@@ -4,7 +4,7 @@ export const tableColumns = [
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
width: 150,
|
||||
width: 50,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
|
@@ -9,7 +9,7 @@
|
||||
bordered
|
||||
:pagination="false"
|
||||
style="height: 75%"
|
||||
:scroll="{ x: 200, y: 450 }">
|
||||
:scroll="{ x: x, y: 450 }">
|
||||
<template #title>
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
||||
@@ -186,7 +186,7 @@
|
||||
align: 'center',
|
||||
});
|
||||
}
|
||||
x.value = 300 + headerList.length * 150;
|
||||
x.value = 200 + headerList.length * 150;
|
||||
let columnA: any[] = [...tableColumnsA];
|
||||
columnA.push(...tableColumnsB);
|
||||
tableColumns.value = columnA;
|
||||
@@ -237,7 +237,7 @@
|
||||
::v-deep .ant-table.ant-table-bordered > .ant-table-title {
|
||||
border: none !important;
|
||||
}
|
||||
/* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
|
||||
::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
|
||||
display: none !important;
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user