Implementing API on service detail page
diff --git a/ui-vue3/src/views/resources/services/tabs/detail.vue b/ui-vue3/src/views/resources/services/tabs/detail.vue
index 1a26063..fe0751d 100644
--- a/ui-vue3/src/views/resources/services/tabs/detail.vue
+++ b/ui-vue3/src/views/resources/services/tabs/detail.vue
@@ -19,46 +19,59 @@
<a-flex>
<a-descriptions class="description-column" :column="1" layout="vertical">
<a-descriptions-item label="服务名">
- <p class="description-item-content">org.apache.dubbo.samples.UserService</p>
+ <p class="description-item-content">{{ serviceDetail.serviceName }}</p>
</a-descriptions-item>
<a-descriptions-item label="服务版本&分组">
<div class="description-item-content">
- <a-tag color="cyan">version=v1</a-tag>
- <a-tag color="cyan">version=2.0,group=group1</a-tag>
+ <a-tag color="cyan" v-for="item in serviceDetail.versionGroup" :key="item">{{
+ item
+ }}</a-tag>
</div>
</a-descriptions-item>
<a-descriptions-item label="RPC协议">
- <p class="description-item-content">triple</p>
+ <p class="description-item-content">{{ serviceDetail.protocol }}</p>
</a-descriptions-item>
<a-descriptions-item label="延迟注册时间">
- <p class="description-item-content">3000ms</p>
+ <p class="description-item-content">{{ serviceDetail.delay }}</p>
</a-descriptions-item>
<a-descriptions-item label="超时时间">
- <p class="description-item-content">3000ms</p>
+ <p class="description-item-content">{{ serviceDetail.timeOut }}</p>
</a-descriptions-item>
<a-descriptions-item label="重试次数">
- <p class="description-item-content">3</p>
+ <p class="description-item-content">{{ serviceDetail.retry }}</p>
</a-descriptions-item>
</a-descriptions>
<a-descriptions class="description-column" :column="1" layout="vertical">
<a-descriptions-item label="请求总量(1min)">
- <p class="description-item-content">1384</p>
+ <p class="description-item-content">{{ serviceDetail.requestTotal }}</p>
</a-descriptions-item>
<a-descriptions-item label="平均RT(1min)">
- <p class="description-item-content">96ms</p>
+ <p class="description-item-content">{{ serviceDetail.avgRT }}</p>
</a-descriptions-item>
<a-descriptions-item label="平均qps(1min)">
- <p class="description-item-content">12</p>
+ <p class="description-item-content">{{ serviceDetail.avgQPS }}</p>
</a-descriptions-item>
<a-descriptions-item label="是否过时">
- <p class="description-item-content">false</p>
+ <p class="description-item-content">{{ serviceDetail.obsolete }}</p>
</a-descriptions-item>
</a-descriptions>
</a-flex>
</div>
</template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getServiceDetail } from '@/api/service/serviceDetail'
+
+const serviceDetail = ref({})
+const onSearch = async () => {
+ const { data } = await getServiceDetail()
+ serviceDetail.value = data.data
+}
+
+onSearch()
+</script>
+
<style lang="less" scoped>
.__container_services_tabs_detail {
.description-item-content {
