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 @@ ...@@ -69,6 +69,10 @@
@filter-change="filterChange" @filter-change="filterChange"
></list-filter> ></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="cross_line" v-if="!hideHeader"></div>
<div class="list-container" v-if="$slots.list"> <div class="list-container" v-if="$slots.list">
...@@ -149,8 +153,17 @@ export default { ...@@ -149,8 +153,17 @@ export default {
pageSizes: [10, 20, 50], pageSizes: [10, 20, 50],
selectFilter: [], selectFilter: [],
}), }),
watch: {
otherFilter: {
handler() {
this.initOtherFilter();
},
deep: true,
},
},
methods: { methods: {
initOtherFilter() { initOtherFilter() {
if (this.otherFilter && this.otherFilter.length > 0) {
this.otherFilter.forEach((item) => { this.otherFilter.forEach((item) => {
this.$set(this.filter, item.prop, item.default); this.$set(this.filter, item.prop, item.default);
...@@ -161,6 +174,7 @@ export default { ...@@ -161,6 +174,7 @@ export default {
options: item.options, options: item.options,
}); });
}); });
}
}, },
searchAction(value) { searchAction(value) {
this.listAction(); this.listAction();
...@@ -201,10 +215,7 @@ export default { ...@@ -201,10 +215,7 @@ export default {
}, },
}, },
mounted() { mounted() {
if (this.otherFilter && this.otherFilter.length > 0) {
this.initOtherFilter(); this.initOtherFilter();
}
this.listAction(); this.listAction();
}, },
}; };
......
src/pages/workbench/fwgl/approveWorkspace.vue
View file @ 4d1d7095
...@@ -57,7 +57,25 @@ export default { ...@@ -57,7 +57,25 @@ export default {
computed: {}, computed: {},
methods: { methods: {
init(filter) { 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() { showDialog() {
this.$refs.dialog.show(); this.$refs.dialog.show();
...@@ -76,10 +94,12 @@ export default { ...@@ -76,10 +94,12 @@ export default {
this.level = parseInt(this.$route.params.level); this.level = parseInt(this.$route.params.level);
this.type = parseInt(this.$route.params.type); this.type = parseInt(this.$route.params.type);
let warnFlag = this.$route.query.warn || false;
this.otherFilter = [ this.otherFilter = [
{ {
name: "审批状态", name: "审批状态",
prop: "approve_state", prop: "state1",
default: "", default: "",
options: [ options: [
{ {
...@@ -187,7 +207,7 @@ export default { ...@@ -187,7 +207,7 @@ export default {
label: "审批", label: "审批",
callback: this.approveAction, callback: this.approveAction,
disabledRule(item) { disabledRule(item) {
return item.approve_state != 0; return item.approve_state != 0 || warnFlag;
}, },
}, },
{ {
...@@ -198,7 +218,6 @@ export default { ...@@ -198,7 +218,6 @@ export default {
], ],
}, },
]; ];
this.listData = [{}, {}, {}];
}, },
}; };
</script> </script>
......
src/pages/workbench/fwgl/fwglList.vue
View file @ 4d1d7095
...@@ -123,7 +123,6 @@ import helper from "@/services/helper.js"; ...@@ -123,7 +123,6 @@ 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 allotInfoConfirm from "@/components/allot-info-confirm"; import allotInfoConfirm from "@/components/allot-info-confirm";
import Dashboard from "@/components/e-charts/dashboard";
import organizationList from "@/components/organization-list/organization-list"; import organizationList from "@/components/organization-list/organization-list";
export default { export default {
...@@ -131,7 +130,6 @@ export default { ...@@ -131,7 +130,6 @@ export default {
apassList, apassList,
apassDialog, apassDialog,
allotInfoConfirm, allotInfoConfirm,
Dashboard,
organizationList, organizationList,
}, },
data: () => ({ data: () => ({
...@@ -489,7 +487,7 @@ export default { ...@@ -489,7 +487,7 @@ export default {
align: "center", align: "center",
type: "image", type: "image",
getImage(item) { getImage(item) {
return item.state == 0 return item.state == 1
? require("@/assets/imgs/ic_true.png") ? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_failed.png"); : require("@/assets/imgs/ic_failed.png");
}, },
...@@ -828,7 +826,7 @@ export default { ...@@ -828,7 +826,7 @@ export default {
align: "center", align: "center",
type: "image", type: "image",
getImage(item) { getImage(item) {
return item.state == 0 return item.state == 1
? require("@/assets/imgs/ic_true.png") ? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_failed.png"); : require("@/assets/imgs/ic_failed.png");
}, },
...@@ -1214,7 +1212,7 @@ export default { ...@@ -1214,7 +1212,7 @@ export default {
count_zy: cloud.count_zy, count_zy: cloud.count_zy,
dashboard_list: [ dashboard_list: [
{ {
name: "cpu使用量", name: "CPU使用量",
value: cloud.cpu_use, value: cloud.cpu_use,
total: cloud.cpu_total, total: cloud.cpu_total,
unit: "（核）", unit: "（核）",
...@@ -1243,7 +1241,7 @@ export default { ...@@ -1243,7 +1241,7 @@ export default {
this.cloud_admin = { this.cloud_admin = {
dashboard_list: [ dashboard_list: [
{ {
name: "cpu使用量", name: "CPU使用量",
value: cloud.cpu_use, value: cloud.cpu_use,
total: cloud.cpu_total, total: cloud.cpu_total,
unit: "（核）", unit: "（核）",
...@@ -1995,11 +1993,12 @@ export default { ...@@ -1995,11 +1993,12 @@ export default {
} }
}, },
approveWorkspace() { approveWorkspace() {
/* if (this.cloud_admin_warn) { this.$router.push({
console.log("告警 ---"); path: `/fwgl/${this.level}/${this.type}/approveWorkspace`,
} else { */ query: {
this.$router.push(`/fwgl/${this.level}/${this.type}/approveWorkspace`); warn: this.cloud_admin_warn,
// } },
});
}, },
}, },
created() { created() {
......
src/pages/workbench/fwgl/organizationCloudResource.vue
View file @ 4d1d7095
...@@ -21,6 +21,32 @@ ...@@ -21,6 +21,32 @@
组织云资源详情 组织云资源详情
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </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-list>
<apass-dialog <apass-dialog
...@@ -33,6 +59,7 @@ ...@@ -33,6 +59,7 @@
</template> </template>
<script> <script>
import { graphic } from "echarts/lib/export";
import helper from "@/services/helper.js"; 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";
...@@ -49,6 +76,7 @@ export default { ...@@ -49,6 +76,7 @@ export default {
listHeader: [], listHeader: [],
listData: [], listData: [],
listTotal: 0, listTotal: 0,
dashboardList: [],
dialogInfo: { dialogInfo: {
title: "", title: "",
msg: "", msg: "",
...@@ -58,81 +86,256 @@ export default { ...@@ -58,81 +86,256 @@ export default {
computed: {}, computed: {},
methods: { methods: {
init(filter) { init(filter) {
console.log(filter); // console.log(filter);
},
showDialog() { this.$http
this.$refs.dialog.show(); .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() { getOrganizations() {
this.level = parseInt(this.$route.params.level); this.$http
this.type = parseInt(this.$route.params.type); .get("/apaas/backmgt/department/list")
.then(({ data }) => {
if (data.success == 1) {
let organizations = data.data || [];
this.otherFilter = [ this.otherFilter = [
{ {
name: "组织名称", name: "组织名称",
prop: "organization", prop: "depart",
default: this.$route.params.id, default: this.$route.params.id,
options: [ options: organizations.map((item) => ({
{ name: item.department_name,
value: "1", value: item.department_id,
name: "不许删", })),
}, },
{ ];
value: "39", }
name: "应用测试一轮shf", })
.catch((error) => {
console.log(error);
});
}, },
{ getDashboardOption(item) {
value: "38", let percent = Math.round((item.value / item.total) * 100) || 0;
name: "我的组织", let colors = ["#515fe7", "#e7ecfd"];
if (percent >= 80) {
colors = ["#e3606d", "#f6d0d0"];
}
return {
title: {
text: percent + "%",
subtext: item.name,
x: "center",
y: "center",
textVerticalAlign: "auto",
textStyle: {
fontSize: 34,
fontWeight: "100",
color: ["#0d1847"],
}, },
{ subtextStyle: {
value: "37", fontSize: 12,
name: "1234567890", fontWeight: "100",
color: "#707693",
}, },
{
value: "36",
name: "测试bug",
}, },
{ angleAxis: {
value: "35", axisLine: {
name: "3213123", 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", type: "bar",
name: "B.G.R.A123", 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", type: "bar",
name: "Bgtest23.号", data: [, 100],
z: 0,
silent: true,
coordinateSystem: "polar",
barMaxWidth: 10,
name: "C",
roundCap: true,
color: "#ddd",
barGap: "-100%",
}, },
{ {
value: "31", type: "gauge",
name: "6", 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: "point",
name: "R.A.M.H.S.U", 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 = [ this.listHeader = [
{ {
label: "运行状态", label: "运行状态",
align: "center", align: "center",
type: "image", type: "image",
getImage(item) { getImage(item) {
return item.state == 0 return item.state == 1
? require("@/assets/imgs/ic_true.png") ? require("@/assets/imgs/ic_true.png")
: require("@/assets/imgs/ic_failed.png"); : require("@/assets/imgs/ic_failed.png");
}, },
...@@ -191,22 +394,6 @@ export default { ...@@ -191,22 +394,6 @@ export default {
prop: "system_name", prop: "system_name",
align: "center", 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: "用户申请时间", label: "用户申请时间",
prop: "apply_time", prop: "apply_time",
...@@ -220,17 +407,13 @@ export default { ...@@ -220,17 +407,13 @@ export default {
actionList: [ actionList: [
{ {
getLabel(item) { getLabel(item) {
return item.use_uid ? "已分配" : "分配"; return item.state == 1 ? "禁用" : "启用";
},
callback: this.cloudAllot,
disabledRule(item) {
return item.use_uid;
}, },
callback: this.stateAction,
}, },
], ],
}, },
]; ];
this.listData = [{}, {}, {}];
}, },
}; };
</script> </script>
...@@ -239,4 +422,33 @@ export default { ...@@ -239,4 +422,33 @@ export default {
.organization_cloud_resource { .organization_cloud_resource {
height: 100%; 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> </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