From fbd917328ccbe63bcb90a9498c6436b266419e28 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 20 Feb 2023 13:52:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Detail/Function/components/Advance.vue    | 11 ++++++
 .../Detail/Function/components/Simple.vue     | 11 ++++++
 .../device/Instance/Detail/Function/index.vue | 36 +++++++++++++++++--
 src/views/device/Instance/Detail/index.vue    |  2 +-
 4 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/views/device/Instance/Detail/Function/components/Advance.vue
 create mode 100644 src/views/device/Instance/Detail/Function/components/Simple.vue

diff --git a/src/views/device/Instance/Detail/Function/components/Advance.vue b/src/views/device/Instance/Detail/Function/components/Advance.vue
new file mode 100644
index 00000000..e00f4f7b
--- /dev/null
+++ b/src/views/device/Instance/Detail/Function/components/Advance.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="wrapper">高级模式</div>
+</template>
+
+<script setup lang="ts">
+import { useInstanceStore } from '@/store/instance';
+
+const instanceStore = useInstanceStore();
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/device/Instance/Detail/Function/components/Simple.vue b/src/views/device/Instance/Detail/Function/components/Simple.vue
new file mode 100644
index 00000000..319c9f2e
--- /dev/null
+++ b/src/views/device/Instance/Detail/Function/components/Simple.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="wrapper">精简模式</div>
+</template>
+
+<script setup lang="ts">
+import { useInstanceStore } from '@/store/instance';
+
+const instanceStore = useInstanceStore();
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/device/Instance/Detail/Function/index.vue b/src/views/device/Instance/Detail/Function/index.vue
index 725f8603..9d438dd8 100644
--- a/src/views/device/Instance/Detail/Function/index.vue
+++ b/src/views/device/Instance/Detail/Function/index.vue
@@ -1,7 +1,39 @@
 <template>
-    <div class="page-container">设备功能</div>
+    <a-card>
+        <a-empty
+            v-if="!metadata || (metadata && !metadata.functions)"
+            style="margin-top: 100px"
+        >
+            <template #description>
+                暂无数据，请配置
+                <a @click="emits('onJump', 'Metadata')">物模型</a>
+            </template>
+        </a-empty>
+        <template v-else>
+            <a-tabs v-model:activeKey="activeKey">
+                <a-tab-pane key="Simple" tab="精简模式" />
+                <a-tab-pane key="Advance" tab="高级模式" />
+            </a-tabs>
+            <component :is="tabs[activeKey]" />
+        </template>
+    </a-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useInstanceStore } from '@/store/instance';
+import Simple from './components/Simple.vue';
+import Advance from './components/Advance.vue';
+
+const instanceStore = useInstanceStore();
+const emits = defineEmits(['onJump']);
+
+const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
+
+const activeKey = ref('Simple');
+const tabs = {
+    Simple,
+    Advance,
+};
+</script>
 
 <style lang="less" scoped></style>
diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue
index 043c5c54..f6a56de3 100644
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@@ -34,7 +34,7 @@
         <template #extra>
             <img @click="handleRefresh" :src="getImage('/device/button.png')" style="margin-right: 20px; cursor: pointer;" />
         </template>
-        <component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" />
+        <component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" @onJump="onTabChange" />
     </page-container>
 </template>