Skip to content

A
apaas-ui
Commit 5eb690c0 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

云资源+首页接口

parent 0e948e41
Show whitespace changes
Inline Side-by-side
Showing with 218 additions and 112 deletions
src/components/shop-card.vue
View file @ 5eb690c0
<template>
<div class="shop_card">
<div class="shop_car-img" v-if="data.img" @click="intoDetail">
<img :src="data.img" width="100%" />
<div class="shop_car-img" v-if="showImg" @click="intoDetail">
<img :src="data.cover" width="100%" />
</div>
<div class="shop_card-top">
<p
class="shop_card-title text_clip_2"
v-text="data.title"
:title="data.title"
v-text="data.name"
:title="data.name"
@click="intoDetail"
></p>
<p class="shop_card-text under_text">
<span
class="text_clip"
v-text="data.provider"
:title="data.provider"
></span>
<span class="text_clip" v-text="data.department_name" :title="data.department_name"></span>
<span>
<i class="el-icon-star-on"></i>
<span v-text="data.rate"></span>
<el-rate
v-model="data.score"
disabled
show-score
text-color="#ea7d19"
score-template="{value}"
></el-rate>
</span>
</p>
</div>
......@@ -28,16 +29,22 @@
</p>
<p class="shop_card-text update_time">
<img :src="require('@/assets/imgs/icon_shijian.png')" style="margin-right: 5px;" />
<span class="text_clip" v-text="'更新时间：' + data.updateTime"></span>
<span class="text_clip" v-text="'更新时间：' + helper.dateStringTransform(data.update_date)"></span>
</p>
<div class="shop_card-text access">
<span>
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span class="text_clip" v-text="data.viewCount + '次浏览'"></span>
<span
class="text_clip"
v-text="helper.numberFormat(data.view_count, 2) + (data.view_count > 10000 ? '万' : '') + '次浏览'"
></span>
</span>
<span>
<img :src="require('@/assets/imgs/icon_huoqu1.png')" />
<span class="text_clip" v-text="data.numberOfMonth + '次获取'"></span>
<span
class="text_clip"
v-text="helper.numberFormat(data.apply_count, 2) + (data.apply_count > 10000 ? '万' : '') + '次获取'"
></span>
</span>
</div>
</div>
......@@ -45,22 +52,32 @@
</template>
<script>
import helper from "@/services/helper";
export default {
props: {
data: {
type: Object,
required: true,
default: () => {}
},
detailPath: {
type: String,
required: true,
required: true
},
showImg: {
type: Boolean,
default: false
}
},
data() {
return {
helper
};
},
methods: {
intoDetail() {
this.$router.push(this.detailPath + this.data.id);
},
},
}
}
};
</script>
......
src/components/shop-cloud/shop-cloud.vue
View file @ 5eb690c0
......@@ -111,7 +111,6 @@
v-model="formNew.dataDisk"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择数量"
></el-input-number>
<div class="input_right">块</div>
......@@ -124,7 +123,6 @@
v-model="formNew.perDataDisk"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择容量"
></el-input-number>
<div class="input_right">GB</div>
......@@ -219,6 +217,7 @@
<el-col :span="22">
<el-form-item class="form_item">
<div class="form_item_title">申请文件：</div>
<info-list :list_arr="docTemplate" class="doc_template"></info-list>
<upload-file
:multiple="false"
:max="1"
......@@ -234,10 +233,10 @@
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="升级现有工作区域" name="1">
<el-tab-pane label="调整现有工作区域" name="1">
<el-row>
<el-col :span="11">
<div class="select_title">选择要进行升级的工作区域：</div>
<div class="select_title">选择要进行调整的工作区域：</div>
<div class="form_item">
<el-select v-model="workSpace" @change="getForm" placeholder="请选择">
<el-option
......@@ -256,7 +255,7 @@
<el-form ref="formNew" :model="formOld">
<el-row>
<el-col :span="24">
<div class="form_title">工作区域升级规格</div>
<div class="form_title">工作区域规格调整</div>
</el-col>
<el-col :span="24">
<div class="now_spec">当前规格：</div>
......@@ -279,7 +278,7 @@
</el-col>
<el-col :span="22">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">申请CPU升级至：</div>
<div class="form_item_title">申请CPU调整为：</div>
<el-select v-model="formOld.cpu" placeholder="请选择CPU使用量">
<el-option
v-for="item in optionsCPU"
......@@ -293,7 +292,7 @@
</el-col>
<el-col :span="22">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">申请内存升级至：</div>
<div class="form_item_title">申请内存调整为：</div>
<el-select v-model="formOld.memory" placeholder="请选择内存使用量">
<el-option
v-for="item in optionsRAM"
......@@ -307,7 +306,7 @@
</el-col>
<el-col :span="22">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">申请容器组升级至：</div>
<div class="form_item_title">申请容器组调整为：</div>
<el-input-number
v-model="formOld.containerGroup"
controls-position="right"
......@@ -318,6 +317,18 @@
<div class="input_right">个</div>
</el-form-item>
</el-col>
<el-col :span="22" v-if="dataDiskList.length != 0">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">调整数据盘：</div>
<table-um
ref="apply_service_state_table"
:headers="dataDiskHeaders"
:stripe="true"
:datas="dataDiskList"
@primary-del="delItem"
></table-um>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">增加数据盘：</div>
......@@ -325,7 +336,6 @@
v-model="formOld.dataDisk"
controls-position="right"
:min="0"
:max="10"
></el-input-number>
<div class="input_right">块</div>
</el-form-item>
......@@ -337,7 +347,6 @@
v-model="formOld.perDataDisk"
controls-position="right"
:min="0"
:max="10"
></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
......@@ -469,6 +478,7 @@
<el-col :span="22">
<el-form-item class="form_item">
<div class="form_item_title">申请文件：</div>
<info-list :list_arr="docTemplate" class="doc_template"></info-list>
<upload-file
:multiple="false"
:max="1"
......@@ -628,7 +638,7 @@
</div>
</div>
</div>
<span class="dia_item_title margin_top_10">升级至：</span>
<span class="dia_item_title margin_top_10">调整至：</span>
<div class="dia_block">
<span class="dia_item_all_title">工作区域：</span>
<div class="dia_block_item">
......@@ -650,6 +660,10 @@
class="dia_block_item_val"
>{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">删除数据盘：</span>
<span class="dia_block_item_val">{{ dataDiskList.join(",") }}</span>
</div>
</div>
<span class="dia_item_all_title">单个容器组规格：</span>
<div class="dia_block_item">
......@@ -700,11 +714,15 @@
<script>
import BlockRadius from "@/components/general/block-radius";
import uploadFile from "@/components/general/upload_file";
import UploadFile from "@/components/general/upload_file";
import TableUm from "@/components/table/table-um";
import InfoList from "@/components/infoList";
export default {
components: {
BlockRadius,
uploadFile
UploadFile,
TableUm,
InfoList
},
props: {
name: { type: String, default: "" }
......@@ -757,7 +775,7 @@ export default {
{ value: "16", label: "16" },
{ value: "32", label: "32" }
],
formShow: false,
formShow: true,
specArr: [
{ title: "CPU", val: "4", src: "ic_CPU" },
{ title: "内存", val: "4", src: "ic_neicun" },
......@@ -767,6 +785,14 @@ export default {
{ title: "CPU", max: "4", default: "2", src: "ic_CPU" },
{ title: "内存", max: "4", default: "2", src: "ic_neicun" }
],
docTemplate: [
{
title: "",
info: "工作区域申请文件标准模板.PDF",
url: "",
type: "down"
}
],
formOld: {
namespace: "",
workplace: "",
......@@ -805,7 +831,45 @@ export default {
},
ruleOld: [],
dialogVisible: false,
diaForm: {}
diaForm: {},
dataDiskHeaders: [
{
label: "数据盘容量",
prop: "capacity",
align: "center"
},
{
label: "部署的应用",
prop: "app",
align: "center"
},
{
label: "操作",
type: "Button",
align: "center",
btnList: [
{
type: "primary-del",
label: "删除"
}
]
}
],
dataDiskList: [
{
capacity: "www",
app: "wewaewa"
},
{
capacity: "www",
app: "wewaewa"
},
{
capacity: "www",
app: "wewaewa"
}
],
delDataDiskList: []
}),
mounted() {
this.getUser();
......@@ -924,6 +988,12 @@ export default {
this.workSpaceOptions = response.data.data;
}
});
},
delItem(val) {
console.log(val);
this.delDataDiskList.push(val.app);
let this.dataDiskList.find((v) => v.app === val.app);
if ()
}
}
};
......@@ -1141,6 +1211,9 @@ export default {
.val_has_2 {
margin-right: 20px;
}
.doc_template {
margin: 0 0 10px 20px;
}
</style>
<style>
.form_block .el-input .el-input__inner {
......
src/components/shop-list.vue
View file @ 5eb690c0
......@@ -9,7 +9,7 @@
<ul class="shop_cards">
<li v-for="(item, index) in data" :key="'card_' + index">
<shop-card :data="item" :detail-path="detailPath"></shop-card>
<shop-card :data="item" :showImg="showImg" :detail-path="detailPath"></shop-card>
</li>
</ul>
</div>
......@@ -20,33 +20,37 @@ import shopCard from "./shop-card";
export default {
components: {
shopCard,
shopCard
},
props: {
name: {
type: String,
required: true,
required: true
},
to: {
type: String,
required: true,
required: true
},
detailPath: {
type: String,
required: true,
required: true
},
data: {
type: Array,
required: true,
default: () => []
},
showImg: {
type: Boolean,
default: false
}
},
methods: {
goto() {
if (this.to) {
this.$router.push(this.to);
}
},
},
}
}
};
</script>
......
src/pages/service_shop/services_shop.vue
View file @ 5eb690c0
<template>
<div class="services_shop-container">
<div class="services_shop-carousel">
<el-carousel height="400px">
<el-carousel-item
v-for="(banner, index) in banners"
:key="'banner_' + index"
>
<img :src="banner" width="100%" />
<el-carousel height="400px" arrow="never">
<el-carousel-item v-for="(banner, index) in banners" :key="'banner_' + index">
<img :src="banner.image_url" width="100%" @click="goto(banner.url)" />
</el-carousel-item>
</el-carousel>
<ul class="services_shop-info">
......@@ -18,16 +15,12 @@
<div class="right-container">
<p v-text="item.name"></p>
<p>
<span v-text="item.value"></span>
<span v-text="item.unit"></span>
<span>{{ helper.numberFormat(item.value, 2) }}</span>
<span>{{ item.value > 10000 ? "万" : "" }}</span>
</p>
</div>
</li>
<li
class="info_line"
:key="'line_' + index"
v-if="index + 1 < servicesShopInfo.length"
></li>
<li class="info_line" :key="'line_' + index" v-if="index + 1 < servicesShopInfo.length"></li>
</template>
</ul>
</div>
......@@ -38,6 +31,7 @@
to="/shop/data_service_list"
detail-path="/shop/sjfwDetail/"
:data="hot_datas"
:showImg="false"
></shop-list>
<!-- 精品地图 -->
......@@ -46,6 +40,7 @@
to="/shop/space_time_service_list"
detail-path="/shop/skfwDetail/"
:data="map_datas"
:showImg="true"
></shop-list>
<!-- 综合应用 -->
......@@ -54,84 +49,90 @@
to="/shop/comprehensive_app_list"
detail-path="/shop/zhfwDetail/"
:data="comprehensive_datas"
:showImg="true"
></shop-list>
</div>
</template>
<script>
import shopList from "@/components/shop-list";
import helper from "@/services/helper";
export default {
components: {
shopList,
shopList
},
data: () => ({
banners: null,
servicesShopInfo: null,
hot_datas: [],
map_datas: [],
comprehensive_datas: [],
}),
methods: {
init() {
this.$http
.get("./static/serviceshop.json")
.then((response) => {
let data = response.body;
let servicesShopInfo = [
servicesShopInfo: [
{
name: "服务总数",
value: "",
unit: "万",
icon: require("@/assets/imgs/shop_ic_fuwuzs.png"),
value: 0,
icon: require("@/assets/imgs/shop_ic_fuwuzs.png")
},
{
name: "用户总数",
value: "",
unit: "万",
icon: require("@/assets/imgs/shop_ic_yonghuzs.png"),
value: 0,
icon: require("@/assets/imgs/shop_ic_yonghuzs.png")
},
{
name: "接入机构",
value: "",
unit: "",
icon: require("@/assets/imgs/shop_ic_jierujg.png"),
value: 0,
icon: require("@/assets/imgs/shop_ic_jierujg.png")
},
{
name: "接入系统",
value: "",
unit: "万",
icon: require("@/assets/imgs/shop_ic_jieruxt.png"),
value: 0,
icon: require("@/assets/imgs/shop_ic_jieruxt.png")
},
{
name: "服务请求次数",
value: ".2",
unit: "亿",
icon: require("@/assets/imgs/shop_ic_fuwuzs.png"),
value: 0,
icon: require("@/assets/imgs/shop_ic_fuwuzs.png")
}
],
hot_datas: [],
map_datas: [],
comprehensive_datas: [],
helper
}),
methods: {
init(type) {
this.$api.serviceShop.getFeaturedList({ type }).then(response => {
if (type == "hotdata") {
this.hot_datas = response.data.data;
} else if (type == "hgmap") {
this.map_datas = response.data.data;
} else if (type == "zhapp") {
this.comprehensive_datas = response.data.data;
}
});
},
];
this.banners = data.banners;
this.servicesShopInfo = servicesShopInfo.map((item) => {
let temp = data.servicesShopInfo.find((v) => v.name === item.name);
return {
...item,
value: temp && temp.value,
};
getBenner() {
this.$api.serviceShop.getBenner().then(response => {
this.banners = response.data.data;
});
this.hot_datas = data.hot_datas;
this.map_datas = data.map_datas;
this.comprehensive_datas = data.comprehensive_datas;
})
.catch(function(error) {
console.log(error);
},
getGeneralOverview() {
this.$api.serviceShop.getGeneralOverview().then(response => {
let data = response.data.data;
this.servicesShopInfo[0].value = data.service_num;
this.servicesShopInfo[1].value = data.person_num;
this.servicesShopInfo[2].value = data.org_num;
this.servicesShopInfo[3].value = data.system_num;
this.servicesShopInfo[4].value = data.request_num;
});
},
goto(page) {
window.location.href = page;
}
},
mounted() {
this.init();
},
this.getBenner();
this.init("hotdata");
this.init("hgmap");
this.init("zhapp");
}
};
</script>
......
src/request/api/service_shop.js
View file @ 5eb690c0
......@@ -64,6 +64,17 @@ businessArea=${params.businessArea}&developable=${params.developable}&orgSource=
submitShoppingCart() {
return axios.post(`/apaas/serviceapp/v3/shopcart/apply`, params);
},
// Service Shop Page
getFeaturedList(params) {
return axios.get(`/apaas/service/v3/recommend/show/featured/list/${params.type}`);
},
getBenner() {
return axios.get(`/apaas/service/v3/recommend/show/banners/list`);
},
getGeneralOverview() {
return axios.get(`/apaas/service/v3/statistics/other/index`);
}
}
export default serviceShop;
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