From 124435094fe984b6d91d19400a5a4e28f3540579 Mon Sep 17 00:00:00 2001 From: liudianxin Date: Tue, 7 Jul 2020 19:08:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=EF=BC=8Cfix=E8=B6=85=E5=B8=82=E5=88=97=E8=A1=A8=E7=AD=9B?= =?UTF-8?q?=E9=80=89=EF=BC=8C=E5=88=97=E8=A1=A8+=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1=EF=BC=8C=E4=BA=91=E8=B5=84=E6=BA=90=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/e-charts/dashboard.vue | 80 ++-- src/components/service-list/service_list.vue | 11 +- src/components/shop-cloud/shop-cloud.vue | 2 +- src/components/table/table-um.vue | 20 + src/components/table/table-umhref.vue | 3 +- src/pages/service_shop/shop_list.vue | 18 +- src/pages/workbench/fwgl/cloud-detail.vue | 433 ++++++++++++++++++- src/request/api/workbench.js | 21 + src/request/http.js | 2 +- 9 files changed, 536 insertions(+), 54 deletions(-) diff --git a/src/components/e-charts/dashboard.vue b/src/components/e-charts/dashboard.vue index 92a51d8..90721f3 100644 --- a/src/components/e-charts/dashboard.vue +++ b/src/components/e-charts/dashboard.vue @@ -7,35 +7,53 @@ import { graphic } from "echarts/lib/export"; export default { props: { data: { - type: Array, - default: () => [] + type: Object, + default: () => { + data = 40; + text = "模拟数据1.0"; + } + }, + dangerousValue: { + type: String, + default: "" } }, data: () => ({ - navList: [], + navList: [] }), - mounted() { - }, + mounted() {}, methods: { dashboard() { let self = this; return { - title: { - text: "20%", - subtext: "sssss", - x: "center", - y: "center", - textStyle: { - fontSize: 26, - fontWeight: "normal", - color: ["#67828c"] + title: [ + { + text: self.data.data + "{a|%}", + x: "center", + y: "center", + textStyle: { + fontSize: 36, + fontWeight: "lighter", + color: ["#67828c"], + rich: { + a: { + fontSize: 14, + padding: [0, 0, 4, 0] + } + } + } }, - subtextStyle: { - color: "#67828c", - fontSize: 16, - align: "center" + { + text: self.data.text, + x: "center", + y: "58%", + textStyle: { + fontSize: 12, + fontWeight: "normal", + color: "#707693" + } } - }, + ], angleAxis: { axisLine: { show: false @@ -73,7 +91,7 @@ export default { series: [ { type: "bar", - data: [, 40], + data: [, self.data.data], coordinateSystem: "polar", barMaxWidth: 10, z: 1, @@ -81,10 +99,18 @@ export default { roundCap: true, itemStyle: { normal: { - color: new graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "#25bdb1" }, - { offset: 1, color: "#e7fdfc" } - ]) + color: + self.dangerousValue == "high" + ? self.data.data >= 80 + ? "#e15260" + : "#515fe7" + : self.data.data > 75 + ? "#00cfc6" + : self.data.data > 50 + ? "#54cefd" + : self.data.data > 25 + ? "#54cefd" + : "#25bdb1" } }, barGap: "-100%" @@ -126,7 +152,7 @@ export default { show: true, splitNumber: 5, lineStyle: { - color: "#a9aec0", + color: "#c9cee0", width: 1 }, length: 4 @@ -135,7 +161,7 @@ export default { show: true, length: 6, lineStyle: { - color: "#a9aec0" + color: "#c9cee0" } }, //分隔线样式 detail: { @@ -160,7 +186,7 @@ export default { } }, - data: [, 40] + data: [, self.data.data] } ] }; diff --git a/src/components/service-list/service_list.vue b/src/components/service-list/service_list.vue index fada16e..99e71e1 100644 --- a/src/components/service-list/service_list.vue +++ b/src/components/service-list/service_list.vue @@ -154,7 +154,7 @@ export default { }, url: { type: String, default: "" }, name: { type: String, default: "" }, - filterNmaes: { + filterNames: { type: Array, default: () => { []; @@ -251,12 +251,19 @@ export default { } ] }); + } else { + this.$set(this.filterLists, 0, { + id: 110, + name: "", + prop: "", + childDomains: [] + }); } this.getShopFilter(); } } }, - filterNmaes: { + filterNames: { handler(val) { for (let i = 0; i < val.length; i++) { this.filterLists[i + 1].name = val[i]; diff --git a/src/components/shop-cloud/shop-cloud.vue b/src/components/shop-cloud/shop-cloud.vue index 9624980..eab3719 100644 --- a/src/components/shop-cloud/shop-cloud.vue +++ b/src/components/shop-cloud/shop-cloud.vue @@ -326,7 +326,7 @@ :stripe="true" :datas="dataDiskList" @primary-del="delItem" - height="300" + height="260" > diff --git a/src/components/table/table-um.vue b/src/components/table/table-um.vue index fcb84c1..b336740 100644 --- a/src/components/table/table-um.vue +++ b/src/components/table/table-um.vue @@ -63,6 +63,7 @@ default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="cesTable" + class="table_scoller" :class="radius ? 'table_radius' : ''" :header-cell-class-name="headerCellClassName" v-cloak @@ -853,6 +854,25 @@ em { border: 0; padding: 0; } +.table_scoller .el-table__body-wrapper::-webkit-scrollbar { + /*滚动条整体样式*/ + width: 16px; /*高宽分别对应横竖滚动条的尺寸*/ + height: 1px; +} +.table_scoller .el-table__body-wrapper::-webkit-scrollbar-thumb { + /*滚动条里面小方块*/ + border-radius: 8px; + /* background: #dde4ff; */ + box-shadow: 8px 0 0 #bcc1d0 inset; + border: 4px solid rgba(0, 0, 0, 0); +} +.table_scoller .el-table__body-wrapper::-webkit-scrollbar-track { + /*滚动条里面轨道*/ + border-radius: 8px; + /* background: #f4f4f4; */ + box-shadow: 8px 0 0 #f8f8f8 inset; + border: 4px solid rgba(0, 0, 0, 0); +} \ No newline at end of file diff --git a/src/pages/service_shop/shop_list.vue b/src/pages/service_shop/shop_list.vue index 09d7153..29ff0bb 100644 --- a/src/pages/service_shop/shop_list.vue +++ b/src/pages/service_shop/shop_list.vue @@ -5,7 +5,7 @@ - + @@ -23,7 +23,7 @@ export default { urlFilter: "", url: "", name: "", - filterNmaes: [] + filterNames: [] }), mounted() { this.getVal(this.$route.path); @@ -37,43 +37,43 @@ export default { this.name = "数据服务"; this.urlFilter = "5"; this.url = "/shop/sjfwDetail"; - this.filterNmaes = ["数据服务类型", "数据领域", "数据来源机构"]; + this.filterNames = ["数据服务类型", "数据领域", "数据来源机构"]; break; case "space_time_service_list": this.name = "时空服务"; this.urlFilter = "6"; this.url = "/shop/skfwDetail"; - this.filterNmaes = ["数据服务类型", "数据领域", "数据来源机构"]; + this.filterNames = ["时空服务类型", "应用领域", "服务来源组织"]; break; case "video_service_list": this.name = "视频服务"; this.urlFilter = "7"; this.url = ""; - this.filterNmaes = []; + this.filterNames = []; break; case "perception_service_list": this.name = "感知服务"; this.urlFilter = "10"; this.url = ""; - this.filterNmaes = []; + this.filterNames = []; break; case "comprehensive_app_list": this.name = "综合服务"; this.urlFilter = "21"; this.url = "/shop/zhfwDetail"; - this.filterNmaes = ["数据服务类型", "数据领域", "数据来源机构"]; + this.filterNames = ["服务类型", "应用领域", "服务来源组织"]; break; case "app_store_list": this.name = "应用商店"; this.urlFilter = "app"; this.url = "/shop/yysdDetail"; - this.filterNmaes = ["应用类型", "应用领域", "应用来源机构"]; + this.filterNames = ["应用类型", "应用领域", "应用来源机构"]; break; default: this.name = ""; this.urlFilter = ""; this.url = ""; - this.filterNmaes = []; + this.filterNames = []; break; } } diff --git a/src/pages/workbench/fwgl/cloud-detail.vue b/src/pages/workbench/fwgl/cloud-detail.vue index 240f7d6..cc28238 100644 --- a/src/pages/workbench/fwgl/cloud-detail.vue +++ b/src/pages/workbench/fwgl/cloud-detail.vue @@ -34,10 +34,58 @@ -
+ + + + +
- 申请规格： + 工作区域： +
+
+ CPU： + {{ orderDetail.cpu }}核 +
+
+ 内存： + {{ orderDetail.memory }}GB +
+
+ 容器组： + {{ orderDetail.memory }}个 +
+
+ 数据盘： +
+
{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB
+
+
+
+ 申请时长： + {{ orderDetail.memory }}核 +
+
+ 单个容器组规格： +
+
+ CPU： +
+ 最高 {{ orderDetail.one_cpu_max }}核 + 默认 {{ orderDetail.one_cpu_min }}核 +
+
+
+ CPU： +
+ 最高 {{ orderDetail.one_memory_max }}核 + 默认 {{ orderDetail.one_memory_min }}核 +
+
+
+
+
+ 工作区域：
CPU： @@ -53,9 +101,13 @@
数据盘： - {{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB +
+
{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB
+
+
+
+ 续期时长： + {{ orderDetail.memory }}核
单个容器组规格： @@ -76,12 +128,101 @@
-
- {{ desc }} +
{{ desc }}
+
+ {{ resourceOverview }} + + +
+ +
+
+
+ 物理总量 + 1632核 +
+
+ 剩余量 + 1632核 +
+
+ + +
+ +
+
+
+ 物理总量 + 1632核 +
+
+ 剩余量 + 1632核 +
+
+ + +
+ +
+
+
+ 物理总量 + 1632核 +
+
+ 剩余量 + 1632核 +
+
+ + +
+ +
+
+
+ 物理总量 + 1632核 +
+
+ 剩余量 + 1632核 +
+
+ + +
+
+
+
+ +
{{ applicationStatus }}
+ +
+
+ 提交资源申请 + 资源调整 + 分配 + 拒绝 +
+ @@ -89,10 +230,17 @@ import BlockRadius from "@/components/general/block-radius"; import InfoList from "@/components/infoList"; import helper from "@/services/helper.js"; +import Dashboard from "@/components/e-charts/dashboard"; +import TableUm from "@/components/table/table-um"; +import { mapGetters, mapState } from "vuex"; +import AllotInfoConfirm from "@/components/allot-info-confirm"; export default { components: { BlockRadius, - InfoList + InfoList, + Dashboard, + TableUm, + AllotInfoConfirm }, data() { return { @@ -110,6 +258,11 @@ export default { type: "solt", solt_name: "ApplyParams" }, + { + title: "审批通过后工作区域规格：", + type: "solt", + solt_name: "ApplyParams" + }, { title: "资源申请文件：", info: "2222222222222222222222.docs", @@ -119,23 +272,195 @@ export default { { title: "工作区域描述：", type: "solt", - solt_name: "ApplyDesc", + solt_name: "ApplyDesc" + }, + { + title: "资源使用情况：", + prop: "title" + }, + { + title: "获取时间：", + info: "2020-06-02 15:54:21" + }, + { + title: "剩余使用天数：", + info: "1000天" + }, + { + title: "到期时间：", + info: "2020-06-02 15:54:21" + }, + { + title: "资源使用概况：", + type: "solt", + solt_name: "ResourceOverview" + }, + { + title: "已部署应用列表：", + prop: "title" + }, + { + title: "", + type: "solt", + solt_name: "AppList" + } + ], + list_arr_my: [ + { + title: "提交申请时间：", + info: "2020-06-02 15:54:21" + }, + { + title: "获取时间：", + info: "2020-06-02 15:54:21" + }, + { + title: "申请状态：", + type: "solt", + solt_name: "ApplicationStatus" + } + ], + applicationStatus: "申请通过", + desc: + "工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：", + resourceOverview: + "当您觉得使用空间不足时，可以选择至服务超市-云资源服务页面的升级现有工作区域来完成配置扩容操作。", + data1: { + data: 80, + text: "CPU1已使用" + }, + data2: { + data: 60, + text: "CPU2已使用" + }, + data3: { + data: 40, + text: "CPU3已使用" + }, + data4: { + data: 10, + text: "CPU4已使用" + }, + appListHeaders: [ + { + label: "应用名称", + prop: "app_name", + align: "center", + type: "href" + }, + { + label: "应用类型", + prop: "app_name", + align: "center" + }, + { + label: "应用版本号", + prop: "app_name", + align: "center" + }, + { + label: "应用部署时间", + prop: "app_name", + align: "center" + } + ], + appList: [ + { + id: "123", + app_name: "单文件啊" + }, + { + id: "1223", + app_name: "单文件啊" + }, + { + id: "1313", + app_name: "单文件啊" + }, + { + id: "124563", + app_name: "单文件啊" + }, + { + id: "126783", + app_name: "单文件啊" + }, + { + id: "1225673", + app_name: "单文件啊" + }, + { + id: "13134563", + app_name: "单文件啊" + }, + { + id: "12234563", + app_name: "单文件啊" } ], - desc: "工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：" + now_user: "", + activeName: "0" }; }, watch: {}, - computed: {}, - created() {}, + computed: { + ...mapGetters(["level"]), + ...mapState(["userInfo"]) + }, + created() { + if (this.userInfo) { + this.now_user = this.level; + } else { + this.getCurrentUser(); + } + }, mounted() { this.getUrl(); + this.setListWithRole(); + this.getCloudDetail(); }, methods: { getUrl() { return this.$route.path.substring(0, 9); }, - download() {} + download() {}, + adjustment() {}, + distribution() {}, + submit() {}, + refuse() {}, + getCurrentUser() { + this.$api.user.getNowUser().then(({ data }) => { + if (data.success == 1) { + this.$store.commit("userInfofun", data.data); + this.now_user = this.level; + } else { + console.log(data.errMsg); + } + }); + }, + submit(item) { + this.$refs.allotConfirm.getDetail(item.apply_id); + }, + clickTab() {}, + setListWithRole() { + console.log(this.now_user); + if (this.now_user == 0) { + let index = this.list_arr.findIndex( + item => item.title == "资源使用情况：" + ); + this.list_arr.splice(index); + } else if (this.now_user == 1) { + } else if (this.now_user == 2) { + } + }, + getCloudDetail() { + let query = { + type: 0, + applyId: 13 + }; + this.$api.workbench.getCloudDetail(query).then(response => { + }); + } } }; @@ -232,4 +557,86 @@ export default { display: block; margin-top: 20px; } +.params_apply_desc { + margin: 5px 0; + padding-left: 15px; + line-height: 26px; +} +.params_resource_overview { + margin: 5px 0; + padding-left: 15px; + line-height: 26px; +} +.params_charts { + width: 800px; + height: 200px; +} +.params_col { + height: 100%; + position: relative; +} +.params_chart { + height: 180px; + padding: 0; +} +.params_chart_msg { + width: 120px; + position: absolute; + bottom: 0; + left: 40px; +} +.params_chart_msg_item { + display: flex; + justify-content: space-between; + color: #8890a7; +} +.params_chart_msg_item span { + color: #0d1847; +} +.btn_footer { + text-align: right; + margin: 60px 20px 10px; + position: relative; +} +.submit { + width: 130px; + background-color: #0f2683; + color: #f8f9fd; + position: absolute; + left: 20px; +} +.submit:hover { + background-color: #0f2683; + color: #f8f9fd; +} +.adjustment { + width: 100px; + background-color: #0f2683; + color: #f8f9fd; +} +.adjustment:hover { + background-color: #0f2683; + color: #f8f9fd; +} +.refuse { + width: 100px; + background-color: #e15260; + color: #f8f9fd; +} +.refuse:hover { + background-color: #e15260; + color: #f8f9fd; +} +.val_has_2 { + margin-right: 20px; +} +.my_params p { + padding: 0 15px; +} + + diff --git a/src/request/api/workbench.js b/src/request/api/workbench.js index 3da014f..9ac5176 100644 --- a/src/request/api/workbench.js +++ b/src/request/api/workbench.js @@ -27,6 +27,27 @@ const workbench = { getAppParams(params) { return axios.get(`/apaas/hubApi/market/values/${params.app_id}`) }, + + // get cloud resources details + getCloudDetail(params) { + return axios.get(`/apaas/service/v3/resource/user/apply/approvedDetail?type=${params.type}&applyid=${params.applyId}`) + }, + // cloud resource approval + setCloudApproval(params) { + return axios.put(`/apaas/service/v3/resource/apply/approve?apply_id=${params.applyId}&apply_state=${params.applyState}&apply_type=${params.applyType}&cloud_id=${params.applyCloudId}`, params) + }, + // cloud resource allocation + setCloudAllocation(params) { + return axios.put(`/apaas/service/v3/resource/apply/distribution?id=${params.id}&user_id=${params.userId}`) + }, + // cloud resource delete + deleteCloud(params) { + return axios.delete(`/apaas/service/v3/resource/apply/remove?id=${params.id}`) + }, + // cloud resource disabled + disabledCloud(params) { + return axios.put(`/apaas/service/v3/resource/apply/disable?id=${params.id}&type=${params.type}`) + }, } export default workbench; diff --git a/src/request/http.js b/src/request/http.js index 8c256f3..aee733c 100644 --- a/src/request/http.js +++ b/src/request/http.js @@ -56,7 +56,7 @@ const errorHandle = (status, other) => { } // 创建axios实例 -var instance = axios.create({ timeout: 1000 * 12 }); +var instance = axios.create({ timeout: 1000 * 30 }); // 设置post请求头 instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; /** -- 2.26.0