Skip to content

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

超管-云资源管理-工作区域审批和云资源详情页面

parent ec96fdf2
Show whitespace changes
Inline Side-by-side
Showing with 341 additions and 100 deletions
src/components/apass-list.vue
View file @ 4d1d7095
......@@ -69,6 +69,10 @@
@filter-change="filterChange"
></list-filter>
<div class="main_top_container" v-if="$slots['main-top']">
<slot name="main-top"></slot>
</div>
<div class="cross_line" v-if="!hideHeader"></div>
<div class="list-container" v-if="$slots.list">
......@@ -149,8 +153,17 @@ export default {
pageSizes: [10, 20, 50],
selectFilter: [],
}),
watch: {
otherFilter: {
handler() {
this.initOtherFilter();
},
deep: true,
},
},
methods: {
initOtherFilter() {
if (this.otherFilter && this.otherFilter.length > 0) {
this.otherFilter.forEach((item) => {
this.$set(this.filter, item.prop, item.default);
......@@ -161,6 +174,7 @@ export default {
options: item.options,
});
});
}
},
searchAction(value) {
this.listAction();
......@@ -201,10 +215,7 @@ export default {
},
},
mounted() {
if (this.otherFilter && this.otherFilter.length > 0) {
this.initOtherFilter();
}
this.listAction();
},
};
......
src/pages/workbench/fwgl/approveWorkspace.vue
View file @ 4d1d7095
......@@ -57,7 +57,25 @@ export default {
computed: {},
methods: {
init(filter) {
console.log(filter);
// console.log(filter);
this.$http
.get("/apaas/service/v3/resource/user/apply/list", {
params: {
search: filter.keyword,
page: filter.page,
limit: filter.size,
depart: "",
state1: filter.state1,
},
})
.then(({ data }) => {
this.listTotal = data.total;
this.listData = data.data.cloud_apply_list;
})
.catch((error) => {
console.log(error);
});
},
showDialog() {
this.$refs.dialog.show();
......@@ -76,10 +94,12 @@ export default {
this.level = parseInt(this.$route.params.level);
this.type = parseInt(this.$route.params.type);
let warnFlag = this.$route.query.warn || false;
this.otherFilter = [
{
name: "审批状态",
prop: "approve_state",
prop: "state1",
default: "",
options: [
{
......@@ -187,7 +207,7 @@ export default {
label: "审批",
callback: this.approveAction,
disabledRule(item) {
return item.approve_state != 0;
return item.approve_state != 0 || warnFlag;
},
},
{
......@@ -198,7 +218,6 @@ export default {
],
},
];
this.listData = [{}, {}, {}];
},
};
</script>
......
src/pages/workbench/fwgl/fwglList.vue
View file @ 4d1d7095
......@@ -123,7 +123,6 @@ import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import allotInfoConfirm from "@/components/allot-info-confirm";
import Dashboard from "@/components/e-charts/dashboard";
import organizationList from "@/components/organization-list/organization-list";
export default {
......@@ -131,7 +130,6 @@ export default {
apassList,
apassDialog,
allotInfoConfirm,
Dashboard,
organizationList,
},
data: () => ({
......@@ -489,7 +487,7 @@ export default {
align: "center",
type: "image",
getImage(item) {
return item.state == 0
return item.state == 1
? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_failed.png");
},
......@@ -828,7 +826,7 @@ export default {
align: "center",
type: "image",
getImage(item) {
return item.state == 0
return item.state == 1
? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_failed.png");
},
......@@ -1214,7 +1212,7 @@ export default {
count_zy: cloud.count_zy,
dashboard_list: [
{
name: "cpu使用量",
name: "CPU使用量",
value: cloud.cpu_use,
total: cloud.cpu_total,
unit: "（核）",
......@@ -1243,7 +1241,7 @@ export default {
this.cloud_admin = {
dashboard_list: [
{
name: "cpu使用量",
name: "CPU使用量",
value: cloud.cpu_use,
total: cloud.cpu_total,
unit: "（核）",
......@@ -1995,11 +1993,12 @@ export default {
}
},
approveWorkspace() {
/* if (this.cloud_admin_warn) {
console.log("告警 ---");
} else { */
this.$router.push(`/fwgl/${this.level}/${this.type}/approveWorkspace`);
// }
this.$router.push({
path: `/fwgl/${this.level}/${this.type}/approveWorkspace`,
query: {
warn: this.cloud_admin_warn,
},
});
},
},
created() {
......
src/pages/workbench/fwgl/organizationCloudResource.vue
View file @ 4d1d7095
......@@ -21,6 +21,32 @@
组织云资源详情
</el-breadcrumb-item>
</el-breadcrumb>
<template slot="main-top">
<div
class="dashboard_contaner"
v-if="dashboardList && dashboardList.length > 1"
>
<div
class="dashborad_list"
v-for="(item, index) in dashboardList"
:key="index"
>
<chart
:options="getDashboardOption(item)"
class="dashboard_chart"
/>
<p class="dashboard_info">
<span>物理总量</span>
<span v-text="item.total + item.unit"></span>
</p>
<p class="dashboard_info">
<span>剩余量</span>
<span v-text="item.value + item.unit"></span>
</p>
</div>
</div>
</template>
</apass-list>
<apass-dialog
......@@ -33,6 +59,7 @@
</template>
<script>
import { graphic } from "echarts/lib/export";
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
......@@ -49,6 +76,7 @@ export default {
listHeader: [],
listData: [],
listTotal: 0,
dashboardList: [],
dialogInfo: {
title: "",
msg: "",
......@@ -58,81 +86,256 @@ export default {
computed: {},
methods: {
init(filter) {
console.log(filter);
},
showDialog() {
this.$refs.dialog.show();
// console.log(filter);
this.$http
.get("/apaas/service/v3/resource/user/apply/list", {
params: {
search: filter.keyword,
page: filter.page,
limit: filter.size,
depart: filter.depart,
},
})
.then(({ data }) => {
this.listTotal = data.total;
this.listData = data.data.cloud_apply_list;
const cloud = data.data.cloud_resource_count;
this.dashboardList = [
{
name: "CPU使用量",
value: cloud.cpu_use,
total: cloud.cpu_total,
unit: "（核）",
},
detailAction(item) {
console.log("detailAction");
{
name: "内存使用量",
value: cloud.memory_use,
total: cloud.memory_total,
unit: "（GB）",
},
approveAction(item) {
console.log("approveAction");
{
name: "数据盘使用量",
value: cloud.disk_use,
total: cloud.disk_total,
unit: "（GB）",
},
deleteAction(item) {
console.log("deleteAction");
{
name: "容器组使用量",
value: cloud.containers_use,
total: cloud.containers_total,
unit: "（个）",
},
];
})
.catch((error) => {
console.log(error);
});
},
created() {
this.level = parseInt(this.$route.params.level);
this.type = parseInt(this.$route.params.type);
getOrganizations() {
this.$http
.get("/apaas/backmgt/department/list")
.then(({ data }) => {
if (data.success == 1) {
let organizations = data.data || [];
this.otherFilter = [
{
name: "组织名称",
prop: "organization",
prop: "depart",
default: this.$route.params.id,
options: [
{
value: "1",
name: "不许删",
options: organizations.map((item) => ({
name: item.department_name,
value: item.department_id,
})),
},
{
value: "39",
name: "应用测试一轮shf",
];
}
})
.catch((error) => {
console.log(error);
});
},
{
value: "38",
name: "我的组织",
getDashboardOption(item) {
let percent = Math.round((item.value / item.total) * 100) || 0;
let colors = ["#515fe7", "#e7ecfd"];
if (percent >= 80) {
colors = ["#e3606d", "#f6d0d0"];
}
return {
title: {
text: percent + "%",
subtext: item.name,
x: "center",
y: "center",
textVerticalAlign: "auto",
textStyle: {
fontSize: 34,
fontWeight: "100",
color: ["#0d1847"],
},
{
value: "37",
name: "1234567890",
subtextStyle: {
fontSize: 12,
fontWeight: "100",
color: "#707693",
},
{
value: "36",
name: "测试bug",
},
{
value: "35",
name: "3213123",
angleAxis: {
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
min: 0,
max: 138,
boundaryGap: ["0", "100"],
startAngle: 220,
endAngle: -40,
},
radiusAxis: {
type: "category",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
polar: {
radius: "110%",
},
series: [
{
value: "33",
name: "B.G.R.A123",
type: "bar",
data: [, percent],
coordinateSystem: "polar",
barMaxWidth: 10,
z: 1,
name: "B",
roundCap: true,
itemStyle: {
normal: {
color: new graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: colors[1] },
]),
},
},
barGap: "-100%",
},
{
value: "32",
name: "Bgtest23.号",
type: "bar",
data: [, 100],
z: 0,
silent: true,
coordinateSystem: "polar",
barMaxWidth: 10,
name: "C",
roundCap: true,
color: "#ddd",
barGap: "-100%",
},
{
value: "31",
name: "6",
type: "gauge",
radius: "70%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 220,
endAngle: -40,
axisLabel: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
width: 0.5,
color: [[1, "rgba(0,0,0,0)"]],
},
}, //仪表盘轴线
axisLabel: {
show: false,
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 5,
lineStyle: {
color: "#e3e4ea",
width: 0.5,
},
length: 3,
}, //刻度样式
splitLine: {
show: true,
length: 4,
lineStyle: {
color: "#e3e4ea",
width: 0.5,
},
}, //分隔线样式
detail: {
show: false,
},
pointer: {
show: false,
},
},
{
value: "30",
name: "R.A.M.H.S.U",
name: "point",
type: "scatter",
coordinateSystem: "polar",
barGap: "-100%",
zlevel: 0,
symbol: "circle",
symbolSize: 6,
itemStyle: {
normal: {
show: true,
color: "#fff",
},
},
data: [, percent],
},
],
};
},
];
showDialog() {
this.$refs.dialog.show();
},
detailAction(item) {
console.log("detailAction");
},
stateAction(item) {
console.log("stateAction");
},
},
created() {
this.level = parseInt(this.$route.params.level);
this.type = parseInt(this.$route.params.type);
this.getOrganizations();
this.listHeader = [
{
label: "运行状态",
align: "center",
type: "image",
getImage(item) {
return item.state == 0
return item.state == 1
? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_failed.png");
},
......@@ -191,22 +394,6 @@ export default {
prop: "system_name",
align: "center",
},
{
label: "初次申请状态",
align: "center",
getText(item) {
return ["未通过", "待审批", "通过"][(item.approve_state || 0) + 1];
},
},
{
label: "资源调整结果",
align: "center",
getText(item) {
return ["未通过", "待审批", "通过"][
(item.approve_update_state || 0) + 1
];
},
},
{
label: "用户申请时间",
prop: "apply_time",
......@@ -220,17 +407,13 @@ export default {
actionList: [
{
getLabel(item) {
return item.use_uid ? "已分配" : "分配";
},
callback: this.cloudAllot,
disabledRule(item) {
return item.use_uid;
return item.state == 1 ? "禁用" : "启用";
},
callback: this.stateAction,
},
],
},
];
this.listData = [{}, {}, {}];
},
};
</script>
......@@ -239,4 +422,33 @@ export default {
.organization_cloud_resource {
height: 100%;
}
.dashboard_contaner {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 20px;
}
.dashborad_list {
text-align: center;
margin: 0 25px;
font-size: 18px;
}
.dashboard_chart {
width: 136px;
height: 136px;
}
.dashboard_info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
line-height: 30px;
color: #8890a7;
}
.dashboard_info:nth-of-type(1) {
margin-top: -10px;
}
.dashboard_info > span:nth-of-type(2) {
color: #0d1847;
}
</style>
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