Skip to content

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

服务详情页

parent 295fd996
Hide whitespace changes
Inline Side-by-side
Showing with 869 additions and 480 deletions
src/components/commodity.vue
View file @ 87806588
...@@ -5,11 +5,8 @@ ...@@ -5,11 +5,8 @@
<div class="com_title">{{ datas.productName }}</div> <div class="com_title">{{ datas.productName }}</div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div> <div v-if="datas.img">
<img <img :src="datas.img" class="commodity_img" />
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
class="commodity_img"
/>
</div> </div>
<div class="com_item"> <div class="com_item">
<span class="com_item_title">提供机构：</span> <span class="com_item_title">提供机构：</span>
...@@ -29,7 +26,15 @@ ...@@ -29,7 +26,15 @@
</div> </div>
<div class="com_item"> <div class="com_item">
<span class="com_item_title">服务类型：</span> <span class="com_item_title">服务类型：</span>
<span class="com_data">{{ datas.serviceType }}</span> <span class="com_data">
<span
v-for="(type, index) in datas.serviceType"
:key="'type_' + index"
style="margin-right': 5px;"
>
{{ type }}
</span>
</span>
</div> </div>
<div class="com_item"> <div class="com_item">
<span class="com_item_title">资源摘要：</span> <span class="com_item_title">资源摘要：</span>
...@@ -52,27 +57,31 @@ ...@@ -52,27 +57,31 @@
<div class="com_item"> <div class="com_item">
<span class="com_item_title">规格：</span> <span class="com_item_title">规格：</span>
<span class="com_data"> <span class="com_data">
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> <el-button
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> size="mini"
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> class="com_data_button_btm"
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> v-for="(item, index) in datas.specifications"
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> :key="'specifications_' + index"
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> >
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> {{ index + 1 + ". " + item.name }}
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> </el-button>
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
</span> </span>
</div> </div>
<div class="com_item"> <div class="com_item">
<span class="com_item_title">规格说明：</span> <span class="com_item_title">规格说明：</span>
<span class="com_data">{{ datas.specifications }}</span> <span class="com_data">{{
datas.specifications[0].description
}}</span>
</div> </div>
<div class="com_item"> <div class="com_item">
<span class="com_item_title">购买方式：</span> <span class="com_item_title">购买方式：</span>
<span class="com_data"> <span class="com_data">
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> <el-button size="mini" class="com_data_button_btm" round
<el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button> >超小按钮</el-button
>
<el-button size="mini" class="com_data_button_btm" round
>超小按钮</el-button
>
</span> </span>
</div> </div>
<div class="com_item"> <div class="com_item">
...@@ -85,7 +94,8 @@ ...@@ -85,7 +94,8 @@
:min="1" :min="1"
:max="12" :max="12"
label="描述文字" label="描述文字"
></el-input-number>&nbsp;月 ></el-input-number
>&nbsp;月
</span> </span>
</div> </div>
</el-col> </el-col>
...@@ -100,6 +110,7 @@ export default { ...@@ -100,6 +110,7 @@ export default {
datas: { datas: {
type: Object, type: Object,
default: { default: {
img: "",
productName: "", productName: "",
providedBy: "", providedBy: "",
releaseTime: "", releaseTime: "",
...@@ -110,19 +121,19 @@ export default { ...@@ -110,19 +121,19 @@ export default {
openLevel: "", openLevel: "",
views: "", views: "",
numberOfAcquisitions: "", numberOfAcquisitions: "",
specifications: "" specifications: "",
} },
} },
}, },
data: () => ({ data: () => ({
num: 1 num: 1,
}), }),
computed: {}, computed: {},
watch: {}, watch: {},
methods: { methods: {
handleChange() {} handleChange() {},
}, },
mounted() {} mounted() {},
}; };
</script> </script>
...@@ -170,4 +181,4 @@ export default { ...@@ -170,4 +181,4 @@ export default {
.com_data .el-input-number__increase { .com_data .el-input-number__increase {
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
} }
</style> </style>
\ No newline at end of file
src/components/servive-content.vue 0 → 100644
View file @ 87806588
<template>
<div class="sevice_content" v-if="serviceData">
<div class="service_title">
<span class="service_name" v-text="serviceData.name"></span>
<span class="service_type" v-if="serviceData.type" v-text="serviceData.type">共享</span>
<span class="service_level" v-text="serviceData.openLevel">共享</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="'浏览次数：' + serviceData.viewCount"></span>
</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="'获取次数：' + serviceData.acquireCount"></span>
</span>
</div>
<div class="main_content">
<div class="left_content" v-if="serviceData.img">
<img :src="serviceData.img" width="460" />
</div>
<div class="right_content">
<ul class="service_base_info">
<li>
<span>提供机构：</span>
<span v-text="serviceData.providedBy"> </span>
</li>
<li>
<span>发布时间：</span>
<span v-text="serviceData.publishTime"></span>
</li>
<li>
<span>更新时间：</span>
<span v-text="serviceData.updatedTime"></span>
</li>
<li>
<span>数据领域：</span>
<span v-text="serviceData.dataField"></span>
</li>
<li>
<span>服务类型：</span>
<span v-html="serviceData.serviceType.join('&emsp;')"></span>
</li>
<li>
<span>资源摘要：</span>
<span v-text="serviceData.resourceSummary"></span>
</li>
</ul>
<div class="commodity_information">
<span>规&emsp;&emsp;格：</span>
<div class="btn_container">
<el-button
v-for="(item, index) in serviceData.specifications"
:key="'specifications_' + index"
:type="
item.value === commodityData.specification
? 'primary'
: 'default'
"
@click="changeSpecification(item)"
>
{{ index + 1 + ". " + item.name }}
</el-button>
</div>
</div>
<div class="commodity_information">
<span>规格说明：</span>
<span class="commodity_text" v-text="specificationDescription"></span>
</div>
<div class="commodity_information">
<span>购买方式：</span>
<div class="btn_container">
<el-button
v-for="(item, index) in serviceData.ways"
:key="'way_' + index"
:type="item.value === commodityData.way ? 'primary' : 'default'"
@click="changeWay(item)"
>
按月购买
</el-button>
</div>
</div>
<div class="commodity_information">
<span>购买时长：</span>
<div class="btn_container">
<el-input-number
v-model="commodityData.duration"
:min="1"
:max="12"
></el-input-number>
</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: {
serviceData: {
type: Object,
default: () => null,
},
},
data: () => ({
commodityData: {
specification: 0,
way: 0,
duration: 1,
},
}),
computed: {
specificationDescription() {
let obj =
this.serviceData.specifications[this.commodityData.specification] || {};
return obj.description || "";
},
},
methods: {
changeSpecification({ value }) {
this.commodityData.specification = value;
},
changeWay({ value }) {
this.commodityData.way = value;
},
addToCart() {
console.log("addToCart");
console.log(this.commodityData);
},
applyImmediately() {
console.log("applyImmediately");
console.log(this.commodityData);
},
},
mounted() {},
};
</script>
<style scoped>
.sevice_content {
padding: 20px;
background-color: #fff;
}
.main_content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 25px;
}
.left_content {
padding: 3px;
background-color: #f9fafc;
margin-right: 30px;
}
.right_content {
flex-grow: 1;
}
.service_title {
display: flex;
justify-content: flex-start;
align-items: center;
}
.service_title > .service_name {
font-size: 22px;
font-weight: bold;
color: #0d1847;
line-height: 36px;
}
.service_title > .service_type {
flex-shrink: 0;
height: 24px;
padding: 0 12px;
border: 1px solid #5362ee;
background-color: #5362ee;
border-radius: 12px;
font-size: 12px;
color: #fff;
line-height: 22px;
margin-left: 10px;
}
.service_title > .service_level {
flex-shrink: 0;
height: 24px;
padding: 0 12px;
border: 1px solid #25bdb1;
border-radius: 12px;
font-size: 12px;
color: #25bdb1;
line-height: 22px;
margin-left: 10px;
margin-right: auto;
}
.service_title > .service_access_info {
flex-shrink: 0;
font-size: 14px;
color: #58617a;
margin-left: 20px;
}
.service_title > .service_access_info > * {
display: inline-block;
vertical-align: middle;
}
.service_title > .service_access_info > img {
width: 15px;
margin-right: 5px;
}
.service_base_info {
padding: 18px;
background-color: #f9fafc;
}
.service_base_info > li,
.commodity_information {
display: flex;
justify-content: flex-start;
align-items: flex-start;
font-size: 14px;
color: #242c43;
line-height: 20px;
}
.service_base_info > li:not(:first-child) {
margin-top: 18px;
}
.service_base_info > li > span:first-child,
.commodity_information > span:first-child {
flex-shrink: 0;
white-space: nowrap;
color: #8890a7;
}
.service_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;
}
.sevice_content .el-button--primary {
background-color: #515fe7;
border-color: #515fe7;
}
.sevice_content .el-button--warning.is-plain {
background-color: #fcefd6;
border-color: #fac266;
color: #e56600;
}
.sevice_content .el-button--warning {
background-color: #e56600;
border-color: #e56600;
}
</style>
src/components/servive-info.vue
View file @ 87806588
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
style="margin-top: 20px;" style="margin-top: 20px;"
> >
<el-tab-pane label="服务详情信息" name="first"> <el-tab-pane label="服务详情信息" name="first">
<ul class="service_info"> <ul class="service_info" v-if="fwxqxxDatas">
<li <li
class="fwxqxx_item" class="fwxqxx_item"
v-for="(item, index) in fwxqxxDatas" v-for="(item, index) in fwxqxxDatas"
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
</ul> </ul>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="规格定价" name="second"> <el-tab-pane label="规格定价" name="second">
<div class="service_info"> <div class="service_info" v-if="ggdjData">
<div class="ggdj_header"> <div class="ggdj_header">
<span>购买方式：</span> <span>购买方式：</span>
<el-button-group> <el-button-group>
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="提供机构" name="third"> <el-tab-pane label="提供机构" name="third">
<div class="service_info"> <div class="service_info" v-if="tgjgData">
<p class="tgjg_dw" v-text="tgjgData.name"></p> <p class="tgjg_dw" v-text="tgjgData.name"></p>
<div class="tgjg_img"> <div class="tgjg_img">
<img :src="tgjgData.img" width="100%" /> <img :src="tgjgData.img" width="100%" />
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="服务评价信息" name="fourth"> <el-tab-pane label="服务评价信息" name="fourth">
<div class="service_info"> <div class="service_info" v-if="ffpjxxData">
<div class="fwpjxx_score"> <div class="fwpjxx_score">
<div class="fwpjxx_score_left"> <div class="fwpjxx_score_left">
<p v-text="ffpjxxData.baseInfo.score + '分'"></p> <p v-text="ffpjxxData.baseInfo.score + '分'"></p>
...@@ -186,375 +186,45 @@ export default { ...@@ -186,375 +186,45 @@ export default {
}, },
data: () => ({ data: () => ({
serviceTabsActiveName: "first", serviceTabsActiveName: "first",
fwxqxxDatas: [ fwxqxxDatas: null, // 服务详情信息
{ ggdjData: null, // 规格定价
name: "获取流程", tgjgData: null, // 提供机构
type: "step", ffpjxxData: null, // 服务评价信息
},
{
name: "服务说明",
type: "text",
value:
"提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务",
},
{
name: "服务属性",
type: "list",
value: [
{
name: "大小",
value: "66kb",
},
{
name: "API",
value: "Java",
},
{
name: "用途",
value: "即用型",
},
{
name: "空间范围（WGS84）",
value: "未设置",
},
{
name: "标签",
value: "T003 智能地图 T001",
},
{
name: "制作单位",
value: "应急管理厅",
},
{
name: "离线模式",
value: "禁用",
},
{
name: "附加代码",
value: "无",
},
],
},
{
name: "字段说明",
type: "table",
value: {
datas: [
{
zdmc: "排名",
zdbm: "grade",
zdlx: "string",
zdms: "企业水路货物周转量排名",
slz: "1",
},
{
zdmc: "同比增长",
zdbm: "increase",
zdlx: "string",
zdms: "同比增长量信息",
slz: '"100%"',
},
],
columns: [
{
prop: "zdmc",
label: "字段名称",
},
{
prop: "zdbm",
label: "字段编码",
align: "center",
},
{
prop: "zdlx",
label: "字段类型",
align: "center",
},
{
prop: "zdms",
label: "字段描述",
},
{
prop: "slz",
label: "示例值",
align: "center",
},
],
},
},
{
name: "接口详情信息",
type: "table2",
value: {
datas: [
{
name: "接口地址",
value: "/cigservice/baseservice/fillder/turnover",
type: "text",
},
{
name: "请求方式",
value: "GET",
type: "text",
},
{
name: "编码格式",
value: "UTF-8",
type: "text",
},
{
name: "接口编码",
value: "turnover",
type: "text",
},
{
name: "接口描述",
value: "水路货运周转量排名",
type: "text",
},
{
name: "请求参数",
value: "无请求参数",
type: "text",
},
{
name: "响应参数",
value: "无响应参数",
type: "text",
},
{
name: "响应示例",
value: `
{
success: 1,
data: [
{
data: [
{
grade: "19",
increase: "100%"
}
],
column: [
{
title: "排名",
key: "grade"
},
{
title: "同比增长",
key: "increase"
},
],
},
],
}
`,
type: "code",
},
{
name: "请求示例NodeJs",
value: `
var http = require("http");
var options = {
"method": "GET",
"hostname": "www.giscloud.cx",
"port": "80",
"path": "/cigservice/baseservice/fillder/turnover",
"headers": {
"Content-Type":"application/x-www-form-urlencoded",
"charset":"utf-8"
}
};
var req = http.request(options, function (res) {
var chunks = [];
res.on("data", function (chunk) {
chunks.push(chunk);
});
res.on("end", function () {
var body = Buffer.concat(chunks);
console.log(body.toString());
});
});
req.end();
`,
type: "code",
},
],
},
},
{
name: "微服务响应列表",
type: "table",
value: {
datas: [
{
name: "apaas-mapvideos",
description: "地图视频融合应用服务",
},
{
name: "apaas-mapvideos",
description: "地图视频融合应用服务",
},
],
columns: [
{
prop: "name",
label: "*微服务名称",
},
{
prop: "description",
label: "微服务描述",
align: "center",
},
],
},
},
], // 服务详情信息
ggdjData: [
{
gg: "访问次数：20/日 访问量：100/日",
ggsm:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
},
{
gg: "访访问次数：200/日 访问量：1000/日",
ggsm:
"用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。",
},
{
gg: "访问次数：无上限 访问量",
ggsm: "",
},
], // 规格定价
tgjgData: {
name: "贵州省交通运输厅",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
lxr: "张先生",
lxdh: "010-66666666",
}, // 提供机构
ffpjxxData: {
baseInfo: {
score: 3.5,
total: 23,
starInfo: [
{
star: 5,
percent: 40,
},
{
star: 4,
percent: 30,
},
{
star: 3,
percent: 20,
},
{
star: 2,
percent: 10,
},
{
star: 1,
percent: 0,
},
],
},
ffpjxxList: [
{
name: "禺彊",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 5,
description: "这个应用非常实用，可以应用到多个业务领域！",
time: " 2019-12-12",
},
{
name: "海纳",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 5,
description:
"赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
],
}, // 服务评价信息
}), }),
methods: {}, methods: {
mounted() {}, 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(
({ fwxqxxDatas, ggdjData, tgjgData, ffpjxxData }) => {
this.fwxqxxDatas = fwxqxxDatas;
this.ggdjData = ggdjData;
this.tgjgData = tgjgData;
this.ffpjxxData = ffpjxxData;
},
(error) => {
console.log(error);
}
);
},
},
created() {
this.init();
},
}; };
</script> </script>
<style scoped> <style scoped>
.service_info_tab {
width: 70%;
margin: 0 auto;
}
.service_info { .service_info {
min-height: 500px; min-height: 500px;
padding: 10px 20px; padding: 10px 20px;
......
src/pages/example_commodity.vue
View file @ 87806588
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<h3>按原型大致做了一下，调优等后续</h3> <h3>按原型大致做了一下，调优等后续</h3>
<Commodity :datas="datas" /> <Commodity :datas="datas" />
<servive-info></servive-info> <servive-info></servive-info>
</block-radius> </block-radius>
</div> </div>
...@@ -23,17 +23,34 @@ export default { ...@@ -23,17 +23,34 @@ export default {
}, },
data: () => ({ data: () => ({
datas: { datas: {
productName: "地图视频融合服务", img: "",
providedBy: "北京比格数据", productName: "水路货物周转量情况",
providedBy: "贵州省交通运输厅",
releaseTime: "2020-03-12 18:31:12", releaseTime: "2020-03-12 18:31:12",
updated: "2020-03-12 18:31:12", updated: "2020-03-12 18:31:12",
dataField: "经济建设", dataField: "经济建设",
serviceType: "综合应用服务", serviceType: ["专题数据服务", "企业专题数据服务"],
resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务", resourceSummary: "提供水路货物周转量排名和同比增长的专题数据服",
openLevel: "共享", openLevel: "共享",
views: "99999", views: "99999",
numberOfAcquisitions: "99999", numberOfAcquisitions: "9999",
specifications: "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问", specifications: [
{
name: "访问次数：20/日 访问量：100/日",
description:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
},
{
name: "访问次数：200/日 访问量：1000/日",
description:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行200次免费访问，获取1000条数据记录。",
},
{
name: "访问次数：无上限 访问量：无上限",
description:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行任意次免费访问，获取数据记录无上限。",
},
],
}, },
}), }),
mounted() {}, mounted() {},
......
src/pages/sjfwDetail.vue
View file @ 87806588
<template> <template>
<div class="com_ex"> <div class="sevice_detail">
<block-radius> <div class="sevice_breadcrumb">
<el-breadcrumb separator="/" class="bread_crumb"> <el-breadcrumb separator="/" class="bread_crumb">
<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-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div>
<Commodity :datas="datas" /> <servive-content :service-data="serviceData"></servive-content>
<servive-info></servive-info> <servive-info></servive-info>
</block-radius>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveInfo from "@/components/servive-info"; import serviveInfo from "@/components/servive-info";
import serviveContent from "@/components/servive-content";
export default { export default {
components: { components: {
Commodity,
BlockRadius,
serviveInfo, serviveInfo,
serviveContent,
}, },
data: () => ({ data: () => ({
datas: { serviceData: {
productName: "地图视频融合服务", name: "水路货物周转量情况",
providedBy: "北京比格数据",
releaseTime: "2020-03-12 18:31:12",
updated: "2020-03-12 18:31:12",
dataField: "经济建设",
serviceType: "综合应用服务",
resourceSummary:
"提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
openLevel: "共享", openLevel: "共享",
views: "99999", viewCount: "99999",
numberOfAcquisitions: "99999", acquireCount: "9999",
specifications: providedBy: "贵州省交通运输厅",
"用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问", publishTime: "2020-03-12 18:31:12",
updatedTime: "2020-03-12 18:31:12",
dataField: "经济建设",
serviceType: ["专题数据服务", "企业专题数据服务"],
resourceSummary: "提供水路货物周转量排名和同比增长的专题数据服务",
specifications: [
{
name: "访问次数：20/日 访问量：100/日",
value: 0,
description:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
},
{
name: "访问次数：200/日 访问量：1000/日",
value: 1,
description:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行200次免费访问，获取1000条数据记录。",
},
{
name: "访问次数：无上限 访问量：无上限",
value: 2,
description:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行任意次免费访问，获取数据记录无上限。",
},
],
ways: [
{
name: "按月购买",
value: 0,
},
{
name: "按年购买",
value: 1,
},
],
}, },
}), }),
mounted() {},
methods: {}, methods: {},
mounted() {},
}; };
</script> </script>
<style scoped> <style scoped>
.com_ex { .sevice_detail {
margin-top: 100px; max-width: 1200px;
padding: 20px; margin: 0 auto;
}
.sevice_breadcrumb > .el-breadcrumb {
line-height: 42px;
} }
</style> </style>
src/pages/skfwDetail.vue
View file @ 87806588
<template> <template>
<div class="com_ex"> <div class="sevice_detail">
<block-radius> <div class="sevice_breadcrumb">
<el-breadcrumb separator="/" class="bread_crumb"> <el-breadcrumb separator="/" class="bread_crumb">
<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-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div>
<Commodity :datas="datas" /> <servive-content :service-data="serviceData"></servive-content>
<servive-info></servive-info> <servive-info></servive-info>
</block-radius>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveInfo from "@/components/servive-info"; import serviveInfo from "@/components/servive-info";
import serviveContent from "@/components/servive-content";
export default { export default {
components: { components: {
Commodity,
BlockRadius,
serviveInfo, serviveInfo,
serviveContent,
}, },
data: () => ({ data: () => ({
datas: { serviceData: {
productName: "地图视频融合服务", img:
providedBy: "北京比格数据", "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
releaseTime: "2020-03-12 18:31:12", name: "贵州应急资源地图微服务",
updated: "2020-03-12 18:31:12", type: "Map Service",
dataField: "经济建设",
serviceType: "综合应用服务",
resourceSummary:
"提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
openLevel: "共享", openLevel: "共享",
views: "99999", viewCount: "99999",
numberOfAcquisitions: "99999", acquireCount: "9999",
specifications: providedBy: "贵州省应急管理厅",
"用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问", publishTime: "2020-03-12 18:31:12",
updatedTime: "2020-03-12 18:31:12",
dataField: "经济建设",
serviceType: ["时空云服务", "专题地图服务"],
resourceSummary: "提供贵州应急资源空间分布展示的专题地图服务，与MO地图合作进行地图资源的摘录和某新服务。",
specifications: [
{
name: "访问次数：20/日 访问量：100/日",
value: 0,
description:
"用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问",
},
{
name: "访问次数：200/日 访问量：1000/日",
value: 1,
description:
"用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问",
},
{
name: "访问次数：无上限 访问量：无上限",
value: 2,
description:
"用户服务申请通过审核确认后，每日可对应急地图进行免费访问",
},
],
ways: [
{
name: "按月购买",
value: 0,
},
{
name: "按年购买",
value: 1,
},
],
}, },
}), }),
mounted() {}, mounted() {},
...@@ -48,8 +76,11 @@ export default { ...@@ -48,8 +76,11 @@ export default {
</script> </script>
<style scoped> <style scoped>
.com_ex { .sevice_detail {
margin-top: 100px; max-width: 1200px;
padding: 20px; margin: 0 auto;
}
.sevice_breadcrumb > .el-breadcrumb {
line-height: 42px;
} }
</style> </style>
src/pages/zhyyfwDetail.vue
View file @ 87806588
<template> <template>
<div class="com_ex"> <div class="sevice_detail">
<block-radius> <div class="sevice_breadcrumb">
<el-breadcrumb separator="/" class="bread_crumb"> <el-breadcrumb separator="/" class="bread_crumb">
<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-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div>
<Commodity :datas="datas" /> <servive-content :service-data="serviceData"></servive-content>
<servive-info></servive-info> <servive-info></servive-info>
</block-radius>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveInfo from "@/components/servive-info"; import serviveInfo from "@/components/servive-info";
import serviveContent from "@/components/servive-content";
export default { export default {
components: { components: {
Commodity,
BlockRadius,
serviveInfo, serviveInfo,
serviveContent,
}, },
data: () => ({ data: () => ({
datas: { serviceData: {
productName: "地图视频融合服务", img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "地图视频融合服务",
openLevel: "共享",
viewCount: "99999",
acquireCount: "9999",
providedBy: "北京比格数据", providedBy: "北京比格数据",
releaseTime: "2020-03-12 18:31:12", publishTime: "2020-03-12 18:31:12",
updated: "2020-03-12 18:31:12", updatedTime: "2020-03-12 18:31:12",
dataField: "经济建设", dataField: "经济建设",
serviceType: "综合应用服务", serviceType: ["综合应用服务"],
resourceSummary: resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
"提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务", specifications: [
openLevel: "共享", {
views: "99999", name: "访问次数：20/日 访问量：100/日",
numberOfAcquisitions: "99999", value: 0,
specifications: description:
"用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问", "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问",
},
{
name: "访问次数：200/日 访问量：1000/日",
value: 1,
description:
"用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问",
},
{
name: "访问次数：无上限 访问量：无上限",
value: 2,
description:
"用户服务申请通过审核确认后，每日可对应急地图进行免费访问",
},
],
ways: [
{
name: "按月购买",
value: 0,
},
{
name: "按年购买",
value: 1,
},
],
}, },
}), }),
mounted() {}, mounted() {},
...@@ -48,8 +75,11 @@ export default { ...@@ -48,8 +75,11 @@ export default {
</script> </script>
<style scoped> <style scoped>
.com_ex { .sevice_detail {
margin-top: 100px; max-width: 1200px;
padding: 20px; margin: 0 auto;
}
.sevice_breadcrumb > .el-breadcrumb {
line-height: 42px;
} }
</style> </style>
static/serviceInfo.json 0 → 100644
View file @ 87806588
{
"fwxqxxDatas": [
{
"name": "获取流程",
"type": "step"
},
{
"name": "服务说明",
"type": "text",
"value": "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务"
},
{
"name": "服务属性",
"type": "list",
"value": [
{
"name": "大小",
"value": "66kb"
},
{
"name": "API",
"value": "Java"
},
{
"name": "用途",
"value": "即用型"
},
{
"name": "空间范围（WGS84）",
"value": "未设置"
},
{
"name": "标签",
"value": "T003 智能地图 T001"
},
{
"name": "制作单位",
"value": "应急管理厅"
},
{
"name": "离线模式",
"value": "禁用"
},
{
"name": "附加代码",
"value": "无"
}
]
},
{
"name": "字段说明",
"type": "table",
"value": {
"datas": [
{
"zdmc": "排名",
"zdbm": "grade",
"zdlx": "string",
"zdms": "企业水路货物周转量排名",
"slz": "1"
},
{
"zdmc": "同比增长",
"zdbm": "increase",
"zdlx": "string",
"zdms": "同比增长量信息",
"slz": "\"100%\""
}
],
"columns": [
{
"prop": "zdmc",
"label": "字段名称"
},
{
"prop": "zdbm",
"label": "字段编码",
"align": "center"
},
{
"prop": "zdlx",
"label": "字段类型",
"align": "center"
},
{
"prop": "zdms",
"label": "字段描述"
},
{
"prop": "slz",
"label": "示例值",
"align": "center"
}
]
}
},
{
"name": "接口详情信息",
"type": "table2",
"value": {
"datas": [
{
"name": "接口地址",
"value": "/cigservice/baseservice/fillder/turnover",
"type": "text"
},
{
"name": "请求方式",
"value": "GET",
"type": "text"
},
{
"name": "编码格式",
"value": "UTF-8",
"type": "text"
},
{
"name": "接口编码",
"value": "turnover",
"type": "text"
},
{
"name": "接口描述",
"value": "水路货运周转量排名",
"type": "text"
},
{
"name": "请求参数",
"value": "无请求参数",
"type": "text"
},
{
"name": "响应参数",
"value": "无响应参数",
"type": "text"
},
{
"name": "响应示例",
"value": {
"success": 1,
"data": [
{
"data": [
{
"grade": "19",
"increase": "100%"
}
],
"column": [
{
"title": "排名",
"key": "grade"
},
{
"title": "同比增长",
"key": "increase"
}
]
}
]
},
"type": "code"
},
{
"name": "请求示例NodeJs",
"value": "var http = require('http');",
"type": "code"
}
]
}
},
{
"name": "微服务响应列表",
"type": "table",
"value": {
"datas": [
{
"name": "apaas-mapvideos",
"description": "地图视频融合应用服务"
},
{
"name": "apaas-mapvideos",
"description": "地图视频融合应用服务"
}
],
"columns": [
{
"prop": "name",
"label": "*微服务名称"
},
{
"prop": "description",
"label": "微服务描述",
"align": "center"
}
]
}
}
],
"ggdjData": [
{
"gg": "访问次数：20/日 访问量：100/日",
"ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
},
{
"gg": "访访问次数：200/日 访问量：1000/日",
"ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
},
{
"gg": "访问次数：无上限 访问量",
"ggsm": ""
}
],
"tgjgData": {
"name": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"lxr": "张先生",
"lxdh": "010-66666666"
},
"ffpjxxData": {
"baseInfo": {
"score": 3.5,
"total": 23,
"starInfo": [
{
"star": 5,
"percent": 40
},
{
"star": 4,
"percent": 30
},
{
"star": 3,
"percent": 20
},
{
"star": 2,
"percent": 10
},
{
"star": 1,
"percent": 0
}
]
},
"ffpjxxList": [
{
"name": "禺彊",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 5,
"description": "这个应用非常实用，可以应用到多个业务领域！",
"time": " 2019-12-12"
},
{
"name": "海纳",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 5,
"description": "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞！",
"time": " 2019-12-12"
}
]
}
}
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