Skip to content

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

服务管理-组织管理员-云资源管理列表

parent cd6ba14e
Hide whitespace changes
Inline Side-by-side
Showing with 369 additions and 360 deletions
src/components/apass-list.vue
View file @ ed836f76
......@@ -3,9 +3,12 @@
<div class="apass_breadcrumb">
<slot name="breadcrumb"></slot>
</div>
<div class="main-container">
<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">
<el-button
......@@ -257,4 +260,8 @@ export default {
.list-container {
flex-grow: 1;
}
.top_container {
flex-grow: 0;
margin-bottom: 20px;
}
</style>
src/components/image-detail.vue
View file @ ed836f76
......@@ -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/pages/workbench/app_build.vue
View file @ ed836f76
......@@ -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 @ ed836f76
......@@ -18,11 +18,11 @@
<template slot="top">
<div class="cloud_info" v-if="cloud_zuzhi">
<div class="info_container">
<p v-text="cloud_zuzhi.org_name"></p>
<p
v-text="'在用工作区域：' + (cloud_zuzhi.used_area || 0) + '个'"
></p>
<div class="zuzhi_title">
<span>{{ cloud_zuzhi.org_name }}</span>
<span>
{{ "在用工作区域：" + (cloud_zuzhi.used_area || 0) + "个" }}
</span>
</div>
<div class="dashboard_contaner">
<div
......@@ -30,30 +30,18 @@
v-for="(item, index) in cloud_zuzhi.dashboard_list"
:key="index"
>
<dashboard style="width:150px;height:150px;"></dashboard>
<p v-text="item.value + ' / ' + item.total + item.unit"></p>
</div>
</div>
</div>
<div class="admin_info" v-if="cloud_admin">
<h1 class="admin_title">云上贵州</h1>
<div class="admin_header apass_button">
<span>云资源概览</span>
<el-button type="primary">
工作区域审批（1）
</el-button>
</div>
<div class="cloud_info">
<div class="dashboard_contaner">
<div
class="dashborad_list"
v-for="(item, index) in cloud_admin.dashboard_list"
:key="index"
>
<dashboard style="width:150px;height:150px;"></dashboard>
<p v-text="item.value + ' / ' + item.total + item.unit"></p>
</div>
<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>
......@@ -74,6 +62,7 @@
</template>
<script>
import { graphic } from "echarts/lib/export";
import { mapState } from "vuex";
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
......@@ -748,41 +737,17 @@ export default {
// 组织管理员 --- 云资源管理
else if (level == 1 && type == 2) {
this.listUrl = "";
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: 240,
total: 560,
unit: "（GB）",
},
{
name: "容器组使用量",
value: 10,
total: 18,
unit: "（个）",
},
],
};
this.filterList = [
this.paddingLeft = 0;
this.filterList2 = [
{
name: "初次申请状态",
prop: "state1",
data: [
default: 0,
options: [
{
name: "全部",
value: 0,
},
{
name: "待审批",
value: 1,
......@@ -800,7 +765,12 @@ export default {
{
name: "资源调整状态",
prop: "state2",
data: [
default: 0,
options: [
{
name: "全部",
value: 0,
},
{
name: "待审批",
value: 1,
......@@ -817,6 +787,16 @@ export default {
},
];
this.listHeader = [
{
label: "运行状态",
align: "center",
type: "image",
getImage(item) {
return item.state == 0
? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_guoqi.png");
},
},
{
label: "工作区域名称",
prop: "name",
......@@ -853,11 +833,6 @@ export default {
prop: "name",
align: "center",
},
{
label: "用户申请时间",
prop: "name",
align: "center",
},
{
label: "初次申请状态",
prop: "name",
......@@ -869,7 +844,7 @@ export default {
align: "center",
},
{
label: "运行状态",
label: "用户申请时间",
prop: "name",
align: "center",
},
......@@ -877,15 +852,71 @@ export default {
label: "操作",
type: "buttons",
align: "center",
width: 160,
width: 80,
actionList: [
{
label: "分配",
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: "（个）",
},
],
};
}
// 超级管理员 --- 平台服务管理
......@@ -1377,6 +1408,162 @@ export default {
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);
......@@ -1407,46 +1594,68 @@ export default {
.service_management_list {
height: 100%;
}
.cloud_info {
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
.zuzhi_title {
margin-top: 15px;
}
.cloud_info > .info_container {
flex-shrink: 0;
.zuzhi_title > span,
.zuzhi_title > span::before {
display: inline-block;
vertical-align: middle;
}
.cloud_info > .info_container > p:nth-child(1) {
font-size: 24px;
line-height: 36px;
.zuzhi_title > span:nth-child(1)::before {
content: "";
width: 4px;
height: 16px;
border-radius: 2px;
background-color: #515fe7;
margin-right: 10px;
}
.cloud_info > .info_container > p:nth-child(2) {
font-size: 18px;
line-height: 36px;
.zuzhi_title > span:nth-child(1) {
font-size: 16px;
color: #242c43;
line-height: 30px;
}
.cloud_info > .dashboard_contaner {
display: inline-flex;
justify-content: flex-start;
.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;
}
.cloud_info > .dashboard_contaner > .dashborad_list {
.dashborad_list {
text-align: center;
margin: 0 25px;
font-size: 18px;
}
.admin_title {
margin-top: 20px;
text-align: center;
.dashboard_chart {
width: 136px;
height: 136px;
}
.admin_header {
.dashboard_info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
font-size: 14px;
line-height: 30px;
color: #8890a7;
}
.dashboard_info:nth-of-type(1) {
margin-top: -10px;
}
.admin_header > span {
font-size: 24px;
.dashboard_info > span:nth-of-type(2) {
color: #0d1847;
}
</style>
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