From cd4915af47e5e7656d04dc314766e19ea566ae9c Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Thu, 7 May 2020 18:35:15 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B3=E8=AF=B7=E6=9C=8D=E5=8A=A1=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css              |   1 -
 src/components/infoList.vue           |  39 ++-
 src/components/process-card.vue       | 102 +++++++
 src/components/service-header.vue     | 105 +++++++
 src/pages/apply_service_detail.vue    | 376 ++++++++++++++++++++++++++
 src/pages/approval_service_detail.vue | 205 ++++++++++++++
 src/pages/serviceDetail.vue           | 103 +++----
 src/router/index.js                   |  10 +
 static/data.json                      |  18 ++
 9 files changed, 884 insertions(+), 75 deletions(-)
 create mode 100644 src/components/process-card.vue
 create mode 100644 src/components/service-header.vue
 create mode 100644 src/pages/apply_service_detail.vue
 create mode 100644 src/pages/approval_service_detail.vue

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 27feed0..bfe1296 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -68,7 +68,6 @@ html {
 body {
   margin: 0;
   font-family: PingFangSC-Regular, sans-serif;
-  font-size: 1rem;
 }
 ul {
   list-style: none;
diff --git a/src/components/infoList.vue b/src/components/infoList.vue
index ae07a20..6b69a90 100644
--- a/src/components/infoList.vue
+++ b/src/components/infoList.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="outlist">
       <div v-for="(item,index) in list_arr" :key="index+1100" class="list">
-          <p>{{item.title}}</p>
-          <p>{{item.info}}</p>
+          <p :class="item.prop&&item.prop=='title'?'service_title':''"><span class="line" v-if="item.prop&&item.prop=='title'"></span> {{item.title}}</p>
+          <p v-if="!(item.prop&&item.prop=='title')">{{item.info}}  <span v-if="item.type&&item.type=='down'" class="filebtn">下载文件</span> </p>
           <slot v-if="item.type&&item.type=='solt'" :name="item.solt_name"></slot>
       </div>
   </div>
@@ -32,5 +32,38 @@ export default {
 .outlist .list:nth-last-of-type(1){
     margin: 0;
 }
-
+.service_title{
+    font-size: 16px;
+    font-weight: bold;
+    color: #58617a;
+    text-align: left;
+    height: 40px;
+    line-height: 40px;
+    margin-top: -10px;
+    margin-bottom: 20px;
+    margin-left: -10px;
+}
+.service_title span{
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background-color: #515fe7;
+    border-radius: 2px;
+    float: left;
+    margin-top: 9px;
+    margin-right: 15px;
+}
+.filebtn{
+    width: 76px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    color: #e6ebfe;
+	background-color: #515fe7;
+    border-radius: 8px;
+    display: inline-block;
+    font-size: 14px;
+    margin-left: 20px;
+    cursor: pointer;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/process-card.vue b/src/components/process-card.vue
new file mode 100644
index 0000000..6415f2f
--- /dev/null
+++ b/src/components/process-card.vue
@@ -0,0 +1,102 @@
+<template>
+    <div class="out">
+        <div class="box" v-for="(item,index) in data" :key="index+3000" :style="!(item.arr&&item.arr.length!==0)||item.result==='审批未通过'?{border:'none'}:{}" :class="data[index+1]&&data[index+1].result==='审批中'?'dashedbd':''">
+            <div class="circle" :style="!(item.arr&&item.arr.length!==0)?{borderColor:'#ffc95c'}:item.result==='审批未通过'?{borderColor:'#de3b4b'}:{}"></div>
+            <div class="card" :style="item.result==='审批未通过'?{backgroundColor:'#fcfafa'}:{}">
+                <p class="card_title" :style="!(item.arr&&item.arr.length!==0)?{backgroundColor:'#fcefd6'}:item.result==='审批未通过'?{backgroundColor:'#f7d5d5'}:{}">
+                    <span>{{item.title}}</span>
+                    <span :style="!(item.arr&&item.arr.length!==0)?{color:'#ef9433'}:item.result==='审批未通过'?{color:'#e15260'}:{}">{{item.result}}</span>
+                </p>
+                <div class="card_contain" v-if="item.arr&&item.arr.length!==0">
+                    <info-list :list_arr="item.arr"></info-list>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import infoList from './infoList'
+export default {
+    props: ['data'],
+    components: {
+        infoList
+    },
+    data() {
+        return {
+
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.out{
+    width: 820px;
+    margin-top: 40px;
+}
+.box{
+    position: relative;
+    border-left: 2px solid #e3e5ef;
+    padding-left: 25px;
+    padding-bottom: 24px;
+}
+.circle{
+    width: 12px;
+	height: 12px;
+	background-color: #ffffff;
+	border: solid 4px #515fe7;
+    border-radius: 50%;
+    position: absolute;
+    top: -6px;
+    left: -6px;
+}
+.card{
+    width: 786px;
+	background-color: #f8f9fd;
+	border-radius: 12px;
+    overflow: hidden; 
+    transform: translateY(-24px);
+    
+}
+.card .card_title{
+    width: calc(100% - 40px);
+    height: 45px;
+    line-height: 45px;
+	background-color: #e5f0ff;
+    overflow: hidden;
+    padding: 0 20px;
+}
+.card .card_title span{
+    font-size: 16px;
+}
+.card .card_title span:nth-of-type(1){
+    float: left;
+    color: #58617a;
+}
+.card .card_title span:nth-of-type(2){
+    float: right;
+    color: #515fe7;
+}
+.card_contain{
+    padding: 20px;
+}
+.dashedbd{
+    border-left-style:dashed;
+}
+</style>
diff --git a/src/components/service-header.vue b/src/components/service-header.vue
new file mode 100644
index 0000000..5395adb
--- /dev/null
+++ b/src/components/service-header.vue
@@ -0,0 +1,105 @@
+<template>
+    <div class="info_logo">
+            <div class="logo"></div>
+            <div class="info">
+                <p class="info_title"><span>{{data.name}}</span> <span class="info_fix" v-if="data.fixed">我要修改</span></p>
+                <div class="info_detail">
+                    <p>
+                        <label v-for="(item,index) in data.first" :key="index+2000">{{item.name}}: <span :style="item.color?{color:item.color}:{}">{{item.text}}</span> </label>
+                    </p>
+                    <p>
+                        <label v-for="(item,index) in data.second" :key="index+2500">{{item.name}}: 
+                            <a v-if="item.name.indexOf('地址')!==-1" style="color:#515fe7;text-decoration: none;" target="_blank"  :href="item.text">{{item.text}}</a>
+                            <span v-else>{{item.text}}</span> 
+                        </label>
+                    </p>
+                </div>
+            </div>
+          </div>
+</template>
+
+<script>
+export default {
+    props:['data'],
+    components: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.info_logo{
+    overflow: hidden;
+    width: 100%;
+    margin-bottom: 15px;
+}
+.logo{
+    float: left;
+    width: 144px;
+	height: 144px;
+    background-color: #0f6ac7;
+    margin-right: 13px;
+}
+.info{
+    float: left;
+    width: calc(100% - 157px);
+}
+.info_title{
+    font-size: 18px;
+	font-weight: bold;
+	color: #0d1847;
+    padding-left: 10px;
+    margin-bottom: 26px;
+}
+.info_fix{
+    display: inline-block;
+    width: 76px;
+	height: 32px;
+	background-color: #515fe7;
+	border-radius: 8px;
+    font-size: 14px;
+	font-weight: normal;
+	color: #e6ebfe;
+    line-height: 32px;
+    text-align: center;
+    cursor: pointer;
+    float: right;
+}
+.info_detail{
+    width: 100%;
+	height: 96px;
+	background-color: #f6f7fb;
+	border-radius: 8px;
+    line-height: 40px;
+    padding: 8px 20px;
+    
+}
+.info_detail p{
+    color: #8890a7;
+}
+.info_detail span{
+    color: #242c43;
+    font-weight: 600;
+    margin-right: 48px;
+}
+</style>
diff --git a/src/pages/apply_service_detail.vue b/src/pages/apply_service_detail.vue
new file mode 100644
index 0000000..8567bcc
--- /dev/null
+++ b/src/pages/apply_service_detail.vue
@@ -0,0 +1,376 @@
+<template>
+    <div class="detail_contain">
+        <p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p>
+        <div class="info_contain">
+            <service-header :data="service_header_arr"></service-header>
+            <div class="type_box">
+                <div class="type_title">
+                    <div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}">{{item}}</div>
+                </div>
+                <div class="type_box_select">
+                    <info-list :list_arr="now_service==0?list_arr:now_service==1?servicead_arr:apply_arr">
+                      <table-um :headers="header_arr" url="min_service_params_arr" slot="zd_table"></table-um>
+                      <table-um :headers="header_arr" url="apply_params_arr" slot="apply_table"></table-um>
+                      <process-card :data="approval_arr1" slot="approval"></process-card>
+                    </info-list>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import serviceHeader from '../components/service-header'
+import infoList from '../components/infoList'
+import tableUm from '../components/table-um'
+import processCard from '../components/process-card'
+export default {
+    props: {
+
+    },
+    components: {
+        serviceHeader,
+        infoList,
+        tableUm,
+        processCard
+    },
+    data() {
+        return {
+            approval_arr:[
+                {
+                    title:'一级审批',
+                    result:'审批通过',
+                    arr:[
+                        {
+                            title:'审批时间：',
+                            info:'2020-02-28 15:23:45'
+                        },
+                        { 
+                            title:'审批单位：',
+                            info:'某某某城管局'
+                        },
+                        {
+                            title:'审批人：',
+                            info:'张先生'
+                        },
+                        {
+                            title:'审批意见：',
+                            info:'同意'
+                        },
+                    ]
+                },
+                {
+                    title:'二级审批',
+                    result:'审批通过',
+                    arr:[
+                        {
+                            title:'审批时间：',
+                            info:'2020-02-28 15:23:45'
+                        },
+                        { 
+                            title:'审批单位：',
+                            info:'某某某城管局'
+                        },
+                        {
+                            title:'审批人：',
+                            info:'张先生'
+                        },
+                        {
+                            title:'审批意见：',
+                            info:'同意'
+                        },
+                    ]
+                },
+                {
+                    title:'三级审批',
+                    result:'审批中',
+                },
+            ],
+            approval_arr1:[
+                {
+                    title:'一级审批',
+                    result:'审批通过',
+                    arr:[
+                        {
+                            title:'审批时间：',
+                            info:'2020-02-28 15:23:45'
+                        },
+                        { 
+                            title:'审批单位：',
+                            info:'某某某城管局'
+                        },
+                        {
+                            title:'审批人：',
+                            info:'张先生'
+                        },
+                        {
+                            title:'审批意见：',
+                            info:'同意'
+                        },
+                    ]
+                },
+                {
+                    title:'二级审批',
+                    result:'审批通过',
+                    arr:[
+                        {
+                            title:'审批时间：',
+                            info:'2020-02-28 15:23:45'
+                        },
+                        { 
+                            title:'审批单位：',
+                            info:'某某某城管局'
+                        },
+                        {
+                            title:'审批人：',
+                            info:'张先生'
+                        },
+                        {
+                            title:'审批意见：',
+                            info:'同意'
+                        },
+                    ]
+                },
+                {
+                    title:'三级审批',
+                    result:'审批未通过',
+                    arr:[
+                        {
+                            title:'审批时间：',
+                            info:'2020-02-28 15:23:45'
+                        },
+                        { 
+                            title:'审批单位：',
+                            info:'某某某城管局'
+                        },
+                        {
+                            title:'审批人：',
+                            info:'张先生'
+                        },
+                        {
+                            title:'审批意见：',
+                            info:'不同意，驳回。'
+                        },
+                    ]
+                },
+            ],
+            header_arr:[
+                {
+                    prop:'wfwmc',
+                    label:'微服务名称',
+                    minWidth:'20%',
+                    align:'left',
+                },
+                {
+                    prop:'jkzt',
+                    label:'健康状态',
+                    width:'120px',
+                    align:'center',
+                },
+                {
+                    prop:'jklj',
+                    label:'接口链接',
+                    minWidth:'40%',
+                    align:'center',
+                },
+                {
+                    prop:'wfwms',
+                    label:'微服务描述',
+                    minWidth:'40%',
+                    align:'left',
+                },
+            ],
+            service_arr:['服务基本信息','接口详细信息','申请审批信息'],
+            service_header_arr:{
+                name:'apaas-mapvideos',
+                first:[
+                    {
+                        name:'服务类型',
+                        text:'综合服务',
+                    },
+                    {
+                        name:'审批状态',
+                        text:'审批通过',
+                        color:'#515fe7',
+                    },
+                    {
+                        name:'服务到期时间',
+                        text:'2020-06-08 17:34:12',
+                    },
+                ],
+                second:[
+                    {
+                        name:'服务接口地址',
+                        text:'http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000',
+                    },
+                ],
+                fixed:false,
+            },
+            now_service:0,
+            list_arr:[
+                {
+                    title:'服务描述：',
+                    info:'地图视频融合服务'
+                },
+                {
+                    title:'服务领域：',
+                    info:'城市建设'
+                },
+                {
+                    title:'发布人：',
+                    info:'小北'
+                },
+                {
+                    title:'联系方式：',
+                    info:'18342803360'
+                },
+                {
+                    title:'所属组织：',
+                    info:'北京比格大数据有限公司'
+                },
+                {
+                    title:'开放程度：',
+                    info:'共享'
+                },
+                {
+                    title:'接口编码：',
+                    info:'chart'
+                },
+                {
+                    title:'注册发布时间：',
+                    info:'2019-02-17 21:09:23'
+                },
+            ],
+            servicead_arr:[
+                {
+                    title:'请求方式：',
+                    info:'post'
+                },
+                {
+                    title:'请求参数：',
+                    info:'无请求参数'
+                },
+                {
+                    title:'请求示例：',
+                    info:'无请求示例'
+                },
+                {
+                    title:'编码格式：',
+                    info:'UTF-8'
+                },
+                {
+                    title:'响应参数：',
+                    info:'',
+                    type:'solt',
+                    solt_name:'zd_table'
+                },
+            ],
+            apply_arr:[
+                {
+                    title:'申请信息',
+                    prop:'title'
+                },
+                {
+                    title:'场景描述：',
+                    info:'申请mapvideos服务用于贵州省疫情监控决策指挥系统。'
+                },
+                {
+                    title:'调用业务系统：',
+                    info:'决策指挥系统'
+                },
+                {
+                    title:'业务系统域名：',
+                    info:'https://apaas.wodcloud.com/'
+                },
+                {
+                    title:'申请文件：',
+                    info:'mapvideos申请书.docx',
+                    type:'down'
+                },
+                {
+                    title:'申请内容：',
+                    info:'',
+                    type:'solt',
+                    solt_name:'apply_table'
+                },
+                {
+                    title:'申请规格：',
+                    info:'访问次数：20/日，访问量：100/日'
+                },
+                {
+                    title:'申请时长：',
+                    info:'1年'
+                },
+                {
+                    title:'申请时间：',
+                    info:'2020-02-27 12:23:54'
+                },
+                {
+                    title:'审批信息', 
+                    prop:'title',
+                    type:'solt',
+                    solt_name:'approval'
+                },
+            ],
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.detail_contain{
+    width: 100%;
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
+.info_contain{
+    padding: 25px 20px;
+    background-color: #fff;
+    width: 100%;
+    box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 12px;
+}
+.now_page_title{
+    margin: 15px 0;
+    color: #898d9e;
+}
+.now_page_title span{
+    color: #242c43;
+}
+.type_box{
+    width: 100%;
+}
+.type_title{
+    width: 100%;
+    height: 65px;
+    line-height: 65px;
+    border-bottom: 2px solid #f4f7fc;
+}
+.type_select{
+    float: left;
+    width: auto;
+    margin-right: 40px;
+    height: 65px;
+    cursor: pointer;
+}
+.type_box_select{
+    padding: 30px 10px 10px 10px;
+    width: 100%;
+}
+</style>
diff --git a/src/pages/approval_service_detail.vue b/src/pages/approval_service_detail.vue
new file mode 100644
index 0000000..14ddddf
--- /dev/null
+++ b/src/pages/approval_service_detail.vue
@@ -0,0 +1,205 @@
+<template>
+    <div class="detail_contain">
+        <p class="now_page_title">我的服务 / 审批的服务 / <span>服务详情</span></p>
+        <div class="info_contain">
+            <service-header :data="service_header_arr"></service-header>
+            <div class="type_box">
+                <div class="type_title">
+                    <div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}">{{item}}</div>
+                </div>
+                <div class="type_box_select">
+                    <info-list :list_arr="now_service==0?list_arr:servicead_arr">
+                      <table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um>
+                      <!-- <table-um :headers="header_arr" url="apply_params_arr" slot="apply_table"></table-um> -->
+                      <!-- <process-card :data="approval_arr1" slot="approval"></process-card> -->
+                    </info-list>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import serviceHeader from '../components/service-header'
+import infoList from '../components/infoList'
+import tableUm from '../components/table-um'
+import processCard from '../components/process-card'
+export default {
+    props: {
+
+    },
+    components: {
+        serviceHeader,
+        infoList,
+        tableUm,
+        processCard
+    },
+    data() {
+        return {
+            header_arr:[
+                {
+                    prop:'zdmc',
+                    label:'字段名称',
+                    minWidth:'20%',
+                    align:'left',
+                },
+                {
+                    prop:'zdbm',
+                    label:'字段编码',
+                    width:'100px',
+                    align:'center',
+                },
+                {
+                    prop:'zdlx',
+                    label:'字段类型',
+                    width:'100px',
+                    align:'center',
+                },
+                {
+                    prop:'zdsm',
+                    label:'字段说明',
+                    minWidth:'30%',
+                    align:'left',
+                },
+                {
+                    prop:'zdsl',
+                    label:'字段示例数值',
+                    width:'120px',
+                    align:'left',
+                },
+            ],
+            
+            service_header_arr:{
+                name:'apaas-mapvideos',
+                first:[
+                    {
+                        name:'服务类型',
+                        text:'综合服务',
+                    },
+                    {
+                        name:'服务领域',
+                        text:'经济建设',
+                    },
+                    {
+                        name:'审批状态',
+                        text:'待审批',
+                        color:'#ef9433',
+                    },
+                ],
+                second:[
+                    {
+                        name:'申请时间',
+                        text:'2019-02-17 21:56:23',
+                    },
+                ],
+                fixed:false,
+            },
+            service_arr:['服务申请信息','服务审批'],
+            now_service:0,
+            list_arr:[
+                {
+                    title:'申请单位：',
+                    info:'北京比格大数据有限公司'
+                },
+                {
+                    title:'申请人：',
+                    info:'李子维'
+                },
+                {
+                    title:'申请人联系电话：',
+                    info:'18342803360'
+                },
+                {
+                    title:'场景描述：',
+                    info:'申请贵州省行政区划地图服务用于贵州省疫情监控决策指挥系统。'
+                },
+                {
+                    title:'调用业务系统：',
+                    info:'决策指挥系统'
+                },
+                {
+                    title:'业务系统域名：',
+                    info:'https://apaas.wodcloud.com/'
+                },
+                {
+                    title:'申请文件：',
+                    info:'xxxx文件名称.txt',
+                    type:'down'
+                },
+                {
+                    title:'申请内容：',
+                    info:'',
+                    type:'solt',
+                    solt_name:'zd_table'
+                },
+                {
+                    title:'申请时长：',
+                    info:'1年'
+                },
+                {
+                    title:'申请规格：',
+                    info:'访问次数：20/日，访问量：100/日'
+                },
+            ],
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.detail_contain{
+    width: 100%;
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
+.info_contain{
+    padding: 25px 20px;
+    background-color: #fff;
+    width: 100%;
+    box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 12px;
+}
+.now_page_title{
+    margin: 15px 0;
+    color: #898d9e;
+}
+.now_page_title span{
+    color: #242c43;
+}
+.type_box{
+    width: 100%;
+}
+.type_title{
+    width: 100%;
+    height: 65px;
+    line-height: 65px;
+    border-bottom: 2px solid #f4f7fc;
+}
+.type_select{
+    float: left;
+    width: auto;
+    margin-right: 40px;
+    height: 65px;
+    cursor: pointer;
+}
+.type_box_select{
+    padding: 30px 10px 10px 10px;
+    width: 100%;
+}
+</style>
diff --git a/src/pages/serviceDetail.vue b/src/pages/serviceDetail.vue
index c8a14d2..b741b14 100644
--- a/src/pages/serviceDetail.vue
+++ b/src/pages/serviceDetail.vue
@@ -2,23 +2,7 @@
   <div class="detail_contain">
       <p class="now_page_title">我的服务 / 注册发布的服务 / <span>服务详情</span></p>
       <div class="info_contain">
-          <div class="info_logo">
-            <div class="logo"></div>
-            <div class="info">
-                <p class="info_title"><span>地市GDP基础数据</span> <span class="info_fix">我要修改</span></p>
-                <div class="info_detail">
-                    <p>
-                        服务类型：<span>数据服务</span> 
-                        申请次数：<span>39</span> 
-                        调用次数：<span>25</span> 
-                        服务状态：<span>上架中</span> 
-                        </p>
-                    <p>
-                        服务接口地址：<a style="color:#515fe7;text-decoration: none;" target="_blank"  href="http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000">http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000</a> 
-                    </p>
-                </div>
-            </div>
-          </div>
+          <service-header :data="service_header_arr"></service-header>
           <div class="type_box">
               <div class="type_title">
                 <div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}">{{item}}</div>
@@ -82,6 +66,7 @@ import codes from "@/components/codes";
 import norCard from "@/components/card"
 import exampleIcon from "@/pages/example_icon"
 import Topology from "@/components/topology.vue";
+import serviceHeader from '../components/service-header'
 export default {
   components:{
       infoList,
@@ -89,11 +74,40 @@ export default {
       "v-apaas-code": codes,
       norCard,
       exampleIcon,
-      Topology
+      Topology,
+      serviceHeader
   },
   data() {
     return {
         service_arr:['服务基本信息','接口详细信息','服务运行状态'],
+        service_header_arr:{
+            name:'地市GDP基础数据',
+            first:[
+                {
+                    name:'服务类型',
+                    text:'数据服务',
+                },
+                {
+                    name:'申请次数',
+                    text:39,
+                },
+                {
+                    name:'调用次数',
+                    text:319,
+                },
+                {
+                    name:'服务状态',
+                    text:'上架中',
+                },
+            ],
+            second:[
+                {
+                    name:'服务接口地址',
+                    text:'http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000',
+                },
+            ],
+            fixed:true,
+        },
         now_service:0,
         datas:{},
         header_arr:[
@@ -272,59 +286,6 @@ export default {
 .now_page_title span{
     color: #242c43;
 }
-.info_logo{
-    overflow: hidden;
-    width: 100%;
-    margin-bottom: 15px;
-}
-.logo{
-    float: left;
-    width: 144px;
-	height: 144px;
-    background-color: #0f6ac7;
-    margin-right: 13px;
-}
-.info{
-    float: left;
-    width: calc(100% - 157px);
-}
-.info_title{
-    font-size: 18px;
-	font-weight: bold;
-	color: #0d1847;
-    padding-left: 10px;
-    margin-bottom: 26px;
-}
-.info_fix{
-    display: inline-block;
-    width: 76px;
-	height: 32px;
-	background-color: #515fe7;
-	border-radius: 8px;
-    font-size: 14px;
-	font-weight: normal;
-	color: #e6ebfe;
-    line-height: 32px;
-    text-align: center;
-    cursor: pointer;
-    float: right;
-}
-.info_detail{
-    width: 100%;
-	height: 96px;
-	background-color: #f6f7fb;
-	border-radius: 8px;
-    line-height: 40px;
-    padding: 8px 20px;
-    
-}
-.info_detail p{
-    color: #8890a7;
-}
-.info_detail span{
-    color: #242c43;
-    margin-right: 48px;
-}
 .type_box{
     width: 100%;
 }
diff --git a/src/router/index.js b/src/router/index.js
index 81668eb..cb01fa5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,16 @@ export default new Router({
               name: "serviceedit",
               component: () => import("@/pages/serviceEdit"),
             },
+            {
+              path: "/fwgl/applyserviceedit/:id",
+              name: "applyserviceedit",
+              component: () => import("@/pages/apply_service_detail"),
+            },
+            {
+              path: "/fwgl/approvalserviceedit/:id",
+              name: "approvalserviceedit",
+              component: () => import("@/pages/approval_service_detail"),
+            },
           ],
         },
       ],
diff --git a/static/data.json b/static/data.json
index 46004c0..8ae4599 100644
--- a/static/data.json
+++ b/static/data.json
@@ -364,6 +364,24 @@
                 "gzqysl": "10"
             }
         ],
+        "min_service_params_arr":[
+            {
+                "id":1,
+                "wfwmc":"apaas-mapvideos",
+                "jkzt":"N/A",
+                "jklj":"http://mapvideo.wodcloud.com/mapvideos/",
+                "wfwms":"地图视频融合应用服务"
+            }
+        ],
+        "apply_params_arr":[
+            {
+                "id":1,
+                "wfwmc":"apaas-mapvideos",
+                "jkzt":"N/A",
+                "jklj":"http://mapvideo.wodcloud.com/mapvideos/",
+                "wfwms":"地图视频融合应用服务"
+            }
+        ],
         "fwzc_fwcs": [
             {
                 "id": 1,
-- 
2.26.0