fks-yangshouda
2 months ago
6 changed files with 765 additions and 473 deletions
@ -0,0 +1,122 @@ |
|||||
|
<template> |
||||
|
<a-table :columns="columns" :data-source="data" bordered /> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, watch, inject, ref, onMounted } from 'vue'; |
||||
|
import type { TableColumnType } from 'ant-design-vue'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'EnvironmentTable', |
||||
|
setup() { |
||||
|
let data = ref<any[]>([]); |
||||
|
let columns = ref<TableColumnType[]>([]); |
||||
|
|
||||
|
interface PageData { |
||||
|
graphTableList: any[]; |
||||
|
graphTableColumns: any[]; |
||||
|
graphGraphList: 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.graphTableList; |
||||
|
|
||||
|
let columnA: any[] = [...column]; |
||||
|
columnA.push(...pageData.graphTableColumns); |
||||
|
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: '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: 'paramName', |
||||
|
customCell: (record, rowIndex) => { |
||||
|
if (rowIndex == undefined) { |
||||
|
return { |
||||
|
rowSpan: 0, |
||||
|
colSpan: 0, |
||||
|
}; |
||||
|
} |
||||
|
const rowSpan = getRowSpan('paramName', record, data.value, ['name']); |
||||
|
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) { |
||||
|
return { |
||||
|
rowSpan: 0, |
||||
|
colSpan: 0, |
||||
|
}; |
||||
|
} |
||||
|
return { |
||||
|
rowSpan: rowSpan, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
data.value = pageData.graphTableList; |
||||
|
|
||||
|
let columnA: any[] = [...column]; |
||||
|
columnA.push(...pageData.graphTableColumns); |
||||
|
columns.value = columnA; |
||||
|
}); |
||||
|
return { |
||||
|
data, |
||||
|
column, |
||||
|
columns, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped></style> |
||||
@ -0,0 +1,88 @@ |
|||||
|
<!-- eslint-disable vue/multi-word-component-names --> |
||||
|
<template> |
||||
|
<a-tabs v-model:activeKey="activeKey" style="height: 8%"> |
||||
|
<a-tab-pane key="1" tab="图表" /> |
||||
|
<a-tab-pane key="2" tab="分析" /> |
||||
|
</a-tabs> |
||||
|
<a-row type="flex" style="height: 92%"> |
||||
|
<a-col :span="4"> |
||||
|
<div style="padding: 0 20px; width: 100%; height: 100%"> |
||||
|
<tree ref="treeRef" /> |
||||
|
</div> |
||||
|
</a-col> |
||||
|
<a-col :span="20"> |
||||
|
<div style="width: 100%; height: 100%"> |
||||
|
<div class="ns-right-title"> |
||||
|
<span>统计数据</span> |
||||
|
<div class="button"> |
||||
|
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" /> |
||||
|
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="activeKey == '1'" style="height: 90%"> |
||||
|
<graph-graph ref="graphRef" v-if="isGraph" /> |
||||
|
<environment-table ref="tableRef" v-else /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import tree from './tree/index.vue'; |
||||
|
import graphGraph from './graphGraph/index.vue'; |
||||
|
import environmentTable from './graphTable/index.vue'; |
||||
|
|
||||
|
const iconName = ref('biaoge'); |
||||
|
|
||||
|
const treeRef = ref(); |
||||
|
const graphRef = ref(); |
||||
|
const tableRef = ref(); |
||||
|
|
||||
|
let isGraph = ref(true); |
||||
|
const activeKey = ref('1'); |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
||||
|
}); |
||||
|
|
||||
|
const downloadChart = () => { |
||||
|
if (activeKey.value == '1' && isGraph) { |
||||
|
if (graphRef.value) { |
||||
|
graphRef.value.downloadChart(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
function change() { |
||||
|
isGraph.value = !isGraph.value; |
||||
|
if (iconName.value == 'biaoge') { |
||||
|
iconName.value = 'bingtu'; |
||||
|
} else { |
||||
|
iconName.value = 'biaoge'; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.ns-right-title { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
user-select: text; |
||||
|
margin-bottom: 5px; |
||||
|
padding-bottom: 10px; |
||||
|
padding-top: 10px; |
||||
|
border-bottom: 1px solid #e9e9e9; |
||||
|
|
||||
|
> span { |
||||
|
padding-left: 10px; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
} |
||||
|
.button { |
||||
|
display: inline-block; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue