diff --git a/src/components/card.vue b/src/components/card.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05a57cfb4b534d2bacf71e61d44ae2875474726d
--- /dev/null
+++ b/src/components/card.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="card">
+        <div class="card_title"><div class="circle"></div>{{title}}</div>
+        <div class="card_contain">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['title'],
+    components: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.card{
+    width: 100%;
+    position: relative;
+    background-color: #e5f0ff;
+	border-radius: 12px 12px 0px 0px;
+    overflow: hidden;
+}
+.card_title{
+    width: 100%;
+    height: 45px;
+	background-color: #e5f0ff;
+    line-height: 45px;
+    text-align: left;
+    padding: 0 15px;
+    color: #707693;
+    overflow: hidden;
+}
+.card_title div{
+    float: left;
+}
+.circle{
+    width: 8px;
+	height: 8px;
+	background-color: #515fe7;
+    border-radius: 4px;
+    margin-right: 15px;
+    margin-top: 20px;
+}
+.card_contain{
+    width: 100%;
+    position: relative;
+    background-color: #fbfcfe;
+}
+</style>
diff --git a/src/pages/example_icon.vue b/src/pages/example_icon.vue
index 43a003a7b3dfdc2f4cf590cfecbe63dac24dc27e..68f694cbaed2c6934dd390b788804f6d448de605 100644
--- a/src/pages/example_icon.vue
+++ b/src/pages/example_icon.vue
@@ -21,14 +21,15 @@ export default {
 
 <style scoped>
 .icon-main {
-  margin-top: 100px;
+  /* margin-top: 100px; */
+  width: 60px;
 }
 .icon_act {
-  margin-left: 50px;
+  /* margin-left: 50px; */
   position: relative;
 }
 .svg_out {
-  font-size: 100px;
+  font-size: 60px;
   color: lawngreen;
   animation: out_t;
   animation-duration: 2s;
@@ -36,10 +37,10 @@ export default {
   animation-iteration-count: infinite;
 }
 .svg_in {
-  font-size: 50px;
+  font-size: 20px;
   position: absolute;
-  top: 25px;
-  left: 26px;
+  top: 20px;
+  left: 20px;
   animation: in_t;
   animation-duration: 2s;
   animation-timing-function: linear;
diff --git a/src/pages/serviceDetail.vue b/src/pages/serviceDetail.vue
index b99604ee224b63ec594db18d8733fe5f5e290549..9b6485379cc40e2b2436cc02cf424b56e8512163 100644
--- a/src/pages/serviceDetail.vue
+++ b/src/pages/serviceDetail.vue
@@ -26,8 +26,49 @@
               <div class="type_box_select">
                   <info-list :list_arr="now_service==0?list_arr:servicead_arr" v-if="now_service == 0||now_service == 1">
                       <table-um :headers="header_arr" url="params_arr" :paginationShow="true" slot="zd_table"></table-um>
+                      <v-apaas-code url="/static/data.json" slot="zd_code"></v-apaas-code>
                   </info-list>
-                  
+                  <div v-show="now_service == 2">
+                      <p class="service_title"><span></span>服务运行概况</p>
+                      <div class="service_title_card">
+                        <nor-card title="服务状态" class="service_card">
+                            <template>
+                                <div style="height:115px;padding-top:10px;">
+                                    <example-icon style="margin:10px auto;"></example-icon>
+                                    <p style="color: #58617a;font-size: 16px;text-align:center;">运行中</p>
+                                </div>
+                            </template>
+                        </nor-card>
+                        <nor-card title="平均响应时间" class="service_card">
+                            <template>
+                                <div style="height:115px;" class="service_num">
+                                    <p>1200ms</p> 
+                                    <p>最大响应时间：180000ms</p>
+                                </div>
+                            </template>
+                        </nor-card>
+                        <nor-card title="吞吐率" class="service_card">
+                            <template>
+                                <div style="height:115px;" class="service_num">
+                                    <p>39dps</p> 
+                                    <p>最大吞吐率：120dps</p> 
+                                </div>
+                            </template>
+                        </nor-card>
+                        <nor-card title="资源使用" class="service_card">
+                            <template>
+                                <div style="height:115px;padding-top:30px;" class="service_num">
+                                    <p>300MB</p>  
+                                </div>
+                            </template>
+                        </nor-card>
+                      </div>
+                      <nor-card title="服务调用拓扑图" class="service_card_charts">
+                             <Topology :datas="datas" />
+                      </nor-card>
+                      <p class="service_title"><span></span>服务调用列表</p>
+                      <table-um :headers="header_use_arr" url="params_use_arr" :paginationShow="true"></table-um>
+                  </div>
               </div>
           </div>
       </div>
@@ -37,20 +78,29 @@
 <script>
 import infoList from '../components/infoList'
 import tableUm from '../components/table-um'
+import codes from "@/components/codes";
+import norCard from "@/components/card"
+import exampleIcon from "@/pages/example_icon"
+import Topology from "@/components/topology.vue";
 export default {
   components:{
       infoList,
-      tableUm
+      tableUm,
+      "v-apaas-code": codes,
+      norCard,
+      exampleIcon,
+      Topology
   },
   data() {
     return {
         service_arr:['服务基本信息','接口详细信息','服务运行状态'],
         now_service:0,
+        datas:{},
         header_arr:[
             {
               prop:'zdmc',
               label:'字段名称',
-              width:'200px',
+              minWidth:'20%',
               align:'left',
             },
             {
@@ -68,7 +118,7 @@ export default {
             {
               prop:'zdsm',
               label:'字段说明',
-              width:'300px',
+              minWidth:'30%',
               align:'left',
             },
             {
@@ -78,6 +128,44 @@ export default {
               align:'left',
             },
         ],
+        header_use_arr:[
+            {
+              prop:'dydw',
+              label:'调用单位',
+              minWidth:'20%',
+              align:'left',
+            },
+            {
+              prop:'dyr',
+              label:'调用人',
+              width:'100px',
+              align:'center',
+            },
+            {
+              prop:'dyyw',
+              label:'调用业务系统',
+              minWidth:'20%',
+              align:'left',
+            },
+            {
+              prop:'ywxt',
+              label:'业务系统网址',
+              minWidth:'20%',
+              align:'left',
+            },
+            {
+              prop:'cjms',
+              label:'场景描述',
+              minWidth:'20%',
+              align:'left',
+            },
+            {
+              prop:'sqsj',
+              label:'申请调用时间',
+              minWidth:'150px',
+              align:'right',
+            },
+        ],
         servicead_arr:[
             {
                 title:'请求方式：',
@@ -105,7 +193,7 @@ export default {
                 title:'响应示例：',
                 info:'',
                 type:'solt',
-                solt_name:'zd_t1able'
+                solt_name:'zd_code'
             },
             
         ],
@@ -137,6 +225,29 @@ export default {
         ],
     }
   },
+  watch:{
+      now_service(n,o){
+          if(n == 2){
+              this.getData()
+          }
+      }
+  },
+  mounted(){
+      
+  },
+  methods:{
+      getData() {
+      let url = "./static/antv.json";
+      this.$http
+        .get(url)
+        .then(response => {
+          this.datas = response.data.elements;
+        })
+        .catch(function(response) {
+          this.error = true;
+        });
+    },
+  }
 };
 </script>
 
@@ -233,5 +344,54 @@ export default {
     padding: 30px 10px 10px 10px;
     width: 100%;
 }
+.service_title{
+    font-size: 16px;
+	font-weight: bold;
+	color: #58617a;
+    text-align: left;
+    height: 40px;
+    line-height: 40px;
+    margin-top: -10px;
+    margin-bottom: 20px;
+}
+.service_title span{
+    display: inline-block;
+    width: 4px;
+	height: 16px;
+	background-color: #515fe7;
+	border-radius: 2px;
+    float: left;
+    margin-top: 13px;
+    margin-right: 15px;
+}
+.service_title_card{
+    width: 100%;
+    overflow: hidden;
+}
+.service_card{
+    width: calc((100% - 120px)/4);
+    margin-right: 40px;
+    float: left;
+}
+.service_title_card .service_card:nth-last-of-type(1){
+    margin-right: 0px;
+}
+.service_num{
+    text-align: center;
+    padding-top: 10px;
+}
+.service_num p:nth-of-type(1){
+    font-size: 36px;
+	color: #3f4f9c;
+    margin-bottom: 10px;
+}
+.service_num p:nth-of-type(2){
+    font-size: 16px;
+	color: #58617a;
+}
+.service_card_charts{
+    width: 100%;
+    margin-top: 30px;
+}
 </style>
 
diff --git a/static/data.json b/static/data.json
index fdd6e66bc5cd9830a4ab679202a959b84702c760..5cefa60650c68226dada4305afd168eeb9a062e1 100644
--- a/static/data.json
+++ b/static/data.json
@@ -94,6 +94,53 @@
                 ]
             }
         ],
+        "params_use_arr":[
+            {
+                "id": 1,
+                "dydw": "某某省某某市莫某城管局字符占位",
+                "dyr": "张先生",
+                "dyyw": "某某项目的决策指挥系统字符占位",
+                "ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
+                "cjms": "某某某应用于决策指挥系统占位字符",
+                "sqsj": "2016-05-02 12:20:35"
+            },
+            {
+                "id": 1,
+                "dydw": "某某省某某市莫某城管局字符占位",
+                "dyr": "张先生",
+                "dyyw": "某某项目的决策指挥系统字符占位",
+                "ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
+                "cjms": "某某某应用于决策指挥系统占位字符",
+                "sqsj": "2016-05-02 12:20:35"
+            },
+            {
+                "id": 1,
+                "dydw": "某某省某某市莫某城管局字符占位",
+                "dyr": "张先生",
+                "dyyw": "某某项目的决策指挥系统字符占位",
+                "ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
+                "cjms": "某某某应用于决策指挥系统占位字符",
+                "sqsj": "2016-05-02 12:20:35"
+            },
+            {
+                "id": 1,
+                "dydw": "某某省某某市莫某城管局字符占位",
+                "dyr": "张先生",
+                "dyyw": "某某项目的决策指挥系统字符占位",
+                "ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
+                "cjms": "某某某应用于决策指挥系统占位字符",
+                "sqsj": "2016-05-02 12:20:35"
+            },
+            {
+                "id": 1,
+                "dydw": "某某省某某市莫某城管局字符占位",
+                "dyr": "张先生",
+                "dyyw": "某某项目的决策指挥系统字符占位",
+                "ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
+                "cjms": "某某某应用于决策指挥系统占位字符",
+                "sqsj": "2016-05-02 12:20:35"
+            }
+        ],
         "creat_app":[
             {
                 "id": 1,