Skip to content

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

合并

parents c4a104dc 6537e94e
Show whitespace changes
Inline Side-by-side
Showing with 1076 additions and 839 deletions
src/assets/imgs/ic_true.png
View replaced file @ c4a104dc View file @ efd742cf
src/assets/imgs/ic_true.png

1.51 KB | W: | H:

src/assets/imgs/ic_true.png

1.51 KB | W: | H:

src/assets/imgs/ic_true.png
src/assets/imgs/ic_true.png
src/assets/imgs/ic_true.png
src/assets/imgs/ic_true.png
  • 2-up
  • Swipe
  • Onion skin
src/components/apass-list.vue
View file @ efd742cf
......@@ -3,6 +3,11 @@
<div class="apass_breadcrumb">
<slot name="breadcrumb"></slot>
</div>
<div class="main-container top_container" v-if="$slots.top">
<slot name="top"></slot>
</div>
<div class="main-container">
<div class="header-container" v-if="!hideHeader">
<div class="header-left apass_button">
......@@ -18,6 +23,28 @@
"
></i>
</el-button>
<div
v-for="(item, index) in selectFilter"
:key="'select_' + index"
class="select_container"
>
<span class="select_title" v-text="item.name"></span>
<el-select
v-model="item.value"
placeholder="请选择"
@change="listAction"
>
<el-option
v-for="(v, i) in item.options"
:key="'select_' + index + '_option_' + i"
:label="v.name"
:value="v.value"
>
</el-option>
</el-select>
</div>
<slot name="header-left"></slot>
</div>
<div class="header-center">
......@@ -51,7 +78,7 @@
<list-table
:header="listHeader"
:data="listData"
:padding-left="35"
:padding-left="listPaddingLeft"
></list-table>
</div>
......@@ -84,6 +111,10 @@ export default {
type: Array,
default: () => [],
},
otherFilter: {
type: Array,
default: () => [],
},
listHeader: {
type: Array,
default: () => [],
......@@ -116,8 +147,21 @@ export default {
currentPage: 1,
timer: null,
pageSizes: [15, 50, 100],
selectFilter: [],
}),
methods: {
initOtherFilter() {
this.otherFilter.forEach((item) => {
this.$set(this.filter, item.prop, item.default);
this.selectFilter.push({
name: item.name,
prop: item.prop,
value: item.default,
options: item.options,
});
});
},
searchAction(value) {
this.listAction();
},
......@@ -140,8 +184,15 @@ export default {
}
this.timer = setTimeout(() => {
let selectFilter = {};
this.selectFilter.forEach((item) => {
selectFilter[item.prop] = item.value;
});
this.$emit("list-action", {
...this.filter,
...selectFilter,
keyword: this.searchValue,
size: this.pageSize,
page: this.currentPage,
......@@ -150,6 +201,10 @@ export default {
},
},
mounted() {
if (this.otherFilter && this.otherFilter.length > 0) {
this.initOtherFilter();
}
this.listAction();
},
};
......@@ -182,7 +237,17 @@ export default {
justify-content: space-between;
align-items: center;
}
.header-container .el-button + .el-button {
.header-container .select_container {
display: inline-block;
vertical-align: middle;
}
.header-container .select_container .select_title {
font-size: 14px;
color: #242c43;
margin-right: 10px;
}
.header-container .el-button + .el-button,
.header-container .select_container + .select_container {
margin-left: 25px;
}
.apass_filter {
......@@ -195,4 +260,8 @@ export default {
.list-container {
flex-grow: 1;
}
.top_container {
flex-grow: 0;
margin-bottom: 20px;
}
</style>
src/components/apass-table.vue
View file @ efd742cf
<template>
<div class="apass_table">
<el-table :data="data" :height="height">
<el-table-column :width="Math.max(paddingLeft - 10, 0)" v-if="icon"></el-table-column>
<el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
<el-table-column
v-for="(item, index) in header"
:label="item.label"
......@@ -62,6 +62,33 @@
<span class="use" v-if="item.prop=='cpu'">{{scope.row['cpu_use']}}.00mm</span>
<span class="use" v-if="item.prop=='mermoy'">{{scope.row['memory_use']}}.00Mi</span>
</div>
<div v-else-if="item.type === 'image'" class="img_content">
<img
:src="item.getImage && item.getImage(scope.row)"
:width="item.size"
/>
</div>
<div
v-else-if="
item.type === 'tooltip' &&
item.getLength &&
item.getLength(scope.row) > 1
"
>
<el-tooltip
placement="right-start"
popper-class="apass_table_tooltip"
>
<div
slot="content"
v-html="item.getContent && item.getContent(scope.row)"
></div>
<span
v-text="(item.getText && item.getText(scope.row)) + '..'"
style="text-decoration: underline;color: #515fe7;"
></span>
</el-tooltip>
</div>
<span
v-else
v-text="
......@@ -89,10 +116,6 @@ export default {
type: [Number, String],
default: () => 50,
},
icon:{
type: Boolean,
default: true,
},
height:{
type: Number,
default: null,
......@@ -162,4 +185,17 @@ export default {
font-size: 12px;
color: rgba(26, 34, 54, 1);
}
.apass_table_tooltip {
font-size: 12px;
line-height: 20px;
}
</style>
<style scoped>
.img_content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
src/components/image-detail.vue
View file @ efd742cf
......@@ -10,14 +10,14 @@
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="作者" align="left">
<el-table-column label="作者" width="200" align="left">
<template slot-scope="scope">
{{ scope.row.creator }}
{{ scope.row.author }}
</template>
</el-table-column>
<el-table-column label="创建时间" width="180" align="center">
<template slot-scope="scope">
{{ scope.row.created }}
{{ dateTransform(scope.row.created) }}
</template>
</el-table-column>
<el-table-column label="大小" align="center">
......@@ -27,7 +27,10 @@
</el-table-column>
<el-table-column label="漏洞" width="160" align="center">
<template slot-scope="scope">
<image-bugs :data="scope.row.scan_overview"></image-bugs>
<image-bugs
v-if="scope.row.scan_overview"
:data="scope.row.scan_overview"
></image-bugs>
</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center">
......@@ -54,6 +57,7 @@
</template>
<script>
import helper from "@/services/helper";
import apassDialog from "./apass-dialog";
import imageBugs from "./image-bugs";
......@@ -62,260 +66,14 @@ export default {
apassDialog,
imageBugs,
},
props: {
image: {
type: Object,
default: () => null,
},
},
data: () => ({
imageData: [
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 5,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 4,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 3,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 4,
},
severity: 1,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
{
address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
scan_overview: {
components: {
summary: [
{ count: 2, severity: 2 },
{ count: 25, severity: 1 },
],
total: 27,
severity_count: 2,
},
severity: 2,
creation_time: "2020-05-27T10:17:40.671664Z",
update_time: "2020-07-02T22:39:27.97828Z",
},
size: 20950567,
name: "1.0",
creator: "RamHsu",
created: "1994-03-26 11:10:00",
},
],
imageData: [],
dialogInfo: {
title: "",
msg: "",
submit: null,
},
image: null,
}),
computed: {
title() {
......@@ -323,23 +81,47 @@ export default {
},
},
methods: {
showDialog() {
showDialog(image) {
this.image = image;
this.imageData = [];
this.getImageDetail();
this.$refs.listdialog.show();
},
downloadAction(item) {
console.log("download " + item.name);
let evtUuid = Math.random()
.toString(16)
.substr(3);
let evtSource = new EventSource(
`/apaas/hubApi/image/subscribe/${evtUuid}`
);
evtSource.addEventListener("message", (event) => {
console.log(event);
});
const a = document.createElement("a");
a.setAttribute("download", "");
a.setAttribute(
"href",
`/apaas/hubApi/image/download/publish/${evtUuid}?image=${this.image.name}&tag=${item.name}&packageType=tar`
);
a.click();
},
deleteAction(item) {
this.dialogInfo.title = "";
this.dialogInfo.msg = "是否删除该镜像？";
this.dialogInfo.submit = () => {
console.log("delete " + item.name);
/* this.$http
.delete(`/apaas/hubApi/image/del/${item.name}`)
this.$http
.delete(
`/apaas/hubApi/image/image/${this.image.name}/tags/${item.name}`
)
.then((response) => {
if (response.data.success == 1) {
//
this.$message({
message: `删除成功`,
type: "success",
});
this.getImageDetail();
} else {
this.$message({
message: `删除失败`,
......@@ -353,13 +135,26 @@ export default {
message: `删除失败`,
type: "warning",
});
}); */
});
};
this.$refs.actiondialog.show();
},
getSize(value = 0) {
return (value / 1024 / 1024).toFixed(2) + "MB";
},
dateTransform(datestr) {
return helper.dateStringTransform(datestr);
},
getImageDetail() {
this.$http
.get(`/apaas/hubApi/image/imageDetails/${this.image.name}`)
.then(({ data }) => {
this.imageData = data.data || [];
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
......
src/components/menu.vue
View file @ efd742cf
<template>
<div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt class="logo" />
<div
style="float:right;cursor: pointer;position:relative;"
class="user_hover"
>
<span
v-if="userInfo.user_name && userInfo.user_name != ''"
class="user"
>{{ userInfo.user_name }}</span
>
<div style="float:right;cursor: pointer;position:relative;" class="user_hover">
<span v-if="userInfo.user_name && userInfo.user_name != ''" class="user">{{ userInfo.user_name }}</span>
<span v-else @click="gotopage('login')" class="user">请登录</span>
<img
:class="userInfo.picture_path ? 'user_pic' : 'user_default'"
:src="
<img :class="userInfo.picture_path ? 'user_pic' : 'user_default'" :src="
userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
"
/>
<div
v-if="userInfo.user_name && userInfo.user_name != ''"
class="user_menu"
>
<div
v-for="(item, index) in user_arr"
:key="index + 700"
@click="gotopage(item.path)"
>
" />
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="user_menu">
<div v-for="(item, index) in user_arr" :key="index + 700" @click="gotopage(item.path)">
{{ item.name }}
</div>
</div>
<div
v-if="userInfo.user_name && userInfo.user_name != ''"
class="sj"
></div>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj"></div>
</div>
<div
style="float:right;cursor: pointer;position:relative;"
class="shop_hover"
@click="gotopage('/shop/shopping_cart')"
>
<div style="float:right;cursor: pointer;position:relative;" class="shop_hover" @click="gotopage('/shop/shopping_cart')">
<div class="car">
<el-badge
v-if="menuCartNum != 0"
:value="menuCartNum"
:max="99"
class="number"
></el-badge>
<el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge>
<img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
</div>
<div
v-if="userInfo.user_name && userInfo.user_name != ''"
class="shop_menu"
>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="shop_menu">
<div class="shop_list_title">最近加入的服务：</div>
<div
v-for="(item, index) in shopping_list"
:key="'shopping' + index"
class="shop_list_cell shop_line"
>
<div v-for="(item, index) in shopping_list" :key="'shopping' + index" class="shop_list_cell shop_line">
<img :src="item.service.cover" class="shop_img" />
<div class="shop_cell_msgs">
<p @click="getDetail(item.id)" class="shop_cell_name over_one">
{{
item.service_id == 0
? item.application.app_name
: item.service.name
}}
{{ item.service_id == 0 ? item.application.app_name : item.service.name }}
</p>
<p class="shop_cell_msg bover_one">
{{
item.service_id == 0
? item.application.ywly
: item.service.sectors_name
}}
{{ item.service_id == 0 ? item.application.ywly : item.service.sectors_name }}
</p>
<p class="shop_cell_msg over_one">
{{
item.service_id == 0
? item.application.org
: item.service.organization_name
}}
{{ item.service_id == 0 ? item.application.org : item.service.organization_name }}
</p>
</div>
<div>
<img
@click.stop="deleteItem(item.id)"
src="../assets/imgs/ic_delete.png"
alt
/>
<img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
</div>
</div>
<div class="shop_footer">
<el-button @click="settlement" size="small" class="shop_settlement"
>去购物车申请结算</el-button
>
<el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
</div>
</div>
<div
v-if="userInfo.user_name && userInfo.user_name != ''"
class="shop_sj"
></div>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="shop_sj"></div>
</div>
<div style="float:right">
<div
v-for="(item, index) in menu_arr"
:key="index + 200"
class="menu_box user_hover"
@click="navAction(item.visit_url)"
:style="{ color: now_menu == item.visit_url ? '#fff' : '' }"
>
<div v-for="(item, index) in menu_arr" :key="index + 200" class="menu_box user_hover" @click="navAction(item.visit_url)" :style="{ color: now_menu == item.visit_url ? '#fff' : '' }">
{{ item.menu_name }}
<div
class="user_menu"
v-if="item.Child && item.Child.length"
style="left: 30px;"
>
<div
v-for="(v, indexs) in item.Child"
:key="indexs + 700"
@click.stop="gotoChildPage(v, item.visit_url)"
>
<div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;">
<div v-for="(v, indexs) in item.Child" :key="indexs + 700" @click.stop="gotoChildPage(v, item.visit_url)">
{{ v.menu_name }}
</div>
</div>
<div
class="sj"
v-if="item.Child && item.Child.length"
style="left: 60px;"
></div>
<div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
<div class="bottom_show" v-if="now_menu == item.visit_url"></div>
</div>
</div>
......@@ -146,10 +71,10 @@ export default {
{ name: "消息通知", path: "/user/message" },
{ name: "收银中心", path: "" },
{ name: "关于BD-aPaaS", path: "" },
{ name: "退出登录", path: "logout" },
{ name: "退出登录", path: "logout" }
],
shopping_list: [],
menuCartNum: 0,
menuCartNum: 0
};
},
mounted() {
......@@ -162,15 +87,16 @@ export default {
},
userInfo() {
return this.$store.state.userInfo || {};
},
}
},
watch: {
getMenuCartState(newVal) {
this.getList();
},
}
},
methods: {
gotopage(n) {
console.log("function gotopage,menu test:" + n);
if (n == "logout") {
window.location.href = "/iam/api/logout";
} else if (n == "login") {
......@@ -185,7 +111,7 @@ export default {
},
deleteItem(id) {
let query = [id];
this.$api.serviceShop.delShoppingCart(query).then((response) => {
this.$api.serviceShop.delShoppingCart(query).then(response => {
this.getList();
});
},
......@@ -195,26 +121,29 @@ export default {
this.$router.push({ name: "shoppingCart" });
},
navAction(path) {
this.$router.push(path);
console.log("function navAction,menu test:" + path);
this.now_menu = path;
window.sessionStorage.setItem("menuVisitUrl", path);
this.$router.push(path);
},
gotoChildPage(v, parent) {
console.log("function gotoChildPage,menu test:" + v + "|" + parent);
if (v.visit_url) {
if (v.visit_url == "/fwgl/" || v.visit_url == "/yygl/") {
this.$router.push(v.visit_url + this.$store.getters.level);
} else if (parent == "/services_shop") {
this.$router.push(v.visit_url);
this.$store.commit("serviceShopMenuAct", v.visit_url);
this.$router.push(v.visit_url);
} else {
this.$router.push(v.visit_url);
}
this.now_menu = parent;
window.sessionStorage.setItem("menuVisitUrl", parent);
}
},
getList() {
this.$api.serviceShop.getShoppingCart().then((response) => {
this.$api.serviceShop.getShoppingCart().then(response => {
if (response.data.success == "1") {
this.menuCartNum = response.data.data.valid
? response.data.data.valid.length
......@@ -233,15 +162,15 @@ export default {
this.now_menu = visit_url ? visit_url : "/services_shop";
},
getNowMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
if (response.data.success == 1) {
this.menu_arr =
(response.data.data[0] && response.data.data[0].Child) || [];
this.getMenuIndex();
}
});
},
},
}
}
};
</script>
......
src/components/service-tabs/service-tab-comments.vue
View file @ efd742cf
......@@ -50,11 +50,11 @@ export default {
score: 0,
starInfo: [
{
star: 1,
star: 5,
percent: 0,
},
{
star: 2,
star: 4,
percent: 0,
},
{
......@@ -62,11 +62,11 @@ export default {
percent: 0,
},
{
star: 4,
star: 2,
percent: 0,
},
{
star: 5,
star: 1,
percent: 0,
},
],
......@@ -79,7 +79,7 @@ export default {
return {
score: data.avgScore || 0,
starInfo: [1, 2, 3, 4, 5].map((star) => {
starInfo: [5,4,3,2,1].map((star) => {
let percent =
this.commentsTtotal > 0
? (((data.scoreStatic && data.scoreStatic[star]) || 0) /
......
src/components/service-tabs/service-tabs.vue
View file @ efd742cf
......@@ -13,7 +13,7 @@
></service-tab-detail>
</el-tab-pane>
<!-- 规格定价 -->
<!-- 规格说明 -->
<el-tab-pane
:label="specificationTitle"
name="specification"
......@@ -25,7 +25,7 @@
></service-tab-specification>
</el-tab-pane>
<!-- 提供机构 -->
<!-- 提供组织 -->
<el-tab-pane :label="providerTitle" name="provider" v-if="providerData">
<service-tab-provider
class="service_info"
......@@ -65,11 +65,11 @@ export default {
},
specificationTitle: {
type: String,
default: () => "规格定价",
default: () => "规格说明",
},
providerTitle: {
type: String,
default: () => "提供机构",
default: () => "提供组织",
},
commentsTitle: {
type: String,
......
src/components/shop-card.vue
View file @ efd742cf
<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 @ efd742cf
......@@ -53,11 +53,7 @@
<el-col :span="22">
<el-form-item prop="workplacedesc" class="form_item">
<div class="form_item_title">描述信息：</div>
<el-input
type="textarea"
v-model="formNew.workplacedesc"
placeholder="请输入工作区域描述信息"
></el-input>
<el-input type="textarea" v-model="formNew.workplacedesc" placeholder="请输入工作区域描述信息"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
......@@ -67,66 +63,38 @@
<el-form-item class="form_item input_has_right">
<div class="form_item_title">CPU：</div>
<el-select v-model="formNew.cpu" placeholder="请选择CPU使用量">
<el-option
v-for="item in optionsCPU"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<el-option v-for="item in optionsCPU" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div class="input_right">核</div>
<div class="input_right input_right_top">核</div>
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">内存：</div>
<el-select v-model="formNew.memory" placeholder="请选择内存使用量">
<el-option
v-for="item in optionsRAM"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<el-option v-for="item in optionsRAM" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div class="input_right">GB</div>
<div class="input_right input_right_top">GB</div>
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">容器组：</div>
<el-input-number
v-model="formNew.containerGroup"
controls-position="right"
:min="0"
:max="24"
placeholder="取值范围[0，24]"
></el-input-number>
<el-input-number v-model="formNew.containerGroup" controls-position="right" :min="0" :max="24" placeholder="取值范围[0，24]"></el-input-number>
<div class="input_right">个</div>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">数据盘（可选）：</div>
<el-input-number
v-model="formNew.dataDisk"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择数量"
></el-input-number>
<el-input-number v-model="formNew.dataDisk" controls-position="right" :min="0" placeholder="请选择数量"></el-input-number>
<div class="input_right">块</div>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">每块数据盘容量：</div>
<el-input-number
v-model="formNew.perDataDisk"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择容量"
></el-input-number>
<el-input-number v-model="formNew.perDataDisk" controls-position="right" :min="0" placeholder="请选择容量"></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
......@@ -139,26 +107,14 @@
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">最高</div>
<el-input-number
v-model="formNew.perCPUs"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择CPU最高使用量"
></el-input-number>
<el-input-number v-model="formNew.perCPUs" controls-position="right" :min="0" :max="10" placeholder="请选择CPU最高使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">默认</div>
<el-input-number
v-model="formNew.perCPU"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择CPU默认使用量"
></el-input-number>
<el-input-number v-model="formNew.perCPU" controls-position="right" :min="0" :max="10" placeholder="请选择CPU默认使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
......@@ -168,26 +124,14 @@
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">最高</div>
<el-input-number
v-model="formNew.perRAMs"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择内存最高使用量"
></el-input-number>
<el-input-number v-model="formNew.perRAMs" controls-position="right" :min="0" :max="10" placeholder="请选择内存最高使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">默认</div>
<el-input-number
v-model="formNew.perRAM"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择内存默认使用量"
></el-input-number>
<el-input-number v-model="formNew.perRAM" controls-position="right" :min="0" :max="10" placeholder="请选择内存默认使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
......@@ -197,36 +141,17 @@
<el-col :span="22">
<el-form-item class="form_item input_has_right_select">
<div class="form_item_title">申请时长：</div>
<el-input-number
v-model="formNew.appDuration"
controls-position="right"
:min="0"
></el-input-number>
<el-select
v-model="formNew.durType"
class="input_right_select"
placeholder="请选择申请时长"
>
<el-option
v-for="item in durationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<el-input-number v-model="formNew.appDuration" controls-position="right" :min="0"></el-input-number>
<el-select v-model="formNew.durType" class="input_right_select" placeholder="请选择申请时长">
<el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item class="form_item">
<div class="form_item_title">申请文件：</div>
<upload-file
:multiple="false"
:max="1"
type="zip"
:readOnly="false"
:drag="true"
@getNewList="getNewList"
></upload-file>
<info-list :list_arr="docTemplate" class="doc_template"></info-list>
<upload-file :multiple="false" :max="1" type="zip" :readOnly="false" :drag="true" @getNewList="getNewList"></upload-file>
</el-form-item>
</el-col>
</el-row>
......@@ -234,18 +159,13 @@
</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
v-for="(item, index) in workSpaceOptions"
:key="index"
:label="item.namespace"
:value="index"
></el-option>
<el-option v-for="(item, index) in workSpaceOptions" :key="index" :label="item.namespace" :value="index"></el-option>
</el-select>
</div>
</el-col>
......@@ -256,89 +176,60 @@
<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>
<div class="now_spec_cards">
<div
class="now_spec_card"
v-for="(item, index) in specArr"
:key="index + 'spec'"
>
<img
class="now_spec_card_img"
:src="require('@/assets/imgs/' + item.src + '.png')"
/>
<div class="now_spec_card" v-for="(item, index) in specArr" :key="index + 'spec'">
<img class="now_spec_card_img" :src="require('@/assets/imgs/' + item.src + '.png')" />
<span class="now_spec_card_title">{{ item.title }}</span>
<span
class="now_spec_card_val"
>{{ item.val + " " + (item.title == "CPU" ? "核" : item.title == "内存" ? "GB" : "个") }}</span>
<span class="now_spec_card_val">{{ item.val + " " + (item.title == "CPU" ? "核" : item.title == "内存" ? "GB" : "个") }}</span>
</div>
</div>
</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"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<el-option v-for="item in optionsCPU" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div class="input_right">核</div>
<div class="input_right input_right_top">核</div>
</el-form-item>
</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"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<el-option v-for="item in optionsRAM" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div class="input_right">GB</div>
<div class="input_right input_right_top">GB</div>
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">申请容器组升级至：</div>
<el-input-number
v-model="formOld.containerGroup"
controls-position="right"
:min="0"
:max="24"
placeholder="取值范围[0，24]"
></el-input-number>
<div class="form_item_title">申请容器组调整为：</div>
<el-input-number v-model="formOld.containerGroup" controls-position="right" :min="0" :max="24" placeholder="取值范围[0，24]"></el-input-number>
<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>
<el-input-number
v-model="formOld.dataDisk"
controls-position="right"
:min="0"
:max="10"
></el-input-number>
<el-input-number v-model="formOld.dataDisk" controls-position="right" :min="0"></el-input-number>
<div class="input_right">块</div>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">每块数据盘容量：</div>
<el-input-number
v-model="formOld.perDataDisk"
controls-position="right"
:min="0"
:max="10"
></el-input-number>
<el-input-number v-model="formOld.perDataDisk" controls-position="right" :min="0"></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
......@@ -348,24 +239,13 @@
<el-col :span="24">
<div class="now_spec">当前规格：</div>
<div class="now_spec_cards">
<div
class="now_rqz_card"
v-for="(item, index) in rqzArr"
:key="index + 'rqz'"
>
<img
class="now_rqz_card_img"
:src="require('@/assets/imgs/' + item.src + '.png')"
/>
<div class="now_rqz_card" v-for="(item, index) in rqzArr" :key="index + 'rqz'">
<img class="now_rqz_card_img" :src="require('@/assets/imgs/' + item.src + '.png')" />
<span class="now_rqz_card_title">{{ item.title }}</span>
<div class="now_rqz_card_val_div">
<span
class="now_rqz_card_val"
>最高&nbsp;{{ item.max }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
<span class="now_rqz_card_val">最高&nbsp;{{ item.max }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
<br />
<span
class="now_rqz_card_val"
>默认&nbsp;{{ item.default }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
<span class="now_rqz_card_val">默认&nbsp;{{ item.default }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
</div>
</div>
</div>
......@@ -376,26 +256,14 @@
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">最高</div>
<el-input-number
v-model="formOld.perCPUs"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置CPU最高使用量"
></el-input-number>
<el-input-number v-model="formOld.perCPUs" controls-position="right" :min="0" :max="10" placeholder="请设置CPU最高使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">默认</div>
<el-input-number
v-model="formOld.perCPU"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置CPU默认使用量"
></el-input-number>
<el-input-number v-model="formOld.perCPU" controls-position="right" :min="0" :max="10" placeholder="请设置CPU默认使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
......@@ -405,26 +273,14 @@
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">最高</div>
<el-input-number
v-model="formOld.perRAMs"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置内存最高使用量"
></el-input-number>
<el-input-number v-model="formOld.perRAMs" controls-position="right" :min="0" :max="10" placeholder="请设置内存最高使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item class="form_item input_has_left_right">
<div class="input_left">默认</div>
<el-input-number
v-model="formOld.perRAM"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置内存默认使用量"
></el-input-number>
<el-input-number v-model="formOld.perRAM" controls-position="right" :min="0" :max="10" placeholder="请设置内存默认使用量"></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
......@@ -434,10 +290,7 @@
<div class="now_spec">当前规格：</div>
<div class="now_spec_card_time">
<div>
<img
class="now_spec_card_time_img"
:src="require('@/assets/imgs/ic_shijian.png')"
/>
<img class="now_spec_card_time_img" :src="require('@/assets/imgs/ic_shijian.png')" />
<span class="now_spec_card_time_title">当前工作区域到期时间</span>
<span class="now_spec_card_time_val">2020-05-05 08:00:00</span>
</div>
......@@ -447,36 +300,17 @@
<el-col :span="22">
<el-form-item class="form_item input_has_right_select">
<div class="form_item_title">申请续期：</div>
<el-input-number
v-model="formOld.appDuration"
controls-position="right"
:min="0"
></el-input-number>
<el-select
v-model="formOld.durType"
class="input_right_select"
placeholder="请选择续期时长"
>
<el-option
v-for="item in durationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<el-input-number v-model="formOld.appDuration" controls-position="right" :min="0"></el-input-number>
<el-select v-model="formOld.durType" class="input_right_select" placeholder="请选择续期时长">
<el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item class="form_item">
<div class="form_item_title">申请文件：</div>
<upload-file
:multiple="false"
:max="1"
type="zip"
:readOnly="false"
:drag="true"
@getNewList="getNewListOld"
></upload-file>
<info-list :list_arr="docTemplate" class="doc_template"></info-list>
<upload-file :multiple="false" :max="1" type="zip" :readOnly="false" :drag="true" @getNewList="getNewListOld"></upload-file>
</el-form-item>
</el-col>
</el-row>
......@@ -553,9 +387,7 @@
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">数据盘：</span>
<span
class="dia_block_item_val"
>{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
<span class="dia_block_item_val">{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
</div>
</div>
<span class="dia_item_all_title">单个容器组规格：</span>
......@@ -579,9 +411,7 @@
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">申请时长</span>
<span
class="dia_block_item_val"
>{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
<span class="dia_block_item_val">{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
</div>
</div>
</div>
......@@ -628,7 +458,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">
......@@ -646,9 +476,11 @@
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">新增数据盘：</span>
<span
class="dia_block_item_val"
>{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
<span 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>
......@@ -672,18 +504,11 @@
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">是否续期：</span>
<span
class="dia_block_item_val"
>{{ diaForm.appDuration && diaForm.appDuration != 0 ? "是": "否" }}</span>
<span class="dia_block_item_val">{{ diaForm.appDuration && diaForm.appDuration != 0 ? "是": "否" }}</span>
</div>
<div
class="dia_block_item_in"
v-if="diaForm.appDuration && diaForm.appDuration != 0"
>
<div class="dia_block_item_in" v-if="diaForm.appDuration && diaForm.appDuration != 0">
<span class="dia_block_item_title">续期时长：</span>
<span
class="dia_block_item_val"
>{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
<span class="dia_block_item_val">{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
</div>
</div>
</div>
......@@ -700,11 +525,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: "" }
......@@ -742,22 +571,16 @@ export default {
{ required: true, message: "请输入联系电话", trigger: "blur" }
]
},
durationOptions: [
{ value: "1", label: "月" },
{ value: "2", label: "年" }
],
durationOptions: [{ value: "1", label: "月" }, { value: "2", label: "年" }],
workSpace: "",
workSpaceOptions: [],
optionsCPU: [
{ value: "8", label: "8" },
{ value: "16", label: "16" }
],
optionsCPU: [{ value: "8", label: "8" }, { value: "16", label: "16" }],
optionsRAM: [
{ value: "8", label: "8" },
{ 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 +590,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 +636,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 +793,13 @@ export default {
this.workSpaceOptions = response.data.data;
}
});
},
delItem(val) {
this.delDataDiskList.push(val.app);
let delItem = this.dataDiskList.findIndex(v => v.app === val.app);
if (delItem) {
console.log(delItem);
}
}
}
};
......@@ -1141,6 +1017,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 {
......@@ -1161,6 +1040,9 @@ export default {
border-radius: 0;
color: #242c43;
}
.cloud_form .input_right_top {
top: 41px;
}
.cloud_form .el-select {
width: 100%;
}
......
src/components/shop-list.vue
View file @ efd742cf
......@@ -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 @ efd742cf
<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/pages/workbench/app_build.vue
View file @ efd742cf
......@@ -94,7 +94,7 @@
下一步
</el-button>
</div>
<image-detail ref="imageDetail" :image="selectedImage"></image-detail>
<image-detail ref="imageDetail"></image-detail>
</app-build-step>
<app-build-step
title="上传部署文件"
......@@ -360,7 +360,6 @@ export default {
msg: "",
submit: null,
},
selectedImage: null,
}),
methods: {
preStep() {
......@@ -575,8 +574,7 @@ export default {
}
},
showImageDetail(item) {
this.selectedImage = item;
this.$refs.imageDetail.showDialog();
this.$refs.imageDetail.showDialog(item);
},
},
mounted() {
......
src/pages/workbench/fwgl/fwglList.vue
View file @ efd742cf
......@@ -5,15 +5,51 @@
search-placeholder="请输入关键字"
:list-total="listTotal"
:list-filter="filterList"
:other-filter="filterList2"
:list-header="listHeader"
:list-data="listData"
:list-padding-left="35"
:list-padding-left="paddingLeft"
@list-action="init"
>
<el-breadcrumb separator="/" slot="breadcrumb">
<el-breadcrumb-item :to="`/fwgl/${level}`">我的服务</el-breadcrumb-item>
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb>
<template slot="top">
<div class="cloud_info" v-if="cloud_zuzhi">
<div class="zuzhi_title">
<span>{{ cloud_zuzhi.org_name }}</span>
<span>
{{ "在用工作区域：" + (cloud_zuzhi.used_area || 0) + "个" }}
</span>
</div>
<div class="dashboard_contaner">
<div
class="dashborad_list"
v-for="(item, index) in cloud_zuzhi.dashboard_list"
:key="index"
>
<chart
:options="getDashboardOptions(item)"
class="dashboard_chart"
/>
<p class="dashboard_info">
<span>物理总量</span>
<span v-text="item.total + item.unit"></span>
</p>
<p class="dashboard_info">
<span>剩余量</span>
<span v-text="item.value + item.unit"></span>
</p>
</div>
</div>
</div>
</template>
<div slot="list" v-if="level == 2 && type == 2">
<p style="text-align: center;margin-top: 20px;">组织列表</p>
</div>
</apass-list>
<apass-dialog
......@@ -26,20 +62,24 @@
</template>
<script>
import helper from "@/services/helper.js";
import { graphic } from "echarts/lib/export";
import { mapState } from "vuex";
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import Dashboard from "@/components/e-charts/dashboard";
export default {
components: { apassList, apassDialog },
components: { apassList, apassDialog, Dashboard },
data: () => ({
level: 0, // 用户等级
type: 0, // 访问的页面
paddingLeft: 35,
listTotal: 0,
listHeader: [],
listData: [],
filterList: [],
filterList2: [],
otherFilter: [],
dialogInfo: {
title: "",
......@@ -49,6 +89,8 @@ export default {
listUrl: "",
deleteUrl: "",
tempFliter: null,
cloud_zuzhi: null,
cloud_admin: null,
}),
computed: {
...mapState({
......@@ -71,6 +113,9 @@ export default {
},
methods: {
initFilter() {
if (this.type == 2) {
//
} else {
Promise.all([
this.$http.get("/apaas/service/v3/service/manager/servtype"),
this.$http.get("/apaas/service/v3/service/manager/servarea"),
......@@ -92,6 +137,7 @@ export default {
.catch((error) => {
console.log(error);
});
}
},
initHeader() {
let _self = this;
......@@ -149,9 +195,7 @@ export default {
},
{
getLabel(item) {
return (
["申请上架", "申请下架", "审核中"][item.state] || "-"
);
return ["申请上架", "申请下架", "审核中"][item.state] || "-";
},
callback(item) {
if (item.state == 0) {
......@@ -322,18 +366,97 @@ export default {
},
];
}
// TODO: 普通用户 --- 云资源服务
// 普通用户 --- 云资源服务
else if (level == 0 && type == 2) {
this.listUrl = "xxxxxx";
this.listUrl = "";
this.paddingLeft = 0;
this.filterList2 = [
{
name: "初次申请状态",
prop: "state1",
default: 0,
options: [
{
name: "全部",
value: 0,
},
{
name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
},
{
name: "资源调整状态",
prop: "state2",
default: 0,
options: [
{
name: "全部",
value: 0,
},
{
name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
},
/* {
name: "申请状态",
prop: "state3",
default: 0,
options: [
{
name: "全部",
value: 0,
},
{
name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
}, */
];
this.listHeader = [
{
label: "工作区域",
prop: "name",
label: "运行状态",
align: "center",
type: "image",
getImage(item) {
return item.state == 0
? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_guoqi.png");
},
},
{
label: "网络环境",
label: "工作区域",
prop: "name",
align: "center",
type: "button",
callback: this.cloudDetail,
},
{
label: "CPU（核）",
......@@ -346,14 +469,29 @@ export default {
align: "center",
},
{
label: "资源总量（GB）",
label: "容器组（个）",
prop: "name",
align: "center",
},
{
label: "实例数（个）",
prop: "name",
label: "数据盘（块/GB）",
type: "tooltip",
align: "center",
getLength(item) {
return item.sjp.length;
},
getText(item) {
return item.sjp[0];
},
getContent(item) {
let htmlStr = `<span>数据盘（块/GB）</span><br />`;
item.sjp.forEach((v) => {
htmlStr += `<span>数据盘：${v}</span><br />`;
});
return htmlStr;
},
},
{
label: "申请时间",
......@@ -361,21 +499,31 @@ export default {
align: "center",
},
{
label: "申请状态",
label: "初次申请状态",
prop: "name",
align: "center",
},
{
label: "操作",
type: "buttons",
label: "资源调整结果",
prop: "name",
align: "center",
width: 160,
actionList: [
},
];
this.listData = [
{
label: "查看详情",
callback: this.detailItem,
name: "区域1",
state: 0,
sjp: ["8/60"],
},
],
{
name: "区域2",
state: 1,
sjp: ["2/3", "22/33"],
},
{
name: "区域3",
state: 0,
sjp: ["2/100", "22/33", "55/66"],
},
];
}
......@@ -586,18 +734,74 @@ export default {
},
];
}
// TODO: 组织管理员 --- 云资源管理
// 组织管理员 --- 云资源管理
else if (level == 1 && type == 2) {
this.listUrl = "xxxxxx";
this.listUrl = "";
this.paddingLeft = 0;
this.filterList2 = [
{
name: "初次申请状态",
prop: "state1",
default: 0,
options: [
{
name: "全部",
value: 0,
},
{
name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
},
{
name: "资源调整状态",
prop: "state2",
default: 0,
options: [
{
name: "全部",
value: 0,
},
{
name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
},
];
this.listHeader = [
{
label: "工作区域",
prop: "name",
label: "运行状态",
align: "center",
type: "image",
getImage(item) {
return item.state == 0
? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_guoqi.png");
},
},
{
label: "网络环境",
label: "工作区域名称",
prop: "name",
align: "center",
type: "button",
callback: this.cloudDetail,
},
{
label: "CPU（核）",
......@@ -610,17 +814,32 @@ export default {
align: "center",
},
{
label: "资源总量（GB）",
label: "容器组（个）",
prop: "name",
align: "center",
},
{
label: "实例数（个）",
label: "数据盘（块/GB）",
prop: "name",
align: "center",
},
{
label: "使用用户",
label: "申请用户",
prop: "name",
align: "center",
},
{
label: "业务系统名",
prop: "name",
align: "center",
},
{
label: "初次申请状态",
prop: "name",
align: "center",
},
{
label: "资源调整状态",
prop: "name",
align: "center",
},
......@@ -633,15 +852,71 @@ export default {
label: "操作",
type: "buttons",
align: "center",
width: 160,
width: 80,
actionList: [
{
label: "分配",
callback: this.allotItem,
getLabel(item) {
return item.allot == 0 ? "分配" : "已分配";
},
callback: this.cloudAllot,
disabledRule(item) {
return item.allot == 1;
},
},
],
},
];
this.listData = [
{
name: "区域1",
state: 0,
sjp: ["8/60"],
allot: 1,
},
{
name: "区域2",
state: 1,
sjp: ["2/3", "22/33"],
allot: 0,
},
{
name: "区域3",
state: 0,
sjp: ["2/100", "22/33", "55/66"],
allot: 1,
},
];
this.cloud_zuzhi = {
org_name: "北京比格大数据",
used_area: 2,
dashboard_list: [
{
name: "cpu使用量",
value: 6,
total: 10,
unit: "（核）",
},
{
name: "内存使用量",
value: 13,
total: 20,
unit: "（GB）",
},
{
name: "数据盘使用量",
value: 500,
total: 560,
unit: "（GB）",
},
{
name: "容器组使用量",
value: 10,
total: 18,
unit: "（个）",
},
],
};
}
// 超级管理员 --- 平台服务管理
......@@ -859,46 +1134,37 @@ export default {
},
];
}
// TODO: 超级管理员 --- 云资源管理
// 超级管理员 --- 云资源管理
else if (level == 2 && type == 2) {
this.listUrl = "xxxxxx";
this.listHeader = [
this.cloud_admin = {
dashboard_list: [
{
label: "所属组织",
prop: "name",
},
{
label: "CPU使用量",
prop: "name",
align: "center",
name: "cpu使用量",
value: 6,
total: 10,
unit: "（核）",
},
{
label: "内存使用量",
prop: "name",
align: "center",
name: "内存使用量",
value: 13,
total: 20,
unit: "（GB）",
},
{
label: "工作区域数量",
prop: "name",
align: "center",
name: "数据盘使用量",
value: 240,
total: 560,
unit: "（GB）",
},
{
label: "创建时间",
prop: "name",
align: "center",
},
{
label: "操作",
type: "buttons",
align: "center",
actionList: [
{
label: "删除",
callback: this.deleteItem,
name: "容器组使用量",
value: 10,
total: 18,
unit: "（个）",
},
],
},
];
histogram: {},
};
}
// Error
......@@ -907,6 +1173,12 @@ export default {
}
},
init(filter) {
console.log(filter);
if (!this.listUrl) {
return;
}
this.tempFliter = filter;
this.$http
......@@ -1130,9 +1402,168 @@ export default {
`/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.service_apply_info.id}`
);
}, // 审批服务
allotItem(item) {
console.log("allotItem - " + item.name);
}, // TODO: 云资源分配
cloudDetail(item) {
console.log("cloudDetail - " + item.name);
},
cloudAllot(item) {
console.log("cloudAllot - " + item.name);
},
getDashboardOptions(item) {
let percent = Math.round((item.value / item.total) * 100);
let colors = ["#515fe7", "#e7ecfd"];
if (percent >= 80) {
colors = ["#e3606d", "#f6d0d0"];
}
return {
title: {
text: percent + "%",
subtext: item.name,
x: "center",
y: "center",
textVerticalAlign: "auto",
textStyle: {
fontSize: 34,
fontWeight: "100",
color: ["#0d1847"],
},
subtextStyle: {
fontSize: 12,
fontWeight: "100",
color: "#707693",
},
},
angleAxis: {
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
min: 0,
max: 138,
boundaryGap: ["0", "100"],
startAngle: 220,
endAngle: -40,
},
radiusAxis: {
type: "category",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
polar: {
radius: "110%",
},
series: [
{
type: "bar",
data: [, percent],
coordinateSystem: "polar",
barMaxWidth: 10,
z: 1,
name: "B",
roundCap: true,
itemStyle: {
normal: {
color: new graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: colors[1] },
]),
},
},
barGap: "-100%",
},
{
type: "bar",
data: [, 100],
z: 0,
silent: true,
coordinateSystem: "polar",
barMaxWidth: 10,
name: "C",
roundCap: true,
color: "#ddd",
barGap: "-100%",
},
{
type: "gauge",
radius: "70%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 220,
endAngle: -40,
axisLabel: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
width: 0.5,
color: [[1, "rgba(0,0,0,0)"]],
},
}, //仪表盘轴线
axisLabel: {
show: false,
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 5,
lineStyle: {
color: "#e3e4ea",
width: 0.5,
},
length: 3,
}, //刻度样式
splitLine: {
show: true,
length: 4,
lineStyle: {
color: "#e3e4ea",
width: 0.5,
},
}, //分隔线样式
detail: {
show: false,
},
pointer: {
show: false,
},
},
{
name: "point",
type: "scatter",
coordinateSystem: "polar",
barGap: "-100%",
zlevel: 0,
symbol: "circle",
symbolSize: 6,
itemStyle: {
normal: {
show: true,
color: "#fff",
},
},
data: [, percent],
},
],
};
},
},
created() {
this.level = parseInt(this.$route.params.level);
......@@ -1163,4 +1594,68 @@ export default {
.service_management_list {
height: 100%;
}
.zuzhi_title {
margin-top: 15px;
}
.zuzhi_title > span,
.zuzhi_title > span::before {
display: inline-block;
vertical-align: middle;
}
.zuzhi_title > span:nth-child(1)::before {
content: "";
width: 4px;
height: 16px;
border-radius: 2px;
background-color: #515fe7;
margin-right: 10px;
}
.zuzhi_title > span:nth-child(1) {
font-size: 16px;
color: #242c43;
line-height: 30px;
}
.zuzhi_title > span:nth-child(2)::before {
content: "";
width: 2px;
height: 12px;
background-color: #b4c0f5;
margin: 0 10px;
}
.zuzhi_title > span:nth-child(2) {
font-size: 14px;
line-height: 1;
color: #58617a;
line-height: 24px;
margin-top: 3px;
}
.dashboard_contaner {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 20px;
}
.dashborad_list {
text-align: center;
margin: 0 25px;
font-size: 18px;
}
.dashboard_chart {
width: 136px;
height: 136px;
}
.dashboard_info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
line-height: 30px;
color: #8890a7;
}
.dashboard_info:nth-of-type(1) {
margin-top: -10px;
}
.dashboard_info > span:nth-of-type(2) {
color: #0d1847;
}
</style>
src/pages/workbench/yygl/app_debugger.vue
View file @ efd742cf
......@@ -27,7 +27,7 @@
<el-input placeholder="请输入内容" style="float:right;" v-model="pod_name" prefix-icon="el-icon-search"></el-input>
</div>
<div style="padding:20px;padding-top:0px;">
<apass-table :header="header_arr" :data="tableData" :icon="false" :height="560"></apass-table>
<apass-table :header="header_arr" :data="tableData" :icon="false" :height="560" :paddingLeft="5"></apass-table>
<list-pagination
:total="listTotal"
:page-sizes="pageSizes"
......
src/request/api/service_shop.js
View file @ efd742cf
......@@ -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;
src/store/index.js
View file @ efd742cf
......@@ -8,9 +8,9 @@ const store = new Vuex.Store({
userInfo: null, // 用户信息
serviceShopMenu: "/shop/data_service_list", // 服务超市侧边栏
fwglNav: [
["注册发布的服务", "申请的服务" /* , "云资源服务" */], // 普通用户
["组织服务管理", "服务审批管理" /* , "云资源管理" */], // 组织管理员
["平台服务管理", "服务审批管理" /* , "云资源管理" */], // 超级管理员
["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
], // 服务管理列表，onlyRead
yyglNav: [
["应用仓库", "我部署的应用", "申请的应用"], // 普通用户
......
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