|
|
|
@ -222,6 +222,51 @@
|
|
|
|
|
<span class="input-help" v-else>{{ item.productName }}</span> |
|
|
|
|
</el-col> |
|
|
|
|
</template> |
|
|
|
|
<template v-for="(item, index) of currentInfo.xpuData" :key="index"> |
|
|
|
|
<el-col |
|
|
|
|
:xs="12" |
|
|
|
|
:sm="12" |
|
|
|
|
:md="6" |
|
|
|
|
:lg="6" |
|
|
|
|
:xl="6" |
|
|
|
|
align="center" |
|
|
|
|
v-if="showMore || index < 4 - currentInfo.diskData.length" |
|
|
|
|
> |
|
|
|
|
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]"> |
|
|
|
|
<el-row :gutter="5"> |
|
|
|
|
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag> |
|
|
|
|
</el-row> |
|
|
|
|
<el-row :gutter="5"> |
|
|
|
|
<el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag> |
|
|
|
|
</el-row> |
|
|
|
|
<el-row :gutter="5"> |
|
|
|
|
<el-tag class="tagClass">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag> |
|
|
|
|
</el-row> |
|
|
|
|
<el-row :gutter="5"> |
|
|
|
|
<el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag> |
|
|
|
|
</el-row> |
|
|
|
|
<el-row :gutter="5"> |
|
|
|
|
<el-tag class="tagClass"> |
|
|
|
|
{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsed }}/{{ item.memory }} |
|
|
|
|
</el-tag> |
|
|
|
|
</el-row> |
|
|
|
|
<template #reference> |
|
|
|
|
<v-charts |
|
|
|
|
@click="goGPU()" |
|
|
|
|
height="160px" |
|
|
|
|
:id="`gpu${index}`" |
|
|
|
|
type="pie" |
|
|
|
|
:option="chartsOption[`gpu${index}`]" |
|
|
|
|
v-if="chartsOption[`gpu${index}`]" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</el-popover> |
|
|
|
|
<el-tooltip :content="item.deviceName" v-if="item.deviceName.length > 25"> |
|
|
|
|
<span class="input-help">{{ item.deviceName.substring(0, 22) }}...</span> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<span class="input-help" v-else>{{ item.deviceName }}</span> |
|
|
|
|
</el-col> |
|
|
|
|
</template> |
|
|
|
|
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center"> |
|
|
|
|
<el-button v-if="!showMore" link type="primary" @click="showMore = true" class="buttonClass"> |
|
|
|
|
{{ $t('tabs.more') }} |
|
|
|
@ -268,6 +313,9 @@ const baseInfo = ref<Dashboard.BaseInfo>({
|
|
|
|
|
cpuLogicalCores: 0, |
|
|
|
|
cpuModelName: '', |
|
|
|
|
currentInfo: null, |
|
|
|
|
|
|
|
|
|
ipv4Addr: '', |
|
|
|
|
systemProxy: '', |
|
|
|
|
}); |
|
|
|
|
const currentInfo = ref<Dashboard.CurrentInfo>({ |
|
|
|
|
uptime: 0, |
|
|
|
@ -301,6 +349,7 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
|
|
|
|
|
|
|
|
|
|
diskData: [], |
|
|
|
|
gpuData: [], |
|
|
|
|
xpuData: [], |
|
|
|
|
|
|
|
|
|
netBytesSent: 0, |
|
|
|
|
netBytesRecv: 0, |
|
|
|
@ -346,6 +395,13 @@ const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo,
|
|
|
|
|
if (currentInfo.value.diskData.length + currentInfo.value.gpuData.length > 5) { |
|
|
|
|
showMore.value = isInit ? false : showMore.value || false; |
|
|
|
|
} |
|
|
|
|
currentInfo.value.xpuData = currentInfo.value.xpuData || []; |
|
|
|
|
for (let i = 0; i < currentInfo.value.xpuData.length; i++) { |
|
|
|
|
chartsOption.value['gpu' + i] = { |
|
|
|
|
title: 'GPU-' + currentInfo.value.xpuData[i].deviceID, |
|
|
|
|
data: formatNumber(Number(currentInfo.value.xpuData[i].memoryUtil.replaceAll('%', ''))), |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|