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 () { ...@@ -14,8 +14,8 @@ function startLoading () {
loading = Vue.prototype.$loading({ loading = Vue.prototype.$loading({
lock: true, lock: true,
customClass: 'createLoading', // 局部class名称 customClass: 'createLoading', // 局部class名称
text: '服务加载中...', text: '服务加载中，耐心等待...',
background: 'rgba(0,0,0,0.5)', background: 'rgba(255,255,255,0.5)',
target: document.querySelector('.loading-area') // 设置加载动画区域 target: document.querySelector('.loading-area') // 设置加载动画区域
}) })
} }
......
admin/src/views/Step.vue
View file @ 24299eba
<template> <template>
<div class="main"> <div class="main">
<div class="bg"> <div class="bg">
<div class="steps"> <div class="steps">
<div :class="index==active?'step active':'step'" <div :class="index == active ? 'step active' : 'step'" v-for="(item, index) in tabList" :key="item">{{
v-for="(item,index) in tabList" :key="item">{{item}}</div> item }}
</div> </div>
<!-- 第一步 -->
<div v-if="active==0">
<div class="label">
上传
</div> </div>
<div class="line"></div> <!-- 第一步 -->
<div class="upload"> <div v-show="active == 0">
<el-upload <div class="label">
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>
<div class="el-upload_tip" style="color: red" slot="tip"> <div class="line"></div>
提示：仅允许导入“zip”或“.tar.gz”格式压缩文件！ <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> </div>
</el-upload> <div class="line"></div>
</div> <el-button type="primary" @click="submitFileForm" :loading="loading">下一步</el-button>
<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> </div>
<div style="margin:20px 0;"> <!-- 第二步 -->
<span style="font-size: 14px"> <div v-show="active == 1">
<b>当前选择区域:</b> <div class="label">创建站点</div>
(<el-link <div class="line"></div>
style="margin-left: 10px;margin-bottom: 5px" <div class="elinput">
type="primary" <el-input placeholder="请输入内容" v-model="siteName">
class="addclass" <template slot="prepend">站点名称</template>
:underline="false"> </el-input>
{{ 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> </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>
<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>
<div class="line"></div>
<el-button type="primary" @click="gotoMh">门户网站</el-button>
<el-button type="primary" @click="gotoSet">项目部署管理</el-button>
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -108,12 +84,12 @@ import tree from "@/assets/mixins/tree"; ...@@ -108,12 +84,12 @@ import tree from "@/assets/mixins/tree";
export default { export default {
mixins: [tree], mixins: [tree],
data() { data() {
return{ return {
// 用户导入参数 // 用户导入参数
upload: { upload: {
// 请求头 // 请求头
headers:{ headers: {
Authorization:'' Authorization: ''
}, },
// 是否显示弹出层（设备导入） // 是否显示弹出层（设备导入）
open: false, open: false,
...@@ -123,35 +99,70 @@ export default { ...@@ -123,35 +99,70 @@ export default {
isUploading: false, isUploading: false,
// 上传的地址 // 上传的地址
url: "/m/setup/project/importProjectData", url: "/m/setup/project/importProjectData",
}, },
areaName: "", areaName: "",
areaCode: "", areaCode: "",
siteName:"", siteName: "",
active:0, active: 0,
tabList:[ tabList: [
"1、项目文件包导入", "1、项目文件包导入",
"2、创建站点", "2、创建站点",
"3、完成" "3、完成"
], ],
loading:false, loading: false,
fileList:[] fileList: [],
} }
}, },
methods:{ created() {
gotoMh(){ 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 window.location.href = process.env.VUE_APP_PORTAL_URL
}, },
gotoSet(){ gotoSet() {
this.$router.push("/setup/project/list") this.$router.push("/setup/project/list")
}, },
// 以下第二部分 // 以下第二部分
updateSiteConform() { updateSiteConform() {
if(this.areaCode===''||this.areaCode==='undefined'){ if (this.areaCode === '' || this.areaCode === 'undefined') {
this.$message.error("请选择需要创建站点的区域！"); this.$message.error("请选择需要创建站点的区域！");
return; return;
} }
if(this.siteName===''||this.siteName==='undefined'){ if (this.siteName === '' || this.siteName === 'undefined') {
this.$message.error("请选择需要创建站点的名称！"); this.$message.error("请选择需要创建站点的名称！");
return; return;
} }
...@@ -159,17 +170,17 @@ export default { ...@@ -159,17 +170,17 @@ export default {
this.$post("/setup/project/site/updateSite", { this.$post("/setup/project/site/updateSite", {
areaCode: this.areaCode, areaCode: this.areaCode,
siteName: this.siteName, siteName: this.siteName,
},{isLoading:true}) }, { isLoading: true })
.then((res) => { .then((res) => {
this.loading = false; this.loading = false;
if (res.code == 1) { if (res.code == 1) {
this.active = 2 this.active = 2
} }
}) })
.catch((error) => { .catch((error) => {
this.loading = false; this.loading = false;
this.$message.error(error.message); this.$message.error(error.message);
}); });
}, },
async loadNode(node, resolve) { async loadNode(node, resolve) {
if (node.areaLevel === 0) { if (node.areaLevel === 0) {
...@@ -183,17 +194,16 @@ export default { ...@@ -183,17 +194,16 @@ export default {
}, },
handleNodeClick(node) { handleNodeClick(node) {
this.currentNode = node; this.currentNode = node;
this.areaCode=node.areaCode this.areaCode = node.areaCode
this.areaName=node.label this.areaName = node.label
}, },
// 以下第一部分 // 以下第一部分
/** 提交上传文件 */ /** 提交上传文件 */
submitFileForm() { 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.loading = true
this.$refs.upload.submit(); this.$refs.nowupload.submit();
}else{ } else {
this.$message.error("请上传文件！"); this.$message.error("请上传文件！");
} }
}, },
...@@ -203,13 +213,24 @@ export default { ...@@ -203,13 +213,24 @@ export default {
}, },
/** 文件上传成功处理 */ /** 文件上传成功处理 */
handleFileSuccess(response, file, fileList) { handleFileSuccess(response, file, fileList) {
this.loading = false console.log(response);
this.upload.open = false; this.upload.open = false;
this.upload.isUploading = false; this.upload.isUploading = false;
this.$refs.upload.clearFiles(); this.$refs.nowupload.clearFiles();
if(response.code==1){ if (response.code == 1) {
this.active = 1 // 资源包上传完成后，进行部署
}else{ 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 }); this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
} }
}, },
...@@ -218,57 +239,68 @@ export default { ...@@ -218,57 +239,68 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.active{ .active {
color: rgb(232, 245, 24); color: rgb(232, 245, 24);
} }
// 第三部分 // 第三部分
.wancheng{ .wancheng {
margin-bottom: 350px; margin-bottom: 350px;
.cgtext{
.cgtext {
line-height: 30px; line-height: 30px;
} }
} }
// 第二部分 // 第二部分
.tree{ .tree {
width: 80%; width: 80%;
height: 300px; height: 300px;
overflow-y: auto; overflow-y: auto;
background: #ffffff; background: #ffffff;
} }
.elinput{
.elinput {
width: 70%; width: 70%;
} }
// 第一部分 // 第一部分
/deep/ .el-upload__text{ /deep/ .el-upload__text {
font-size: 20px !important; 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; margin: 80px 0 40px !important;
} }
/deep/.el-upload-dragger{
/deep/.el-upload-dragger {
width: 500px !important; width: 500px !important;
height: 280px !important; height: 280px !important;
} }
.upload{
.upload {
// width: 365px; // width: 365px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 60px 0 80px; margin: 60px 0 80px;
} }
.line{
.line {
background: #00b2f5; background: #00b2f5;
width: 100%; width: 100%;
height: 1px; height: 1px;
margin: 20px 0; margin: 20px 0;
} }
.label{
color:#333333; .label {
color: #333333;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
} }
.steps{
.steps {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
...@@ -279,15 +311,17 @@ export default { ...@@ -279,15 +311,17 @@ export default {
height: 50px; height: 50px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.bg{
.bg {
border-radius: 8px; border-radius: 8px;
background: rgba(255, 255, 255,.95); background: rgba(255, 255, 255, .95);
box-sizing: border-box; box-sizing: border-box;
padding: 20px 30px; padding: 20px 30px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.main{
.main {
height: 100%; height: 100%;
background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%); background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
padding: 32px 40px; 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