申请服务详情

cd4915af · 张俊 · cde5bb7a · cd4915af · cd4915af · cd4915af
Commit cd4915af authored May 07, 2020 by 张俊
9 changed files
--- 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;

--- a/src/components/infoList.vue
+++ b/src/components/infoList.vue
 <template>
  <div class="outlist">
      <div v-for="(item,index) in list_arr" :key="index+1100" class="list">
-          <p>{{item.title}}</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>{{item.info}}</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
--- a/src/components/process-card.vue
+++ b/src/components/process-card.vue
+<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>
--- a/src/components/service-header.vue
+++ b/src/components/service-header.vue
+<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>
--- a/src/pages/apply_service_detail.vue
+++ b/src/pages/apply_service_detail.vue
--- a/src/pages/approval_service_detail.vue
+++ b/src/pages/approval_service_detail.vue
+<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>
--- 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">
+          <service-header :data="service_header_arr"></service-header>
-            <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>
          <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%;
 }

--- 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"),
+            },
          ],
        },
      ],

--- 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,