Skip to content

S
setup-project-manager-ui
Commit 24299eba authored by ww-xxy's avatar ww-xxy
Browse files
Options

优化一键部署

parent 17defc77
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 153 deletions
admin/src/assets/utils/ajax.js
View file @ 24299eba
......@@ -14,8 +14,8 @@ function startLoading () {
loading = Vue.prototype.$loading({
lock: true,
customClass: 'createLoading', // 局部class名称
text: '服务加载中...',
background: 'rgba(0,0,0,0.5)',
text: '服务加载中，耐心等待...',
background: 'rgba(255,255,255,0.5)',
target: document.querySelector('.loading-area') // 设置加载动画区域
})
}
......
admin/src/views/Step.vue
View file @ 24299eba
<template>
<div class="main">
<div class="bg">
<div class="steps">
<div :class="index==active?'step active':'step'"
v-for="(item,index) in tabList" :key="item">{{item}}</div>
</div>
<!-- 第一步 -->
<div v-if="active==0">
<div class="label">
上传
<div class="main">
<div class="bg">
<div class="steps">
<div :class="index == active ? 'step active' : 'step'" v-for="(item, index) in tabList" :key="item">{{
item }}
</div>
</div>
<div class="line"></div>
<div class="upload">
<el-upload
ref="nowupload"
:limit="1"
accept=".zip,.tar.gz"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
:file-list="fileList"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
<!-- 第一步 -->
<div v-show="active == 0">
<div class="label">
上传
</div>
<div class="el-upload_tip" style="color: red" slot="tip">
提示：仅允许导入“zip”或“.tar.gz”格式压缩文件！
<div class="line"></div>
<div class="upload">
<el-upload ref="nowupload" :limit="1" accept=".zip,.tar.gz" :headers="upload.headers"
:action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :auto-upload="false" :file-list="fileList" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload_tip" style="color: red" slot="tip">
提示：仅允许导入“zip”或“.tar.gz”格式压缩文件！
</div>
</el-upload>
</div>
</el-upload>
</div>
<div class="line"></div>
<el-button type="primary" @click="submitFileForm" :loading="loading">下一步</el-button>
</div>
<!-- 第二步 -->
<div v-if="active==1">
<div class="label">创建站点</div>
<div class="line"></div>
<div class="elinput">
<el-input placeholder="请输入内容" v-model="siteName">
<template slot="prepend">站点名称</template>
</el-input>
<div class="line"></div>
<el-button type="primary" @click="submitFileForm" :loading="loading">下一步</el-button>
</div>
<div style="margin:20px 0;">
<span style="font-size: 14px">
<b>当前选择区域:</b>
(<el-link
style="margin-left: 10px;margin-bottom: 5px"
type="primary"
class="addclass"
:underline="false">
{{ areaName }}
</el-link>
区域编码：{{ areaCode }} )
</span>
</div>
<div class="tree">
<el-tree
size="mini"
ref="areaTree"
:data="areaData"
id="el-tree"
node-key="id"
indent="4"
:props="treeProps"
:load="loadNode"
lazy
highlight-current
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
>
</el-tree>
</div>
<div class="line"></div>
<el-button type="primary" @click="active=0">上一步</el-button>
<el-button type="primary" @click="updateSiteConform" :loading="loading">下一步</el-button>
</div>
<!-- 第三步 -->
<div v-if="active==2">
<div class="label">完成</div>
<div class="line"></div>
<div class="wancheng">
<div class="cgtext">
欢迎您，模块文件安装成功！站点已创建成功！
<!-- 第二步 -->
<div v-show="active == 1">
<div class="label">创建站点</div>
<div class="line"></div>
<div class="elinput">
<el-input placeholder="请输入内容" v-model="siteName">
<template slot="prepend">站点名称</template>
</el-input>
</div>
<div class="cgtext">
请点击下面的按钮进入选中网页进行操作！
<div style="margin:20px 0;">
<span style="font-size: 14px">
<b>当前选择区域:</b>
(<el-link style="margin-left: 10px;margin-bottom: 5px" type="primary" class="addclass"
:underline="false">
{{ areaName }}
</el-link>
区域编码：{{ areaCode }} )
</span>
</div>
<div class="tree">
<el-tree size="mini" ref="areaTree" :data="areaData" id="el-tree" node-key="id" indent="4"
:props="treeProps" :load="loadNode" lazy highlight-current :expand-on-click-node="false"
:render-content="renderContent" @node-click="handleNodeClick">
</el-tree>
</div>
<div class="line"></div>
<el-button type="primary" @click="active = 0">上一步</el-button>
<el-button type="primary" @click="updateSiteConform" :loading="loading">下一步</el-button>
</div>
<!-- 第三步 -->
<div v-show="active == 2">
<div class="label">完成</div>
<div class="line"></div>
<div class="wancheng">
<div class="cgtext">
欢迎您，模块文件安装成功！站点已创建成功！
</div>
<div class="cgtext">
请点击下面的按钮进入选中网页进行操作！
</div>
</div>
<div class="line"></div>
<el-button type="primary" @click="gotoMh">门户网站</el-button>
<el-button type="primary" @click="gotoSet">项目部署管理</el-button>
</div>
<div class="line"></div>
<el-button type="primary" @click="gotoMh">门户网站</el-button>
<el-button type="primary" @click="gotoSet">项目部署管理</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -108,12 +84,12 @@ import tree from "@/assets/mixins/tree";
export default {
mixins: [tree],
data() {
return{
// 用户导入参数
upload: {
return {
// 用户导入参数
upload: {
// 请求头
headers:{
Authorization:''
headers: {
Authorization: ''
},
// 是否显示弹出层（设备导入）
open: false,
......@@ -123,35 +99,70 @@ export default {
isUploading: false,
// 上传的地址
url: "/m/setup/project/importProjectData",
},
areaName: "",
areaCode: "",
siteName:"",
active:0,
tabList:[
},
areaName: "",
areaCode: "",
siteName: "",
active: 0,
tabList: [
"1、项目文件包导入",
"2、创建站点",
"3、完成"
],
loading:false,
fileList:[]
],
loading: false,
fileList: [],
}
},
methods:{
gotoMh(){
created() {
this.objInstall()
},
methods: {
objInstall() {
//检测是否初始安装
this.$get("/setup/project/check")
.then((res) => {
if (res.code == 1) {
let reBool = res.data.resource //是否上传资源包
let projectBool = res.data.project //是否部署完成
let siteCode = res.data.siteCode //是否选择站点
if (reBool) {
if (projectBool) {
console.log("项目部署成功！")
if (!siteCode || siteCode === '' || siteCode === 'undefined') {
//选择站点
this.active = 1
} else {
//全部完成进入后台系统
// this.$router.push("/setup/project/list")
}
} else {
//有资源未部署重新上传
this.active = 0
}
} else {
//资源上传
this.active = 0
}
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
gotoMh() {
window.location.href = process.env.VUE_APP_PORTAL_URL
},
gotoSet(){
gotoSet() {
this.$router.push("/setup/project/list")
},
// 以下第二部分
updateSiteConform() {
if(this.areaCode===''||this.areaCode==='undefined'){
if (this.areaCode === '' || this.areaCode === 'undefined') {
this.$message.error("请选择需要创建站点的区域！");
return;
}
if(this.siteName===''||this.siteName==='undefined'){
if (this.siteName === '' || this.siteName === 'undefined') {
this.$message.error("请选择需要创建站点的名称！");
return;
}
......@@ -159,17 +170,17 @@ export default {
this.$post("/setup/project/site/updateSite", {
areaCode: this.areaCode,
siteName: this.siteName,
},{isLoading:true})
.then((res) => {
this.loading = false;
if (res.code == 1) {
this.active = 2
}
})
.catch((error) => {
this.loading = false;
this.$message.error(error.message);
});
}, { isLoading: true })
.then((res) => {
this.loading = false;
if (res.code == 1) {
this.active = 2
}
})
.catch((error) => {
this.loading = false;
this.$message.error(error.message);
});
},
async loadNode(node, resolve) {
if (node.areaLevel === 0) {
......@@ -183,17 +194,16 @@ export default {
},
handleNodeClick(node) {
this.currentNode = node;
this.areaCode=node.areaCode
this.areaName=node.label
this.areaCode = node.areaCode
this.areaName = node.label
},
// 以下第一部分
/** 提交上传文件 */
submitFileForm() {
console.log(111,this.fileList,this.$refs.nowupload.uploadFiles);
if(this.$refs.nowupload.uploadFiles.length){
if (this.$refs.nowupload.uploadFiles.length) {
this.loading = true
this.$refs.upload.submit();
}else{
this.$refs.nowupload.submit();
} else {
this.$message.error("请上传文件！");
}
},
......@@ -203,13 +213,24 @@ export default {
},
/** 文件上传成功处理 */
handleFileSuccess(response, file, fileList) {
this.loading = false
console.log(response);
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
if(response.code==1){
this.active = 1
}else{
this.$refs.nowupload.clearFiles();
if (response.code == 1) {
// 资源包上传完成后，进行部署
this.$post("/setup/project/projectDataInit", {}, { isLoading: true })
.then((res) => {
if (res.code == 1) {
// 部署成功选择站点
this.active = 1
this.loading = false
}
})
.catch((error) => {
this.$message.error(error.message);
});
} else {
this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
}
},
......@@ -218,57 +239,68 @@ export default {
</script>
<style lang="less" scoped>
.active{
.active {
color: rgb(232, 245, 24);
}
// 第三部分
.wancheng{
.wancheng {
margin-bottom: 350px;
.cgtext{
.cgtext {
line-height: 30px;
}
}
// 第二部分
.tree{
.tree {
width: 80%;
height: 300px;
overflow-y: auto;
background: #ffffff;
}
.elinput{
.elinput {
width: 70%;
}
// 第一部分
/deep/ .el-upload__text{
/deep/ .el-upload__text {
font-size: 20px !important;
}
/deep/ .el-icon-upload{
font-size: 97px !important;
/deep/ .el-icon-upload {
font-size: 97px !important;
margin: 80px 0 40px !important;
}
/deep/.el-upload-dragger{
/deep/.el-upload-dragger {
width: 500px !important;
height: 280px !important;
}
.upload{
.upload {
// width: 365px;
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0 80px;
}
.line{
.line {
background: #00b2f5;
width: 100%;
height: 1px;
margin: 20px 0;
}
.label{
color:#333333;
.label {
color: #333333;
font-weight: 600;
font-size: 14px;
}
.steps{
.steps {
display: flex;
align-items: center;
justify-content: space-around;
......@@ -279,15 +311,17 @@ export default {
height: 50px;
margin-bottom: 30px;
}
.bg{
.bg {
border-radius: 8px;
background: rgba(255, 255, 255,.95);
background: rgba(255, 255, 255, .95);
box-sizing: border-box;
padding: 20px 30px;
width: 100%;
height: 100%;
}
.main{
.main {
height: 100%;
background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
padding: 32px 40px;
......
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