Skip to content

A
apaas-ui
Commit 12443509 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

仪表盘数据，fix超市列表筛选，列表+滚动条，云资源详情

parent d8c6cc83
Hide whitespace changes
Inline Side-by-side
Showing with 536 additions and 54 deletions
src/components/e-charts/dashboard.vue
View file @ 12443509
......@@ -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]
}
]
};
......
src/components/service-list/service_list.vue
View file @ 12443509
......@@ -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];
......
src/components/shop-cloud/shop-cloud.vue
View file @ 12443509
......@@ -326,7 +326,7 @@
:stripe="true"
:datas="dataDiskList"
@primary-del="delItem"
height="300"
height="260"
></table-um>
</el-form-item>
</el-col>
......
src/components/table/table-um.vue
View file @ 12443509
......@@ -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);
}
</style>
<style scoped>
.ces-table {
......
src/components/table/table-umhref.vue
View file @ 12443509
......@@ -43,7 +43,8 @@ export default {
</script>
<style scoped>
.href {
color: #264dd9 !important;
color: #0f2683;
font-weight: 700;
cursor: pointer;
}
</style>
\ No newline at end of file
src/pages/service_shop/shop_list.vue
View file @ 12443509
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list :filterNmaes="filterNmaes" :name="name" :url="url" :urlFilter="urlFilter"></service-list>
<service-list :filterNames="filterNames" :name="name" :url="url" :urlFilter="urlFilter"></service-list>
</el-main>
</el-container>
</div>
......@@ -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;
}
}
......
src/pages/workbench/fwgl/cloud-detail.vue
View file @ 12443509
......@@ -34,10 +34,58 @@
</div>
</div>
</div>
<div class="cloud_params">
<el-tabs v-model="activeName" class="params_tabs" @tab-click="clickTab">
<el-tab-pane label="用户申请信息" name="0"></el-tab-pane>
<el-tab-pane label="我的申请信息" name="1"></el-tab-pane>
</el-tabs>
<div v-if="activeName=='0'" class="cloud_params">
<InfoList @download="download" :list_arr="list_arr" class="detail_s_val">
<div ref="ApplyParams" slot="ApplyParams" class="params_block">
<span class="params_block_title">申请规格：</span>
<span class="params_block_title">工作区域：</span>
<div class="params_block_item">
<div class="params_block_item_in">
<span class="params_block_item_title">CPU：</span>
<span class="params_block_item_val">{{ orderDetail.cpu }}核</span>
</div>
<div class="params_block_item_in">
<span class="params_block_item_title">内存：</span>
<span class="params_block_item_val">{{ orderDetail.memory }}GB</span>
</div>
<div class="params_block_item_in">
<span class="params_block_item_title">容器组：</span>
<span class="params_block_item_val">{{ orderDetail.memory }}个</span>
</div>
<div class="params_block_item_in">
<span class="params_block_item_title">数据盘：</span>
<div class="params_block_item_val">
<div>{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</div>
</div>
</div>
<div class="params_block_item_in">
<span class="params_block_item_title">申请时长：</span>
<span class="params_block_item_val">{{ orderDetail.memory }}核</span>
</div>
</div>
<span class="params_block_title margin_top_20">单个容器组规格：</span>
<div class="params_block_item">
<div class="params_block_item_in">
<span class="params_block_item_title">CPU：</span>
<div class="params_block_item_val">
<span class="val_has_2">最高&nbsp;{{ orderDetail.one_cpu_max }}核</span>
<span class="val_has_2">默认&nbsp;{{ orderDetail.one_cpu_min }}核</span>
</div>
</div>
<div class="params_block_item_in">
<span class="params_block_item_title">CPU：</span>
<div class="params_block_item_val">
<span class="val_has_2">最高&nbsp;{{ orderDetail.one_memory_max }}核</span>
<span class="val_has_2">默认&nbsp;{{ orderDetail.one_memory_min }}核</span>
</div>
</div>
</div>
</div>
<div ref="ApplyBeforeParams" slot="ApplyBeforeParams" class="params_block">
<span class="params_block_title">工作区域：</span>
<div class="params_block_item">
<div class="params_block_item_in">
<span class="params_block_item_title">CPU：</span>
......@@ -53,9 +101,13 @@
</div>
<div class="params_block_item_in">
<span class="params_block_item_title">数据盘：</span>
<span
class="params_block_item_val"
>{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</span>
<div class="params_block_item_val">
<div>{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</div>
</div>
</div>
<div class="params_block_item_in">
<span class="params_block_item_title">续期时长：</span>
<span class="params_block_item_val">{{ orderDetail.memory }}核</span>
</div>
</div>
<span class="params_block_title margin_top_20">单个容器组规格：</span>
......@@ -76,12 +128,101 @@
</div>
</div>
</div>
<div ref="ApplyDesc" slot="ApplyDesc">
{{ desc }}
<div ref="ApplyDesc" slot="ApplyDesc" class="params_apply_desc">{{ desc }}</div>
<div ref="ResourceOverview" slot="ResourceOverview" class="params_resource_overview">
{{ resourceOverview }}
<el-row class="params_charts">
<el-col :span="6" class="params_col">
<div class="params_chart">
<dashboard ref="chart_1" :data="data1" dangerousValue="high"></dashboard>
</div>
<div class="params_chart_msg">
<div class="params_chart_msg_item">
物理总量
<span>1632核</span>
</div>
<div class="params_chart_msg_item">
剩余量
<span>1632核</span>
</div>
</div>
</el-col>
<el-col :span="6" class="params_col">
<div class="params_chart">
<dashboard ref="chart_2" :data="data2" dangerousValue="high"></dashboard>
</div>
<div class="params_chart_msg">
<div class="params_chart_msg_item">
物理总量
<span>1632核</span>
</div>
<div class="params_chart_msg_item">
剩余量
<span>1632核</span>
</div>
</div>
</el-col>
<el-col :span="6" class="params_col">
<div class="params_chart">
<dashboard ref="chart_3" :data="data3" dangerousValue="high"></dashboard>
</div>
<div class="params_chart_msg">
<div class="params_chart_msg_item">
物理总量
<span>1632核</span>
</div>
<div class="params_chart_msg_item">
剩余量
<span>1632核</span>
</div>
</div>
</el-col>
<el-col :span="6" class="params_col">
<div class="params_chart">
<dashboard ref="chart_4" :data="data4" dangerousValue="high"></dashboard>
</div>
<div class="params_chart_msg">
<div class="params_chart_msg_item">
物理总量
<span>1632核</span>
</div>
<div class="params_chart_msg_item">
剩余量
<span>1632核</span>
</div>
</div>
</el-col>
</el-row>
</div>
<div ref="AppList" slot="AppList">
<table-um
ref="AppListTable"
:headers="appListHeaders"
:stripe="true"
:datas="appList"
height="260"
detailsUrl
></table-um>
</div>
</InfoList>
</div>
<div v-if="activeName == '1'" class="my_params">
<InfoList :list_arr="list_arr_my" class="detail_s_val">
<div
ref="ApplicationStatus"
slot="ApplicationStatus"
class="params_apply_desc"
>{{ applicationStatus }}</div>
</InfoList>
</div>
<div class="btn_footer">
<el-button class="submit" @click="submit">提交资源申请</el-button>
<el-button class="adjustment" @click="adjustment">资源调整</el-button>
<el-button class="adjustment" @click="distribution">分配</el-button>
<el-button class="refuse" @click="refuse">拒绝</el-button>
</div>
</BlockRadius>
<AllotInfoConfirm ref="allotConfirm"></AllotInfoConfirm>
</div>
</template>
......@@ -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 => {
});
}
}
};
</script>
......@@ -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;
}
</style>
<style>
.params_tabs .el-tabs__header {
margin: 20px 0;
}
</style>
src/request/api/workbench.js
View file @ 12443509
......@@ -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;
src/request/http.js
View file @ 12443509
......@@ -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';
/**
......
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