Skip to content

A
apaas-ui
Commit cd4915af authored by 张俊's avatar 张俊
Browse files
Options

申请服务详情

parent cde5bb7a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 884 additions and 75 deletions
src/assets/css/index.css
View file @ cd4915af
......@@ -68,7 +68,6 @@ html {
body {
margin: 0;
font-family: PingFangSC-Regular, sans-serif;
font-size: 1rem;
}
ul {
list-style: none;
......
src/components/infoList.vue
View file @ cd4915af
<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
src/components/process-card.vue 0 → 100644
View file @ cd4915af
<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>
src/components/service-header.vue 0 → 100644
View file @ cd4915af
<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>
src/pages/apply_service_detail.vue 0 → 100644
View file @ cd4915af
This diff is collapsed.
src/pages/approval_service_detail.vue 0 → 100644
View file @ cd4915af
<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>
src/pages/serviceDetail.vue
View file @ cd4915af
......@@ -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%;
}
......
src/router/index.js
View file @ cd4915af
......@@ -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"),
},
],
},
],
......
static/data.json
View file @ cd4915af
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment