仪表板组件支持拖动排序

src/views/dashboard/AnalyticsCpu.vue

@@ -6,8 +6,14 @@ 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)
+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
@@ -22,83 +28,86 @@ const series = ref([
 // 当前值
 const current = ref(0)
 
-const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-      animations: { enabled: false },
-    },
-    tooltip: { enabled: false },
-    grid: {
-      borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
-      strokeDashArray: 6,
+const chartOptions = controlledComputed(
+  () => vuetifyTheme.name.value,
+  () => {
+    return {
+      chart: {
+        parentHeightOffset: 0,
+        toolbar: { show: false },
+        animations: { enabled: 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: {
-        lines: { show: false },
+        labels: { show: false },
+        axisTicks: { show: false },
+        axisBorder: { show: false },
       },
       yaxis: {
-        lines: { show: true },
+        labels: { show: false },
+        max: 100,
       },
-      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 },
-      max: 100,
-    },
-  }
-})
+    }
+  },
+)
 
 // 调用API接口获取最新CPU使用率
 async function getCpuUsage() {
   try {
     // 请求数据
-    current.value = await api.get('dashboard/cpu') ?? 0
+    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) {
+    if (series.value[0].data.length > 30) series.value[0].data.shift()
+  } catch (e) {
     console.log(e)
   }
 }
 
 onMounted(() => {
-  getCpuUsage()// 启动定时器
+  getCpuUsage() // 启动定时器
   refreshTimer = setInterval(() => {
     getCpuUsage()
   }, 2000)
@@ -115,20 +124,13 @@ onUnmounted(() => {
 
 <template>
   <VCard>
+    <VCardItem>
+      <VCardTitle class="cursor-move">CPU</VCardTitle>
+    </VCardItem>
     <VCardText>
-      <h6 class="text-h6">
-        CPU
-      </h6>
-      <VueApexCharts
-        type="line"
-        :options="chartOptions"
-        :series="series"
-        :height="150"
-      />
+      <VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
 
-      <p class="text-center font-weight-medium mb-0">
-        当前：{{ current }}%
-      </p>
+      <p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
     </VCardText>
   </VCard>
 </template>