Skip to content

A
apaas-ui
Commit 10a05d3b authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

应用详情信息

parent f7dc396c
Show whitespace changes
Inline Side-by-side
Showing with 494 additions and 391 deletions
src/components/application-info.vue 0 → 100644
View file @ 10a05d3b
<template>
<div class="application_info" v-if="data">
<div class="application_title">
<span class="application_name" v-text="data.name"></span>
</div>
<div class="main_container">
<div class="main_container-left" v-if="data.img">
<img :src="data.img" width="460" />
</div>
<div class="main_container-right">
<ul class="application_base_info">
<li>
<span>应用开发者：</span>
<span v-text="data.providedBy"> </span>
</li>
<li>
<span>上线时间：</span>
<span v-text="data.publishTime"></span>
</li>
<li>
<span>部署次数：</span>
<span v-text="data.acquireCount"></span>
</li>
<li>
<span>应用类型：</span>
<span v-html="data.serviceType"></span>
</li>
<li>
<span>业务领域：</span>
<span v-text="data.dataField"></span>
</li>
</ul>
<div class="commodity_information">
<span>规&emsp;&emsp;格：</span>
<div class="btn_container">
<el-button
v-for="(item, index) in data.specifications"
:key="'specifications_' + index"
:type="
item.value === commodityData.specification
? 'primary'
: 'default'
"
@click="changeSpecification(item)"
>
{{ item.name }}
</el-button>
</div>
</div>
<div class="commodity_action">
<el-button type="warning" plain @click="addToCart">
加入购物车
</el-button>
<el-button type="warning" @click="applyImmediately">
立即申请
</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: () => null,
},
},
data: () => ({
commodityData: {
specification: 0,
},
}),
computed: {
specificationDescription() {
let obj =
this.data.specifications[this.commodityData.specification] || {};
return obj.description || "";
},
},
methods: {
changeSpecification({ value }) {
this.commodityData.specification = value;
},
addToCart() {
console.log("addToCart");
console.log(this.commodityData);
},
applyImmediately() {
console.log("applyImmediately");
console.log(this.commodityData);
},
},
};
</script>
<style scoped>
.application_info {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
}
.main_container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 25px;
}
.main_container-left {
padding: 3px;
background-color: #f9fafc;
margin-right: 30px;
}
.main_container-right {
flex-grow: 1;
}
.application_title {
display: flex;
justify-content: flex-start;
align-items: center;
}
.application_title > .application_name {
font-size: 22px;
font-weight: bold;
color: #0d1847;
line-height: 36px;
}
.application_base_info {
padding: 18px;
background-color: #f9fafc;
}
.application_base_info > li,
.commodity_information {
display: flex;
justify-content: flex-start;
align-items: flex-start;
font-size: 14px;
color: #242c43;
line-height: 20px;
}
.application_base_info > li:not(:first-child) {
margin-top: 18px;
}
.application_base_info > li > span:first-child,
.commodity_information > span:first-child {
flex-shrink: 0;
white-space: nowrap;
color: #8890a7;
}
.application_base_info > li > span:nth-child(2) {
color: #242c43;
}
.commodity_information {
margin-top: 30px;
}
.commodity_information > span:nth-child(2) {
color: #58617a;
}
.commodity_information > span:first-child {
line-height: 40px;
}
.commodity_information > .commodity_text {
flex-grow: 1;
padding: 13px 18px;
background-color: #f9fafc;
border-radius: 5px;
}
.commodity_information > .btn_container {
margin-bottom: -15px;
}
.commodity_information > .btn_container > .el-button,
.commodity_information > .btn_container > .el-input-number {
margin: 0 20px 15px 0;
}
.commodity_action {
margin-top: 50px;
text-align: right;
}
.commodity_action > .el-button {
width: 220px;
margin-left: 20px;
}
.application_info .el-button--primary {
background-color: #515fe7;
border-color: #515fe7;
}
.application_info .el-button--warning.is-plain {
background-color: #fcefd6;
border-color: #fac266;
color: #e56600;
}
.application_info .el-button--warning {
background-color: #e56600;
border-color: #e56600;
}
</style>
src/components/service-info.vue
View file @ 10a05d3b
<template>
<div class="sevice_info" v-if="data">
<div class="service_info" v-if="data">
<div class="service_title">
<span class="service_name" v-text="data.name"></span>
<span
class="service_type"
v-if="data.type"
v-text="data.type"
></span>
<span class="service_type" v-if="data.type" v-text="data.type"></span>
<span class="service_level" v-text="data.openLevel"></span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
......@@ -41,7 +37,7 @@
</li>
<li>
<span>服务类型：</span>
<span v-html="data.serviceType.join('&emsp;')"></span>
<span v-html="data.serviceType"></span>
</li>
<li>
<span>资源摘要：</span>
......@@ -147,7 +143,7 @@ export default {
</script>
<style scoped>
.sevice_info {
.service_info {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
......@@ -270,16 +266,16 @@ export default {
width: 220px;
margin-left: 20px;
}
.sevice_info .el-button--primary {
.service_info .el-button--primary {
background-color: #515fe7;
border-color: #515fe7;
}
.sevice_info .el-button--warning.is-plain {
.service_info .el-button--warning.is-plain {
background-color: #fcefd6;
border-color: #fac266;
color: #e56600;
}
.sevice_info .el-button--warning {
.service_info .el-button--warning {
background-color: #e56600;
border-color: #e56600;
}
......
src/components/service-tab-comments.vue
View file @ 10a05d3b
<template>
<div class="service_tab-comments">
<div class="service_tab-comments" v-if="data">
<comments-score :data="data.baseInfo"></comments-score>
<comments-list :data="data.list"></comments-list>
<comments-pagination
......@@ -25,12 +25,13 @@ export default {
commentsPagination,
},
props: {
data: {
type: Object,
url: {
type: String,
required: true,
},
},
data: () => ({
data: null,
pageSizes: [10, 50, 100],
pageSize: 10,
currentPage: 1,
......@@ -43,15 +44,24 @@ export default {
changeCurrentPage(value) {
this.currentPage = value;
},
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].comments;
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
created() {},
};
</script>
<style scoped>
.service_tab-comments {
padding: 35px 20px 20px !important;
}
.service_tab-comments > .comments_score,
.service_tab-comments > .comments_list {
padding: 0 30px;
......
src/components/service-tab-detail.vue
View file @ 10a05d3b
<template>
<ul class="service_tab-detail">
<ul class="service_tab-detail" v-if="data">
<li
class="detail-item"
v-for="(item, index) in data"
......@@ -54,14 +54,29 @@ export default {
serviceSteps,
},
props: {
data: {
type: Array,
url: {
type: String,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
data: () => ({
data: null,
}),
methods: {
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].detail;
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
};
</script>
......
src/components/service-tab-provider.vue
View file @ 10a05d3b
<template>
<div class="service_tab-provider">
<div class="service_tab-provider" v-if="data">
<div class="provider-left">
<el-avatar shape="square" :size="156" fit="cover" :src="data.img" />
</div>
......@@ -22,14 +22,29 @@
<script>
export default {
props: {
data: {
type: Object,
url: {
type: String,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
data: () => ({
data: null,
}),
methods: {
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].provider;
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
};
</script>
......
src/components/service-tab-specification.vue
View file @ 10a05d3b
<template>
<div class="service_tab-specification">
<div class="service_tab-specification" v-if="data">
<div class="specification_header">
<p>申请方式：</p>
<type-group v-model="type" :types="types"></type-group>
......@@ -19,12 +19,13 @@ export default {
typeGroup,
},
props: {
data: {
type: Array,
url: {
type: String,
required: true,
},
},
data: () => ({
data: null,
type: "",
types: [],
}),
......@@ -33,7 +34,13 @@ export default {
return this.types.length > 0 ? this.data[this.type].data : [];
},
},
mounted() {
methods: {
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].specification;
this.types = this.data.map((item, index) => ({
name: item.name,
value: index,
......@@ -42,6 +49,14 @@ export default {
if (this.types.length) {
this.type = 0;
}
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
};
</script>
......
src/components/service-tabs.vue
View file @ 10a05d3b
......@@ -2,31 +2,31 @@
<el-tabs
class="service_info_tab"
type="border-card"
v-model="serviceTabsActiveName"
v-model="tabName"
:stretch="true"
>
<el-tab-pane label="服务详情信息" name="first" v-if="detail">
<el-tab-pane label="服务详情信息" name="detail" v-if="detailUrl">
<service-tab-detail
class="service_info"
:data="detail"
:url="detailUrl"
></service-tab-detail>
</el-tab-pane>
<el-tab-pane label="规格定价" name="second" v-if="specification">
<el-tab-pane label="规格定价" name="specification" v-if="specificationUrl">
<service-tab-specification
class="service_info"
:data="specification"
:url="specificationUrl"
></service-tab-specification>
</el-tab-pane>
<el-tab-pane label="提供机构" name="third" v-if="provider">
<el-tab-pane label="提供机构" name="provider" v-if="providerUrl">
<service-tab-provider
class="service_info"
:data="provider"
:url="providerUrl"
></service-tab-provider>
</el-tab-pane>
<el-tab-pane label="服务评价信息" name="fourth" v-if="comments">
<el-tab-pane label="服务评价信息" name="comments" v-if="commentsUrl">
<service-tab-comments
class="service_info"
:data="comments"
:url="commentsUrl"
></service-tab-comments>
</el-tab-pane>
</el-tabs>
......@@ -46,50 +46,27 @@ export default {
serviceTabComments,
},
props: {
type: {
detailUrl: {
type: String,
required: true,
default: () => "",
},
specificationUrl: {
type: String,
default: () => "",
},
data: () => ({
serviceTabsActiveName: "first",
detail: null, // 服务详情信息
specification: null, // 规格定价
provider: null, // 提供机构
comments: null, // 服务评价信息
}),
methods: {
getDataFromApi(_url) {
return new Promise((resolve, reject) => {
this.$http
.get(_url)
.then((response) => {
resolve(response.body);
})
.catch(function(error) {
reject(error);
});
});
},
init() {
this.getDataFromApi(`/static/serviceInfo.json`).then(
(data) => {
let _data = data[this.type];
this.detail = _data.detail;
this.specification = _data.specification;
this.provider = _data.provider;
this.comments = _data.comments;
},
(error) => {
console.log(error);
}
);
providerUrl: {
type: String,
default: () => "",
},
commentsUrl: {
type: String,
default: () => "",
},
created() {
this.init();
},
data: () => ({
tabName: "detail",
}),
methods: {},
};
</script>
......@@ -103,6 +80,9 @@ export default {
padding: 35px 40px 40px;
box-sizing: border-box;
}
.service_tab-comments {
padding: 35px 20px 20px !important;
}
</style>
<style>
......
src/pages/sjfwDetail.vue
View file @ 10a05d3b
......@@ -10,7 +10,12 @@
<service-info :data="baseInfo"></service-info>
<service-tabs type="sjfw"></service-tabs>
<service-tabs
detail-url="sjfw"
specification-url="sjfw"
provider-url="sjfw"
comments-url="sjfw"
></service-tabs>
</div>
</template>
......
src/pages/skfwDetail.vue
View file @ 10a05d3b
......@@ -10,7 +10,12 @@
<service-info :data="baseInfo"></service-info>
<service-tabs type="skfw"></service-tabs>
<service-tabs
detail-url="skfw"
specification-url="skfw"
provider-url="skfw"
comments-url="skfw"
></service-tabs>
</div>
</template>
......
src/pages/yysdDetail.vue
View file @ 10a05d3b
......@@ -3,30 +3,35 @@
<div class="sevice_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item>服务超市</el-breadcrumb-item>
<el-breadcrumb-item>数据服务</el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
<el-breadcrumb-item>应用商店</el-breadcrumb-item>
<el-breadcrumb-item>应用详情信息</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- <servive-commodity-info
:service-data="serviceData"
></servive-commodity-info>
<application-info :data="baseInfo"></application-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> -->
<service-tabs
detail-url="yysd"
provider-url="yysd"
comments-url="yysd"
></service-tabs>
</div>
</template>
<script>
// import serviveCommodityInfo from "@/components/servive-commodity-info";
// import serviveTabsInfo from "@/components/servive-tabs-info";
import applicationInfo from "@/components/application-info";
import serviceTabs from "@/components/service-tabs";
export default {
components: {
// serviveCommodityInfo,
// serviveTabsInfo,
applicationInfo,
serviceTabs,
},
data: () => ({
serviceData: null,
baseInfo: null,
detailData: null,
specification: null,
provider: null,
}),
methods: {
getDataFromApi(_url) {
......@@ -42,9 +47,9 @@ export default {
});
},
init() {
this.getDataFromApi(`/static/serviceDetail.json`).then(
this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
({ yysd }) => {
this.serviceData = yysd;
this.baseInfo = yysd;
},
(error) => {
console.log(error);
......
src/pages/zhyyfwDetail.vue
View file @ 10a05d3b
......@@ -10,7 +10,12 @@
<service-info :data="baseInfo"></service-info>
<service-tabs type="zhyyfw"></service-tabs>
<service-tabs
detail-url="zhyyfw"
specification-url="zhyyfw"
provider-url="zhyyfw"
comments-url="zhyyfw"
></service-tabs>
</div>
</template>
......
static/serviceBaseInfo.json
View file @ 10a05d3b
......@@ -8,7 +8,7 @@
"publishTime": "2020-03-12 18:31:12",
"updatedTime": "2020-03-12 18:31:12",
"dataField": "经济建设",
"serviceType": ["专题数据服务", "企业专题数据服务"],
"serviceType": "专题数据服务 企业专题数据服务",
"resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务",
"specifications": [
{
......@@ -49,7 +49,7 @@
"publishTime": "2020-03-12 18:31:12",
"updatedTime": "2020-03-12 18:31:12",
"dataField": "经济建设",
"serviceType": ["时空云服务", "专题地图服务"],
"serviceType": "时空云服务 专题地图服务",
"resourceSummary": "提供贵州应急资源空间分布展示的专题地图服务，与MO地图合作进行地图资源的摘录和某新服务。",
"specifications": [
{
......@@ -89,7 +89,7 @@
"publishTime": "2020-03-12 18:31:12",
"updatedTime": "2020-03-12 18:31:12",
"dataField": "经济建设",
"serviceType": ["综合应用服务"],
"serviceType": "综合应用服务",
"resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
"specifications": [
{
......@@ -120,40 +120,20 @@
]
},
"yysd": {
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"name": "mapvideos V1.0",
"openLevel": "共享",
"viewCount": "99999",
"acquireCount": "9999",
"providedBy": "北京比格数据",
"publishTime": "2020-03-12 18:31:12",
"updatedTime": "2020-03-12 18:31:12",
"acquireCount": "9999",
"serviceType": "综合应用服务",
"dataField": "经济建设",
"serviceType": ["综合应用服务"],
"resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
"specifications": [
{
"name": "访问次数：20/日 访问量：100/日",
"value": 0,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
},
{
"name": "访问次数：200/日 访问量：1000/日",
"value": 1,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
},
{
"name": "访问次数：无上限 访问量：无上限",
"value": 2,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
}
],
"ways": [
{
"name": "按月购买",
"name": "申请获取应用镜像部署权限",
"value": 0
},
{
"name": "按年购买",
"name": "申请获取应用二次开发权限（需要先行升级为开发者用户）",
"value": 1
}
]
......
static/serviceInfo.json
View file @ 10a05d3b
......@@ -722,196 +722,69 @@
]
}
},
"yysd": {
"detail": [
{
"name": "获取流程",
"type": "step",
"value": ["服务申请", "信息填写", "审核确认", "服务获取"]
"value": ["应用申请", "信息填写", "审核确认", "应用获取"]
},
{
"name": "服务说明",
"name": "应用简介",
"type": "text",
"value": "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务"
"value": "本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作。"
},
{
"name": "服务属性",
"name": "功能简介",
"type": "list",
"value": [
{
"name": "大小",
"value": "66kb"
},
{
"name": "API",
"value": "Java"
},
{
"name": "用途",
"value": "即用型"
},
{
"name": "空间范围（WGS84）",
"value": "未设置"
},
{
"name": "标签",
"value": "T003 智能地图 T001"
"name": "1",
"value": "在地图上查找视频设备；"
},
{
"name": "制作单位",
"value": "应急管理厅"
"name": "2",
"value": "在地图上定位视频设备位置；"
},
{
"name": "离线模式",
"value": "禁用"
"name": "3",
"value": "调用多路视频的实时视频数据；"
},
{
"name": "附加代码",
"value": "无"
"name": "4",
"value": "操作球机视频设备。"
}
]
},
{
"name": "字段说明",
"type": "table",
"value": {
"datas": [
{
"zdbm": "errcode",
"zdlx": "字符串",
"zdmc": "错误码",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "errmsg",
"zdlx": "对象",
"zdmc": "错误信息",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "data",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "rows",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "time",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "count",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "item",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
}
]
},
{
"zdbm": "city",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "sPoint",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "ePoint",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
}
]
}
]
}
],
"columns": [
{
"prop": "zdbm",
"label": "字段编码",
"align": "center"
},
{
"prop": "zdlx",
"label": "字段类型",
"align": "center"
},
{
"prop": "zdmc",
"label": "字段名称"
},
{
"prop": "zdsm",
"label": "显示字段信息显示字段信息"
}
]
}
"name": "应用场景",
"type": "text",
"value": "针对应急突发事件，基于地图准确定位应急事件发生地点后，指挥人员希望能够快速获取事件发生地点周围一定范围内的所有信息资源，快速掌握现场情况，通过视频地图融合应用能够快速找到应急事件周围的视频监控设备后直接在地图上调用和查看实时视频了解现场情况，"
},
{
"name": "微服务响应列表",
"type": "table",
"value": {
"datas": [
"name": "应用参数",
"type": "list",
"value": [
{
"name": "apaas-mapvideos",
"description": "地图视频融合应用服务"
"name": "repository",
"value": "\"hub.wodcloud.com/apaas/apaas-mapvideos\""
},
{
"name": "apaas-mapvideos",
"description": "地图视频融合应用服务"
}
],
"columns": [
{
"prop": "name",
"label": "*微服务名称"
"name": "tag",
"value": "\"1.0.0\""
},
{
"prop": "description",
"label": "微服务描述",
"align": "center"
"name": "repository",
"value": "\"mapvideo.wodcloud.local\""
}
]
}
}
],
"specification": [
{
"gg": "访问次数：20/日 访问量：100/日",
"ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
},
{
"gg": "访访问次数：200/日 访问量：1000/日",
"ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
},
{
"gg": "访问次数：无上限 访问量",
"ggsm": ""
}
],
"provider": {
"name": "贵州省交通运输厅",
"provider": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"lxr": "张先生",
"lxdh": "010-66666666"
"person": "张先生",
"phone": "010-66666666"
},
"comments": {
"baseInfo": {
......@@ -932,11 +805,11 @@
},
{
"star": 2,
"percent": 10
"percent": 5
},
{
"star": 1,
"percent": 0
"percent": 5
}
]
},
......@@ -1013,4 +886,5 @@
}
]
}
}
}
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