From aae615b9e8648d57c7cd65f53617c933af57588b Mon Sep 17 00:00:00 2001
From: yupix <yupi0982@outlook.jp>
Date: Tue, 16 Aug 2022 13:00:29 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20server.cpu.vue=E3=82=92script=20setup?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4=20#122?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/common/views/widgets/server.cpu.vue   | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/client/app/common/views/widgets/server.cpu.vue b/src/client/app/common/views/widgets/server.cpu.vue
index c08971e11c..1e122f34cc 100644
--- a/src/client/app/common/views/widgets/server.cpu.vue
+++ b/src/client/app/common/views/widgets/server.cpu.vue
@@ -9,32 +9,28 @@
 </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import Stream from '../../scripts/stream';
 import XPie from './server.pie.vue';
 
-export default Vue.extend({
-	components: {
-		XPie
-	},
-	props: ['connection', 'meta'],
-	data() {
-		return {
-			usage: 0
-		};
-	},
-	mounted() {
-		this.connection.on('stats', this.onStats);
-	},
-	beforeDestroy() {
-		this.connection.off('stats', this.onStats);
-	},
-	methods: {
-		onStats(stats) {
-			this.usage = stats.cpu_usage;
-		}
-	}
-});
+const props = defineProps({
+    connection: { type: Stream},
+    meta: {type: Object}
+})
+
+let usage = ref(0)
+
+const onStats = (stats) => {
+	usage.value = stats.cpu_usage;
+}
+
+onMounted(() => {
+    props.connection.on('stats', onStats);
+}),
+onUnmounted(() => {
+    props.connection.off('stats', onStats);
+})
 </script>
 
 <style lang="stylus" scoped>