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
Hide 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 @@ ...@@ -4,6 +4,8 @@
<slot name="breadcrumb"></slot> <slot name="breadcrumb"></slot>
</div> </div>
<div class="main-container"> <div class="main-container">
<slot name="top"></slot>
<div class="header-container" v-if="!hideHeader"> <div class="header-container" v-if="!hideHeader">
<div class="header-left apass_button"> <div class="header-left apass_button">
<el-button <el-button
...@@ -18,6 +20,28 @@ ...@@ -18,6 +20,28 @@
" "
></i> ></i>
</el-button> </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> <slot name="header-left"></slot>
</div> </div>
<div class="header-center"> <div class="header-center">
...@@ -51,7 +75,7 @@ ...@@ -51,7 +75,7 @@
<list-table <list-table
:header="listHeader" :header="listHeader"
:data="listData" :data="listData"
:padding-left="35" :padding-left="listPaddingLeft"
></list-table> ></list-table>
</div> </div>
...@@ -84,6 +108,10 @@ export default { ...@@ -84,6 +108,10 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
otherFilter: {
type: Array,
default: () => [],
},
listHeader: { listHeader: {
type: Array, type: Array,
default: () => [], default: () => [],
...@@ -116,8 +144,21 @@ export default { ...@@ -116,8 +144,21 @@ export default {
currentPage: 1, currentPage: 1,
timer: null, timer: null,
pageSizes: [15, 50, 100], pageSizes: [15, 50, 100],
selectFilter: [],
}), }),
methods: { 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) { searchAction(value) {
this.listAction(); this.listAction();
}, },
...@@ -140,8 +181,15 @@ export default { ...@@ -140,8 +181,15 @@ export default {
} }
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
let selectFilter = {};
this.selectFilter.forEach((item) => {
selectFilter[item.prop] = item.value;
});
this.$emit("list-action", { this.$emit("list-action", {
...this.filter, ...this.filter,
...selectFilter,
keyword: this.searchValue, keyword: this.searchValue,
size: this.pageSize, size: this.pageSize,
page: this.currentPage, page: this.currentPage,
...@@ -150,6 +198,10 @@ export default { ...@@ -150,6 +198,10 @@ export default {
}, },
}, },
mounted() { mounted() {
if (this.otherFilter && this.otherFilter.length > 0) {
this.initOtherFilter();
}
this.listAction(); this.listAction();
}, },
}; };
...@@ -182,7 +234,17 @@ export default { ...@@ -182,7 +234,17 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; 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; margin-left: 25px;
} }
.apass_filter { .apass_filter {
......
src/components/apass-table.vue
View file @ 658fc9ab
<template> <template>
<div class="apass_table"> <div class="apass_table">
<el-table :data="data"> <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 <el-table-column
v-for="(item, index) in header" v-for="(item, index) in header"
:label="item.label" :label="item.label"
...@@ -43,6 +46,33 @@ ...@@ -43,6 +46,33 @@
@click="item.callback && item.callback(scope.row)" @click="item.callback && item.callback(scope.row)"
></a> ></a>
</div> </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 <span
v-else v-else
v-text=" v-text="
...@@ -73,3 +103,19 @@ export default { ...@@ -73,3 +103,19 @@ export default {
}, },
}; };
</script> </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> <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_title"><div class="circle"></div>{{title}}</div>
<div class="card_contain"> <div class="card_contain">
<slot></slot> <slot></slot>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<script> <script>
export default { export default {
props: ['title'], props: ['title','flag'],
components: { components: {
}, },
......
src/components/e-charts/line_chart.vue
View file @ 658fc9ab
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
import uuidv1 from "uuid/v1"; import uuidv1 from "uuid/v1";
var echarts = require("echarts"); var echarts = require("echarts");
export default { export default {
props: [], props: ['data'],
components: {}, components: {},
data() { data() {
return { return {
...@@ -16,9 +16,11 @@ export default { ...@@ -16,9 +16,11 @@ export default {
watch: {}, watch: {},
computed: {}, computed: {},
created() {}, created() {},
mounted() {}, mounted() {
this.init_line_charts(this.data.xaxis,this.data.data)
},
methods: { methods: {
init_line_charts() { init_line_charts(xAxisData,yarr) {
let bgColor = "#fff"; let bgColor = "#fff";
let color = [ let color = [
"#0090FF", "#0090FF",
...@@ -28,55 +30,6 @@ export default { ...@@ -28,55 +30,6 @@ export default {
"#8B5CFF", "#8B5CFF",
"#00CA69", "#00CA69",
]; ];
let echartData = [
{
name: "1",
value1: 100,
value2: 233,
},
{
name: "2",
value1: 138,
value2: 233,
},
{
name: "3",
value1: 350,
value2: 200,
},
{
name: "4",
value1: 173,
value2: 180,
},
{
name: "5",
value1: 180,
value2: 199,
},
{
name: "6",
value1: 150,
value2: 233,
},
{
name: "7",
value1: 180,
value2: 210,
},
{
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) => { const hexToRgba = (hex, opacity) => {
let rgbaColor = ""; let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i; let reg = /^#[\da-f]{6}$/i;
...@@ -88,13 +41,65 @@ export default { ...@@ -88,13 +41,65 @@ export default {
return rgbaColor; return rgbaColor;
}; };
option = { var series = []
yarr.forEach((e,idx) => {
series.push(
{
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,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[idx], 0.3),
},
{
offset: 1,
color: hexToRgba(color[idx], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[idx], 0.1),
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
borderWidth: 5,
},
},
data: e.arr,
},
)
});
var option = {
backgroundColor: bgColor, backgroundColor: bgColor,
color: color, color: color,
legend: { legend: {
// show:false,//是否显示图例 // show:false,//是否显示图例
right: "center", right: "center",
bottom: 10, bottom: 0,
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
icon: "roundRect", icon: "roundRect",
...@@ -111,7 +116,10 @@ export default { ...@@ -111,7 +116,10 @@ export default {
}, },
}, },
grid: { grid: {
top: 100, top: 10,
left:10,
right:10,
bottom:30,
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
...@@ -167,102 +175,18 @@ export default { ...@@ -167,102 +175,18 @@ export default {
}, },
}, },
], ],
series: [ series: 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,
},
],
}; };
window[this.line] = echarts.init(document.getElementById(this.line));
window[this.line].setOption(option, true);
}, },
}, },
}; };
</script> </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> <template>
<div class="menu"> <div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt class="logo" /> <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 <span
v-if="userInfo.user_name && userInfo.user_name !=''" v-if="userInfo.user_name && userInfo.user_name != ''"
class="user" class="user"
>{{ userInfo.user_name }}</span> >{{ userInfo.user_name }}</span
>
<span v-else @click="gotopage('login')" class="user">请登录</span> <span v-else @click="gotopage('login')" class="user">请登录</span>
<img <img
:class="userInfo.picture_path ? 'user_pic': 'user_default'" :class="userInfo.picture_path ? 'user_pic' : 'user_default'"
:src=" :src="
userInfo.picture_path || require('../assets/imgs/home_ic_user.png') 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 <div
v-for="(item, index) in user_arr" v-for="(item, index) in user_arr"
:key="index + 700" :key="index + 700"
@click="gotopage(item.path)" @click="gotopage(item.path)"
>{{ item.name }}</div> >
{{ item.name }}
</div>
</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>
<div <div
style="float:right;cursor: pointer;position:relative;" style="float:right;cursor: pointer;position:relative;"
...@@ -28,10 +40,18 @@ ...@@ -28,10 +40,18 @@
@click="gotopage('/shop/shopping_cart')" @click="gotopage('/shop/shopping_cart')"
> >
<div class="car"> <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" /> <img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
</div> </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 class="shop_list_title">最近加入的服务：</div>
<div <div
v-for="(item, index) in shopping_list" v-for="(item, index) in shopping_list"
...@@ -42,35 +62,44 @@ ...@@ -42,35 +62,44 @@
<div class="shop_cell_msgs"> <div class="shop_cell_msgs">
<p @click="getDetail(item.id)" class="shop_cell_name over_one"> <p @click="getDetail(item.id)" class="shop_cell_name over_one">
{{ {{
item.service_id == 0 item.service_id == 0
? item.application.app_name ? item.application.app_name
: item.service.name : item.service.name
}} }}
</p> </p>
<p class="shop_cell_msg bover_one"> <p class="shop_cell_msg bover_one">
{{ {{
item.service_id == 0 item.service_id == 0
? item.application.ywly ? item.application.ywly
: item.service.sectors_name : item.service.sectors_name
}} }}
</p> </p>
<p class="shop_cell_msg over_one"> <p class="shop_cell_msg over_one">
{{ {{
item.service_id == 0 item.service_id == 0
? item.application.org ? item.application.org
: item.service.organization_name : item.service.organization_name
}} }}
</p> </p>
</div> </div>
<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> </div>
<div class="shop_footer"> <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> </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>
<div style="float:right"> <div style="float:right">
...@@ -82,14 +111,24 @@ ...@@ -82,14 +111,24 @@
:style="{ color: now_menu == item.visit_url ? '#fff' : '' }" :style="{ color: now_menu == item.visit_url ? '#fff' : '' }"
> >
{{ item.menu_name }} {{ 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 <div
v-for="(v, indexs) in item.Child" v-for="(v, indexs) in item.Child"
:key="indexs + 700" :key="indexs + 700"
@click.stop="gotoChildPage(v, item.visit_url)" @click.stop="gotoChildPage(v, item.visit_url)"
>{{ v.menu_name }}</div> >
{{ v.menu_name }}
</div>
</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 class="bottom_show" v-if="now_menu == item.visit_url"></div>
</div> </div>
</div> </div>
...@@ -107,10 +146,10 @@ export default { ...@@ -107,10 +146,10 @@ export default {
{ name: "消息通知", path: "/user/message" }, { name: "消息通知", path: "/user/message" },
{ name: "收银中心", path: "" }, { name: "收银中心", path: "" },
{ name: "关于BD-aPaaS", path: "" }, { name: "关于BD-aPaaS", path: "" },
{ name: "退出登录", path: "logout" } { name: "退出登录", path: "logout" },
], ],
shopping_list: [], shopping_list: [],
menuCartNum: 0 menuCartNum: 0,
}; };
}, },
mounted() { mounted() {
...@@ -123,12 +162,12 @@ export default { ...@@ -123,12 +162,12 @@ export default {
}, },
userInfo() { userInfo() {
return this.$store.state.userInfo || {}; return this.$store.state.userInfo || {};
} },
}, },
watch: { watch: {
getMenuCartState(newVal) { getMenuCartState(newVal) {
this.getList(); this.getList();
} },
}, },
methods: { methods: {
gotopage(n) { gotopage(n) {
...@@ -146,7 +185,7 @@ export default { ...@@ -146,7 +185,7 @@ export default {
}, },
deleteItem(id) { deleteItem(id) {
let query = [id]; let query = [id];
this.$api.serviceShop.delShoppingCart(query).then(response => { this.$api.serviceShop.delShoppingCart(query).then((response) => {
this.getList(); this.getList();
}); });
}, },
...@@ -175,7 +214,7 @@ export default { ...@@ -175,7 +214,7 @@ export default {
} }
}, },
getList() { getList() {
this.$api.serviceShop.getShoppingCart().then(response => { this.$api.serviceShop.getShoppingCart().then((response) => {
if (response.data.success == "1") { if (response.data.success == "1") {
this.menuCartNum = response.data.data.valid this.menuCartNum = response.data.data.valid
? response.data.data.valid.length ? response.data.data.valid.length
...@@ -194,14 +233,15 @@ export default { ...@@ -194,14 +233,15 @@ export default {
this.now_menu = visit_url ? visit_url : "/services_shop"; this.now_menu = visit_url ? visit_url : "/services_shop";
}, },
getNowMenu() { getNowMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => { this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
if (response.data.success == 1) { 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(); this.getMenuIndex();
} }
}); });
} },
} },
}; };
</script> </script>
...@@ -415,4 +455,4 @@ export default { ...@@ -415,4 +455,4 @@ export default {
line-height: 18px; line-height: 18px;
padding: 0 7px; padding: 0 7px;
} }
</style> </style>
\ No newline at end of file
src/components/service-header.vue
View file @ 658fc9ab
...@@ -57,7 +57,9 @@ export default { ...@@ -57,7 +57,9 @@ export default {
methods: { methods: {
subevent(val){ subevent(val){
if(val == 0){ 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){ }else if(val == 1){
this.$emit('editapp') this.$emit('editapp')
}else if(val == 2){ }else if(val == 2){
......
src/components/service-tabs/service-tab-comments.vue
View file @ 658fc9ab
...@@ -50,11 +50,11 @@ export default { ...@@ -50,11 +50,11 @@ export default {
score: 0, score: 0,
starInfo: [ starInfo: [
{ {
star: 1, star: 5,
percent: 0, percent: 0,
}, },
{ {
star: 2, star: 4,
percent: 0, percent: 0,
}, },
{ {
...@@ -62,11 +62,11 @@ export default { ...@@ -62,11 +62,11 @@ export default {
percent: 0, percent: 0,
}, },
{ {
star: 4, star: 2,
percent: 0, percent: 0,
}, },
{ {
star: 5, star: 1,
percent: 0, percent: 0,
}, },
], ],
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
return { return {
score: data.avgScore || 0, score: data.avgScore || 0,
starInfo: [1, 2, 3, 4, 5].map((star) => { starInfo: [5,4,3,2,1].map((star) => {
let percent = let percent =
this.commentsTtotal > 0 this.commentsTtotal > 0
? (((data.scoreStatic && data.scoreStatic[star]) || 0) / ? (((data.scoreStatic && data.scoreStatic[star]) || 0) /
......
src/components/service-tabs/service-tabs.vue
View file @ 658fc9ab
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
></service-tab-detail> ></service-tab-detail>
</el-tab-pane> </el-tab-pane>
<!-- 规格定价 --> <!-- 规格说明 -->
<el-tab-pane <el-tab-pane
:label="specificationTitle" :label="specificationTitle"
name="specification" name="specification"
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
></service-tab-specification> ></service-tab-specification>
</el-tab-pane> </el-tab-pane>
<!-- 提供机构 --> <!-- 提供组织 -->
<el-tab-pane :label="providerTitle" name="provider" v-if="providerData"> <el-tab-pane :label="providerTitle" name="provider" v-if="providerData">
<service-tab-provider <service-tab-provider
class="service_info" class="service_info"
...@@ -65,11 +65,11 @@ export default { ...@@ -65,11 +65,11 @@ export default {
}, },
specificationTitle: { specificationTitle: {
type: String, type: String,
default: () => "规格定价", default: () => "规格说明",
}, },
providerTitle: { providerTitle: {
type: String, type: String,
default: () => "提供机构", default: () => "提供组织",
}, },
commentsTitle: { commentsTitle: {
type: String, type: String,
......
src/pages/data-analysis/my-service.vue
View file @ 658fc9ab
...@@ -30,7 +30,9 @@ ...@@ -30,7 +30,9 @@
<block-radius class="block"></block-radius> <block-radius class="block"></block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <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>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius class="block">
...@@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius"; ...@@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard"; import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from '@/components/e-charts/multiple_circle' import multipleCircle from '@/components/e-charts/multiple_circle'
import singleCircle from '@/components/e-charts/single_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 Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist"; import Starlist from "@/components/e-charts/starlist";
export default { export default {
...@@ -85,7 +88,8 @@ export default { ...@@ -85,7 +88,8 @@ export default {
multipleCircle, multipleCircle,
singleCircle, singleCircle,
Toplist, Toplist,
Starlist Starlist,
lineChart
}, },
data: () => ({ data: () => ({
navList: [], navList: [],
...@@ -99,6 +103,23 @@ export default { ...@@ -99,6 +103,23 @@ export default {
num:12, num:12,
color:'#515fe7', color:'#515fe7',
text:'共享' 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() {}, mounted() {},
......
src/pages/service_shop/yysdDetail.vue
View file @ 658fc9ab
...@@ -14,8 +14,10 @@ ...@@ -14,8 +14,10 @@
<service-tabs <service-tabs
:detail-data="detailData" :detail-data="detailData"
detail-title="应用详情信息"
:provider-data="providerData" :provider-data="providerData"
:comments-url="commentsUrl" :comments-url="commentsUrl"
comments-title="应用评价信息"
:is_app_detail="true" :is_app_detail="true"
></service-tabs> ></service-tabs>
</div> </div>
......
src/pages/workbench/app_build.vue
View file @ 658fc9ab
...@@ -94,6 +94,7 @@ ...@@ -94,6 +94,7 @@
下一步 下一步
</el-button> </el-button>
</div> </div>
<image-detail ref="imageDetail" :image="selectedImage"></image-detail>
</app-build-step> </app-build-step>
<app-build-step <app-build-step
title="上传部署文件" title="上传部署文件"
...@@ -282,6 +283,7 @@ import appBuildStep from "@/components/app-build-steps/app-build-step"; ...@@ -282,6 +283,7 @@ import appBuildStep from "@/components/app-build-steps/app-build-step";
import apassTable from "@/components/apass-table"; import apassTable from "@/components/apass-table";
import uploadFile from "@/components/general/upload_file"; import uploadFile from "@/components/general/upload_file";
import apassDialog from "@/components/apass-dialog"; import apassDialog from "@/components/apass-dialog";
import imageDetail from "@/components/image-detail";
export default { export default {
components: { components: {
...@@ -290,6 +292,7 @@ export default { ...@@ -290,6 +292,7 @@ export default {
apassTable, apassTable,
uploadFile, uploadFile,
apassDialog, apassDialog,
imageDetail,
}, },
data: () => ({ data: () => ({
step: 0, step: 0,
...@@ -357,6 +360,7 @@ export default { ...@@ -357,6 +360,7 @@ export default {
msg: "", msg: "",
submit: null, submit: null,
}, },
selectedImage: null,
}), }),
methods: { methods: {
preStep() { preStep() {
...@@ -570,8 +574,9 @@ export default { ...@@ -570,8 +574,9 @@ export default {
return ""; return "";
} }
}, },
showDetail(item) { showImageDetail(item) {
console.log(item); this.selectedImage = item;
this.$refs.imageDetail.showDialog();
}, },
}, },
mounted() { mounted() {
...@@ -581,7 +586,7 @@ export default { ...@@ -581,7 +586,7 @@ export default {
prop: "name", prop: "name",
align: "left", align: "left",
type: "button", type: "button",
callback: this.showDetail, callback: this.showImageDetail,
}, },
{ {
label: "版本号", label: "版本号",
......
src/pages/workbench/fwgl/fwglList.vue
View file @ 658fc9ab
...@@ -5,15 +5,63 @@ ...@@ -5,15 +5,63 @@
search-placeholder="请输入关键字" search-placeholder="请输入关键字"
:list-total="listTotal" :list-total="listTotal"
:list-filter="filterList" :list-filter="filterList"
:other-filter="filterList2"
:list-header="listHeader" :list-header="listHeader"
:list-data="listData" :list-data="listData"
:list-padding-left="35" :list-padding-left="paddingLeft"
@list-action="init" @list-action="init"
> >
<el-breadcrumb separator="/" slot="breadcrumb"> <el-breadcrumb separator="/" slot="breadcrumb">
<el-breadcrumb-item :to="`/fwgl/${level}`">我的服务</el-breadcrumb-item> <el-breadcrumb-item :to="`/fwgl/${level}`">我的服务</el-breadcrumb-item>
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item> <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb> </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-list>
<apass-dialog <apass-dialog
...@@ -26,20 +74,23 @@ ...@@ -26,20 +74,23 @@
</template> </template>
<script> <script>
import helper from "@/services/helper.js";
import { mapState } from "vuex"; import { mapState } from "vuex";
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list"; import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog"; import apassDialog from "@/components/apass-dialog";
import Dashboard from "@/components/e-charts/dashboard";
export default { export default {
components: { apassList, apassDialog }, components: { apassList, apassDialog, Dashboard },
data: () => ({ data: () => ({
level: 0, // 用户等级 level: 0, // 用户等级
type: 0, // 访问的页面 type: 0, // 访问的页面
paddingLeft: 35,
listTotal: 0, listTotal: 0,
listHeader: [], listHeader: [],
listData: [], listData: [],
filterList: [], filterList: [],
filterList2: [],
otherFilter: [], otherFilter: [],
dialogInfo: { dialogInfo: {
title: "", title: "",
...@@ -49,6 +100,8 @@ export default { ...@@ -49,6 +100,8 @@ export default {
listUrl: "", listUrl: "",
deleteUrl: "", deleteUrl: "",
tempFliter: null, tempFliter: null,
cloud_zuzhi: null,
cloud_admin: null,
}), }),
computed: { computed: {
...mapState({ ...mapState({
...@@ -71,27 +124,31 @@ export default { ...@@ -71,27 +124,31 @@ export default {
}, },
methods: { methods: {
initFilter() { initFilter() {
Promise.all([ if (this.type == 2) {
this.$http.get("/apaas/service/v3/service/manager/servtype"), //
this.$http.get("/apaas/service/v3/service/manager/servarea"), } else {
]) Promise.all([
.then((response) => { this.$http.get("/apaas/service/v3/service/manager/servtype"),
let data = response.map((item) => { this.$http.get("/apaas/service/v3/service/manager/servarea"),
return { ])
name: item.body.data[0].type_name, .then((response) => {
prop: item.body.data[0].type_code, let data = response.map((item) => {
data: item.body.data.map((v) => ({ return {
name: v.name, name: item.body.data[0].type_name,
value: v.id, prop: item.body.data[0].type_code,
})), data: item.body.data.map((v) => ({
}; name: v.name,
}); value: v.id,
})),
};
});
this.filterList = [...data, ...this.otherFilter]; this.filterList = [...data, ...this.otherFilter];
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
}); });
}
}, },
initHeader() { initHeader() {
let _self = this; let _self = this;
...@@ -149,9 +206,7 @@ export default { ...@@ -149,9 +206,7 @@ export default {
}, },
{ {
getLabel(item) { getLabel(item) {
return ( return ["申请上架", "申请下架", "审核中"][item.state] || "-";
["申请上架", "申请下架", "审核中"][item.state] || "-"
);
}, },
callback(item) { callback(item) {
if (item.state == 0) { if (item.state == 0) {
...@@ -322,18 +377,97 @@ export default { ...@@ -322,18 +377,97 @@ export default {
}, },
]; ];
} }
// TODO: 普通用户 --- 云资源服务 // 普通用户 --- 云资源服务
else if (level == 0 && type == 2) { 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 = [ this.listHeader = [
{ {
label: "工作区域", label: "运行状态",
prop: "name", 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", prop: "name",
align: "center", type: "button",
callback: this.cloudDetail,
}, },
{ {
label: "CPU（核）", label: "CPU（核）",
...@@ -346,14 +480,29 @@ export default { ...@@ -346,14 +480,29 @@ export default {
align: "center", align: "center",
}, },
{ {
label: "资源总量（GB）", label: "容器组（个）",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{ {
label: "实例数（个）", label: "数据盘（块/GB）",
prop: "name", type: "tooltip",
align: "center", 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: "申请时间", label: "申请时间",
...@@ -361,21 +510,31 @@ export default { ...@@ -361,21 +510,31 @@ export default {
align: "center", align: "center",
}, },
{ {
label: "申请状态", label: "初次申请状态",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{ {
label: "操作", label: "资源调整结果",
type: "buttons", prop: "name",
align: "center", 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"],
}, },
]; ];
} }
...@@ -509,7 +668,7 @@ export default { ...@@ -509,7 +668,7 @@ export default {
(item.service_apply_info && (item.service_apply_info &&
item.service_apply_info.approval_time) || item.service_apply_info.approval_time) ||
""; "";
return item.service_apply_info && return item.service_apply_info &&
item.service_apply_info.approval_status == 1 item.service_apply_info.approval_status == 1
? helper.dateStringTransform(date) ? helper.dateStringTransform(date)
...@@ -586,41 +745,111 @@ export default { ...@@ -586,41 +745,111 @@ export default {
}, },
]; ];
} }
// TODO: 组织管理员 --- 云资源管理 // 组织管理员 --- 云资源管理
else if (level == 1 && type == 2) { 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 = [ this.listHeader = [
{ {
label: "工作区域", label: "工作区域名称",
prop: "name", prop: "name",
type: "button",
callback: this.cloudDetail,
}, },
{ {
label: "网络环境", label: "CPU（核）",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{ {
label: "CPU（核）", label: "内存（GB）",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{ {
label: "内存（GB）", label: "容器组（个）",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{ {
label: "资源总量（GB）", label: "数据盘（块/GB）",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{ {
label: "实例数（个）", label: "申请用户",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{ {
label: "使用用户", label: "业务系统名",
prop: "name", prop: "name",
align: "center", align: "center",
}, },
...@@ -629,6 +858,21 @@ export default { ...@@ -629,6 +858,21 @@ export default {
prop: "name", prop: "name",
align: "center", align: "center",
}, },
{
label: "初次申请状态",
prop: "name",
align: "center",
},
{
label: "资源调整状态",
prop: "name",
align: "center",
},
{
label: "运行状态",
prop: "name",
align: "center",
},
{ {
label: "操作", label: "操作",
type: "buttons", type: "buttons",
...@@ -637,7 +881,7 @@ export default { ...@@ -637,7 +881,7 @@ export default {
actionList: [ actionList: [
{ {
label: "分配", label: "分配",
callback: this.allotItem, callback: this.cloudAllot,
}, },
], ],
}, },
...@@ -859,46 +1103,37 @@ export default { ...@@ -859,46 +1103,37 @@ export default {
}, },
]; ];
} }
// TODO: 超级管理员 --- 云资源管理 // 超级管理员 --- 云资源管理
else if (level == 2 && type == 2) { else if (level == 2 && type == 2) {
this.listUrl = "xxxxxx"; this.cloud_admin = {
this.listHeader = [ dashboard_list: [
{ {
label: "所属组织", name: "cpu使用量",
prop: "name", value: 6,
}, total: 10,
{ unit: "（核）",
label: "CPU使用量", },
prop: "name", {
align: "center", name: "内存使用量",
}, value: 13,
{ total: 20,
label: "内存使用量", unit: "（GB）",
prop: "name", },
align: "center", {
}, name: "数据盘使用量",
{ value: 240,
label: "工作区域数量", total: 560,
prop: "name", unit: "（GB）",
align: "center", },
}, {
{ name: "容器组使用量",
label: "创建时间", value: 10,
prop: "name", total: 18,
align: "center", unit: "（个）",
}, },
{ ],
label: "操作", histogram: {},
type: "buttons", };
align: "center",
actionList: [
{
label: "删除",
callback: this.deleteItem,
},
],
},
];
} }
// Error // Error
...@@ -907,6 +1142,12 @@ export default { ...@@ -907,6 +1142,12 @@ export default {
} }
}, },
init(filter) { init(filter) {
console.log(filter);
if (!this.listUrl) {
return;
}
this.tempFliter = filter; this.tempFliter = filter;
this.$http this.$http
...@@ -1130,9 +1371,12 @@ export default { ...@@ -1130,9 +1371,12 @@ export default {
`/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.service_apply_info.id}` `/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.service_apply_info.id}`
); );
}, // 审批服务 }, // 审批服务
allotItem(item) { cloudDetail(item) {
console.log("allotItem - " + item.name); console.log("cloudDetail - " + item.name);
}, // TODO: 云资源分配 },
cloudAllot(item) {
console.log("cloudAllot - " + item.name);
},
}, },
created() { created() {
this.level = parseInt(this.$route.params.level); this.level = parseInt(this.$route.params.level);
...@@ -1163,4 +1407,46 @@ export default { ...@@ -1163,4 +1407,46 @@ export default {
.service_management_list { .service_management_list {
height: 100%; 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> </style>
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ 658fc9ab
...@@ -125,34 +125,77 @@ ...@@ -125,34 +125,77 @@
</nor-card> </nor-card>
</div> </div>
<p class="service_title" style="margin-top:20px;"> <p class="service_title" style="margin-top:20px;">
<span></span>应用设置 <span></span>微服务
</p> </p>
<div class="addimage">多版本回滚</div> <div style="overflow:hidden;height:700px;">
<p class="imagebox"> <el-scrollbar class="service_list">
<span <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>
@click="image_select = index" </el-scrollbar>
:style=" <div class="service_detail">
image_select == index <nor-card title="服务概况" flag="true">
? { backgroundColor: '#8390ee', color: '#f8f9fd' } <template>
: {} <div style="overflow:hidden;height:160px;padding-top:10px;">
" <div style="height:115px;padding-top:10px;" class="service_card_box">
v-for="(item, index) in image_arr" <p
:key="index + 6000" style="color: #707693;font-size: 16px;text-align:center;"
>{{ item.name }}</span> >服务状态</p>
</p> <waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon>
<table-um <p
v-for="(item, index) in image_arr" style="color: #58617a;font-size: 16px;text-align:center;"
:key="index+7000" >{{ yx_state.state }}</p>
v-show="image_select == index" </div>
:headers="header_image_arr"
:datas="image_arr[index].data" <div style="height:115px;" class="service_num service_card_box">
:stripe="true" <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
:paginationShow="true" <p>{{ yx_state.averageTime }}</p>
@update="update" <p>最大响应时间：{{ yx_state.maxTime }}</p>
@rollback="rollback" </div>
@grouppublic="grouppublic"
@online="online" <div style="height:115px;" class="service_num service_card_box">
></table-um> <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">
<span
@click="image_select = index"
:style="
image_select == index
? { backgroundColor: '#8390ee', color: '#f8f9fd' }
: {}
"
v-for="(item, index) in image_arr"
:key="index + 6000"
>{{ item.name }}</span>
</p> -->
<table-um
v-for="(item, index) in image_arr"
:key="index+7000"
v-show="image_select == index"
:headers="header_image_arr"
:datas="image_arr[index].data"
:stripe="true"
:paginationShow="true"
@update="update"
@rollback="rollback"
@grouppublic="grouppublic"
@online="online"
></table-um>
</nor-card>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -191,6 +234,84 @@ export default { ...@@ -191,6 +234,84 @@ export default {
oldpag_name: "镜像文件002.rar", oldpag_name: "镜像文件002.rar",
imgList: [], imgList: [],
imgList1: [], 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: { yx_state: {
state: "", state: "",
averageTime: "", averageTime: "",
...@@ -477,6 +598,7 @@ export default { ...@@ -477,6 +598,7 @@ export default {
this.getServiceBaseInfo(); this.getServiceBaseInfo();
this.getServiceyxztInfo(); this.getServiceyxztInfo();
this.getImageInfo(); this.getImageInfo();
this.get_service_list();
if (this.$route.query.showstate) { if (this.$route.query.showstate) {
this.now_service = 1; this.now_service = 1;
} }
...@@ -662,12 +784,24 @@ export default { ...@@ -662,12 +784,24 @@ export default {
let data = response.data.data; let data = response.data.data;
this.markdown = 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> </script>
<style> <style>
.el-scrollbar__wrap {
overflow-x: hidden;
}
.savebtn .el-button { .savebtn .el-button {
float: right; float: right;
margin-left: 20px; margin-left: 20px;
...@@ -684,7 +818,8 @@ export default { ...@@ -684,7 +818,8 @@ export default {
.info_contain2 .el-input__inner { .info_contain2 .el-input__inner {
background-color: #f7f8f9; background-color: #f7f8f9;
width: 1022px; width: 1022px;
} }
</style> </style>
<style scoped> <style scoped>
.detail_contain { .detail_contain {
...@@ -772,6 +907,7 @@ export default { ...@@ -772,6 +907,7 @@ export default {
border-radius: 8px; border-radius: 8px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 30px; margin-bottom: 30px;
margin-left: 40px;
cursor: pointer; cursor: pointer;
} }
.use_know p { .use_know p {
...@@ -881,4 +1017,50 @@ export default { ...@@ -881,4 +1017,50 @@ export default {
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -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> </style>
src/store/index.js
View file @ 658fc9ab
...@@ -8,9 +8,9 @@ const store = new Vuex.Store({ ...@@ -8,9 +8,9 @@ const store = new Vuex.Store({
userInfo: null, // 用户信息 userInfo: null, // 用户信息
serviceShopMenu: "/shop/data_service_list", // 服务超市侧边栏 serviceShopMenu: "/shop/data_service_list", // 服务超市侧边栏
fwglNav: [ fwglNav: [
["注册发布的服务", "申请的服务" /* , "云资源服务" */], // 普通用户 ["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
["组织服务管理", "服务审批管理" /* , "云资源管理" */], // 组织管理员 ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
["平台服务管理", "服务审批管理" /* , "云资源管理" */], // 超级管理员 ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
], // 服务管理列表，onlyRead ], // 服务管理列表，onlyRead
yyglNav: [ 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