fix: 根据现有数据构建表格,优化样式

This commit is contained in:
Xu Zhimeng 2024-01-04 17:45:12 +08:00
parent b22431e9ae
commit 96b4ce0d13

View File

@ -113,7 +113,7 @@
:canSelect="false" :canSelect="false"
> >
</TableList> </TableList>
<a-pagination <!-- <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
@ -128,7 +128,7 @@
show-less-items show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> /> -->
</div> </div>
</div> </div>
</div> </div>
@ -142,56 +142,78 @@ import TableList from '../../components/tableList.vue'
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
import * as echarts from 'echarts' import * as echarts from 'echarts'
const columns = [ // const columns = [
{ // {
title: 'STATUS', // title: 'STATUS',
align: 'left', // align: 'left',
dataIndex: 'status', // dataIndex: 'status',
// width: 250, // // width: 250,
}, // },
{ // {
title: 'SERVICE NAME', // title: 'SERVICE NAME',
align: 'left', // align: 'left',
dataIndex: 'name', // dataIndex: 'name',
// width: 250, // // width: 250,
}, // },
{ // {
title: 'ASSOCIATED PROCESS', // title: 'ASSOCIATED PROCESS',
align: 'left', // align: 'left',
dataIndex: 'process', // dataIndex: 'process',
// width: 250, // // width: 250,
}, // },
{ // {
title: 'CPU(%)', // title: 'CPU(%)',
align: 'left', // align: 'left',
dataIndex: 'cpu', // dataIndex: 'cpu',
// width: 250, // // width: 250,
}, // },
{ // {
title: 'MENORY', // title: 'MENORY',
align: 'left', // align: 'left',
dataIndex: 'menory', // dataIndex: 'menory',
// width: 250, // // width: 250,
}, // },
{ // {
title: 'INSTANCE', // title: 'INSTANCE',
align: 'left', // align: 'left',
dataIndex: 'instance', // dataIndex: 'instance',
// width: 250, // // width: 250,
}, // },
{ // {
title: 'THREAD COUNT', // title: 'THREAD COUNT',
align: 'left', // align: 'left',
dataIndex: 'threadCount', // dataIndex: 'threadCount',
// width: 250, // // width: 250,
}, // },
{ // {
title: 'PROCESSING COUNT', // title: 'PROCESSING COUNT',
align: 'left', // align: 'left',
dataIndex: 'processongCount', // dataIndex: 'processongCount',
// width: 250, // // width: 250,
}, // },
] // ]
const columns = [{
title: 'Name',
dataIndex: 'name',
width: '20%'
}, {
title: 'Min(%)',
dataIndex: 'min',
width: '20%'
}, {
title: 'Max(%)',
dataIndex: 'max',
width: '20%'
}, {
title: 'Avg(%)',
dataIndex: 'avg',
width: '20%'
}, {
title: 'Now(%)',
dataIndex: 'now',
width: '20%'
}]
export default { export default {
components: { components: {
BoxTitle, BoxTitle,
@ -297,6 +319,8 @@ export default {
type: this.num === 0 ? 'CPU' : '内存', type: this.num === 0 ? 'CPU' : '内存',
} }
this.setTableData()
let cpu_xData = res.result.cpu[0].list.map((item) => { let cpu_xData = res.result.cpu[0].list.map((item) => {
return dateFormat(new Date(item.date * 1000), 'hh:mm') return dateFormat(new Date(item.date * 1000), 'hh:mm')
}) })
@ -403,12 +427,20 @@ export default {
this.type = 'cpu' this.type = 'cpu'
this.ranked.content.clear() this.ranked.content.clear()
this.drawRanked() this.drawRanked()
this.setTableData()
}, },
handleMemory() { handleMemory() {
this.type = 'memory' this.type = 'memory'
this.ranked.content.clear() this.ranked.content.clear()
this.drawRanked() this.drawRanked()
this.setTableData()
}, },
// table
setTableData() {
this.dataSource = this.list[this.type]
},
drawRanked() { drawRanked() {
this.ranked.content = echarts.init(document.getElementById('ranked')) this.ranked.content = echarts.init(document.getElementById('ranked'))
let xData = this.type === 'cpu' ? this.rankData.cpu_xData : this.rankData.memory_xData let xData = this.type === 'cpu' ? this.rankData.cpu_xData : this.rankData.memory_xData