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