Skip to content

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

Merge branch 'ldx' of cloud.wodcloud.com:apaas/apaas-v3-ui into ldx

parents 5eb690c0 cd6ba14e
Show whitespace changes
Inline Side-by-side
Showing with 1646 additions and 332 deletions
src/assets/imgs/ic_true.png
View replaced file @ 5eb690c0 View file @ 658fc9ab
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 @ 658fc9ab
......@@ -4,6 +4,8 @@
<slot name="breadcrumb"></slot>
</div>
<div class="main-container">
<slot name="top"></slot>
<div class="header-container" v-if="!hideHeader">
<div class="header-left apass_button">
<el-button
......@@ -18,6 +20,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 +75,7 @@
<list-table
:header="listHeader"
:data="listData"
:padding-left="35"
:padding-left="listPaddingLeft"
></list-table>
</div>
......@@ -84,6 +108,10 @@ export default {
type: Array,
default: () => [],
},
otherFilter: {
type: Array,
default: () => [],
},
listHeader: {
type: Array,
default: () => [],
......@@ -116,8 +144,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 +181,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 +198,10 @@ export default {
},
},
mounted() {
if (this.otherFilter && this.otherFilter.length > 0) {
this.initOtherFilter();
}
this.listAction();
},
};
......@@ -182,7 +234,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 {
......
src/components/apass-table.vue
View file @ 658fc9ab
<template>
<div class="apass_table">
<el-table :data="data">
<el-table-column :width="Math.max(paddingLeft - 10, 0)"></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"
......@@ -43,6 +46,33 @@
@click="item.callback && item.callback(scope.row)"
></a>
</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="
......@@ -73,3 +103,19 @@ export default {
},
};
</script>
<style scoped>
.img_content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<style>
.apass_table_tooltip {
font-size: 12px;
line-height: 20px;
}
</style>
src/components/card.vue
View file @ 658fc9ab
<template>
<div class="card">
<div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}">
<div class="card_title"><div class="circle"></div>{{title}}</div>
<div class="card_contain">
<slot></slot>
......@@ -9,7 +9,7 @@
<script>
export default {
props: ['title'],
props: ['title','flag'],
components: {
},
......
src/components/e-charts/line_chart.vue
View file @ 658fc9ab
......@@ -6,7 +6,7 @@
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
props: [],
props: ['data'],
components: {},
data() {
return {
......@@ -16,9 +16,11 @@ export default {
watch: {},
computed: {},
created() {},
mounted() {},
mounted() {
this.init_line_charts(this.data.xaxis,this.data.data)
},
methods: {
init_line_charts() {
init_line_charts(xAxisData,yarr) {
let bgColor = "#fff";
let color = [
"#0090FF",
......@@ -28,73 +30,76 @@ export default {
"#8B5CFF",
"#00CA69",
];
let echartData = [
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
};
var series = []
yarr.forEach((e,idx) => {
series.push(
{
name: "1",
value1: 100,
value2: 233,
name: e.name,
type: "line",
smooth: true,
showSymbol: false,
// symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[idx],
shadowBlur: 5,
shadowColor: hexToRgba(color[idx], 0.5),
shadowOffsetY: 10,
},
{
name: "2",
value1: 138,
value2: 233,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
name: "3",
value1: 350,
value2: 200,
offset: 0,
color: hexToRgba(color[idx], 0.3),
},
{
name: "4",
value1: 173,
value2: 180,
offset: 1,
color: hexToRgba(color[idx], 0.1),
},
{
name: "5",
value1: 180,
value2: 199,
],
false
),
shadowColor: hexToRgba(color[idx], 0.1),
shadowBlur: 10,
},
{
name: "6",
value1: 150,
value2: 233,
},
{
name: "7",
value1: 180,
value2: 210,
emphasis: {
itemStyle: {
borderWidth: 5,
},
{
name: "8",
value1: 230,
value2: 180,
},
];
let xAxisData = echartData.map((v) => v.name);
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
let yAxisData1 = echartData.map((v) => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 = echartData.map((v) => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
};
data: e.arr,
},
)
});
option = {
var option = {
backgroundColor: bgColor,
color: color,
legend: {
// show:false,//是否显示图例
right: "center",
bottom: 10,
bottom: 0,
itemWidth: 10,
itemHeight: 10,
icon: "roundRect",
......@@ -111,7 +116,10 @@ export default {
},
},
grid: {
top: 100,
top: 10,
left:10,
right:10,
bottom:30,
containLabel: true,
},
xAxis: [
......@@ -167,102 +175,18 @@ export default {
},
},
],
series: [
{
name: "2018",
type: "line",
smooth: true,
showSymbol: false,
// symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[0],
shadowBlur: 5,
shadowColor: hexToRgba(color[0], 0.5),
shadowOffsetY: 10,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[0], 0.3),
},
{
offset: 1,
color: hexToRgba(color[0], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[0], 0.1),
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
borderWidth: 4,
},
},
data: yAxisData1,
},
{
name: "2019",
type: "line",
smooth: true,
showSymbol: false,
// symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
shadowBlur: 5,
shadowColor: hexToRgba(color[1], 0.5),
shadowOffsetY: 10,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[1], 0.3),
},
{
offset: 1,
color: hexToRgba(color[1], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[1], 0.1),
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
borderWidth: 4,
},
},
data: yAxisData2,
},
],
series: series,
};
window[this.line] = echarts.init(document.getElementById(this.line));
window[this.line].setOption(option, true);
},
},
};
</script>
<style scoped></style>
<style scoped>
.dashboard {
width: 100%;
height: 100%;
}
</style>
src/components/image-bugs.vue 0 → 100644
View file @ 658fc9ab
<template>
<div class="image_bugs" v-if="data">
<!-- 安全 -->
<span class="image_bug">
<el-tooltip placement="right-start" popper-class="image_bug_tooltip">
<div slot="content">
<div class="lower_title lower_title_01">
<span class="lower_title_img lower_title_img_01"></span>
漏洞严重程度：没有漏洞
</div>
<div style="padding:20px;">
<div class="bugs_font01">没有发现可识别的漏洞包</div>
<div class="bugs_font03">扫描完成时间：{{ time }}</div>
</div>
</div>
<span class="bugs_label security" v-if="severity == 1">安全</span>
</el-tooltip>
</span>
<!-- 未知 -->
<span class="image_bug">
<el-tooltip placement="right-start" popper-class="image_bug_tooltip">
<div slot="content">
<div class="lower_title lower_title_02">
<span class="lower_title_img lower_title_img_02"></span>
漏洞严重程度：未知
</div>
<div style="padding:20px;">
<div class="bugs_font01">
{{ components.total }}
个组件中
{{ components.severity_count }}
个含有漏洞
</div>
<div v-for="(s, index) in components.summary" :key="index">
<div class="bugs_font02" v-if="s.severity == 2">
<span class="unknown_img"></span>
未知 ：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 1">
<span class="wu_img"></span>
无：{{ s.count }}个
</div>
</div>
<div class="bugs_font03">扫描完成时间：{{ time }}</div>
</div>
</div>
<span class="bugs_label unknown" v-if="severity == 2">未知</span>
</el-tooltip>
</span>
<!-- 较低 -->
<span class="image_bug">
<el-tooltip placement="right-start" popper-class="image_bug_tooltip">
<div slot="content">
<div class="lower_title lower_title_03">
<span class="lower_title_img lower_title_img_03"></span>
漏洞严重程度：较低
</div>
<div style="padding:20px;">
<div class="bugs_font01">
{{ components.total }}
个组件中
{{ components.severity_count }}
个含有漏洞
</div>
<div v-for="(s, index) in components.summary" :key="index">
<div class="bugs_font02" v-if="s.severity == 3">
<span class="warning"></span>
较低：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 2">
<span class="unknown_img"></span>
未知：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 1">
<span class="wu_img"></span>
无：{{ s.count }}个
</div>
</div>
<div class="bugs_font03">扫描完成时间：{{ time }}</div>
</div>
</div>
<span class="bugs_label lower" v-if="severity == 3">较低</span>
</el-tooltip>
</span>
<!-- 中等 -->
<span class="image_bug">
<el-tooltip placement="right-start" popper-class="image_bug_tooltip">
<div slot="content">
<div class="lower_title lower_title_04">
<span class="lower_title_img lower_title_img_04"></span>
漏洞严重程度：中等
</div>
<div style="padding:20px;">
<div class="bugs_font01">
{{ components.total }}
个组件中
{{ components.severity_count }}
个含有漏洞
</div>
<div v-for="(s, index) in components.summary" :key="index">
<div class="bugs_font02" v-if="s.severity == 4">
<span class="medium_img"></span>
中等：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 3">
<span class="warning"></span>
较低：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 2">
<span class="unknown_img"></span>
未知：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 1">
<span class="wu_img"></span>
无：{{ s.count }}个
</div>
</div>
<div class="bugs_font03">扫描完成时间：{{ time }}</div>
</div>
</div>
<span class="bugs_label medium" v-if="severity == 4">中等</span>
</el-tooltip>
</span>
<!-- 严重 -->
<span class="image_bug">
<el-tooltip placement="right-start" popper-class="image_bug_tooltip">
<div slot="content">
<div class="lower_title lower_title_05">
<span class="lower_title_img lower_title_img_05"></span>
漏洞严重程度：严重
</div>
<div style="padding:20px;">
<div class="bugs_font01">
{{ components.total }}
个组件中
{{ components.severity_count }}
个含有漏洞
</div>
<div v-for="(s, index) in components.summary" :key="index">
<div class="bugs_font02" v-if="s.severity == 5">
<span class="seriousness_img"></span>
严重：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 4">
<span class="medium_img"></span>
中等：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 3">
<span class="warning"></span>
较低：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 2">
<span class="unknown_img"></span>
未知：{{ s.count }}个
</div>
<div class="bugs_font02" v-if="s.severity == 1">
<span class="wu_img"></span>
无：{{ s.count }}个
</div>
</div>
<div class="bugs_font03">扫描完成时间：{{ time }}</div>
</div>
</div>
<span class="bugs_label seriousness" v-if="severity == 5">严重</span>
</el-tooltip>
</span>
</div>
</template>
<script>
import helper from "@/services/helper";
export default {
props: {
data: {
type: Object,
required: true,
},
},
computed: {
severity: function() {
return this.data.severity;
},
time: function() {
return helper.dateFormat("YYYY-mm-dd HH:MM:SS", this.data.update_time);
},
components: function() {
return this.data.components;
},
},
};
</script>
<style>
.image_bugs {
display: inline-block;
}
.bugs_label {
border-radius: 4px;
padding: 2px 10px;
font-size: 12px;
}
.security {
background-color: #dde4ff;
border: solid 1px #9cb5f8;
color: #315efc;
}
.unknown {
background-color: #f4f7fc;
border: solid 1px #bcc1d0;
color: #58617a;
}
.lower {
background-color: #fff8dd;
border: solid 1px #f2d065;
color: #e79e00;
}
.medium {
background-color: #fff2e2;
border: solid 1px #ffc29a;
color: #ff7200;
}
.seriousness {
background-color: #ffebeb;
border: solid 1px #f2a6a6;
color: #da4251;
}
.bug_scaning {
background-color: #dde4ff;
color: #315efc;
margin-left: 27px;
padding: 3px 5px;
}
.image_bug_tooltip {
background: #1a2236 !important;
color: #f4f7fc !important;
border-radius: 10px !important;
padding: 0px !important;
}
.lower_title {
height: 55px;
width: 242px;
background-color: #242c43;
border-radius: 12px 12px 0px 0px;
border-bottom: 1px solid #3f4864;
text-align: left;
line-height: 55px;
vertical-align: middle;
font-size: 16px;
padding: 0px 20px;
}
.lower_title_img {
width: 12px;
height: 12px;
display: inline-block;
margin-right: 10px;
vertical-align: middle;
}
.bug_scaning_img {
width: 12px;
height: 12px;
display: inline-block;
vertical-align: middle;
background: url("../assets/imgs/ic_loading.png") right center no-repeat;
}
.lower_title_01 {
color: #5c82ff;
}
.lower_title_img_01 {
background: url("../assets/imgs/ld_ic_spot_blue.png") center center no-repeat;
}
.lower_title_02 {
color: #bcc1d0;
}
.lower_title_img_02 {
background: url("../assets/imgs/ld_ic_spot_grey.png") center center no-repeat;
}
.lower_title_03 {
color: #e79e00;
}
.lower_title_img_03 {
background: url("../assets/imgs/ld_ic_spot_yellow.png") center center
no-repeat;
}
.lower_title_04 {
color: #ff7200;
}
.lower_title_img_04 {
background: url("../assets/imgs/ld_ic_spot_orange.png") center center
no-repeat;
}
.lower_title_05 {
color: #da4251;
}
.lower_title_img_05 {
background: url("../assets/imgs/ld_ic_spot_red.png") center center no-repeat;
}
.el-tooltip__popper[x-placement^="right-start"] .popper__arrow {
border-right-color: #1a2236;
margin-top: 1px;
}
.el-tooltip__popper[x-placement^="right-start"] .popper__arrow:after {
border-right-color: #1a2236;
margin-top: 1px;
}
.warning {
width: 15px;
height: 15px;
display: inline-block;
background: url("../assets/imgs/ld_l_ic_low.png") center center no-repeat;
margin-right: 10px;
vertical-align: middle;
border-radius: 50%;
}
.bugs_font01 {
color: #bcc1d0;
font-size: 14px;
padding-bottom: 10px;
}
.bugs_font02 {
color: #f4f7fc;
font-size: 14px;
padding: 5px 0;
}
.bugs_font03 {
color: #bcc1d0;
font-size: 12px;
padding: 12px 0 0 0;
}
.seriousness_img {
width: 15px;
height: 15px;
display: inline-block;
background: url("../assets/imgs/ld_l_ic_high.png") center center no-repeat;
margin-right: 10px;
vertical-align: middle;
}
.medium_img {
width: 15px;
height: 15px;
display: inline-block;
background: url("../assets/imgs/ld_l_ic_medium.png") center center no-repeat;
margin-right: 10px;
vertical-align: middle;
}
.wu_img {
width: 15px;
height: 15px;
display: inline-block;
background: url("../assets/imgs/ld_ic_safe.png") center center no-repeat;
margin-right: 10px;
vertical-align: middle;
}
.unknown_img {
width: 15px;
height: 15px;
display: inline-block;
background: url("../assets/imgs/ld_l_ic_unknown.png") center center no-repeat;
margin-right: 10px;
vertical-align: middle;
}
</style>
src/components/image-detail.vue 0 → 100644
View file @ 658fc9ab
<template>
<div class="image_detail">
<apass-dialog ref="listdialog" :title="title" width="985px">
<template slot="content">
<div class="apass_table">
<el-table :data="imageData">
<el-table-column width="20"></el-table-column>
<el-table-column label="版本号" align="left">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="作者" align="left">
<template slot-scope="scope">
{{ scope.row.creator }}
</template>
</el-table-column>
<el-table-column label="创建时间" width="180" align="center">
<template slot-scope="scope">
{{ scope.row.created }}
</template>
</el-table-column>
<el-table-column label="大小" align="center">
<template slot-scope="scope">
{{ getSize(scope.row.size) }}
</template>
</el-table-column>
<el-table-column label="漏洞" width="160" align="center">
<template slot-scope="scope">
<image-bugs :data="scope.row.scan_overview"></image-bugs>
</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<div class="row_action">
<a class="btn" @click="downloadAction(scope.row)">下载</a>
<span class="interval_line">|</span>
<a class="btn warn" @click="deleteAction(scope.row)">删除</a>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
</apass-dialog>
<apass-dialog
ref="actiondialog"
:title="dialogInfo.title"
:msg="dialogInfo.msg"
:submit="dialogInfo.submit"
></apass-dialog>
</div>
</template>
<script>
import apassDialog from "./apass-dialog";
import imageBugs from "./image-bugs";
export default {
components: {
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",
},
],
dialogInfo: {
title: "",
msg: "",
submit: null,
},
}),
computed: {
title() {
return "镜像：" + ((this.image && this.image.name) || "-");
},
},
methods: {
showDialog() {
this.$refs.listdialog.show();
},
downloadAction(item) {
console.log("download " + item.name);
},
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}`)
.then((response) => {
if (response.data.success == 1) {
//
} else {
this.$message({
message: `删除失败`,
type: "warning",
});
}
})
.catch((error) => {
console.log(error);
this.$message({
message: `删除失败`,
type: "warning",
});
}); */
};
this.$refs.actiondialog.show();
},
getSize(value = 0) {
return (value / 1024 / 1024).toFixed(2) + "MB";
},
},
};
</script>
<style scoped>
.apass_table {
max-height: 433px;
overflow-x: hidden;
overflow-y: auto;
}
</style>
<style>
.apass_dialog .image_detail .el-dialog__body {
padding: 0 20px 20px;
}
.apass_dialog .image_detail .el-dialog__footer {
display: none;
}
</style>
src/components/menu.vue
View file @ 658fc9ab
<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">
<div
style="float:right;cursor: pointer;position:relative;"
class="user_hover"
>
<span
v-if="userInfo.user_name && userInfo.user_name !=''"
v-if="userInfo.user_name && userInfo.user_name != ''"
class="user"
>{{ userInfo.user_name }}</span>
>{{ userInfo.user_name }}</span
>
<span v-else @click="gotopage('login')" class="user">请登录</span>
<img
:class="userInfo.picture_path ? 'user_pic': 'user_default'"
: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-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>
>
{{ item.name }}
</div>
<div v-if="userInfo.user_name && userInfo.user_name !=''" class="sj"></div>
</div>
<div
v-if="userInfo.user_name && userInfo.user_name != ''"
class="sj"
></div>
</div>
<div
style="float:right;cursor: pointer;position:relative;"
......@@ -28,10 +40,18 @@
@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"
......@@ -63,14 +83,23 @@
</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">
......@@ -82,14 +111,24 @@
: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
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>
>
{{ v.menu_name }}
</div>
<div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
</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>
......@@ -107,10 +146,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() {
......@@ -123,12 +162,12 @@ export default {
},
userInfo() {
return this.$store.state.userInfo || {};
}
},
},
watch: {
getMenuCartState(newVal) {
this.getList();
}
},
},
methods: {
gotopage(n) {
......@@ -146,7 +185,7 @@ export default {
},
deleteItem(id) {
let query = [id];
this.$api.serviceShop.delShoppingCart(query).then(response => {
this.$api.serviceShop.delShoppingCart(query).then((response) => {
this.getList();
});
},
......@@ -175,7 +214,7 @@ export default {
}
},
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
......@@ -194,14 +233,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].Child;
this.menu_arr =
(response.data.data[0] && response.data.data[0].Child) || [];
this.getMenuIndex();
}
});
}
}
},
},
};
</script>
......
src/components/service-header.vue
View file @ 658fc9ab
......@@ -57,7 +57,9 @@ export default {
methods: {
subevent(val){
if(val == 0){
this.$emit('deploy',this.data)
// this.$emit('deploy',this.data)
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/deployment/${this.$route.params.id}`)
console.log(this.$route);
}else if(val == 1){
this.$emit('editapp')
}else if(val == 2){
......
src/components/service-tabs/service-tab-comments.vue
View file @ 658fc9ab
......@@ -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 @ 658fc9ab
......@@ -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/pages/data-analysis/my-service.vue
View file @ 658fc9ab
......@@ -30,7 +30,9 @@
<block-radius class="block"></block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
<block-radius class="block">
<line-chart :data="line_data"></line-chart>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
......@@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from '@/components/e-charts/multiple_circle'
import singleCircle from '@/components/e-charts/single_circle'
import lineChart from '@/components/e-charts/line_chart'
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
export default {
......@@ -85,7 +88,8 @@ export default {
multipleCircle,
singleCircle,
Toplist,
Starlist
Starlist,
lineChart
},
data: () => ({
navList: [],
......@@ -99,6 +103,23 @@ export default {
num:12,
color:'#515fe7',
text:'共享'
},
line_data:{
xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'],
data:[
{
name:'开发者应用',
arr:[100,120,130,150,160,120,110,100]
},
{
name:'平台应用',
arr:[120,130,140,130,140,120,100,90]
},
{
name:'未上架',
arr:[80,90,100,110,100,70,80,90]
},
],
}
}),
mounted() {},
......
src/pages/service_shop/yysdDetail.vue
View file @ 658fc9ab
......@@ -14,8 +14,10 @@
<service-tabs
:detail-data="detailData"
detail-title="应用详情信息"
:provider-data="providerData"
:comments-url="commentsUrl"
comments-title="应用评价信息"
:is_app_detail="true"
></service-tabs>
</div>
......
src/pages/workbench/app_build.vue
View file @ 658fc9ab
......@@ -94,6 +94,7 @@
下一步
</el-button>
</div>
<image-detail ref="imageDetail" :image="selectedImage"></image-detail>
</app-build-step>
<app-build-step
title="上传部署文件"
......@@ -282,6 +283,7 @@ import appBuildStep from "@/components/app-build-steps/app-build-step";
import apassTable from "@/components/apass-table";
import uploadFile from "@/components/general/upload_file";
import apassDialog from "@/components/apass-dialog";
import imageDetail from "@/components/image-detail";
export default {
components: {
......@@ -290,6 +292,7 @@ export default {
apassTable,
uploadFile,
apassDialog,
imageDetail,
},
data: () => ({
step: 0,
......@@ -357,6 +360,7 @@ export default {
msg: "",
submit: null,
},
selectedImage: null,
}),
methods: {
preStep() {
......@@ -570,8 +574,9 @@ export default {
return "";
}
},
showDetail(item) {
console.log(item);
showImageDetail(item) {
this.selectedImage = item;
this.$refs.imageDetail.showDialog();
},
},
mounted() {
......@@ -581,7 +586,7 @@ export default {
prop: "name",
align: "left",
type: "button",
callback: this.showDetail,
callback: this.showImageDetail,
},
{
label: "版本号",
......
src/pages/workbench/fwgl/fwglList.vue
View file @ 658fc9ab
......@@ -5,15 +5,63 @@
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="info_container">
<p v-text="cloud_zuzhi.org_name"></p>
<p
v-text="'在用工作区域：' + (cloud_zuzhi.used_area || 0) + '个'"
></p>
</div>
<div class="dashboard_contaner">
<div
class="dashborad_list"
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>
</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 +74,23 @@
</template>
<script>
import helper from "@/services/helper.js";
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 +100,8 @@ export default {
listUrl: "",
deleteUrl: "",
tempFliter: null,
cloud_zuzhi: null,
cloud_admin: null,
}),
computed: {
...mapState({
......@@ -71,6 +124,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 +148,7 @@ export default {
.catch((error) => {
console.log(error);
});
}
},
initHeader() {
let _self = this;
......@@ -149,9 +206,7 @@ export default {
},
{
getLabel(item) {
return (
["申请上架", "申请下架", "审核中"][item.state] || "-"
);
return ["申请上架", "申请下架", "审核中"][item.state] || "-";
},
callback(item) {
if (item.state == 0) {
......@@ -322,18 +377,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 +480,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 +510,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,41 +745,111 @@ export default {
},
];
}
// TODO: 组织管理员 --- 云资源管理
// 组织管理员 --- 云资源管理
else if (level == 1 && type == 2) {
this.listUrl = "xxxxxx";
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 = [
{
name: "初次申请状态",
prop: "state1",
data: [
{
name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
},
{
name: "资源调整状态",
prop: "state2",
data: [
{
name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
},
];
this.listHeader = [
{
label: "工作区域",
label: "工作区域名称",
prop: "name",
type: "button",
callback: this.cloudDetail,
},
{
label: "网络环境",
label: "CPU（核）",
prop: "name",
align: "center",
},
{
label: "CPU（核）",
label: "内存（GB）",
prop: "name",
align: "center",
},
{
label: "内存（GB）",
label: "容器组（个）",
prop: "name",
align: "center",
},
{
label: "资源总量（GB）",
label: "数据盘（块/GB）",
prop: "name",
align: "center",
},
{
label: "实例数（个）",
label: "申请用户",
prop: "name",
align: "center",
},
{
label: "使用用户",
label: "业务系统名",
prop: "name",
align: "center",
},
......@@ -629,6 +858,21 @@ export default {
prop: "name",
align: "center",
},
{
label: "初次申请状态",
prop: "name",
align: "center",
},
{
label: "资源调整状态",
prop: "name",
align: "center",
},
{
label: "运行状态",
prop: "name",
align: "center",
},
{
label: "操作",
type: "buttons",
......@@ -637,7 +881,7 @@ export default {
actionList: [
{
label: "分配",
callback: this.allotItem,
callback: this.cloudAllot,
},
],
},
......@@ -859,46 +1103,37 @@ export default {
},
];
}
// TODO: 超级管理员 --- 云资源管理
// 超级管理员 --- 云资源管理
else if (level == 2 && type == 2) {
this.listUrl = "xxxxxx";
this.listHeader = [
this.cloud_admin = {
dashboard_list: [
{
label: "所属组织",
prop: "name",
name: "cpu使用量",
value: 6,
total: 10,
unit: "（核）",
},
{
label: "CPU使用量",
prop: "name",
align: "center",
},
{
label: "内存使用量",
prop: "name",
align: "center",
},
{
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: "操作",
type: "buttons",
align: "center",
actionList: [
{
label: "删除",
callback: this.deleteItem,
name: "容器组使用量",
value: 10,
total: 18,
unit: "（个）",
},
],
},
];
histogram: {},
};
}
// Error
......@@ -907,6 +1142,12 @@ export default {
}
},
init(filter) {
console.log(filter);
if (!this.listUrl) {
return;
}
this.tempFliter = filter;
this.$http
......@@ -1130,9 +1371,12 @@ 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);
},
},
created() {
this.level = parseInt(this.$route.params.level);
......@@ -1163,4 +1407,46 @@ export default {
.service_management_list {
height: 100%;
}
.cloud_info {
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
}
.cloud_info > .info_container {
flex-shrink: 0;
}
.cloud_info > .info_container > p:nth-child(1) {
font-size: 24px;
line-height: 36px;
}
.cloud_info > .info_container > p:nth-child(2) {
font-size: 18px;
line-height: 36px;
}
.cloud_info > .dashboard_contaner {
display: inline-flex;
justify-content: flex-start;
align-items: center;
}
.cloud_info > .dashboard_contaner > .dashborad_list {
text-align: center;
margin: 0 25px;
font-size: 18px;
}
.admin_title {
margin-top: 20px;
text-align: center;
}
.admin_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.admin_header > span {
font-size: 24px;
}
</style>
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ 658fc9ab
......@@ -125,10 +125,50 @@
</nor-card>
</div>
<p class="service_title" style="margin-top:20px;">
<span></span>应用设置
<span></span>微服务
</p>
<div style="overflow:hidden;height:700px;">
<el-scrollbar class="service_list">
<div class="service_box" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div>
</el-scrollbar>
<div class="service_detail">
<nor-card title="服务概况" flag="true">
<template>
<div style="overflow:hidden;height:160px;padding-top:10px;">
<div style="height:115px;padding-top:10px;" class="service_card_box">
<p
style="color: #707693;font-size: 16px;text-align:center;"
>服务状态</p>
<waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon>
<p
style="color: #58617a;font-size: 16px;text-align:center;"
>{{ yx_state.state }}</p>
</div>
<div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
<p>{{ yx_state.averageTime }}</p>
<p>最大响应时间：{{ yx_state.maxTime }}</p>
</div>
<div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span>
<p>{{ yx_state.averageTraffic }}</p>
<p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
</div>
<div style="height:115px;padding-top:30px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span>
<p>{{ yx_state.memory }}</p>
</div>
</div>
</template>
</nor-card>
<nor-card title="服务设置" flag="true">
<div class="addimage">多版本回滚</div>
<p class="imagebox">
<!-- <p class="imagebox">
<span
@click="image_select = index"
:style="
......@@ -139,7 +179,7 @@
v-for="(item, index) in image_arr"
:key="index + 6000"
>{{ item.name }}</span>
</p>
</p> -->
<table-um
v-for="(item, index) in image_arr"
:key="index+7000"
......@@ -153,6 +193,9 @@
@grouppublic="grouppublic"
@online="online"
></table-um>
</nor-card>
</div>
</div>
</div>
</div>
</div>
......@@ -191,6 +234,84 @@ export default {
oldpag_name: "镜像文件002.rar",
imgList: [],
imgList1: [],
service_list_arr:[
{
service:'cemplat-api1',
is_unhealth:1
},
{
service:'cemplat-api1',
is_unhealth:1
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
{
service:'cemplat-api1',
is_unhealth:0
},
],
yx_state: {
state: "",
averageTime: "",
......@@ -477,6 +598,7 @@ export default {
this.getServiceBaseInfo();
this.getServiceyxztInfo();
this.getImageInfo();
this.get_service_list();
if (this.$route.query.showstate) {
this.now_service = 1;
}
......@@ -662,12 +784,24 @@ export default {
let data = response.data.data;
this.markdown = data;
});
},
get_service_list(){
this.$http
.get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
.then(response => {
if(response.data.success){
this.service_list_arr = response.data.data
}
})
}
}
};
</script>
<style>
.el-scrollbar__wrap {
overflow-x: hidden;
}
.savebtn .el-button {
float: right;
margin-left: 20px;
......@@ -685,6 +819,7 @@ export default {
background-color: #f7f8f9;
width: 1022px;
}
</style>
<style scoped>
.detail_contain {
......@@ -772,6 +907,7 @@ export default {
border-radius: 8px;
margin-top: 20px;
margin-bottom: 30px;
margin-left: 40px;
cursor: pointer;
}
.use_know p {
......@@ -881,4 +1017,50 @@ export default {
overflow: hidden;
-webkit-box-orient: vertical;
}
.service_list{
float: left;
width: 400px;
height: 100%;
overflow-x: hidden;
border: 1px solid #e5f0ff;
border-radius: 12px 0px 0px 12px;
}
.service_box{
width: 400px;
height: 48px;
line-height: 48px;
text-align: left;
padding-left: 38px;
border-bottom: 1px solid #e5f0ff;
position: relative;
cursor: pointer;
}
.service_tips{
display: inline-block;
position: absolute;
font-size: 12px;
color: #e15260;
width: 42px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: #ffefef;
border-radius: 4px;
border: solid 1px #d7a4a9;
top:13px;
right:50px;
}
.service_detail{
float: left;
height: 270px;
width: calc(100% - 425px);
}
.service_card_box{
float: left;
border-right: 1px solid #e5f0ff;
width: calc(25%);
}
.card_contain .service_card_box:nth-last-of-type(1){
border-right:0;
}
</style>
src/store/index.js
View file @ 658fc9ab
......@@ -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