mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-06 16:16:42 +08:00
fix dashboard
This commit is contained in:
jxxghp
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "moviepilot",
|
"name": "moviepilot",
|
||||||
"version": "1.1.3-2",
|
"version": "1.1.3-3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --host",
|
"dev": "vite --host",
|
||||||
|
|||||||
@@ -326,6 +326,7 @@ async function recognize(path: string) {
|
|||||||
// 显示进度条
|
// 显示进度条
|
||||||
progressDialog.value = true
|
progressDialog.value = true
|
||||||
progressText.value = `正在识别 ${path} ...`
|
progressText.value = `正在识别 ${path} ...`
|
||||||
|
progressValue.value = 0
|
||||||
nameTestResult.value = await api.get('media/recognize_file', {
|
nameTestResult.value = await api.get('media/recognize_file', {
|
||||||
params: {
|
params: {
|
||||||
path,
|
path,
|
||||||
@@ -737,9 +738,10 @@ onMounted(() => {
|
|||||||
<vCardText class="text-center">
|
<vCardText class="text-center">
|
||||||
{{ progressText }}
|
{{ progressText }}
|
||||||
<vProgressLinear
|
<vProgressLinear
|
||||||
indeterminate
|
v-if="progressValue"
|
||||||
color="white"
|
color="white"
|
||||||
class="mb-0 mt-1"
|
class="mb-0 mt-1"
|
||||||
|
:model-value="progressValue"
|
||||||
/>
|
/>
|
||||||
</vCardText>
|
</vCardText>
|
||||||
</vCard>
|
</vCard>
|
||||||
|
|||||||
+14
-3
@@ -1,10 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
|
import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
|
||||||
import AnalyticsProcesses from '@/views/dashboard/AnalyticsProcesses.vue'
|
|
||||||
import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
|
import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
|
||||||
import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
|
import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
|
||||||
import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
|
import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
|
||||||
import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
|
import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
|
||||||
|
import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
|
||||||
|
import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -44,8 +45,18 @@ import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.v
|
|||||||
<AnalyticsScheduler />
|
<AnalyticsScheduler />
|
||||||
</VCol>
|
</VCol>
|
||||||
|
|
||||||
<VCol cols="12">
|
<VCol
|
||||||
<AnalyticsProcesses />
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<AnalyticsCpu />
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<AnalyticsMemory />
|
||||||
</VCol>
|
</VCol>
|
||||||
</VRow>
|
</VRow>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import VueApexCharts from 'vue3-apexcharts'
|
||||||
|
import { useTheme } from 'vuetify'
|
||||||
|
import { hexToRgb } from '@layouts/utils'
|
||||||
|
import api from '@/api'
|
||||||
|
|
||||||
|
const vuetifyTheme = useTheme()
|
||||||
|
|
||||||
|
const currentTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.colors)
|
||||||
|
const variableTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.variables)
|
||||||
|
|
||||||
|
// 定时器
|
||||||
|
let refreshTimer: NodeJS.Timer | null = null
|
||||||
|
|
||||||
|
// 时间序列
|
||||||
|
const series = ref([
|
||||||
|
{
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
// 当前值
|
||||||
|
const current = ref(0)
|
||||||
|
|
||||||
|
const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
tooltip: { enabled: false },
|
||||||
|
grid: {
|
||||||
|
borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
|
||||||
|
strokeDashArray: 6,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: false },
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
lines: { show: true },
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
top: -10,
|
||||||
|
left: -7,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
width: 3,
|
||||||
|
lineCap: 'butt',
|
||||||
|
curve: 'smooth',
|
||||||
|
},
|
||||||
|
colors: [currentTheme.value.primary],
|
||||||
|
markers: {
|
||||||
|
size: 6,
|
||||||
|
offsetY: 4,
|
||||||
|
offsetX: -2,
|
||||||
|
strokeWidth: 3,
|
||||||
|
colors: ['transparent'],
|
||||||
|
strokeColors: 'transparent',
|
||||||
|
discrete: [
|
||||||
|
{
|
||||||
|
size: 5.5,
|
||||||
|
seriesIndex: 0,
|
||||||
|
strokeColor: currentTheme.value.primary,
|
||||||
|
fillColor: currentTheme.value.surface,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
hover: { size: 7 },
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
labels: { show: false },
|
||||||
|
axisTicks: { show: false },
|
||||||
|
axisBorder: { show: false },
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: { show: false },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 调用API接口获取最新CPU使用率
|
||||||
|
async function getCpuUsage() {
|
||||||
|
try {
|
||||||
|
// 请求数据
|
||||||
|
current.value = await api.get('dashboard/cpu') ?? 0
|
||||||
|
// 添加到序列
|
||||||
|
series.value[0].data.push(current.value)
|
||||||
|
// 序列超过30条记录时，清掉前面的
|
||||||
|
if (series.value[0].data.length > 30)
|
||||||
|
series.value[0].data.shift()
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getCpuUsage()// 启动定时器
|
||||||
|
refreshTimer = setInterval(() => {
|
||||||
|
getCpuUsage()
|
||||||
|
}, 2000)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件卸载时停止定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (refreshTimer) {
|
||||||
|
clearInterval(refreshTimer)
|
||||||
|
refreshTimer = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard>
|
||||||
|
<VCardText>
|
||||||
|
<h6 class="text-h6">
|
||||||
|
CPU
|
||||||
|
</h6>
|
||||||
|
<VueApexCharts
|
||||||
|
type="line"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="series"
|
||||||
|
:height="150"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p class="text-center font-weight-medium mb-0">
|
||||||
|
当前：{{ current }}%
|
||||||
|
</p>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import VueApexCharts from 'vue3-apexcharts'
|
||||||
|
import { useTheme } from 'vuetify'
|
||||||
|
import { hexToRgb } from '@layouts/utils'
|
||||||
|
import api from '@/api'
|
||||||
|
import { formatBytes } from '@/@core/utils/formatters'
|
||||||
|
|
||||||
|
const vuetifyTheme = useTheme()
|
||||||
|
|
||||||
|
const currentTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.colors)
|
||||||
|
const variableTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.variables)
|
||||||
|
|
||||||
|
// 定时器
|
||||||
|
let refreshTimer: NodeJS.Timer | null = null
|
||||||
|
|
||||||
|
// 时间序列
|
||||||
|
const series = ref([
|
||||||
|
{
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
// 当前值
|
||||||
|
const current = ref(0)
|
||||||
|
|
||||||
|
const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
tooltip: { enabled: false },
|
||||||
|
grid: {
|
||||||
|
borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
|
||||||
|
strokeDashArray: 6,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: false },
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
lines: { show: true },
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
top: -10,
|
||||||
|
left: -7,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
width: 3,
|
||||||
|
lineCap: 'butt',
|
||||||
|
curve: 'smooth',
|
||||||
|
},
|
||||||
|
colors: [currentTheme.value.primary],
|
||||||
|
markers: {
|
||||||
|
size: 6,
|
||||||
|
offsetY: 4,
|
||||||
|
offsetX: -2,
|
||||||
|
strokeWidth: 3,
|
||||||
|
colors: ['transparent'],
|
||||||
|
strokeColors: 'transparent',
|
||||||
|
discrete: [
|
||||||
|
{
|
||||||
|
size: 5.5,
|
||||||
|
seriesIndex: 0,
|
||||||
|
strokeColor: currentTheme.value.primary,
|
||||||
|
fillColor: currentTheme.value.surface,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
hover: { size: 7 },
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
labels: { show: false },
|
||||||
|
axisTicks: { show: false },
|
||||||
|
axisBorder: { show: false },
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: { show: false },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 调用API接口获取最新内存使用量
|
||||||
|
async function getMemorgUsage() {
|
||||||
|
try {
|
||||||
|
// 请求数据
|
||||||
|
current.value = await api.get('dashboard/memory') ?? 0
|
||||||
|
// 添加到序列
|
||||||
|
series.value[0].data.push(current.value / 1024 / 1024 / 1024)
|
||||||
|
// 序列超过30条记录时，清掉前面的
|
||||||
|
if (series.value[0].data.length > 30)
|
||||||
|
series.value[0].data.shift()
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getMemorgUsage()
|
||||||
|
// 启动定时器
|
||||||
|
refreshTimer = setInterval(() => {
|
||||||
|
getMemorgUsage()
|
||||||
|
}, 3000)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件卸载时停止定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (refreshTimer) {
|
||||||
|
clearInterval(refreshTimer)
|
||||||
|
refreshTimer = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard>
|
||||||
|
<VCardText>
|
||||||
|
<h6 class="text-h6">
|
||||||
|
内存
|
||||||
|
</h6>
|
||||||
|
<VueApexCharts
|
||||||
|
type="area"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="series"
|
||||||
|
:height="150"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p class="text-center font-weight-medium mb-0">
|
||||||
|
当前：{{ formatBytes(current) }}
|
||||||
|
</p>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user