Commit c9d95096 authored by 张俊's avatar 张俊

合并

parents e3c79497 0827e577
...@@ -67,7 +67,8 @@ html { ...@@ -67,7 +67,8 @@ html {
} }
body { body {
margin: 0; margin: 0;
font-family: PingFangSC-Regular, sans-serif; font-family: Microsoft YaHei, sans-serif;
/* font-size: 17px; */
} }
ul { ul {
list-style: none; list-style: none;
......
...@@ -17,6 +17,9 @@ export const lang = { ...@@ -17,6 +17,9 @@ export const lang = {
// work bench // work bench
workBench: "工作台", workBench: "工作台",
cloudResourcesService: "云资源服务",
cloudResourcesManagement: "云资源管理",
cloudResourcesDetail: "云资源详情",
// data analysis // data analysis
dataAnalysis: "数据分析中心", dataAnalysis: "数据分析中心",
......
<template>
<apass-dialog
ref="confrim"
class="allot_info_confirm"
width="600px"
title="分配信息确认"
>
<template slot="content">
<div class="confirm_container">
<div class="info_list" style="width: 100%;">
<p class="info_text text_grey">申请组织:</p>
<p
class="info_text"
v-text="(detail && detail['department_name']) || '-'"
></p>
</div>
<div class="info_list" style="width: 50%;">
<p class="info_text text_grey">申请用户:</p>
<p
class="info_text"
v-text="(detail && detail['user_name']) || '-'"
></p>
</div>
<div class="info_list" style="width: 50%;">
<p class="info_text text_grey">联系电话:</p>
<p class="info_text" v-text="(detail && detail['phone']) || '-'"></p>
</div>
<div class="info_list" style="width: 100%;">
<p class="info_text text_grey">上传申请文件:</p>
<p class="info_text" v-text="(detail && detail['file']) || '-'"></p>
</div>
<div class="info_list" style="width: 100%;">
<!-- <p class="detail_title info_text text_grey">原规格:</p> -->
<div class="detail_info">
<div class="detail_list">
<p class="info_text">基本信息:</p>
<p class="info_text info_cell">
<span class="text_grey">工作区域名称:</span>
<span v-text="(detail && detail['namespace']) || '-'"></span>
</p>
<p class="info_text info_cell">
<span class="text_grey">中文名称:</span>
<span v-text="(detail && detail['workplace']) || '-'"></span>
</p>
<p class="info_text info_cell">
<span class="text_grey">描述信息:</span>
<span
v-text="(detail && detail['workplacedesc']) || '-'"
></span>
</p>
</div>
<div class="detail_list">
<p class="info_text">工作区域申请规格:</p>
<p class="info_text info_cell">
<span class="text_grey">CPU:</span>
<span v-text="(detail && detail['cpu']) || '-'"></span>
</p>
<p class="info_text info_cell">
<span class="text_grey"> 内存:</span>
<span v-text="(detail && detail['memory']) || '-'"></span>
</p>
</div>
<div class="detail_list">
<p class="info_text">申请时长:</p>
<p class="info_text info_cell">
<span class="text_grey"> 申请时长:</span>
<span
v-text="(detail && detail['duration_time']) || '-'"
></span>
</p>
</div>
</div>
</div>
</div>
</template>
<template slot="action">
<el-button type="defalut" size="mini" @click="hideDialog">
取消
</el-button>
<el-button
type="primary"
size="mini"
:loading="submitLoading"
@click="confrimAction"
>
确认提交
</el-button>
</template>
</apass-dialog>
</template>
<script>
import apassDialog from "@/components/apass-dialog";
export default {
components: { apassDialog },
data: () => ({
detail: null,
submitLoading: false,
}),
methods: {
showDialog() {
this.$refs.confrim.show();
},
hideDialog() {
this.$refs.confrim.hide();
},
getDetail(apply_id) {
this.$http
.get("/apaas/service/v3/resource/apply/distributionDisplay", {
params: {
apply_id: apply_id,
},
})
.then(({ data }) => {
if (data.success) {
let datas = data.data;
this.detail = {
...datas,
cpu: `最高${datas.max_cpu}核,默认${datas.min_cpu}核`,
memory: `最高${datas.max_memory}GB,默认${datas.min_memory}GB`,
};
} else {
this.$message({
message: "获取详情失败",
type: "warning",
});
}
})
.catch((error) => {
this.$message({
message: "获取详情失败",
type: "warning",
});
});
this.showDialog();
},
confrimAction() {
this.submitLoading = true;
this.$http
.put("/apaas/service/v3/resource/apply/distribution", null, {
params: {
id: this.detail.id,
user_id: this.detail.user_id,
},
})
.then(({ data }) => {
this.submitLoading = false;
if (data.success) {
this.$message({
message: "分配成功",
type: "success",
});
this.$emit("allot-success");
this.hideDialog();
} else {
this.$message({
message: "分配失败",
type: "warning",
});
}
})
.catch((error) => {
this.submitLoading = false;
this.$message({
message: "分配失败",
type: "warning",
});
});
},
},
};
</script>
<style scoped>
.confirm_container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
text-align: left;
}
.info_list + .info_list,
.detail_list + .detail_list {
margin-top: 15px;
}
.info_text {
font-size: 14px;
line-height: 27px;
color: #242c43;
}
.text_grey {
color: #8890a7;
}
.detail_title {
margin-bottom: 7px;
}
.detail_info {
background-color: #f8f9fd;
padding: 15px;
border-radius: 7px;
overflow: hidden;
}
.info_cell {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.info_cell > span:nth-child(1) {
width: 8em;
flex-shrink: 0;
text-align: right;
margin-right: 10px;
}
.info_cell > span:nth-child(2) {
flex-grow: 1;
}
</style>
...@@ -143,10 +143,10 @@ export default { ...@@ -143,10 +143,10 @@ export default {
showListFilter: false, showListFilter: false,
filter: {}, filter: {},
searchValue: "", searchValue: "",
pageSize: 15, pageSize: 10,
currentPage: 1, currentPage: 1,
timer: null, timer: null,
pageSizes: [15, 50, 100], pageSizes: [10, 20, 50],
selectFilter: [], selectFilter: [],
}), }),
methods: { methods: {
......
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
data: () => ({}), data: () => ({}),
computed: { computed: {
totalPages() { totalPages() {
return Math.floor(this.total / this.pageSize) + 1 || 1; return Math.ceil(this.total / this.pageSize) || 1;
}, },
preDisabled() { preDisabled() {
return this.currentPage === 1; return this.currentPage === 1;
......
<template> <template>
<div class="image_detail"> <div class="image_detail">
<apass-dialog ref="listdialog" :title="title" width="985px"> <apass-dialog ref="listdialog" :title="title" width="1200px">
<template slot="content"> <template slot="content">
<div class="apass_table"> <div class="apass_table">
<el-table :data="imageData"> <el-table :data="imageData">
<el-table-column width="20"></el-table-column> <el-table-column width="20"></el-table-column>
<el-table-column label="版本号" align="left"> <el-table-column label="版本号" width="120" align="left">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.name }} {{ scope.row.name }}
</template> </template>
...@@ -15,6 +15,11 @@ ...@@ -15,6 +15,11 @@
{{ scope.row.author }} {{ scope.row.author }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="镜像地址" align="left">
<template slot-scope="scope">
{{ scope.row.image_url }}
</template>
</el-table-column>
<el-table-column label="创建时间" width="180" align="center"> <el-table-column label="创建时间" width="180" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{ dateTransform(scope.row.created) }} {{ dateTransform(scope.row.created) }}
...@@ -25,7 +30,7 @@ ...@@ -25,7 +30,7 @@
{{ getSize(scope.row.size) }} {{ getSize(scope.row.size) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="漏洞" width="160" align="center"> <el-table-column label="漏洞" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<image-bugs <image-bugs
v-if="scope.row.scan_overview" v-if="scope.row.scan_overview"
......
...@@ -2,37 +2,54 @@ ...@@ -2,37 +2,54 @@
<div class="menu"> <div class="menu">
<img src="../assets/imgs/home_img_logo.png" alt class="logo" /> <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
<div style="float:right;cursor: pointer;position:relative;" class="user_hover"> <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
<span v-if="userInfo.user_name && userInfo.user_name != ''" class="user">{{ userInfo.user_name }}</span> <span
v-if="userInfo.user_name && userInfo.user_name != ''"
class="user"
>{{ userInfo.user_name }}</span>
<span v-else @click="gotopage('login')" class="user">请登录</span> <span v-else @click="gotopage('login')" class="user">请登录</span>
<img :class="userInfo.picture_path ? 'user_pic' : 'user_default'" :src=" <img
:class="userInfo.picture_path ? 'user_pic' : 'user_default'"
:src="
userInfo.picture_path || require('../assets/imgs/home_ic_user.png') userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
" /> "
/>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="user_menu"> <div v-if="userInfo.user_name && userInfo.user_name != ''" class="user_menu">
<div v-for="(item, index) in user_arr" :key="index + 700" @click="gotopage(item.path)"> <div
{{ item.name }} v-for="(item, index) in user_arr"
</div> :key="index + 700"
@click="gotopage(item.path)"
>{{ item.name }}</div>
</div> </div>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj"></div> <div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj"></div>
</div> </div>
<div style="float:right;cursor: pointer;position:relative;" class="shop_hover" @click="gotopage('/shop/shopping_cart')"> <div
style="float:right;cursor: pointer;position:relative;"
class="shop_hover"
@click="gotopage('/shop/shopping_cart')"
>
<div class="car"> <div class="car">
<el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge> <el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge>
<img src="../assets/imgs/home_ic_shop.png" alt class="car_img" /> <img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
</div> </div>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="shop_menu"> <div v-if="userInfo.user_name && userInfo.user_name != ''" class="shop_menu">
<div class="shop_list_title">最近加入的服务:</div> <div class="shop_list_title">最近加入的服务:</div>
<div v-for="(item, index) in shopping_list" :key="'shopping' + index" class="shop_list_cell shop_line"> <div
<img :src="item.service.cover" class="shop_img" /> v-for="(item, index) in shopping_list"
:key="'shopping' + index"
class="shop_list_cell shop_line"
>
<img :src="item.service_id == 0 ? item.application.logo : item.service.cover" class="shop_img" />
<div class="shop_cell_msgs"> <div class="shop_cell_msgs">
<p @click="getDetail(item.id)" class="shop_cell_name over_one"> <p
{{ item.service_id == 0 ? item.application.app_name : item.service.name }} @click="getDetail(item.id)"
</p> class="shop_cell_name over_one"
<p class="shop_cell_msg bover_one"> >{{ item.service_id == 0 ? item.application.app_name : item.service.name }}</p>
{{ item.service_id == 0 ? item.application.ywly : item.service.sectors_name }} <p
</p> class="shop_cell_msg bover_one"
<p class="shop_cell_msg over_one"> >{{ item.service_id == 0 ? item.application.ywly_name : item.service.sectors_name }}</p>
{{ item.service_id == 0 ? item.application.org : item.service.organization_name }} <p
</p> class="shop_cell_msg over_one"
>{{ item.service_id == 0 ? item.application.org_name : item.service.organization_name }}</p>
</div> </div>
<div> <div>
<img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt /> <img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
...@@ -46,12 +63,20 @@ ...@@ -46,12 +63,20 @@
</div> </div>
<div style="float:right"> <div style="float:right">
<div v-for="(item, index) in menu_arr" :key="index + 200" class="menu_box user_hover" @click="navAction(item.visit_url)" :style="{ color: now_menu == item.visit_url ? '#fff' : '' }"> <div
v-for="(item, index) in menu_arr"
:key="index + 200"
class="menu_box user_hover"
@click="navAction(item.visit_url)"
:style="{ color: now_menu == item.visit_url ? '#fff' : '' }"
>
{{ item.menu_name }} {{ item.menu_name }}
<div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;"> <div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;">
<div v-for="(v, indexs) in item.Child" :key="indexs + 700" @click.stop="gotoChildPage(v, item.visit_url)"> <div
{{ v.menu_name }} v-for="(v, indexs) in item.Child"
</div> :key="indexs + 700"
@click.stop="gotoChildPage(v, item.visit_url)"
>{{ v.menu_name }}</div>
</div> </div>
<div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div> <div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
<div class="bottom_show" v-if="now_menu == item.visit_url"></div> <div class="bottom_show" v-if="now_menu == item.visit_url"></div>
...@@ -140,7 +165,6 @@ export default { ...@@ -140,7 +165,6 @@ export default {
this.now_menu = parent; this.now_menu = parent;
window.sessionStorage.setItem("menuVisitUrl", parent); window.sessionStorage.setItem("menuVisitUrl", parent);
} }
}, },
getList() { getList() {
this.$api.serviceShop.getShoppingCart().then(response => { this.$api.serviceShop.getShoppingCart().then(response => {
......
<template> <template>
<div class="organization_card"> <div class="organization_card">
<a class="remove_btn" @click.prevent="deleteAction"> <a class="remove_btn" @click.prevent="deleteAction" v-if="!hideDelete">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</a> </a>
<div class="organization_card-icon"> <div class="organization_card-icon">
<el-avatar shape="square" :size="56" fit="cover" :src="data.picture_path" /> <el-avatar
shape="square"
:size="56"
fit="cover"
:src="data.picture_path"
/>
</div> </div>
<div class="organization_card-info"> <div class="organization_card-info">
<p <p
...@@ -52,9 +57,12 @@ export default { ...@@ -52,9 +57,12 @@ export default {
type: String, type: String,
default: 0, default: 0,
}, },
hideDelete: {
type: Boolean,
default: false,
},
}, },
created(){ created() {},
},
methods: { methods: {
deleteAction() { deleteAction() {
this.$emit("delete-action", this.data); this.$emit("delete-action", this.data);
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
:key="'organization_card_' + index" :key="'organization_card_' + index"
:data="item" :data="item"
@delete-action="deleteAction" @delete-action="deleteAction"
:hide-delete="hideDelete"
:details-url="detailsUrl" :details-url="detailsUrl"
:style="{ width: 'calc(100% / ' + rowNum + ' - 36px)' }" :style="{ width: 'calc(100% / ' + rowNum + ' - 36px)' }"
></organization-card> ></organization-card>
...@@ -27,6 +28,10 @@ export default { ...@@ -27,6 +28,10 @@ export default {
type: String, type: String,
default: 0, default: 0,
}, },
hideDelete: {
type: Boolean,
default: false,
},
}, },
data: () => ({ data: () => ({
rowNum: 5, rowNum: 5,
......
...@@ -40,7 +40,9 @@ export default { ...@@ -40,7 +40,9 @@ export default {
}), }),
computed: { computed: {
tableData() { tableData() {
return this.data.filter((item) => item.type === this.type); return this.data.filter(
(item) => item.type === this.type || item.type === 3
);
}, },
}, },
}; };
......
...@@ -53,48 +53,78 @@ ...@@ -53,48 +53,78 @@
<el-col :span="22"> <el-col :span="22">
<el-form-item prop="workplacedesc" class="form_item"> <el-form-item prop="workplacedesc" class="form_item">
<div class="form_item_title">描述信息:</div> <div class="form_item_title">描述信息:</div>
<el-input type="textarea" v-model="formNew.workplacedesc" placeholder="请输入工作区域描述信息"></el-input> <el-input
type="textarea"
v-model="formNew.workplacedesc"
placeholder="请输入工作区域描述信息"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="form_title">工作区域申请规格</div> <div class="form_title">工作区域申请规格</div>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right"> <el-form-item prop="cpu" class="form_item input_has_right">
<div class="form_item_title">CPU:</div> <div class="form_item_title">CPU:</div>
<el-select v-model="formNew.cpu" placeholder="请选择CPU使用量"> <el-select v-model="formNew.cpu" placeholder="请选择CPU使用量">
<el-option v-for="item in optionsCPU" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option
v-for="item in optionsCPU"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
<div class="input_right input_right_top"></div> <div class="input_right input_right_top"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right"> <el-form-item prop="memory" class="form_item input_has_right">
<div class="form_item_title">内存:</div> <div class="form_item_title">内存:</div>
<el-select v-model="formNew.memory" placeholder="请选择内存使用量"> <el-select v-model="formNew.memory" placeholder="请选择内存使用量">
<el-option v-for="item in optionsRAM" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option
v-for="item in optionsRAM"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
<div class="input_right input_right_top">GB</div> <div class="input_right input_right_top">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right"> <el-form-item prop="containerGroup" class="form_item input_has_right">
<div class="form_item_title">容器组:</div> <div class="form_item_title">容器组:</div>
<el-input-number v-model="formNew.containerGroup" controls-position="right" :min="0" :max="24" placeholder="取值范围[0,24]"></el-input-number> <el-input-number
v-model="formNew.containerGroup"
controls-position="right"
:min="0"
:max="24"
placeholder="取值范围[0,24]"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<div class="form_item_title">数据盘(可选):</div> <div class="form_item_title">数据盘(可选):</div>
<el-input-number v-model="formNew.dataDisk" controls-position="right" :min="0" placeholder="请选择数量"></el-input-number> <el-input-number
v-model="formNew.dataDisk"
controls-position="right"
:min="0"
placeholder="请选择数量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<div class="form_item_title">每块数据盘容量:</div> <div class="form_item_title">每块数据盘容量:</div>
<el-input-number v-model="formNew.perDataDisk" controls-position="right" :min="0" placeholder="请选择容量"></el-input-number> <el-input-number
v-model="formNew.perDataDisk"
controls-position="right"
:min="0"
placeholder="请选择容量"
></el-input-number>
<div class="input_right">GB</div> <div class="input_right">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -105,16 +135,28 @@ ...@@ -105,16 +135,28 @@
<div class="form_item_title">CPU:</div> <div class="form_item_title">CPU:</div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perCPUs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number v-model="formNew.perCPUs" controls-position="right" :min="0" :max="10" placeholder="请选择CPU最高使用量"></el-input-number> <el-input-number
v-model="formNew.perCPUs"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择CPU最高使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perCPU" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number v-model="formNew.perCPU" controls-position="right" :min="0" :max="10" placeholder="请选择CPU默认使用量"></el-input-number> <el-input-number
v-model="formNew.perCPU"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择CPU默认使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -122,16 +164,28 @@ ...@@ -122,16 +164,28 @@
<div class="form_item_title">内存:</div> <div class="form_item_title">内存:</div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perRAMs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number v-model="formNew.perRAMs" controls-position="right" :min="0" :max="10" placeholder="请选择内存最高使用量"></el-input-number> <el-input-number
v-model="formNew.perRAMs"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择内存最高使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perRAM" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number v-model="formNew.perRAM" controls-position="right" :min="0" :max="10" placeholder="请选择内存默认使用量"></el-input-number> <el-input-number
v-model="formNew.perRAM"
controls-position="right"
:min="0"
:max="10"
placeholder="请选择内存默认使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -139,11 +193,24 @@ ...@@ -139,11 +193,24 @@
<div class="form_title">其他信息</div> <div class="form_title">其他信息</div>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right_select"> <el-form-item prop="appDuration" class="form_item input_has_right_select">
<div class="form_item_title">申请时长:</div> <div class="form_item_title">申请时长:</div>
<el-input-number v-model="formNew.appDuration" controls-position="right" :min="0"></el-input-number> <el-input-number
<el-select v-model="formNew.durType" class="input_right_select" placeholder="请选择申请时长"> v-model="formNew.appDuration"
<el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> controls-position="right"
:min="0"
></el-input-number>
<el-select
v-model="formNew.durType"
class="input_right_select"
placeholder="请选择申请时长"
>
<el-option
v-for="item in durationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -151,7 +218,14 @@ ...@@ -151,7 +218,14 @@
<el-form-item class="form_item"> <el-form-item class="form_item">
<div class="form_item_title">申请文件:</div> <div class="form_item_title">申请文件:</div>
<info-list :list_arr="docTemplate" class="doc_template"></info-list> <info-list :list_arr="docTemplate" class="doc_template"></info-list>
<upload-file :multiple="false" :max="1" type="zip" :readOnly="false" :drag="true" @getNewList="getNewList"></upload-file> <upload-file
:multiple="false"
:max="1"
type="zip"
:readOnly="false"
:drag="true"
@getNewList="getNewList"
></upload-file>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -165,15 +239,20 @@ ...@@ -165,15 +239,20 @@
<div class="select_title">选择要进行调整的工作区域:</div> <div class="select_title">选择要进行调整的工作区域:</div>
<div class="form_item"> <div class="form_item">
<el-select v-model="workSpace" @change="getForm" placeholder="请选择"> <el-select v-model="workSpace" @change="getForm" placeholder="请选择">
<el-option v-for="(item, index) in workSpaceOptions" :key="index" :label="item.namespace" :value="index"></el-option> <el-option
v-for="(item, index) in workSpaceOptions"
:key="index"
:label="item.namespace"
:value="index"
></el-option>
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div v-if="formShow"> <div v-show="formShow">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form ref="formNew" :model="formOld"> <el-form ref="formOld" :model="formOld" :rules="ruleOld">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div class="form_title">工作区域规格调整</div> <div class="form_title">工作区域规格调整</div>
...@@ -181,55 +260,95 @@ ...@@ -181,55 +260,95 @@
<el-col :span="24"> <el-col :span="24">
<div class="now_spec">当前规格:</div> <div class="now_spec">当前规格:</div>
<div class="now_spec_cards"> <div class="now_spec_cards">
<div class="now_spec_card" v-for="(item, index) in specArr" :key="index + 'spec'"> <div
<img class="now_spec_card_img" :src="require('@/assets/imgs/' + item.src + '.png')" /> class="now_spec_card"
v-for="(item, index) in specArr"
:key="index + 'spec'"
>
<img
class="now_spec_card_img"
:src="require('@/assets/imgs/' + item.src + '.png')"
/>
<span class="now_spec_card_title">{{ item.title }}</span> <span class="now_spec_card_title">{{ item.title }}</span>
<span class="now_spec_card_val">{{ item.val + " " + (item.title == "CPU" ? "" : item.title == "内存" ? "GB" : "") }}</span> <span
class="now_spec_card_val"
>{{ item.val + " " + (item.title == "CPU" ? "" : item.title == "内存" ? "GB" : "") }}</span>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right"> <el-form-item prop="cpu" class="form_item input_has_right">
<div class="form_item_title">申请CPU调整为:</div> <div class="form_item_title">申请CPU调整为:</div>
<el-select v-model="formOld.cpu" placeholder="请选择CPU使用量"> <el-select v-model="formOld.cpu" placeholder="请选择CPU使用量">
<el-option v-for="item in optionsCPU" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option
v-for="item in optionsCPU"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
<div class="input_right input_right_top"></div> <div class="input_right input_right_top"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right"> <el-form-item prop="memory" class="form_item input_has_right">
<div class="form_item_title">申请内存调整为:</div> <div class="form_item_title">申请内存调整为:</div>
<el-select v-model="formOld.memory" placeholder="请选择内存使用量"> <el-select v-model="formOld.memory" placeholder="请选择内存使用量">
<el-option v-for="item in optionsRAM" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option
v-for="item in optionsRAM"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
<div class="input_right input_right_top">GB</div> <div class="input_right input_right_top">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right"> <el-form-item prop="containerGroup" class="form_item input_has_right">
<div class="form_item_title">申请容器组调整为:</div> <div class="form_item_title">申请容器组调整为:</div>
<el-input-number v-model="formOld.containerGroup" controls-position="right" :min="0" :max="24" placeholder="取值范围[0,24]"></el-input-number> <el-input-number
v-model="formOld.containerGroup"
controls-position="right"
:min="0"
:max="24"
placeholder="取值范围[0,24]"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="22" v-if="dataDiskList.length != 0"> <el-col :span="22" v-if="dataDiskList.length != 0">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<div class="form_item_title">调整数据盘:</div> <div class="form_item_title">调整数据盘:</div>
<table-um ref="apply_service_state_table" :headers="dataDiskHeaders" :stripe="true" :datas="dataDiskList" @primary-del="delItem"></table-um> <table-um
ref="apply_service_state_table"
:headers="dataDiskHeaders"
:stripe="true"
:datas="dataDiskList"
@primary-del="delItem"
height="300"
></table-um>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<div class="form_item_title">增加数据盘:</div> <div class="form_item_title">增加数据盘:</div>
<el-input-number v-model="formOld.dataDisk" controls-position="right" :min="0"></el-input-number> <el-input-number
v-model="formOld.dataDisk"
controls-position="right"
:min="0"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_right"> <el-form-item class="form_item input_has_right">
<div class="form_item_title">每块数据盘容量:</div> <div class="form_item_title">每块数据盘容量:</div>
<el-input-number v-model="formOld.perDataDisk" controls-position="right" :min="0"></el-input-number> <el-input-number
v-model="formOld.perDataDisk"
controls-position="right"
:min="0"
></el-input-number>
<div class="input_right">GB</div> <div class="input_right">GB</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -239,13 +358,24 @@ ...@@ -239,13 +358,24 @@
<el-col :span="24"> <el-col :span="24">
<div class="now_spec">当前规格:</div> <div class="now_spec">当前规格:</div>
<div class="now_spec_cards"> <div class="now_spec_cards">
<div class="now_rqz_card" v-for="(item, index) in rqzArr" :key="index + 'rqz'"> <div
<img class="now_rqz_card_img" :src="require('@/assets/imgs/' + item.src + '.png')" /> class="now_rqz_card"
v-for="(item, index) in rqzArr"
:key="index + 'rqz'"
>
<img
class="now_rqz_card_img"
:src="require('@/assets/imgs/' + item.src + '.png')"
/>
<span class="now_rqz_card_title">{{ item.title }}</span> <span class="now_rqz_card_title">{{ item.title }}</span>
<div class="now_rqz_card_val_div"> <div class="now_rqz_card_val_div">
<span class="now_rqz_card_val">最高&nbsp;{{ item.max }}&nbsp;{{ item.title == "CPU" ? "" : "GB" }}</span> <span
class="now_rqz_card_val"
>最高&nbsp;{{ item.max }}&nbsp;{{ item.title == "CPU" ? "" : "GB" }}</span>
<br /> <br />
<span class="now_rqz_card_val">默认&nbsp;{{ item.default }}&nbsp;{{ item.title == "CPU" ? "" : "GB" }}</span> <span
class="now_rqz_card_val"
>默认&nbsp;{{ item.default }}&nbsp;{{ item.title == "CPU" ? "" : "GB" }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -254,16 +384,28 @@ ...@@ -254,16 +384,28 @@
<div class="form_item_title">CPU:</div> <div class="form_item_title">CPU:</div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perCPUs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number v-model="formOld.perCPUs" controls-position="right" :min="0" :max="10" placeholder="请设置CPU最高使用量"></el-input-number> <el-input-number
v-model="formOld.perCPUs"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置CPU最高使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perCPU" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number v-model="formOld.perCPU" controls-position="right" :min="0" :max="10" placeholder="请设置CPU默认使用量"></el-input-number> <el-input-number
v-model="formOld.perCPU"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置CPU默认使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -271,16 +413,28 @@ ...@@ -271,16 +413,28 @@
<div class="form_item_title">内存:</div> <div class="form_item_title">内存:</div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perRAMs" class="form_item input_has_left_right">
<div class="input_left">最高</div> <div class="input_left">最高</div>
<el-input-number v-model="formOld.perRAMs" controls-position="right" :min="0" :max="10" placeholder="请设置内存最高使用量"></el-input-number> <el-input-number
v-model="formOld.perRAMs"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置内存最高使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item class="form_item input_has_left_right"> <el-form-item prop="perRAM" class="form_item input_has_left_right">
<div class="input_left">默认</div> <div class="input_left">默认</div>
<el-input-number v-model="formOld.perRAM" controls-position="right" :min="0" :max="10" placeholder="请设置内存默认使用量"></el-input-number> <el-input-number
v-model="formOld.perRAM"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置内存默认使用量"
></el-input-number>
<div class="input_right"></div> <div class="input_right"></div>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -290,7 +444,10 @@ ...@@ -290,7 +444,10 @@
<div class="now_spec">当前规格:</div> <div class="now_spec">当前规格:</div>
<div class="now_spec_card_time"> <div class="now_spec_card_time">
<div> <div>
<img class="now_spec_card_time_img" :src="require('@/assets/imgs/ic_shijian.png')" /> <img
class="now_spec_card_time_img"
:src="require('@/assets/imgs/ic_shijian.png')"
/>
<span class="now_spec_card_time_title">当前工作区域到期时间</span> <span class="now_spec_card_time_title">当前工作区域到期时间</span>
<span class="now_spec_card_time_val">2020-05-05 08:00:00</span> <span class="now_spec_card_time_val">2020-05-05 08:00:00</span>
</div> </div>
...@@ -298,11 +455,24 @@ ...@@ -298,11 +455,24 @@
</el-col> </el-col>
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<el-form-item class="form_item input_has_right_select"> <el-form-item prop="appDuration" class="form_item input_has_right_select">
<div class="form_item_title">申请续期:</div> <div class="form_item_title">申请续期:</div>
<el-input-number v-model="formOld.appDuration" controls-position="right" :min="0"></el-input-number> <el-input-number
<el-select v-model="formOld.durType" class="input_right_select" placeholder="请选择续期时长"> v-model="formOld.appDuration"
<el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> controls-position="right"
:min="0"
></el-input-number>
<el-select
v-model="formOld.durType"
class="input_right_select"
placeholder="请选择续期时长"
>
<el-option
v-for="item in durationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -310,7 +480,14 @@ ...@@ -310,7 +480,14 @@
<el-form-item class="form_item"> <el-form-item class="form_item">
<div class="form_item_title">申请文件:</div> <div class="form_item_title">申请文件:</div>
<info-list :list_arr="docTemplate" class="doc_template"></info-list> <info-list :list_arr="docTemplate" class="doc_template"></info-list>
<upload-file :multiple="false" :max="1" type="zip" :readOnly="false" :drag="true" @getNewList="getNewListOld"></upload-file> <upload-file
:multiple="false"
:max="1"
type="zip"
:readOnly="false"
:drag="true"
@getNewList="getNewListOld"
></upload-file>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -387,7 +564,9 @@ ...@@ -387,7 +564,9 @@
</div> </div>
<div class="dia_block_item_in"> <div class="dia_block_item_in">
<span class="dia_block_item_title">数据盘:</span> <span class="dia_block_item_title">数据盘:</span>
<span class="dia_block_item_val">{{ diaForm.dataDisk }}块,每块{{ diaForm.perDataDisk }}GB</span> <span
class="dia_block_item_val"
>{{ diaForm.dataDisk }}块,每块{{ diaForm.perDataDisk }}GB</span>
</div> </div>
</div> </div>
<span class="dia_item_all_title">单个容器组规格:</span> <span class="dia_item_all_title">单个容器组规格:</span>
...@@ -411,7 +590,9 @@ ...@@ -411,7 +590,9 @@
<div class="dia_block_item"> <div class="dia_block_item">
<div class="dia_block_item_in"> <div class="dia_block_item_in">
<span class="dia_block_item_title">申请时长</span> <span class="dia_block_item_title">申请时长</span>
<span class="dia_block_item_val">{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "" }}</span> <span
class="dia_block_item_val"
>{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "" }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -474,13 +655,17 @@ ...@@ -474,13 +655,17 @@
<span class="dia_block_item_title">容器组:</span> <span class="dia_block_item_title">容器组:</span>
<span class="dia_block_item_val">{{ diaForm.containerGroup }}</span> <span class="dia_block_item_val">{{ diaForm.containerGroup }}</span>
</div> </div>
<div class="dia_block_item_in"> <div class="dia_block_item_in" v-if="diaForm.dataDisk != 0">
<span class="dia_block_item_title">新增数据盘:</span> <span class="dia_block_item_title">新增数据盘:</span>
<span class="dia_block_item_val">{{ diaForm.dataDisk }}块,每块{{ diaForm.perDataDisk }}GB</span> <span
class="dia_block_item_val"
>{{ diaForm.dataDisk }}块,每块{{ diaForm.perDataDisk }}GB</span>
</div> </div>
<div class="dia_block_item_in"> <div class="dia_block_item_in" v-if="delDataDiskList.length != 0">
<span class="dia_block_item_title">删除数据盘:</span> <span class="dia_block_item_title">删除数据盘:</span>
<span class="dia_block_item_val">{{ dataDiskList.join(",") }}</span> <span
class="dia_block_item_val"
>{{ delDataDiskList.map(item => {return item.app_name}).join("") }}</span>
</div> </div>
</div> </div>
<span class="dia_item_all_title">单个容器组规格:</span> <span class="dia_item_all_title">单个容器组规格:</span>
...@@ -504,11 +689,18 @@ ...@@ -504,11 +689,18 @@
<div class="dia_block_item"> <div class="dia_block_item">
<div class="dia_block_item_in"> <div class="dia_block_item_in">
<span class="dia_block_item_title">是否续期:</span> <span class="dia_block_item_title">是否续期:</span>
<span class="dia_block_item_val">{{ diaForm.appDuration && diaForm.appDuration != 0 ? "": "" }}</span> <span
class="dia_block_item_val"
>{{ diaForm.appDuration && diaForm.appDuration != 0 ? "": "" }}</span>
</div> </div>
<div class="dia_block_item_in" v-if="diaForm.appDuration && diaForm.appDuration != 0"> <div
class="dia_block_item_in"
v-if="diaForm.appDuration && diaForm.appDuration != 0"
>
<span class="dia_block_item_title">续期时长:</span> <span class="dia_block_item_title">续期时长:</span>
<span class="dia_block_item_val">{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "" }}</span> <span
class="dia_block_item_val"
>{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "" }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -559,28 +751,59 @@ export default { ...@@ -559,28 +751,59 @@ export default {
perRAMs: undefined, perRAMs: undefined,
perRAM: undefined, perRAM: undefined,
appDuration: undefined, appDuration: undefined,
durType: "", durType: 1,
apply_file: "", apply_file: "",
apply_file_name: "" apply_file_name: ""
}, },
ruleNew: { ruleNew: {
namespace: [ namespace: [
{ required: true, message: "请输入联系电话", trigger: "blur" } { required: true, message: "请输入工作区域名称", trigger: "blur" }
], ],
workplace: [ 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: "", workSpace: "",
workSpaceOptions: [], workSpaceOptions: [],
optionsCPU: [{ value: "8", label: "8" }, { value: "16", label: "16" }], optionsCPU: [
{ value: "8", label: "8" },
{ value: "16", label: "16" }
],
optionsRAM: [ optionsRAM: [
{ value: "8", label: "8" }, { value: "8", label: "8" },
{ value: "16", label: "16" }, { value: "16", label: "16" },
{ value: "32", label: "32" } { value: "32", label: "32" }
], ],
formShow: true, formShow: false,
specArr: [ specArr: [
{ title: "CPU", val: "4", src: "ic_CPU" }, { title: "CPU", val: "4", src: "ic_CPU" },
{ title: "内存", val: "4", src: "ic_neicun" }, { title: "内存", val: "4", src: "ic_neicun" },
...@@ -599,9 +822,6 @@ export default { ...@@ -599,9 +822,6 @@ export default {
} }
], ],
formOld: { formOld: {
namespace: "",
workplace: "",
workplacedesc: "",
cpu: "", cpu: "",
memory: "", memory: "",
containerGroup: undefined, containerGroup: undefined,
...@@ -612,14 +832,11 @@ export default { ...@@ -612,14 +832,11 @@ export default {
perRAMs: undefined, perRAMs: undefined,
perRAM: undefined, perRAM: undefined,
appDuration: undefined, appDuration: undefined,
durType: "", durType: 1,
apply_file: "", apply_file: "",
apply_file_name: "" apply_file_name: ""
}, },
paramsOld: { paramsOld: {
namespace: "",
workplace: "",
workplacedesc: "",
cpu: "", cpu: "",
memory: "", memory: "",
containerGroup: undefined, containerGroup: undefined,
...@@ -630,22 +847,54 @@ export default { ...@@ -630,22 +847,54 @@ export default {
perRAMs: undefined, perRAMs: undefined,
perRAM: undefined, perRAM: undefined,
appDuration: undefined, appDuration: undefined,
durType: "", durType: 1,
apply_file: "", apply_file: "",
apply_file_name: "" 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, dialogVisible: false,
diaForm: {}, diaForm: {},
dataDiskHeaders: [ dataDiskHeaders: [
{ {
label: "数据盘容量", label: "数据盘容量",
prop: "capacity", prop: "disk_cap",
align: "center" align: "center"
}, },
{ {
label: "部署的应用", label: "部署的应用",
prop: "app", prop: "app_name",
align: "center" align: "center"
}, },
{ {
...@@ -660,20 +909,7 @@ export default { ...@@ -660,20 +909,7 @@ export default {
] ]
} }
], ],
dataDiskList: [ dataDiskList: [],
{
capacity: "www",
app: "wewaewa"
},
{
capacity: "www",
app: "wewaewa"
},
{
capacity: "www",
app: "wewaewa"
}
],
delDataDiskList: [] delDataDiskList: []
}), }),
mounted() { mounted() {
...@@ -702,12 +938,13 @@ export default { ...@@ -702,12 +938,13 @@ export default {
this.formOld.cpu = paramsOld.cpu; this.formOld.cpu = paramsOld.cpu;
this.formOld.memory = paramsOld.memory; this.formOld.memory = paramsOld.memory;
this.formOld.containerGroup = paramsOld.containers; this.formOld.containerGroup = paramsOld.containers;
this.formOld.dataDisk = paramsOld.dataDisk; this.formOld.dataDisk = "";
this.formOld.perDataDisk = paramsOld.perDataDisk; this.formOld.perDataDisk = "";
this.formOld.perCPUs = paramsOld.one_cpu_max; this.formOld.perCPUs = paramsOld.one_cpu_max;
this.formOld.perCPU = paramsOld.one_cpu_min; this.formOld.perCPU = paramsOld.one_cpu_min;
this.formOld.perRAMs = paramsOld.one_memory_max; this.formOld.perRAMs = paramsOld.one_memory_max;
this.formOld.perRAM = paramsOld.one_memory_min; this.formOld.perRAM = paramsOld.one_memory_min;
this.dataDiskList = paramsOld.disk_list;
this.formShow = true; this.formShow = true;
} else { } else {
this.formShow = false; this.formShow = false;
...@@ -716,13 +953,28 @@ export default { ...@@ -716,13 +953,28 @@ export default {
submitApp() { submitApp() {
let formParams = {}; let formParams = {};
if (this.activeName == 0) { 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) { } 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() { determineSubmit() {
if (this.activeName == 0) { if (this.activeName == 0) {
...@@ -795,11 +1047,9 @@ export default { ...@@ -795,11 +1047,9 @@ export default {
}); });
}, },
delItem(val) { delItem(val) {
this.delDataDiskList.push(val.app); let delIndex = this.dataDiskList.findIndex(v => v.id === val.id);
let delItem = this.dataDiskList.findIndex(v => v.app === val.app); this.dataDiskList.splice(delIndex, 1);
if (delItem) { this.delDataDiskList.push(val);
console.log(delItem);
}
} }
} }
}; };
...@@ -1041,7 +1291,7 @@ export default { ...@@ -1041,7 +1291,7 @@ export default {
color: #242c43; color: #242c43;
} }
.cloud_form .input_right_top { .cloud_form .input_right_top {
top: 41px; top: 40px;
} }
.cloud_form .el-select { .cloud_form .el-select {
width: 100%; width: 100%;
......
...@@ -35,10 +35,10 @@ ...@@ -35,10 +35,10 @@
v-if="cellIsService" v-if="cellIsService"
class="shopping_cell_type" class="shopping_cell_type"
>{{ cellItems.service.sectors_name }}</div> >{{ cellItems.service.sectors_name }}</div>
<div v-else class="shopping_cell_type">{{ cellItems.application.ywly }}</div> <div v-else class="shopping_cell_type">{{ cellItems.application.ywly_name }}</div>
<div <div
class="shopping_cell_creator" class="shopping_cell_creator"
>{{ cellIsService ? cellItems.service.organization_name:cellItems.application.org }}</div> >{{ cellIsService ? cellItems.service.organization_name:cellItems.application.org_name }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,13 +119,15 @@ ...@@ -119,13 +119,15 @@
</div> </div>
</el-col> </el-col>
<el-col :span="4" class="shopping_cell_num"> <el-col :span="4" class="shopping_cell_num">
<el-input-number <div v-if="cellIsService">
:disabled="readOnly" <el-input-number
v-model="cellItems.duration" :disabled="readOnly"
@change="changeNum" v-model="cellItems.duration"
size="mini" @change="changeNum"
:min="1" size="mini"
></el-input-number> :min="1"
></el-input-number>
</div>
</el-col> </el-col>
<el-col :span="4" class="shopping_cell_options"> <el-col :span="4" class="shopping_cell_options">
<el-checkbox <el-checkbox
......
...@@ -37,6 +37,7 @@ import "echarts/lib/component/legend"; // 图例 ...@@ -37,6 +37,7 @@ import "echarts/lib/component/legend"; // 图例
import "echarts/lib/component/title"; // 标题 import "echarts/lib/component/title"; // 标题
import 'echarts/lib/component/polar'; // 极坐标系 import 'echarts/lib/component/polar'; // 极坐标系
import 'echarts/lib/chart/scatter'; // 散点图 import 'echarts/lib/chart/scatter'; // 散点图
import 'echarts/lib/component/dataZoom'
import Sparkline from 'vue-sparklines' import Sparkline from 'vue-sparklines'
......
...@@ -132,6 +132,7 @@ export default { ...@@ -132,6 +132,7 @@ export default {
this.init("hotdata"); this.init("hotdata");
this.init("hgmap"); this.init("hgmap");
this.init("zhapp"); this.init("zhapp");
this.getGeneralOverview();
} }
}; };
</script> </script>
......
...@@ -177,26 +177,25 @@ ...@@ -177,26 +177,25 @@
</div> </div>
<div v-if="orderDetail.order_type == 3"> <div v-if="orderDetail.order_type == 3">
<div class="detail_s_title">工作区域描述:</div> <div class="detail_s_title">工作区域描述:</div>
<div class="detail_app_scence">{{ orderDetail.scene }}</div>
</div> </div>
<div v-if="orderDetail.order_type == 3" class="params_block"> <div v-if="orderDetail.order_type == 3" 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">
<div class="params_block_item_in"> <div class="params_block_item_in">
<span class="params_block_item_title">CPU:</span> <span class="params_block_item_title">CPU:</span>
<span class="params_block_item_val">2</span> <span class="params_block_item_val">{{ orderDetail.cpu }}</span>
</div> </div>
<div class="params_block_item_in"> <div class="params_block_item_in">
<span class="params_block_item_title">内存:</span> <span class="params_block_item_title">内存:</span>
<span class="params_block_item_val">4GB</span> <span class="params_block_item_val">{{ orderDetail.memory }}GB</span>
</div> </div>
<div class="params_block_item_in"> <div class="params_block_item_in">
<span class="params_block_item_title">容器组:</span> <span class="params_block_item_title">容器组:</span>
<span class="params_block_item_val">2</span> <span class="params_block_item_val">{{ orderDetail.memory }}</span>
</div> </div>
<div class="params_block_item_in"> <div class="params_block_item_in">
<span class="params_block_item_title">数据盘:</span> <span class="params_block_item_title">数据盘:</span>
<span class="params_block_item_val">2核</span> <span class="params_block_item_val">{{ orderDetail.disk_num}}块,每块{{orderDetail.disk_cap }}GB</span>
</div> </div>
</div> </div>
<span class="params_block_title margin_top_20">单个容器组规格:</span> <span class="params_block_title margin_top_20">单个容器组规格:</span>
...@@ -204,15 +203,15 @@ ...@@ -204,15 +203,15 @@
<div class="params_block_item_in"> <div class="params_block_item_in">
<span class="params_block_item_title">CPU:</span> <span class="params_block_item_title">CPU:</span>
<p class="params_block_item_val"> <p class="params_block_item_val">
<span class="val_has_2">最高&nbsp;2</span> <span class="val_has_2">最高&nbsp;{{ orderDetail.one_cpu_max }}</span>
<span class="val_has_2">默认&nbsp;2</span> <span class="val_has_2">默认&nbsp;{{ orderDetail.one_cpu_min }}</span>
</p> </p>
</div> </div>
<div class="params_block_item_in"> <div class="params_block_item_in">
<span class="params_block_item_title">CPU:</span> <span class="params_block_item_title">CPU:</span>
<p class="params_block_item_val"> <p class="params_block_item_val">
<span class="val_has_2">最高&nbsp;2</span> <span class="val_has_2">最高&nbsp;{{ orderDetail.one_memory_max }}</span>
<span class="val_has_2">默认&nbsp;2</span> <span class="val_has_2">默认&nbsp;{{ orderDetail.one_memory_min }}</span>
</p> </p>
</div> </div>
</div> </div>
...@@ -706,7 +705,7 @@ export default { ...@@ -706,7 +705,7 @@ export default {
line-height: 22px; line-height: 22px;
} }
.params_block_title { .params_block_title {
padding-left: 10px; padding-left: 5px;
color: #242c43; color: #242c43;
} }
.params_block_item { .params_block_item {
...@@ -719,12 +718,12 @@ export default { ...@@ -719,12 +718,12 @@ export default {
} }
.params_block_item_title { .params_block_item_title {
color: #8890a7; color: #8890a7;
width: 120px; width: 80px;
text-align: right; text-align: right;
} }
.params_block_item_val { .params_block_item_val {
color: #242c43; color: #242c43;
width: calc(100% - 130px); width: calc(100% - 82px);
} }
.val_has_2 { .val_has_2 {
margin-right: 20px; margin-right: 20px;
......
...@@ -384,6 +384,7 @@ export default { ...@@ -384,6 +384,7 @@ export default {
this.image_noMore = false; this.image_noMore = false;
}) })
.catch((error) => { .catch((error) => {
this.image_loading = false;
console.log(error); console.log(error);
}); });
}, },
......
<template>
<div>
<el-breadcrumb separator="/" class="bread_crumb1 bread_left">
<el-breadcrumb-item
:to="{ path: getUrl() }"
>{{ this.$route.params.level == 1 ? $t('lang.cloudResourcesService') : $t('lang.cloudResourcesManagement') }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t('lang.cloudResourcesDetail') }}</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="in_cloud_block">
<div class="cloud_block_head">
<div class="head_left">
<el-image class="head_left_img" :src="url" fit="fill"></el-image>
</div>
<div class="head_right">
<div class="head_right_name">aPaaS V3.0</div>
<div class="head_right_msg">
<p class="head_right_msg_p">
申请用户:
<span class="head_right_msg_item">张三</span>
联系电话:
<span class="head_right_msg_item">12345678901</span>
资源申请状态:
<span
class="head_right_msg_item"
:class="true ? 'apply_success' : ''"
>审批通过</span>
</p>
<p class="head_right_msg_p">
业务系统名:
<span class="head_right_msg_item">aPaaS V3.0 一期</span>
资源申请时间:
<span class="head_right_msg_item">2020-02-12 15:54:21</span>
</p>
</div>
</div>
</div>
<div 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>
<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>
<span
class="params_block_item_val"
>{{ orderDetail.disk_num}}块,每块{{orderDetail.disk_cap }}GB</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="ApplyDesc" slot="ApplyDesc">
{{ desc }}
</div>
</InfoList>
</div>
</BlockRadius>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
import InfoList from "@/components/infoList";
import helper from "@/services/helper.js";
export default {
components: {
BlockRadius,
InfoList
},
data() {
return {
url:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
orderDetail: {},
helper,
list_arr: [
{
title: "云资源详情:",
prop: "title"
},
{
title: "工作区域申请规格:",
type: "solt",
solt_name: "ApplyParams"
},
{
title: "资源申请文件:",
info: "2222222222222222222222.docs",
url: "",
type: "down"
},
{
title: "工作区域描述:",
type: "solt",
solt_name: "ApplyDesc",
}
],
desc: "工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:工作区域描述:"
};
},
watch: {},
computed: {},
created() {},
mounted() {
this.getUrl();
},
methods: {
getUrl() {
return this.$route.path.substring(0, 9);
},
download() {}
}
};
</script>
<style>
.in_cloud_block {
margin: 0 20px;
}
.cloud_block_head {
padding-top: 10px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.head_left {
width: 150px;
}
.head_left_img {
width: 144px;
height: 144px;
border-radius: 8px;
}
.head_right {
width: calc(100% - 160px);
}
.head_right_name {
font-size: 18px;
font-weight: bold;
color: #0d1847;
line-height: 30px;
margin-left: 10px;
margin-bottom: 18px;
}
.head_right_msg {
border-radius: 8px;
height: 96px;
background-color: #f6f7fb;
padding: 10px 20px;
}
.head_right_msg_p {
font-size: 14px;
line-height: 38px;
color: #8890a7;
}
.head_right_msg_item {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #242c43;
margin-right: 48px;
}
.apply_success {
color: #515fe7;
}
.cloud_params .service_title {
padding: 0 10px;
}
.cloud_params p {
padding: 0 15px;
}
.cloud_params p span {
display: inline;
line-height: 21px;
}
.params_block {
background-color: #f8f9fd;
border-radius: 8px;
margin: 10px 0;
padding: 20px;
font-size: 14px;
line-height: 22px;
}
.params_block_title {
padding-left: 5px;
color: #242c43;
}
.params_block_item {
padding: 10px 0 0 0;
}
.params_block_item_in {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.params_block_item_title {
color: #8890a7;
width: 80px;
text-align: right;
}
.params_block_item_val {
color: #242c43;
width: calc(100% - 82px);
}
.margin_top_20 {
display: block;
margin-top: 20px;
}
</style>
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
</el-breadcrumb> </el-breadcrumb>
<template slot="top"> <template slot="top">
<div class="cloud_info" v-if="cloud_zuzhi"> <div class="zuzhi_preview" v-if="cloud_zuzhi">
<div class="zuzhi_title"> <div class="cloud_title">
<span>{{ cloud_zuzhi.org_name }}</span> <span>{{ userInfo && userInfo.department_name }}</span>
<span> <span>
{{ "在用工作区域:" + (cloud_zuzhi.used_area || 0) + "" }} {{ "在用工作区域:" + cloud_zuzhi.count_zy + "" }}
</span> </span>
</div> </div>
<div class="dashboard_contaner"> <div class="dashboard_contaner">
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
:key="index" :key="index"
> >
<chart <chart
:options="getDashboardOptions(item)" :options="getDashboardOption(item)"
class="dashboard_chart" class="dashboard_chart"
/> />
<p class="dashboard_info"> <p class="dashboard_info">
...@@ -45,11 +45,58 @@ ...@@ -45,11 +45,58 @@
</div> </div>
</div> </div>
</div> </div>
<div class="admin_preview" v-if="cloud_admin">
<div class="admin_preview-left">
<div class="cloud_title">
<span>云资源概览</span>
</div>
<div class="dashboard_contaner">
<div
class="dashborad_list"
v-for="(item, index) in cloud_admin.dashboard_list"
: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>
</div>
<div class="admin_preview-right">
<chart
ref="adminHistogram"
:options="getHistogramOption()"
style="width:100%;height:100%;"
/>
</div>
</div>
</template>
<template slot="header-left">
<div class="cloud_title" v-if="cloud_admin">
<span>组织概览</span>
</div>
</template> </template>
<div slot="list" v-if="level == 2 && type == 2"> <!-- 超管的云资源管理展示的是组织列表 -->
<p style="text-align: center;margin-top: 20px;">组织列表</p> <template slot="list" v-if="level == 2 && type == 2">
</div> <organization-list
slot="list"
:data="listData"
details-url="/authority/organization/detail/"
:hide-delete="true"
></organization-list>
</template>
</apass-list> </apass-list>
<apass-dialog <apass-dialog
...@@ -58,6 +105,11 @@ ...@@ -58,6 +105,11 @@
:msg="dialogInfo.msg" :msg="dialogInfo.msg"
:submit="dialogInfo.submit" :submit="dialogInfo.submit"
></apass-dialog> ></apass-dialog>
<allot-info-confirm
ref="allotConfirm"
@allot-success="allotSuccess"
></allot-info-confirm>
</div> </div>
</template> </template>
...@@ -67,10 +119,18 @@ import { mapState } from "vuex"; ...@@ -67,10 +119,18 @@ import { mapState } from "vuex";
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";
import allotInfoConfirm from "@/components/allot-info-confirm";
import Dashboard from "@/components/e-charts/dashboard"; import Dashboard from "@/components/e-charts/dashboard";
import organizationList from "@/components/organization-list/organization-list";
export default { export default {
components: { apassList, apassDialog, Dashboard }, components: {
apassList,
apassDialog,
allotInfoConfirm,
Dashboard,
organizationList,
},
data: () => ({ data: () => ({
level: 0, // 用户等级 level: 0, // 用户等级
type: 0, // 访问的页面 type: 0, // 访问的页面
...@@ -95,6 +155,7 @@ export default { ...@@ -95,6 +155,7 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
fwglNav: "fwglNav", fwglNav: "fwglNav",
userInfo: "userInfo",
}), }),
pathName() { pathName() {
return this.fwglNav[this.level][this.type]; return this.fwglNav[this.level][this.type];
...@@ -368,78 +429,55 @@ export default { ...@@ -368,78 +429,55 @@ export default {
} }
// 普通用户 --- 云资源服务 // 普通用户 --- 云资源服务
else if (level == 0 && type == 2) { else if (level == 0 && type == 2) {
this.listUrl = ""; this.listUrl = "/apaas/service/v3/resource/user/apply/list";
this.paddingLeft = 0; this.paddingLeft = 0;
this.filterList2 = [ this.filterList2 = [
{ {
name: "初次申请状态", name: "初次申请状态",
prop: "state1", prop: "state1",
default: 0, default: "",
options: [ options: [
{ {
name: "全部", name: "全部",
value: 0, value: "",
}, },
{ {
name: "待审批", name: "待审批",
value: 1, value: 0,
}, },
{ {
name: "审批通过", name: "审批通过",
value: 2, value: 1,
}, },
{ {
name: "审批未通过", name: "审批未通过",
value: 3, value: -1,
}, },
], ],
}, },
{ {
name: "资源调整状态", name: "资源调整状态",
prop: "state2", prop: "state2",
default: 0, default: "",
options: [ options: [
{ {
name: "全部", name: "全部",
value: 0, value: "",
}, },
{ {
name: "待审批", name: "待审批",
value: 1,
},
{
name: "审批通过",
value: 2,
},
{
name: "审批未通过",
value: 3,
},
],
},
/* {
name: "申请状态",
prop: "state3",
default: 0,
options: [
{
name: "全部",
value: 0, value: 0,
}, },
{
name: "待审批",
value: 1,
},
{ {
name: "审批通过", name: "审批通过",
value: 2, value: 1,
}, },
{ {
name: "审批未通过", name: "审批未通过",
value: 3, value: -1,
}, },
], ],
}, */ },
]; ];
this.listHeader = [ this.listHeader = [
{ {
...@@ -454,23 +492,23 @@ export default { ...@@ -454,23 +492,23 @@ export default {
}, },
{ {
label: "工作区域", label: "工作区域",
prop: "name", prop: "name_space",
type: "button", type: "button",
callback: this.cloudDetail, callback: this.cloudDetail,
}, },
{ {
label: "CPU(核)", label: "CPU(核)",
prop: "name", prop: "cpu",
align: "center", align: "center",
}, },
{ {
label: "内存(GB)", label: "内存(GB)",
prop: "name", prop: "memory",
align: "center", align: "center",
}, },
{ {
label: "容器组(个)", label: "容器组(个)",
prop: "name", prop: "containers",
align: "center", align: "center",
}, },
{ {
...@@ -478,15 +516,18 @@ export default { ...@@ -478,15 +516,18 @@ export default {
type: "tooltip", type: "tooltip",
align: "center", align: "center",
getLength(item) { getLength(item) {
return item.sjp.length; let disks = (item.disk && item.disk.trim().split(" ")) || [];
return disks.length;
}, },
getText(item) { getText(item) {
return item.sjp[0]; let disks = (item.disk && item.disk.trim().split(" ")) || [];
return disks[0];
}, },
getContent(item) { getContent(item) {
let disks = (item.disk && item.disk.trim().split(" ")) || [];
let htmlStr = `<span>数据盘(块/GB)</span><br />`; let htmlStr = `<span>数据盘(块/GB)</span><br />`;
item.sjp.forEach((v) => { disks.forEach((v) => {
htmlStr += `<span>数据盘:${v}</span><br />`; htmlStr += `<span>数据盘:${v}</span><br />`;
}); });
...@@ -495,35 +536,26 @@ export default { ...@@ -495,35 +536,26 @@ export default {
}, },
{ {
label: "申请时间", label: "申请时间",
prop: "name", prop: "apply_time",
align: "center", align: "center",
}, },
{ {
label: "初次申请状态", label: "初次申请状态",
prop: "name",
align: "center", align: "center",
getText(item) {
return ["未通过", "待审批", "通过"][
(item.approve_state || 0) + 1
];
},
}, },
{ {
label: "资源调整结果", label: "资源调整结果",
prop: "name",
align: "center", align: "center",
}, getText(item) {
]; return ["未通过", "待审批", "通过"][
this.listData = [ (item.approve_update_state || 0) + 1
{ ];
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"],
}, },
]; ];
} }
...@@ -736,52 +768,52 @@ export default { ...@@ -736,52 +768,52 @@ export default {
} }
// 组织管理员 --- 云资源管理 // 组织管理员 --- 云资源管理
else if (level == 1 && type == 2) { else if (level == 1 && type == 2) {
this.listUrl = ""; this.listUrl = "/apaas/service/v3/resource/user/apply/list";
this.paddingLeft = 0; this.paddingLeft = 0;
this.filterList2 = [ this.filterList2 = [
{ {
name: "初次申请状态", name: "初次申请状态",
prop: "state1", prop: "state1",
default: 0, default: "",
options: [ options: [
{ {
name: "全部", name: "全部",
value: 0, value: "",
}, },
{ {
name: "待审批", name: "待审批",
value: 1, value: 0,
}, },
{ {
name: "审批通过", name: "审批通过",
value: 2, value: 1,
}, },
{ {
name: "审批未通过", name: "审批未通过",
value: 3, value: -1,
}, },
], ],
}, },
{ {
name: "资源调整状态", name: "资源调整状态",
prop: "state2", prop: "state2",
default: 0, default: "",
options: [ options: [
{ {
name: "全部", name: "全部",
value: 0, value: "",
}, },
{ {
name: "待审批", name: "待审批",
value: 1, value: 0,
}, },
{ {
name: "审批通过", name: "审批通过",
value: 2, value: 1,
}, },
{ {
name: "审批未通过", name: "审批未通过",
value: 3, value: -1,
}, },
], ],
}, },
...@@ -799,53 +831,79 @@ export default { ...@@ -799,53 +831,79 @@ export default {
}, },
{ {
label: "工作区域名称", label: "工作区域名称",
prop: "name", prop: "name_space",
type: "button", type: "button",
callback: this.cloudDetail, callback: this.cloudDetail,
}, },
{ {
label: "CPU(核)", label: "CPU(核)",
prop: "name", prop: "cpu",
align: "center", align: "center",
}, },
{ {
label: "内存(GB)", label: "内存(GB)",
prop: "name", prop: "memory",
align: "center", align: "center",
}, },
{ {
label: "容器组(个)", label: "容器组(个)",
prop: "name", prop: "containers",
align: "center", align: "center",
}, },
{ {
label: "数据盘(块/GB)", label: "数据盘(块/GB)",
prop: "name", type: "tooltip",
align: "center", 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 = `<span>数据盘(块/GB)</span><br />`;
disks.forEach((v) => {
htmlStr += `<span>数据盘:${v}</span><br />`;
});
return htmlStr;
},
}, },
{ {
label: "申请用户", label: "申请用户",
prop: "name", prop: "user_name",
align: "center", align: "center",
}, },
{ {
label: "业务系统名", label: "业务系统名",
prop: "name", prop: "system_name",
align: "center", align: "center",
}, },
{ {
label: "初次申请状态", label: "初次申请状态",
prop: "name",
align: "center", align: "center",
getText(item) {
return ["未通过", "待审批", "通过"][
(item.approve_state || 0) + 1
];
},
}, },
{ {
label: "资源调整状态", label: "资源调整结果",
prop: "name",
align: "center", align: "center",
getText(item) {
return ["未通过", "待审批", "通过"][
(item.approve_update_state || 0) + 1
];
},
}, },
{ {
label: "用户申请时间", label: "用户申请时间",
prop: "name", prop: "apply_time",
align: "center", align: "center",
}, },
{ {
...@@ -855,68 +913,17 @@ export default { ...@@ -855,68 +913,17 @@ export default {
width: 80, width: 80,
actionList: [ actionList: [
{ {
label: "分配",
getLabel(item) { getLabel(item) {
return item.allot == 0 ? "分配" : "分配"; return item.use_uid ? "已分配" : "分配";
}, },
callback: this.cloudAllot, callback: this.cloudAllot,
disabledRule(item) { 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 { ...@@ -1136,35 +1143,7 @@ export default {
} }
// 超级管理员 --- 云资源管理 // 超级管理员 --- 云资源管理
else if (level == 2 && type == 2) { else if (level == 2 && type == 2) {
this.cloud_admin = { this.listUrl = "/apaas/service/v3/resource/user/apply/list";
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: {},
};
} }
// Error // Error
...@@ -1173,46 +1152,148 @@ export default { ...@@ -1173,46 +1152,148 @@ export default {
} }
}, },
init(filter) { init(filter) {
console.log(filter); // console.log(filter);
if (!this.listUrl) { if (!this.listUrl) {
return; return;
} }
let params = {};
this.tempFliter = filter; 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 this.$http
.get(this.listUrl, { .get(this.listUrl, { params })
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,
},
})
.then(({ data }) => { .then(({ data }) => {
// console.log(data.data); // console.log(data);
this.listTotal = data.data.total;
this.listData = data.data.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) => { .catch((error) => {
console.log(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() { showDialog() {
this.$refs.dialog.show(); this.$refs.dialog.show();
...@@ -1406,10 +1487,13 @@ export default { ...@@ -1406,10 +1487,13 @@ export default {
console.log("cloudDetail - " + item.name); console.log("cloudDetail - " + item.name);
}, },
cloudAllot(item) { cloudAllot(item) {
console.log("cloudAllot - " + item.name); this.$refs.allotConfirm.getDetail(item.apply_id);
}, },
getDashboardOptions(item) { allotSuccess() {
let percent = Math.round((item.value / item.total) * 100); this.init(this.tempFliter);
},
getDashboardOption(item) {
let percent = Math.round((item.value / item.total) * 100) || 0;
let colors = ["#515fe7", "#e7ecfd"]; let colors = ["#515fe7", "#e7ecfd"];
if (percent >= 80) { if (percent >= 80) {
...@@ -1564,6 +1648,335 @@ export default { ...@@ -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() { created() {
this.level = parseInt(this.$route.params.level); this.level = parseInt(this.$route.params.level);
...@@ -1587,6 +2000,12 @@ export default { ...@@ -1587,6 +2000,12 @@ export default {
} }
}); });
}, },
mounted() {
window.addEventListener("resize", this.resizeColumn);
},
destroyed() {
window.removeEventListener("resize", this.resizeColumn);
},
}; };
</script> </script>
...@@ -1594,35 +2013,36 @@ export default { ...@@ -1594,35 +2013,36 @@ export default {
.service_management_list { .service_management_list {
height: 100%; height: 100%;
} }
.zuzhi_title { .cloud_title {
margin-top: 15px; margin-top: 15px;
} }
.zuzhi_title > span, .cloud_title > span,
.zuzhi_title > span::before { .cloud_title > span::before {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.zuzhi_title > span:nth-child(1)::before { .cloud_title > span:nth-child(1)::before {
content: ""; content: "";
width: 4px; width: 4px;
height: 16px; height: 16px;
border-radius: 2px; border-radius: 2px;
background-color: #515fe7; background-color: #515fe7;
margin-right: 10px; margin-right: 10px;
margin-bottom: 2px;
} }
.zuzhi_title > span:nth-child(1) { .cloud_title > span:nth-child(1) {
font-size: 16px; font-size: 16px;
color: #242c43; color: #242c43;
line-height: 30px; line-height: 30px;
} }
.zuzhi_title > span:nth-child(2)::before { .cloud_title > span:nth-child(2)::before {
content: ""; content: "";
width: 2px; width: 2px;
height: 12px; height: 12px;
background-color: #b4c0f5; background-color: #b4c0f5;
margin: 0 10px; margin: 0 10px;
} }
.zuzhi_title > span:nth-child(2) { .cloud_title > span:nth-child(2) {
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
color: #58617a; color: #58617a;
...@@ -1658,4 +2078,17 @@ export default { ...@@ -1658,4 +2078,17 @@ export default {
.dashboard_info > span:nth-of-type(2) { .dashboard_info > span:nth-of-type(2) {
color: #0d1847; 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;
}
</style> </style>
...@@ -68,6 +68,11 @@ export default new Router({ ...@@ -68,6 +68,11 @@ export default new Router({
component: () => component: () =>
import("@/pages/workbench/fwgl/approval_service_detail"), import("@/pages/workbench/fwgl/approval_service_detail"),
}, // 审批的服务 - 详情 }, // 审批的服务 - 详情
{
path: "/fwgl/:level/:type/cloud_detail/:id",
name: "servicedetail",
component: () => import("@/pages/workbench/fwgl/cloud-detail"),
}, // 云资源 - 详情
], ],
}, // 工作台 - 服务管理模块 }, // 工作台 - 服务管理模块
{ {
......
...@@ -6074,6 +6074,11 @@ resize-detector@^0.1.10: ...@@ -6074,6 +6074,11 @@ resize-detector@^0.1.10:
resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c" resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c"
integrity sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw== 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: resize-observer-polyfill@^1.5.0:
version "1.5.1" version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" 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: ...@@ -7207,6 +7212,13 @@ vue-router@^3.0.2:
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
integrity sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA== 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: vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.2" version "4.1.2"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" 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: ...@@ -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" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue@^2.6.10: vue@^2.2.1, vue@^2.6.10:
version "2.6.11" version "2.6.11"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ== integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
......
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