- {{ userInfo.user_name }}
+ {{ userInfo.user_name }}
请登录
- ![]()
+ "
+ />
-
+
最近加入的服务：
-
- ![]()
+
+ ![]()
@@ -46,12 +63,20 @@
`; - item.sjp.forEach((v) => { + disks.forEach((v) => { htmlStr += `数据盘：${v}
`; }); @@ -495,35 +536,26 @@ export default { }, { label: "申请时间", - prop: "name", + prop: "apply_time", align: "center", }, { label: "初次申请状态", - prop: "name", align: "center", + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_state || 0) + 1 + ]; + }, }, { label: "资源调整结果", - prop: "name", align: "center", - }, - ]; - this.listData = [ - { - 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"], + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_update_state || 0) + 1 + ]; + }, }, ]; } @@ -736,52 +768,52 @@ export default { } // 组织管理员 --- 云资源管理 else if (level == 1 && type == 2) { - this.listUrl = ""; + this.listUrl = "/apaas/service/v3/resource/user/apply/list"; this.paddingLeft = 0; this.filterList2 = [ { name: "初次申请状态", prop: "state1", - default: 0, + default: "", options: [ { name: "全部", - value: 0, + value: "", }, { name: "待审批", - value: 1, + value: 0, }, { name: "审批通过", - value: 2, + value: 1, }, { name: "审批未通过", - value: 3, + value: -1, }, ], }, { name: "资源调整状态", prop: "state2", - default: 0, + default: "", options: [ { name: "全部", - value: 0, + value: "", }, { name: "待审批", - value: 1, + value: 0, }, { name: "审批通过", - value: 2, + value: 1, }, { name: "审批未通过", - value: 3, + value: -1, }, ], }, @@ -799,53 +831,79 @@ export default { }, { label: "工作区域名称", - prop: "name", + prop: "name_space", type: "button", callback: this.cloudDetail, }, { label: "CPU（核）", - prop: "name", + prop: "cpu", align: "center", }, { label: "内存（GB）", - prop: "name", + prop: "memory", align: "center", }, { label: "容器组（个）", - prop: "name", + prop: "containers", align: "center", }, { label: "数据盘（块/GB）", - prop: "name", + type: "tooltip", align: "center", + getLength(item) { + let disks = (item.disk && item.disk.trim().split(" ")) || []; + return disks.length; + }, + getText(item) { + let disks = (item.disk && item.disk.trim().split(" ")) || []; + return disks[0]; + }, + getContent(item) { + let disks = (item.disk && item.disk.trim().split(" ")) || []; + let htmlStr = `数据盘（块/GB）
`; + + disks.forEach((v) => { + htmlStr += `数据盘：${v}
`; + }); + + return htmlStr; + }, }, { label: "申请用户", - prop: "name", + prop: "user_name", align: "center", }, { label: "业务系统名", - prop: "name", + prop: "system_name", align: "center", }, { label: "初次申请状态", - prop: "name", align: "center", + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_state || 0) + 1 + ]; + }, }, { - label: "资源调整状态", - prop: "name", + label: "资源调整结果", align: "center", + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_update_state || 0) + 1 + ]; + }, }, { label: "用户申请时间", - prop: "name", + prop: "apply_time", align: "center", }, { @@ -855,68 +913,17 @@ export default { width: 80, actionList: [ { - label: "分配", getLabel(item) { - return item.allot == 0 ? "分配" : "已分配"; + return item.use_uid ? "已分配" : "分配"; }, callback: this.cloudAllot, disabledRule(item) { - return item.allot == 1; + return item.use_uid; }, }, ], }, ]; - this.listData = [ - { - name: "区域1", - state: 0, - sjp: ["8/60"], - allot: 1, - }, - { - name: "区域2", - state: 1, - sjp: ["2/3", "22/33"], - allot: 0, - }, - { - name: "区域3", - state: 0, - sjp: ["2/100", "22/33", "55/66"], - allot: 1, - }, - ]; - this.cloud_zuzhi = { - org_name: "北京比格大数据", - used_area: 2, - dashboard_list: [ - { - name: "cpu使用量", - value: 6, - total: 10, - unit: "（核）", - }, - { - name: "内存使用量", - value: 13, - total: 20, - unit: "（GB）", - }, - { - name: "数据盘使用量", - value: 500, - total: 560, - unit: "（GB）", - }, - { - name: "容器组使用量", - value: 10, - total: 18, - unit: "（个）", - }, - ], - }; } // 超级管理员 --- 平台服务管理 @@ -1136,35 +1143,7 @@ export default { } // 超级管理员 --- 云资源管理 else if (level == 2 && type == 2) { - this.cloud_admin = { - 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: "（个）", - }, - ], - histogram: {}, - }; + this.listUrl = "/apaas/service/v3/resource/user/apply/list"; } // Error @@ -1173,46 +1152,148 @@ export default { } }, init(filter) { - console.log(filter); + // console.log(filter); if (!this.listUrl) { return; } + let params = {}; + this.tempFliter = filter; + if (this.type == 2) { + params = { + search: filter.keyword, + page: filter.page, + limit: filter.size, + depart: "", + state1: filter.state1, + state2: filter.state2, + }; + } else { + params = { + keyword: filter.keyword, + page: filter.page, + size: filter.size, + data_service_type: + (filter.service_type_1 && + filter.service_type_1.map((item) => item.value).join(",")) || + "", // 服务类型 + sectors: + (filter.service_area && + filter.service_area.map((item) => item.value).join(",")) || + "", // 服务领域 + openness: + (filter.openness && + filter.openness.map((item) => item.value).join(",")) || + "", // 开放程度 + state: + (filter.state && + filter.state.map((item) => item.value).join(",")) || + "", // 服务状态 + }; + } + this.$http - .get(this.listUrl, { - params: { - data_service_type: - (filter.service_type_1 && - filter.service_type_1.map((item) => item.value).join(",")) || - "", // 服务类型 - sectors: - (filter.service_area && - filter.service_area.map((item) => item.value).join(",")) || - "", // 服务领域 - openness: - (filter.openness && - filter.openness.map((item) => item.value).join(",")) || - "", // 开放程度 - state: - (filter.state && - filter.state.map((item) => item.value).join(",")) || - "", // 服务状态 - keyword: filter.keyword, - page: filter.page, - size: filter.size, - }, - }) + .get(this.listUrl, { params }) .then(({ data }) => { - // console.log(data.data); - this.listTotal = data.data.total; - this.listData = data.data.data; + // console.log(data); + + if (this.type == 2) { + const cloud = data.data.cloud_resource_count; + + if (this.level == 1) { + this.listTotal = data.total; + this.listData = data.data.cloud_apply_list; + this.cloud_zuzhi = { + count_zy: cloud.count_zy, + dashboard_list: [ + { + name: "cpu使用量", + value: cloud.cpu_use, + total: cloud.cpu_total, + unit: "（核）", + }, + { + name: "内存使用量", + value: cloud.memory_use, + total: cloud.memory_total, + unit: "（GB）", + }, + { + name: "数据盘使用量", + value: cloud.disk_use, + total: cloud.disk_total, + unit: "（GB）", + }, + { + name: "容器组使用量", + value: cloud.containers_use, + total: cloud.containers_total, + unit: "（个）", + }, + ], + }; + } else if (this.level == 2) { + this.cloud_admin = { + dashboard_list: [ + { + name: "cpu使用量", + value: cloud.cpu_use, + total: cloud.cpu_total, + unit: "（核）", + }, + { + name: "内存使用量", + value: cloud.memory_use, + total: cloud.memory_total, + unit: "（GB）", + }, + { + name: "数据盘使用量", + value: cloud.disk_use, + total: cloud.disk_total, + unit: "（GB）", + }, + { + name: "容器组使用量", + value: cloud.containers_use, + total: cloud.containers_total, + unit: "（个）", + }, + ], + }; + } + } else { + this.listTotal = data.data.total; + this.listData = data.data.data; + } }) .catch((error) => { console.log(error); }); + + // 超管的云资源管理展示的是组织列表 + if (this.level == 2 && this.type == 2) { + this.$http + .get("/apaas/backmgt/department/list", { + params: { + search: filter.keyword, + page: filter.page, + limit: filter.size, + }, + }) + .then(({ data }) => { + // console.log(data); + + this.listTotal = data.total; + this.listData = data.data; + }) + .catch((error) => { + console.log(error); + }); + } }, showDialog() { this.$refs.dialog.show(); @@ -1406,10 +1487,13 @@ export default { console.log("cloudDetail - " + item.name); }, cloudAllot(item) { - console.log("cloudAllot - " + item.name); + this.$refs.allotConfirm.getDetail(item.apply_id); }, - getDashboardOptions(item) { - let percent = Math.round((item.value / item.total) * 100); + allotSuccess() { + this.init(this.tempFliter); + }, + getDashboardOption(item) { + let percent = Math.round((item.value / item.total) * 100) || 0; let colors = ["#515fe7", "#e7ecfd"]; if (percent >= 80) { @@ -1564,6 +1648,335 @@ export default { ], }; }, + getHistogramOption(_xAxisData, _series) { + return { + tooltip: { + trigger: "axis", + /* axisPointer: { + crossStyle: { + color: "#999", + }, + }, */ + backgroundColor: "#242c43", + textStyle: { + fontSize: 12, + lineHeight: 20, + color: "#fff", + }, + }, + grid: { + left: 10, + right: 10, + bottom: 25, + top: 45, + containLabel: true, + }, + color: ["#525e98", "#90b7c1", "#d06d1f", "#e4aa4f"], + legend: { + right: "center", + top: 0, + itemWidth: 10, + itemHeight: 10, + icon: "roundRect", + orient: "horizontal", + backgroundColor: "#f8f9fd", + textStyle: { + fontSize: 12, + lineHeight: 20, + color: "#a9aec0", + }, + data: ["CPU", "内存", "数据盘", "容器组"], + }, + xAxis: [ + { + type: "category", + axisLabel: { + textStyle: { + color: "#0d1847", + fontSize: 12, + lineHeight: 20, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#e3e5ef", + }, + }, + splitLine: { + show: false, + }, + /* splitArea: { + show: true, + areaStyle: { + color: ["#f4f5fd", "#fff"], + opacity: 0.5, + }, + }, */ + axisPointer: { + type: "shadow", + }, + data: [ + "办公费", + "印刷费", + "水费", + "水费", + "邮电费", + "物业管理费", + "差旅费", + "因公出国（境）费用", + "维修（护）费", + "会议费", + "租聘费", + "培训费", + "取暖费", + "公务接待费", + "公务用车运行", + "其他交通费用", + "房屋建筑物购建", + "办公设备购置", + "大型修缮", + "信息网络及软件购置更新", + "公务用车购置", + "咨询费", + "手续费", + "劳务费", + "委托业务费", + "其他商品和服务支出", + "专用设备购置", + "基础设施建设", + "其他交通工具购置", + "其他资本性支出", + ], + }, + ], + yAxis: [ + { + type: "value", + min: 0, + axisLabel: { + formatter: "{value}", + textStyle: { + color: "#a9aec0", + fontSize: 12, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#e3e5ef", + }, + }, + splitLine: { + lineStyle: { + type: "dashed", + color: ["#f2f2f2"], + width: 1, + }, + }, + }, + ], + series: [ + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "CPU", + }, + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "内存", + }, + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "数据盘", + }, + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "容器组", + }, + ], + dataZoom: [ + { type: "inside", start: 0, end: 20 }, + { + show: true, + type: "slider", + height: 20, + bottom: 0, + start: 0, + end: 100, + fillerColor: "#e6ebfe", + handleStyle: { color: "#b4c0f5" }, + backgroundColor: "#f8f9fd", + borderColor: "#f8f9fd", + textStyle: { color: "transparent", fontSize: "12px" }, + dataBackground: { + lineStyle: { color: "transparent" }, + areaStyle: { color: "transparent" }, + }, + }, + ], + }; + }, + resizeColumn() { + if (this.$refs.adminHistogram) { + this.$refs.adminHistogram.resize(); + } + }, }, created() { this.level = parseInt(this.$route.params.level); @@ -1587,6 +2000,12 @@ export default { } }); }, + mounted() { + window.addEventListener("resize", this.resizeColumn); + }, + destroyed() { + window.removeEventListener("resize", this.resizeColumn); + }, }; @@ -1594,35 +2013,36 @@ export default { .service_management_list { height: 100%; } -.zuzhi_title { +.cloud_title { margin-top: 15px; } -.zuzhi_title > span, -.zuzhi_title > span::before { +.cloud_title > span, +.cloud_title > span::before { display: inline-block; vertical-align: middle; } -.zuzhi_title > span:nth-child(1)::before { +.cloud_title > span:nth-child(1)::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background-color: #515fe7; margin-right: 10px; + margin-bottom: 2px; } -.zuzhi_title > span:nth-child(1) { +.cloud_title > span:nth-child(1) { font-size: 16px; color: #242c43; line-height: 30px; } -.zuzhi_title > span:nth-child(2)::before { +.cloud_title > span:nth-child(2)::before { content: ""; width: 2px; height: 12px; background-color: #b4c0f5; margin: 0 10px; } -.zuzhi_title > span:nth-child(2) { +.cloud_title > span:nth-child(2) { font-size: 14px; line-height: 1; color: #58617a; @@ -1658,4 +2078,17 @@ export default { .dashboard_info > span:nth-of-type(2) { color: #0d1847; } +.admin_preview { + display: flex; + justify-content: space-between; + align-items: center; +} +.admin_preview > * { + width: calc(50% - 10px); +} +.admin_preview-right { + height: 250px; + margin-top: 15px; + box-sizing: border-box; +} diff --git a/src/router/index.js b/src/router/index.js index 5c005c93e49fbd90429279ed2495e5f410073dcf..85aabde75bb00d8bed29b957f6bf0f43b7ad23b7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -68,6 +68,11 @@ export default new Router({ component: () => import("@/pages/workbench/fwgl/approval_service_detail"), }, // 审批的服务 - 详情 + { + path: "/fwgl/:level/:type/cloud_detail/:id", + name: "servicedetail", + component: () => import("@/pages/workbench/fwgl/cloud-detail"), + }, // 云资源 - 详情 ], }, // 工作台 - 服务管理模块 { diff --git a/yarn.lock b/yarn.lock index d1c236474c05e32bf6d8e179cf7073ba677cc690..a54741ff02285cd41f990c1166c7eaf7fba629cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6074,6 +6074,11 @@ resize-detector@^0.1.10: resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c" integrity sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw== +resize-detector@^0.2.2: + version "0.2.2" + resolved "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.2.2.tgz#b207e72912bef0bda9fb825fe894ed9686ca965e" + integrity sha1-sgfnKRK+8L2p+4Jf6JTtlobKll4= + resize-observer-polyfill@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" @@ -7207,6 +7212,13 @@ vue-router@^3.0.2: resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89" integrity sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA== +vue-sparklines@^0.2.1: + version "0.2.1" + resolved "https://registry.npm.taobao.org/vue-sparklines/download/vue-sparklines-0.2.1.tgz#2c754b49af5d86a62308930f72bad8fc376d3beb" + integrity sha1-LHVLSa9dhqYjCJMPcrrY/DdtO+s= + dependencies: + vue "^2.2.1" + vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" @@ -7228,7 +7240,7 @@ vue-template-es2015-compiler@^1.9.0: resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== -vue@^2.6.10: +vue@^2.2.1, vue@^2.6.10: version "2.6.11" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5" integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
-
- {{ item.service_id == 0 ? item.application.app_name : item.service.name }} -
-- {{ item.service_id == 0 ? item.application.ywly : item.service.sectors_name }} -
-- {{ item.service_id == 0 ? item.application.org : item.service.organization_name }} -
+{{ item.service_id == 0 ? item.application.app_name : item.service.name }}
+{{ item.service_id == 0 ? item.application.ywly_name : item.service.sectors_name }}
+{{ item.service_id == 0 ? item.application.org_name : item.service.organization_name }}
@@ -46,12 +63,20 @@
-
-
diff --git a/src/pages/user/order/order_detail.vue b/src/pages/user/order/order_detail.vue
index 960ee8da1a706332d72f09dd77cd7cf9ecb89805..66bc7ffe1b4f9b79215465c944b81e7bf28a8186 100644
--- a/src/pages/user/order/order_detail.vue
+++ b/src/pages/user/order/order_detail.vue
@@ -177,26 +177,25 @@
+
{{ item.menu_name }}
@@ -140,7 +165,6 @@ export default {
this.now_menu = parent;
window.sessionStorage.setItem("menuVisitUrl", parent);
}
-
},
getList() {
this.$api.serviceShop.getShoppingCart().then(response => {
diff --git a/src/components/organization-list/organization-card.vue b/src/components/organization-list/organization-card.vue
index 5aaaeac6b6850b0e9c7e4317a6e1e182d2f6886e..3381adfb594da0e018afbff4d81c9525e1e78ff4 100644
--- a/src/components/organization-list/organization-card.vue
+++ b/src/components/organization-list/organization-card.vue
@@ -1,10 +1,15 @@
@@ -119,13 +119,15 @@
-
+
-
+
-
+
@@ -122,16 +164,28 @@
-
+
-
+
@@ -139,11 +193,24 @@
-
+
-
+
@@ -151,7 +218,14 @@
@@ -165,15 +239,20 @@
-
-
@@ -27,6 +28,10 @@ export default {
type: String,
default: 0,
},
+ hideDelete: {
+ type: Boolean,
+ default: false,
+ },
},
data: () => ({
rowNum: 5,
diff --git a/src/components/service-tabs/service-tab-specification.vue b/src/components/service-tabs/service-tab-specification.vue
index 56034caa11067085904da45f53b3f153fce6d5d6..55afa63f499cc30645e8b2c60453bbe6c4094d86 100644
--- a/src/components/service-tabs/service-tab-specification.vue
+++ b/src/components/service-tabs/service-tab-specification.vue
@@ -40,7 +40,9 @@ export default {
}),
computed: {
tableData() {
- return this.data.filter((item) => item.type === this.type);
+ return this.data.filter(
+ (item) => item.type === this.type || item.type === 3
+ );
},
},
};
diff --git a/src/components/shop-cloud/shop-cloud.vue b/src/components/shop-cloud/shop-cloud.vue
index 2dee6bd3cd3804d3d8d00c9aefe67d3a1ed8aac9..962498095a30c9aa9b746b69791beab6dc5c1ad4 100644
--- a/src/components/shop-cloud/shop-cloud.vue
+++ b/src/components/shop-cloud/shop-cloud.vue
@@ -53,48 +53,78 @@
描述信息：
- 工作区域申请规格
CPU：
核
内存：
GB
容器组：
- 个
数据盘（可选）：
- 块
每块数据盘容量：
- GB
CPU：
最高
- 核
默认
- 核
内存：
最高
- 核
默认
- 核
其他信息
申请时长：
- 申请文件：
选择要进行调整的工作区域：
+
-
+
-
工作区域规格调整
@@ -181,55 +260,95 @@
当前规格：
-
-
+
-
-
+
-
-
+
@@ -239,13 +358,24 @@
@@ -474,13 +655,17 @@
容器组：
{{ diaForm.containerGroup }}个
- ![]()
+
+ ![]()
{{ item.title }}
- {{ item.val + " " + (item.title == "CPU" ? "核" : item.title == "内存" ? "GB" : "个") }}
+ {{ item.val + " " + (item.title == "CPU" ? "核" : item.title == "内存" ? "GB" : "个") }}
申请CPU调整为：
核
申请内存调整为：
GB
申请容器组调整为：
- 个
调整数据盘：
- 增加数据盘：
- 块
每块数据盘容量：
- GB
当前规格：
-
-
+
-
+
@@ -271,16 +413,28 @@
-
+
-
+
@@ -290,7 +444,10 @@
-
+
-
+
@@ -310,7 +480,14 @@
@@ -387,7 +564,9 @@
单个容器组规格：
@@ -411,7 +590,9 @@
- ![]()
+
@@ -254,16 +384,28 @@
+ ![]()
{{ item.title }}
- 最高 {{ item.max }} {{ item.title == "CPU" ? "核" : "GB" }}
+ 最高 {{ item.max }} {{ item.title == "CPU" ? "核" : "GB" }}
- 默认 {{ item.default }} {{ item.title == "CPU" ? "核" : "GB" }} + 默认 {{ item.default }} {{ item.title == "CPU" ? "核" : "GB" }}
- 默认 {{ item.default }} {{ item.title == "CPU" ? "核" : "GB" }} + 默认 {{ item.default }} {{ item.title == "CPU" ? "核" : "GB" }}
CPU：
最高
- 核
默认
- 核
内存：
最高
- 核
默认
- 核
当前规格：
- ![]()
+ ![]()
当前工作区域到期时间
2020-05-05 08:00:00
@@ -298,11 +455,24 @@
申请续期：
- 申请文件：
数据盘：
- {{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
+ {{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
申请时长
- {{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}
+ {{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}
+
@@ -559,28 +751,59 @@ export default {
perRAMs: undefined,
perRAM: undefined,
appDuration: undefined,
- durType: "",
+ durType: 1,
apply_file: "",
apply_file_name: ""
},
ruleNew: {
namespace: [
- { required: true, message: "请输入联系电话", trigger: "blur" }
+ { required: true, message: "请输入工作区域名称", trigger: "blur" }
],
workplace: [
- { required: true, message: "请输入联系电话", trigger: "blur" }
+ { required: true, message: "请输入中文名称", trigger: "blur" }
+ ],
+ workplacedesc: [
+ { required: true, message: "请输入描述信息", trigger: "blur" }
+ ],
+ cpu: [{ required: true, message: "请选择CPU使用量", trigger: "blur" }],
+ memory: [
+ { required: true, message: "请选择内存使用量", trigger: "blur" }
+ ],
+ containerGroup: [
+ { required: true, message: "请输入容器组规格", trigger: "blur" }
+ ],
+ perCPUs: [
+ { required: true, message: "请输入CPU最大使用量", trigger: "blur" }
+ ],
+ perCPU: [
+ { required: true, message: "请输入CPU默认使用量", trigger: "blur" }
+ ],
+ perRAMs: [
+ { required: true, message: "请输入内存最大使用量", trigger: "blur" }
+ ],
+ perRAM: [
+ { required: true, message: "请输入内存默认使用量", trigger: "blur" }
+ ],
+ appDuration: [
+ { required: true, message: "请输入申请时长", trigger: "blur" }
]
},
- durationOptions: [{ value: "1", label: "月" }, { value: "2", label: "年" }],
+ durationOptions: [
+ { value: 1, label: "月" },
+ { value: 2, label: "年" }
+ ],
workSpace: "",
workSpaceOptions: [],
- optionsCPU: [{ value: "8", label: "8" }, { value: "16", label: "16" }],
+ optionsCPU: [
+ { value: "8", label: "8" },
+ { value: "16", label: "16" }
+ ],
optionsRAM: [
{ value: "8", label: "8" },
{ value: "16", label: "16" },
{ value: "32", label: "32" }
],
- formShow: true,
+ formShow: false,
specArr: [
{ title: "CPU", val: "4", src: "ic_CPU" },
{ title: "内存", val: "4", src: "ic_neicun" },
@@ -599,9 +822,6 @@ export default {
}
],
formOld: {
- namespace: "",
- workplace: "",
- workplacedesc: "",
cpu: "",
memory: "",
containerGroup: undefined,
@@ -612,14 +832,11 @@ export default {
perRAMs: undefined,
perRAM: undefined,
appDuration: undefined,
- durType: "",
+ durType: 1,
apply_file: "",
apply_file_name: ""
},
paramsOld: {
- namespace: "",
- workplace: "",
- workplacedesc: "",
cpu: "",
memory: "",
containerGroup: undefined,
@@ -630,22 +847,54 @@ export default {
perRAMs: undefined,
perRAM: undefined,
appDuration: undefined,
- durType: "",
+ durType: 1,
apply_file: "",
apply_file_name: ""
},
- ruleOld: [],
+ ruleOld: {
+ namespace: [
+ { required: true, message: "请输入工作区域名称", trigger: "blur" }
+ ],
+ workplace: [
+ { required: true, message: "请输入中文名称", trigger: "blur" }
+ ],
+ workplacedesc: [
+ { required: true, message: "请输入描述信息", trigger: "blur" }
+ ],
+ cpu: [{ required: true, message: "请选择CPU使用量", trigger: "blur" }],
+ memory: [
+ { required: true, message: "请选择内存使用量", trigger: "blur" }
+ ],
+ containerGroup: [
+ { required: true, message: "请输入容器组规格", trigger: "blur" }
+ ],
+ perCPUs: [
+ { required: true, message: "请输入CPU最大使用量", trigger: "blur" }
+ ],
+ perCPU: [
+ { required: true, message: "请输入CPU默认使用量", trigger: "blur" }
+ ],
+ perRAMs: [
+ { required: true, message: "请输入内存最大使用量", trigger: "blur" }
+ ],
+ perRAM: [
+ { required: true, message: "请输入内存默认使用量", trigger: "blur" }
+ ],
+ appDuration: [
+ { required: true, message: "请输入申请时长", trigger: "blur" }
+ ]
+ },
dialogVisible: false,
diaForm: {},
dataDiskHeaders: [
{
label: "数据盘容量",
- prop: "capacity",
+ prop: "disk_cap",
align: "center"
},
{
label: "部署的应用",
- prop: "app",
+ prop: "app_name",
align: "center"
},
{
@@ -660,20 +909,7 @@ export default {
]
}
],
- dataDiskList: [
- {
- capacity: "www",
- app: "wewaewa"
- },
- {
- capacity: "www",
- app: "wewaewa"
- },
- {
- capacity: "www",
- app: "wewaewa"
- }
- ],
+ dataDiskList: [],
delDataDiskList: []
}),
mounted() {
@@ -702,12 +938,13 @@ export default {
this.formOld.cpu = paramsOld.cpu;
this.formOld.memory = paramsOld.memory;
this.formOld.containerGroup = paramsOld.containers;
- this.formOld.dataDisk = paramsOld.dataDisk;
- this.formOld.perDataDisk = paramsOld.perDataDisk;
+ this.formOld.dataDisk = "";
+ this.formOld.perDataDisk = "";
this.formOld.perCPUs = paramsOld.one_cpu_max;
this.formOld.perCPU = paramsOld.one_cpu_min;
this.formOld.perRAMs = paramsOld.one_memory_max;
this.formOld.perRAM = paramsOld.one_memory_min;
+ this.dataDiskList = paramsOld.disk_list;
this.formShow = true;
} else {
this.formShow = false;
@@ -716,13 +953,28 @@ export default {
submitApp() {
let formParams = {};
if (this.activeName == 0) {
- formParams = this.formNew;
+ this.$refs["formNew"].validate(valid => {
+ if (valid) {
+ formParams = this.formNew;
+ this.dialogVisible = true;
+ this.diaForm = Object.assign(formParams, this.form);
+ } else {
+ console.log("error submit!!");
+ return false;
+ }
+ });
} else if (this.activeName == 1) {
- formParams = this.formOld;
+ this.$refs["formOld"].validate(valid => {
+ if (valid) {
+ formParams = this.formOld;
+ this.dialogVisible = true;
+ this.diaForm = Object.assign(formParams, this.form);
+ } else {
+ console.log("error submit!!");
+ return false;
+ }
+ });
}
- this.dialogVisible = true;
- this.diaForm = Object.assign(formParams, this.form);
- console.log(formParams, this.diaForm);
},
determineSubmit() {
if (this.activeName == 0) {
@@ -795,11 +1047,9 @@ export default {
});
},
delItem(val) {
- this.delDataDiskList.push(val.app);
- let delItem = this.dataDiskList.findIndex(v => v.app === val.app);
- if (delItem) {
- console.log(delItem);
- }
+ let delIndex = this.dataDiskList.findIndex(v => v.id === val.id);
+ this.dataDiskList.splice(delIndex, 1);
+ this.delDataDiskList.push(val);
}
}
};
@@ -1041,7 +1291,7 @@ export default {
color: #242c43;
}
.cloud_form .input_right_top {
- top: 41px;
+ top: 40px;
}
.cloud_form .el-select {
width: 100%;
diff --git a/src/components/shopping-cart/shopping-cart-cell.vue b/src/components/shopping-cart/shopping-cart-cell.vue
index 74917251919fb690ee71f2fe89080cc3c7558b25..379e35375f6d20553b06d19fc04fd4ad3f9a4480 100644
--- a/src/components/shopping-cart/shopping-cart-cell.vue
+++ b/src/components/shopping-cart/shopping-cart-cell.vue
@@ -35,10 +35,10 @@
v-if="cellIsService"
class="shopping_cell_type"
>{{ cellItems.service.sectors_name }}
-
新增数据盘：
- {{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
+ {{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
-
+
单个容器组规格：
@@ -504,11 +689,18 @@
删除数据盘：
- {{ dataDiskList.join(",") }}
+ {{ delDataDiskList.map(item => {return item.app_name}).join("、") }}
是否续期：
- {{ diaForm.appDuration && diaForm.appDuration != 0 ? "是": "否" }}
+ {{ diaForm.appDuration && diaForm.appDuration != 0 ? "是": "否" }}
-
+
续期时长：
- {{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}
+ {{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}
{{ cellItems.application.ywly }}
+ {{ cellItems.application.ywly_name }}
{{ cellIsService ? cellItems.service.organization_name:cellItems.application.org }}
+ >{{ cellIsService ? cellItems.service.organization_name:cellItems.application.org_name }}
+
工作区域描述：
- {{ orderDetail.scene }}
申请规格：
单个容器组规格：
@@ -204,15 +203,15 @@
@@ -706,7 +705,7 @@ export default {
line-height: 22px;
}
.params_block_title {
- padding-left: 10px;
+ padding-left: 5px;
color: #242c43;
}
.params_block_item {
@@ -719,12 +718,12 @@ export default {
}
.params_block_item_title {
color: #8890a7;
- width: 120px;
+ width: 80px;
text-align: right;
}
.params_block_item_val {
color: #242c43;
- width: calc(100% - 130px);
+ width: calc(100% - 82px);
}
.val_has_2 {
margin-right: 20px;
diff --git a/src/pages/workbench/app_build.vue b/src/pages/workbench/app_build.vue
index 7bc438d62f839db5f351f73d3636b176aed2e9f1..228826c3360b5141276bf54491e75d05de248693 100644
--- a/src/pages/workbench/app_build.vue
+++ b/src/pages/workbench/app_build.vue
@@ -384,6 +384,7 @@ export default {
this.image_noMore = false;
})
.catch((error) => {
+ this.image_loading = false;
console.log(error);
});
},
diff --git a/src/pages/workbench/fwgl/cloud-detail.vue b/src/pages/workbench/fwgl/cloud-detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..240f7d699e8ed3ec31e5681d95a2e6de7c507d6e
--- /dev/null
+++ b/src/pages/workbench/fwgl/cloud-detail.vue
@@ -0,0 +1,235 @@
+
+
CPU：
- 2核
+ {{ orderDetail.cpu }}核
内存：
- 4GB
+ {{ orderDetail.memory }}GB
容器组：
- 2核
+ {{ orderDetail.memory }}核
数据盘：
- 2核
+ {{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB
CPU：
- 最高 2核 - 默认 2核 + 最高 {{ orderDetail.one_cpu_max }}核 + 默认 {{ orderDetail.one_cpu_min }}核
CPU：
- 最高 2核 - 默认 2核 + 最高 {{ orderDetail.one_memory_max }}核 + 默认 {{ orderDetail.one_memory_min }}核
+
+ {{ this.$route.params.level == 1 ? $t('lang.cloudResourcesService') : $t('lang.cloudResourcesManagement') }}
+ {{ $t('lang.cloudResourcesDetail') }}
+
+
+
+
+
+
+
+
diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue
index 779c1045f1ab6e8a7bd429914ffc2458566dc231..0c1f21ead4515e2bc2e3e9958a04cd60e6639097 100644
--- a/src/pages/workbench/fwgl/fwglList.vue
+++ b/src/pages/workbench/fwgl/fwglList.vue
@@ -17,11 +17,11 @@
-
+
+
+
+
+
+ aPaaS V3.0
+
+
+ + 申请用户： + 张三 + 联系电话： + 12345678901 + 资源申请状态： + 审批通过 +
++ 业务系统名： + aPaaS V3.0 一期 + 资源申请时间： + 2020-02-12 15:54:21 +
+
+
+
+
+
+ 申请规格：
+
+
+
+ 单个容器组规格：
+
+ CPU：
+ {{ orderDetail.cpu }}核
+
+
+ 内存：
+ {{ orderDetail.memory }}GB
+
+
+ 容器组：
+ {{ orderDetail.memory }}核
+
+
+ 数据盘：
+ {{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB
+
+
+
+
+ CPU：
+
+
+ 最高 {{ orderDetail.one_cpu_max }}核
+ 默认 {{ orderDetail.one_cpu_min }}核
+
+
+ CPU：
+
+
+ 最高 {{ orderDetail.one_memory_max }}核
+ 默认 {{ orderDetail.one_memory_min }}核
+
+
+ {{ desc }}
+
+
-
@@ -67,10 +119,18 @@ import { mapState } from "vuex";
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 {
- components: { apassList, apassDialog, Dashboard },
+ components: {
+ apassList,
+ apassDialog,
+ allotInfoConfirm,
+ Dashboard,
+ organizationList,
+ },
data: () => ({
level: 0, // 用户等级
type: 0, // 访问的页面
@@ -95,6 +155,7 @@ export default {
computed: {
...mapState({
fwglNav: "fwglNav",
+ userInfo: "userInfo",
}),
pathName() {
return this.fwglNav[this.level][this.type];
@@ -368,78 +429,55 @@ export default {
}
// 普通用户 --- 云资源服务
else if (level == 0 && type == 2) {
- this.listUrl = "";
+ this.listUrl = "/apaas/service/v3/resource/user/apply/list";
this.paddingLeft = 0;
this.filterList2 = [
{
name: "初次申请状态",
prop: "state1",
- default: 0,
+ default: "",
options: [
{
name: "全部",
- value: 0,
+ value: "",
},
{
name: "待审批",
- value: 1,
+ value: 0,
},
{
name: "审批通过",
- value: 2,
+ value: 1,
},
{
name: "审批未通过",
- value: 3,
+ value: -1,
},
],
},
{
name: "资源调整状态",
prop: "state2",
- default: 0,
+ default: "",
options: [
{
name: "全部",
- value: 0,
+ value: "",
},
{
name: "待审批",
- value: 1,
- },
- {
- name: "审批通过",
- value: 2,
- },
- {
- name: "审批未通过",
- value: 3,
- },
- ],
- },
- /* {
- name: "申请状态",
- prop: "state3",
- default: 0,
- options: [
- {
- name: "全部",
value: 0,
},
- {
- name: "待审批",
- value: 1,
- },
{
name: "审批通过",
- value: 2,
+ value: 1,
},
{
name: "审批未通过",
- value: 3,
+ value: -1,
},
],
- }, */
+ },
];
this.listHeader = [
{
@@ -454,23 +492,23 @@ export default {
},
{
label: "工作区域",
- prop: "name",
+ prop: "name_space",
type: "button",
callback: this.cloudDetail,
},
{
label: "CPU（核）",
- prop: "name",
+ prop: "cpu",
align: "center",
},
{
label: "内存（GB）",
- prop: "name",
+ prop: "memory",
align: "center",
},
{
label: "容器组（个）",
- prop: "name",
+ prop: "containers",
align: "center",
},
{
@@ -478,15 +516,18 @@ export default {
type: "tooltip",
align: "center",
getLength(item) {
- return item.sjp.length;
+ let disks = (item.disk && item.disk.trim().split(" ")) || [];
+ return disks.length;
},
getText(item) {
- return item.sjp[0];
+ let disks = (item.disk && item.disk.trim().split(" ")) || [];
+ return disks[0];
},
getContent(item) {
+ let disks = (item.disk && item.disk.trim().split(" ")) || [];
let htmlStr = `数据盘（块/GB）
- {{ cloud_zuzhi.org_name }}
+
+
+
+
+ {{ userInfo && userInfo.department_name }}
- {{ "在用工作区域：" + (cloud_zuzhi.used_area || 0) + "个" }}
+ {{ "在用工作区域：" + cloud_zuzhi.count_zy + "个" }}
@@ -31,7 +31,7 @@
:key="index"
>
@@ -45,11 +45,58 @@
+
+
+
+
+
+
+
+ 云资源概览
+
+
+
+
+
+ + 物理总量 + +
++ 剩余量 + +
+
+
+
+ 组织概览
+
-
-
+
+
+ 组织列表
-`; - item.sjp.forEach((v) => { + disks.forEach((v) => { htmlStr += `数据盘：${v}
`; }); @@ -495,35 +536,26 @@ export default { }, { label: "申请时间", - prop: "name", + prop: "apply_time", align: "center", }, { label: "初次申请状态", - prop: "name", align: "center", + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_state || 0) + 1 + ]; + }, }, { label: "资源调整结果", - prop: "name", align: "center", - }, - ]; - this.listData = [ - { - 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"], + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_update_state || 0) + 1 + ]; + }, }, ]; } @@ -736,52 +768,52 @@ export default { } // 组织管理员 --- 云资源管理 else if (level == 1 && type == 2) { - this.listUrl = ""; + this.listUrl = "/apaas/service/v3/resource/user/apply/list"; this.paddingLeft = 0; this.filterList2 = [ { name: "初次申请状态", prop: "state1", - default: 0, + default: "", options: [ { name: "全部", - value: 0, + value: "", }, { name: "待审批", - value: 1, + value: 0, }, { name: "审批通过", - value: 2, + value: 1, }, { name: "审批未通过", - value: 3, + value: -1, }, ], }, { name: "资源调整状态", prop: "state2", - default: 0, + default: "", options: [ { name: "全部", - value: 0, + value: "", }, { name: "待审批", - value: 1, + value: 0, }, { name: "审批通过", - value: 2, + value: 1, }, { name: "审批未通过", - value: 3, + value: -1, }, ], }, @@ -799,53 +831,79 @@ export default { }, { label: "工作区域名称", - prop: "name", + prop: "name_space", type: "button", callback: this.cloudDetail, }, { label: "CPU（核）", - prop: "name", + prop: "cpu", align: "center", }, { label: "内存（GB）", - prop: "name", + prop: "memory", align: "center", }, { label: "容器组（个）", - prop: "name", + prop: "containers", align: "center", }, { label: "数据盘（块/GB）", - prop: "name", + type: "tooltip", align: "center", + getLength(item) { + let disks = (item.disk && item.disk.trim().split(" ")) || []; + return disks.length; + }, + getText(item) { + let disks = (item.disk && item.disk.trim().split(" ")) || []; + return disks[0]; + }, + getContent(item) { + let disks = (item.disk && item.disk.trim().split(" ")) || []; + let htmlStr = `数据盘（块/GB）
`; + + disks.forEach((v) => { + htmlStr += `数据盘：${v}
`; + }); + + return htmlStr; + }, }, { label: "申请用户", - prop: "name", + prop: "user_name", align: "center", }, { label: "业务系统名", - prop: "name", + prop: "system_name", align: "center", }, { label: "初次申请状态", - prop: "name", align: "center", + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_state || 0) + 1 + ]; + }, }, { - label: "资源调整状态", - prop: "name", + label: "资源调整结果", align: "center", + getText(item) { + return ["未通过", "待审批", "通过"][ + (item.approve_update_state || 0) + 1 + ]; + }, }, { label: "用户申请时间", - prop: "name", + prop: "apply_time", align: "center", }, { @@ -855,68 +913,17 @@ export default { width: 80, actionList: [ { - label: "分配", getLabel(item) { - return item.allot == 0 ? "分配" : "已分配"; + return item.use_uid ? "已分配" : "分配"; }, callback: this.cloudAllot, disabledRule(item) { - return item.allot == 1; + return item.use_uid; }, }, ], }, ]; - this.listData = [ - { - name: "区域1", - state: 0, - sjp: ["8/60"], - allot: 1, - }, - { - name: "区域2", - state: 1, - sjp: ["2/3", "22/33"], - allot: 0, - }, - { - name: "区域3", - state: 0, - sjp: ["2/100", "22/33", "55/66"], - allot: 1, - }, - ]; - this.cloud_zuzhi = { - org_name: "北京比格大数据", - used_area: 2, - dashboard_list: [ - { - name: "cpu使用量", - value: 6, - total: 10, - unit: "（核）", - }, - { - name: "内存使用量", - value: 13, - total: 20, - unit: "（GB）", - }, - { - name: "数据盘使用量", - value: 500, - total: 560, - unit: "（GB）", - }, - { - name: "容器组使用量", - value: 10, - total: 18, - unit: "（个）", - }, - ], - }; } // 超级管理员 --- 平台服务管理 @@ -1136,35 +1143,7 @@ export default { } // 超级管理员 --- 云资源管理 else if (level == 2 && type == 2) { - this.cloud_admin = { - 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: "（个）", - }, - ], - histogram: {}, - }; + this.listUrl = "/apaas/service/v3/resource/user/apply/list"; } // Error @@ -1173,46 +1152,148 @@ export default { } }, init(filter) { - console.log(filter); + // console.log(filter); if (!this.listUrl) { return; } + let params = {}; + this.tempFliter = filter; + if (this.type == 2) { + params = { + search: filter.keyword, + page: filter.page, + limit: filter.size, + depart: "", + state1: filter.state1, + state2: filter.state2, + }; + } else { + params = { + keyword: filter.keyword, + page: filter.page, + size: filter.size, + data_service_type: + (filter.service_type_1 && + filter.service_type_1.map((item) => item.value).join(",")) || + "", // 服务类型 + sectors: + (filter.service_area && + filter.service_area.map((item) => item.value).join(",")) || + "", // 服务领域 + openness: + (filter.openness && + filter.openness.map((item) => item.value).join(",")) || + "", // 开放程度 + state: + (filter.state && + filter.state.map((item) => item.value).join(",")) || + "", // 服务状态 + }; + } + this.$http - .get(this.listUrl, { - params: { - data_service_type: - (filter.service_type_1 && - filter.service_type_1.map((item) => item.value).join(",")) || - "", // 服务类型 - sectors: - (filter.service_area && - filter.service_area.map((item) => item.value).join(",")) || - "", // 服务领域 - openness: - (filter.openness && - filter.openness.map((item) => item.value).join(",")) || - "", // 开放程度 - state: - (filter.state && - filter.state.map((item) => item.value).join(",")) || - "", // 服务状态 - keyword: filter.keyword, - page: filter.page, - size: filter.size, - }, - }) + .get(this.listUrl, { params }) .then(({ data }) => { - // console.log(data.data); - this.listTotal = data.data.total; - this.listData = data.data.data; + // console.log(data); + + if (this.type == 2) { + const cloud = data.data.cloud_resource_count; + + if (this.level == 1) { + this.listTotal = data.total; + this.listData = data.data.cloud_apply_list; + this.cloud_zuzhi = { + count_zy: cloud.count_zy, + dashboard_list: [ + { + name: "cpu使用量", + value: cloud.cpu_use, + total: cloud.cpu_total, + unit: "（核）", + }, + { + name: "内存使用量", + value: cloud.memory_use, + total: cloud.memory_total, + unit: "（GB）", + }, + { + name: "数据盘使用量", + value: cloud.disk_use, + total: cloud.disk_total, + unit: "（GB）", + }, + { + name: "容器组使用量", + value: cloud.containers_use, + total: cloud.containers_total, + unit: "（个）", + }, + ], + }; + } else if (this.level == 2) { + this.cloud_admin = { + dashboard_list: [ + { + name: "cpu使用量", + value: cloud.cpu_use, + total: cloud.cpu_total, + unit: "（核）", + }, + { + name: "内存使用量", + value: cloud.memory_use, + total: cloud.memory_total, + unit: "（GB）", + }, + { + name: "数据盘使用量", + value: cloud.disk_use, + total: cloud.disk_total, + unit: "（GB）", + }, + { + name: "容器组使用量", + value: cloud.containers_use, + total: cloud.containers_total, + unit: "（个）", + }, + ], + }; + } + } else { + this.listTotal = data.data.total; + this.listData = data.data.data; + } }) .catch((error) => { console.log(error); }); + + // 超管的云资源管理展示的是组织列表 + if (this.level == 2 && this.type == 2) { + this.$http + .get("/apaas/backmgt/department/list", { + params: { + search: filter.keyword, + page: filter.page, + limit: filter.size, + }, + }) + .then(({ data }) => { + // console.log(data); + + this.listTotal = data.total; + this.listData = data.data; + }) + .catch((error) => { + console.log(error); + }); + } }, showDialog() { this.$refs.dialog.show(); @@ -1406,10 +1487,13 @@ export default { console.log("cloudDetail - " + item.name); }, cloudAllot(item) { - console.log("cloudAllot - " + item.name); + this.$refs.allotConfirm.getDetail(item.apply_id); }, - getDashboardOptions(item) { - let percent = Math.round((item.value / item.total) * 100); + allotSuccess() { + this.init(this.tempFliter); + }, + getDashboardOption(item) { + let percent = Math.round((item.value / item.total) * 100) || 0; let colors = ["#515fe7", "#e7ecfd"]; if (percent >= 80) { @@ -1564,6 +1648,335 @@ export default { ], }; }, + getHistogramOption(_xAxisData, _series) { + return { + tooltip: { + trigger: "axis", + /* axisPointer: { + crossStyle: { + color: "#999", + }, + }, */ + backgroundColor: "#242c43", + textStyle: { + fontSize: 12, + lineHeight: 20, + color: "#fff", + }, + }, + grid: { + left: 10, + right: 10, + bottom: 25, + top: 45, + containLabel: true, + }, + color: ["#525e98", "#90b7c1", "#d06d1f", "#e4aa4f"], + legend: { + right: "center", + top: 0, + itemWidth: 10, + itemHeight: 10, + icon: "roundRect", + orient: "horizontal", + backgroundColor: "#f8f9fd", + textStyle: { + fontSize: 12, + lineHeight: 20, + color: "#a9aec0", + }, + data: ["CPU", "内存", "数据盘", "容器组"], + }, + xAxis: [ + { + type: "category", + axisLabel: { + textStyle: { + color: "#0d1847", + fontSize: 12, + lineHeight: 20, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#e3e5ef", + }, + }, + splitLine: { + show: false, + }, + /* splitArea: { + show: true, + areaStyle: { + color: ["#f4f5fd", "#fff"], + opacity: 0.5, + }, + }, */ + axisPointer: { + type: "shadow", + }, + data: [ + "办公费", + "印刷费", + "水费", + "水费", + "邮电费", + "物业管理费", + "差旅费", + "因公出国（境）费用", + "维修（护）费", + "会议费", + "租聘费", + "培训费", + "取暖费", + "公务接待费", + "公务用车运行", + "其他交通费用", + "房屋建筑物购建", + "办公设备购置", + "大型修缮", + "信息网络及软件购置更新", + "公务用车购置", + "咨询费", + "手续费", + "劳务费", + "委托业务费", + "其他商品和服务支出", + "专用设备购置", + "基础设施建设", + "其他交通工具购置", + "其他资本性支出", + ], + }, + ], + yAxis: [ + { + type: "value", + min: 0, + axisLabel: { + formatter: "{value}", + textStyle: { + color: "#a9aec0", + fontSize: 12, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#e3e5ef", + }, + }, + splitLine: { + lineStyle: { + type: "dashed", + color: ["#f2f2f2"], + width: 1, + }, + }, + }, + ], + series: [ + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "CPU", + }, + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "内存", + }, + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "数据盘", + }, + { + type: "bar", + barMaxWidth: 12, + data: [ + 17931.63, + 2420.69, + 399.4, + 2581.2, + 1571.79, + 3028.14, + 8041.46, + 1616.08, + 7159.78, + 3122.55, + 2211.05, + 10573.26, + 1325.09, + 1290.44, + 2301.95, + 3344.42, + 5687.6, + 2117.72, + 442.4, + 14853.71, + 96.25, + 170.19, + 40.74, + 3947.28, + 12558.87, + 12546.87, + 6945.36, + 683.28, + 73.17, + 169.15, + ], + itemStyle: { + normal: { + barBorderRadius: [6, 6, 6, 6], + }, + }, + name: "容器组", + }, + ], + dataZoom: [ + { type: "inside", start: 0, end: 20 }, + { + show: true, + type: "slider", + height: 20, + bottom: 0, + start: 0, + end: 100, + fillerColor: "#e6ebfe", + handleStyle: { color: "#b4c0f5" }, + backgroundColor: "#f8f9fd", + borderColor: "#f8f9fd", + textStyle: { color: "transparent", fontSize: "12px" }, + dataBackground: { + lineStyle: { color: "transparent" }, + areaStyle: { color: "transparent" }, + }, + }, + ], + }; + }, + resizeColumn() { + if (this.$refs.adminHistogram) { + this.$refs.adminHistogram.resize(); + } + }, }, created() { this.level = parseInt(this.$route.params.level); @@ -1587,6 +2000,12 @@ export default { } }); }, + mounted() { + window.addEventListener("resize", this.resizeColumn); + }, + destroyed() { + window.removeEventListener("resize", this.resizeColumn); + }, }; @@ -1594,35 +2013,36 @@ export default { .service_management_list { height: 100%; } -.zuzhi_title { +.cloud_title { margin-top: 15px; } -.zuzhi_title > span, -.zuzhi_title > span::before { +.cloud_title > span, +.cloud_title > span::before { display: inline-block; vertical-align: middle; } -.zuzhi_title > span:nth-child(1)::before { +.cloud_title > span:nth-child(1)::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background-color: #515fe7; margin-right: 10px; + margin-bottom: 2px; } -.zuzhi_title > span:nth-child(1) { +.cloud_title > span:nth-child(1) { font-size: 16px; color: #242c43; line-height: 30px; } -.zuzhi_title > span:nth-child(2)::before { +.cloud_title > span:nth-child(2)::before { content: ""; width: 2px; height: 12px; background-color: #b4c0f5; margin: 0 10px; } -.zuzhi_title > span:nth-child(2) { +.cloud_title > span:nth-child(2) { font-size: 14px; line-height: 1; color: #58617a; @@ -1658,4 +2078,17 @@ export default { .dashboard_info > span:nth-of-type(2) { color: #0d1847; } +.admin_preview { + display: flex; + justify-content: space-between; + align-items: center; +} +.admin_preview > * { + width: calc(50% - 10px); +} +.admin_preview-right { + height: 250px; + margin-top: 15px; + box-sizing: border-box; +} diff --git a/src/router/index.js b/src/router/index.js index 5c005c93e49fbd90429279ed2495e5f410073dcf..85aabde75bb00d8bed29b957f6bf0f43b7ad23b7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -68,6 +68,11 @@ export default new Router({ component: () => import("@/pages/workbench/fwgl/approval_service_detail"), }, // 审批的服务 - 详情 + { + path: "/fwgl/:level/:type/cloud_detail/:id", + name: "servicedetail", + component: () => import("@/pages/workbench/fwgl/cloud-detail"), + }, // 云资源 - 详情 ], }, // 工作台 - 服务管理模块 { diff --git a/yarn.lock b/yarn.lock index d1c236474c05e32bf6d8e179cf7073ba677cc690..a54741ff02285cd41f990c1166c7eaf7fba629cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6074,6 +6074,11 @@ resize-detector@^0.1.10: resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c" integrity sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw== +resize-detector@^0.2.2: + version "0.2.2" + resolved "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.2.2.tgz#b207e72912bef0bda9fb825fe894ed9686ca965e" + integrity sha1-sgfnKRK+8L2p+4Jf6JTtlobKll4= + resize-observer-polyfill@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" @@ -7207,6 +7212,13 @@ vue-router@^3.0.2: resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89" integrity sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA== +vue-sparklines@^0.2.1: + version "0.2.1" + resolved "https://registry.npm.taobao.org/vue-sparklines/download/vue-sparklines-0.2.1.tgz#2c754b49af5d86a62308930f72bad8fc376d3beb" + integrity sha1-LHVLSa9dhqYjCJMPcrrY/DdtO+s= + dependencies: + vue "^2.2.1" + vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" @@ -7228,7 +7240,7 @@ vue-template-es2015-compiler@^1.9.0: resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== -vue@^2.6.10: +vue@^2.2.1, vue@^2.6.10: version "2.6.11" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5" integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==