diff --git a/packages/web/projects/vgpu/components/TabTop.vue b/packages/web/projects/vgpu/components/TabTop.vue index 2f8317f..c335c16 100644 --- a/packages/web/projects/vgpu/components/TabTop.vue +++ b/packages/web/projects/vgpu/components/TabTop.vue @@ -26,6 +26,7 @@ const props = defineProps({ key: String, config: Array, onClick: Function, + xName: String, }); const currentConfig = ref(props.config); const tabActive = ref(''); @@ -45,6 +46,7 @@ const getTopOptions = () => { (item) => item.key === tabActive.value, ); const data = cloneDeep(config?.data) || []; + const xName = props?.xName || (props?.title?.slice(4, 7) || '') + '(%)'; return { tooltip: { trigger: 'axis', @@ -67,18 +69,26 @@ const getTopOptions = () => { show: false, }, grid: { - left: '3%', - right: '4%', - bottom: '3%', - top: '0', + // left: '3%', + // right: '4%', + // bottom: '3%', + // top: '0', containLabel: true, }, xAxis: { type: 'value', boundaryGap: [0, 0.01], + name: xName, // 添加x轴名称 + nameLocation: 'end', // 把名字放在轴的末端 + nameTextStyle: { + verticalAlign: 'top', // 垂直方向靠上 + align: 'right', // 水平方向靠右 + padding: [30, 0, 0, 0] // 调整和轴的间距,30可根据需要调整 + } }, yAxis: { type: 'category', + name: '节点', data: data .reverse() .map((item) => diff --git a/packages/web/projects/vgpu/components/previewBar.vue b/packages/web/projects/vgpu/components/previewBar.vue index cb5bf41..0cee149 100644 --- a/packages/web/projects/vgpu/components/previewBar.vue +++ b/packages/web/projects/vgpu/components/previewBar.vue @@ -78,13 +78,13 @@ const totalTop = { data: [], query: `topk(5, sum(hami_container_vgpu_allocated{}) by (${props.type}) / sum(hami_vgpu_count{}) by (${props.type}) * 100)`, }, - { - tab: '算力', - key: 'core', - nameKey: props.type, - data: [], - query: `topk(5, sum(hami_container_vcore_allocated{}) by (${props.type}) / sum(hami_core_size{}) by (${props.type}) * 100)`, - }, + // { + // tab: '算力', + // key: 'core', + // nameKey: props.type, + // data: [], + // query: `topk(5, sum(hami_container_vcore_allocated{}) by (${props.type}) / sum(hami_core_size{}) by (${props.type}) * 100)`, + // }, { tab: '显存', key: 'memory', @@ -112,13 +112,13 @@ const usedTop = { data: [], query: `topk(5, ((sum(node_memory_MemTotal_bytes) by (instance)) - sum(node_memory_MemAvailable_bytes) by (instance)) / sum(node_memory_MemTotal_bytes) by (instance) * 100)`, }, - { - tab: '算力', - key: 'core', - nameKey: props.type, - data: [], - query: `topk(5, avg(hami_core_util_avg) by (${props.type}))`, - }, + // { + // tab: '算力', + // key: 'core', + // nameKey: props.type, + // data: [], + // query: `topk(5, avg(hami_core_util_avg) by (${props.type}))`, + // }, { tab: '显存', key: 'memory', diff --git a/packages/web/projects/vgpu/views/card/admin/Detail.vue b/packages/web/projects/vgpu/views/card/admin/Detail.vue index 3bb9877..d31d9c6 100644 --- a/packages/web/projects/vgpu/views/card/admin/Detail.vue +++ b/packages/web/projects/vgpu/views/card/admin/Detail.vue @@ -18,7 +18,7 @@ diff --git a/packages/web/projects/vgpu/views/node/admin/getOptions.js b/packages/web/projects/vgpu/views/node/admin/getOptions.js index 2ad1375..cd3246f 100644 --- a/packages/web/projects/vgpu/views/node/admin/getOptions.js +++ b/packages/web/projects/vgpu/views/node/admin/getOptions.js @@ -61,39 +61,39 @@ export const getRangeOptions = ({ }, }, series: [ - { - name: '算力', - data: core, - type: 'line', - areaStyle: { - normal: { - color: { - type: 'linear', - x: 0, // 渐变起始点 0% - y: 0, // 渐变起始点 0% - x2: 0, // 渐变结束点 100% - y2: 1, // 渐变结束点 100% - colorStops: [ - { - offset: 0, - color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 - }, - { - offset: 1, - color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 - }, - ], - global: false, // 缺省为 false - }, - }, - }, - itemStyle: { - color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 - }, - lineStyle: { - color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 - }, - }, + // { + // name: '算力', + // data: core, + // type: 'line', + // areaStyle: { + // normal: { + // color: { + // type: 'linear', + // x: 0, // 渐变起始点 0% + // y: 0, // 渐变起始点 0% + // x2: 0, // 渐变结束点 100% + // y2: 1, // 渐变结束点 100% + // colorStops: [ + // { + // offset: 0, + // color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 + // }, + // { + // offset: 1, + // color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 + // }, + // ], + // global: false, // 缺省为 false + // }, + // }, + // }, + // itemStyle: { + // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + // }, + // lineStyle: { + // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + // }, + // }, { name: '显存', data: memory, diff --git a/packages/web/projects/vgpu/views/node/admin/index.vue b/packages/web/projects/vgpu/views/node/admin/index.vue index 9944e0d..3251987 100644 --- a/packages/web/projects/vgpu/views/node/admin/index.vue +++ b/packages/web/projects/vgpu/views/node/admin/index.vue @@ -191,16 +191,16 @@ const columns = [ ), }, - { - title: '算力(已分配/总量)', - width: 120, - dataIndex: 'used', - render: ({ coreTotal, coreUsed, isExternal }) => ( - - {isExternal ? '--' : coreUsed}/{coreTotal} - - ), - }, + // { + // title: '算力(已分配/总量)', + // width: 120, + // dataIndex: 'used', + // render: ({ coreTotal, coreUsed, isExternal }) => ( + // + // {isExternal ? '--' : coreUsed}/{coreTotal} + // + // ), + // }, { title: '显存(已分配/总量)', dataIndex: 'w', diff --git a/packages/web/projects/vgpu/views/poll/admin/Detail.vue b/packages/web/projects/vgpu/views/poll/admin/Detail.vue index 7e2f062..094e3e8 100644 --- a/packages/web/projects/vgpu/views/poll/admin/Detail.vue +++ b/packages/web/projects/vgpu/views/poll/admin/Detail.vue @@ -104,16 +104,16 @@ const columns = [ ), }, - { - title: '算力(已分配/总量)', - width: 120, - dataIndex: 'used', - render: ({ coreTotal, coreUsed, isExternal }) => ( - - {isExternal ? '--' : coreUsed}/{coreTotal} - - ), - }, + // { + // title: '算力(已分配/总量)', + // width: 120, + // dataIndex: 'used', + // render: ({ coreTotal, coreUsed, isExternal }) => ( + // + // {isExternal ? '--' : coreUsed}/{coreTotal} + // + // ), + // }, { title: '显存(已分配/总量)', dataIndex: 'w', diff --git a/packages/web/projects/vgpu/views/poll/admin/DetailBox.vue b/packages/web/projects/vgpu/views/poll/admin/DetailBox.vue index 2464a5a..e34332e 100644 --- a/packages/web/projects/vgpu/views/poll/admin/DetailBox.vue +++ b/packages/web/projects/vgpu/views/poll/admin/DetailBox.vue @@ -7,9 +7,11 @@ diff --git a/packages/web/projects/vgpu/views/poll/admin/getOptions.js b/packages/web/projects/vgpu/views/poll/admin/getOptions.js index 2ad1375..cd3246f 100644 --- a/packages/web/projects/vgpu/views/poll/admin/getOptions.js +++ b/packages/web/projects/vgpu/views/poll/admin/getOptions.js @@ -61,39 +61,39 @@ export const getRangeOptions = ({ }, }, series: [ - { - name: '算力', - data: core, - type: 'line', - areaStyle: { - normal: { - color: { - type: 'linear', - x: 0, // 渐变起始点 0% - y: 0, // 渐变起始点 0% - x2: 0, // 渐变结束点 100% - y2: 1, // 渐变结束点 100% - colorStops: [ - { - offset: 0, - color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 - }, - { - offset: 1, - color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 - }, - ], - global: false, // 缺省为 false - }, - }, - }, - itemStyle: { - color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 - }, - lineStyle: { - color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 - }, - }, + // { + // name: '算力', + // data: core, + // type: 'line', + // areaStyle: { + // normal: { + // color: { + // type: 'linear', + // x: 0, // 渐变起始点 0% + // y: 0, // 渐变起始点 0% + // x2: 0, // 渐变结束点 100% + // y2: 1, // 渐变结束点 100% + // colorStops: [ + // { + // offset: 0, + // color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 + // }, + // { + // offset: 1, + // color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 + // }, + // ], + // global: false, // 缺省为 false + // }, + // }, + // }, + // itemStyle: { + // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + // }, + // lineStyle: { + // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 + // }, + // }, { name: '显存', data: memory, diff --git a/packages/web/projects/vgpu/views/task/admin/Detail.vue b/packages/web/projects/vgpu/views/task/admin/Detail.vue index 4022290..091b932 100644 --- a/packages/web/projects/vgpu/views/task/admin/Detail.vue +++ b/packages/web/projects/vgpu/views/task/admin/Detail.vue @@ -34,7 +34,7 @@
-
+
@@ -42,7 +42,8 @@