朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 354e01ba126e590e9df8c3f92ef218bbd7e8cfa2 1 个父辈 b7a347f3

新添加ES信息界面，基本完善

内嵌 并排对比
正在显示 1 个修改的文件 包含 176 行增加 和 54 行删除
... ... @@ -97,23 +97,24 @@
<!-- 添加，对话框 -->
<div>
<el-dialog title="添加ES节点"
:visible.sync="es_dialog.addDialog" element-loading-text="拼命添加配置中"
v-loading="es_loading.addLoading" element-loading-text="正在拼命加载，请稍等"
:visible.sync="es_dialog.addDialog"
style="margin-top: -50px" text-align="center" width="50%"
@close="es_addDialogClosed">
<el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center"
:model="es_addForm" :rules="es_addFormRules" ref="es_addFormRef">
<el-form-item label="集群名称：" prop="clusterName">
<el-input v-model="es_addForm.clusterName" style="width:280px" size="small" clearable
placeholder="请输入集群名称">
</el-input>
</el-form-item>
<el-form-item label="节点名称：" prop="elasticsearchName">
<el-input v-model="es_addForm.elasticsearchName" style="width:280px" size="small" clearable
placeholder="请输入ES（节点）名称">
</el-input>
</el-form-item>
<!-- <el-form-item label="集群名称：" prop="clusterName">-->
<!-- <el-input v-model="es_addForm.clusterName" style="width:280px" size="small" clearable-->
<!-- placeholder="请输入集群名称">-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="节点名称：" prop="elasticsearchName">-->
<!-- <el-input v-model="es_addForm.elasticsearchName" style="width:280px" size="small" clearable-->
<!-- placeholder="请输入ES（节点）名称">-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<el-form-item label="协议：" prop="scheme">
<el-input v-model="es_addForm.scheme" style="width:280px" size="small" clearable readonly
<el-input v-model="es_addForm.scheme" style="width:280px" size="small" clearable
placeholder="请输入协议名称：http">
</el-input>
</el-form-item>
... ... @@ -148,7 +149,7 @@
<el-button type="info" @click="es_dialog.addDialog = false" size="medium" style="width: 100px">
取消
</el-button>
<el-button type="success" @click="es_add_test" size="medium" style="width: 100px">
<el-button type="success" @click="es_add_test" :loading="es_loading.addLoading" size="medium" style="width: 100px">
测试连接
</el-button>
<el-button type="primary" @click="es_add" :loading="es_loading.addLoading" size="medium" style="width: 100px">
... ... @@ -160,7 +161,8 @@
<!-- 编辑，对话框 -->
<div>
<el-dialog title="编辑ES信息"
:visible.sync="es_dialog.editDialog" element-loading-text="拼命添加配置中"
:visible.sync="es_dialog.editDialog"
v-loading="es_loading.editLoading" element-loading-text="正在拼命加载，请稍等"
style="margin-top: -50px" text-align="center" width="50%"
@close="es_editDialogClosed">
<el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center"
... ... @@ -211,6 +213,9 @@
<el-button type="info" @click="es_dialog.editDialog = false" size="medium" style="width: 100px">
取消
</el-button>
<el-button type="success" @click="es_edit_test" :loading="es_loading.editLoading" size="medium" style="width: 100px">
测试连接
</el-button>
<el-button type="primary" @click="es_edit" :loading="es_loading.editLoading" size="medium" style="width: 100px">
编辑
</el-button>
... ... @@ -396,6 +401,7 @@
this.es_page.esList = res.data.list;
this.es_page.total = res.data.total;
this.es_loading.listLoading = false;
this.es_viewStatus();
}).catch(error => {
this.es_loading.listLoading = false;
this.$message.error(error.toString());
... ... @@ -457,6 +463,7 @@
es_add_test() {
this.$refs.es_addFormRef.validate(valid => {
if (!valid) return;
let scheme = this.es_addForm.scheme;
let hostname = this.es_addForm.hostname;
let port = this.es_addForm.port;
... ... @@ -468,9 +475,27 @@
type: 'warning'
}
).then(() => {
this.es_loading.addLoading = true;
fetch(url, {
method: 'get',
timeout: 2000,
headers: {
'Content-type': 'application/json;charset=UTF-8',
}
}).then((response) => {
if (response.status === 200) {
this.es_loading.addLoading = false;
this.$message.success("测试ES连接：通过！！！");
window.open(url, '_blank')
} else {
this.$message.error("测试ES连接：失败！请仔细检查ES信息");
this.es_loading.addLoading = false;
}
}).catch(error => {
this.$message.error("测试ES连接：失败！请仔细检查ES信息");
this.es_loading.addLoading = false;
});
});
});
},
/**
... ... @@ -486,48 +511,43 @@
let port = this.es_addForm.port;
let url = scheme + "://" + hostname + ":" + port;
// 'Access-Control-Allow-Headers': 'content-type,token,id',
// 'Access-Control-Request-Headers': 'Origin, X-Requested-With, content-Type, Accept, Authorization',
// 'Content-type': 'application/json;charset=UTF-8',
// this.$axios.get(url, {
// headers: {
// 'Access-Control-Allow-Origin': '*'
// }
// }).then(
// (response) => {
// console.log(response);
// }
// ).catch(error => {
// this.$message.error(error.toString());
// this.es_loading.addLoading = false;
// }
// );
http.get(url).then((response) => {
console.log(response);
fetch(url, {
method: 'get',
headers: {
'Content-type': 'application/json;charset=UTF-8',
}
}).then((response) => {
return response.json();
}).then((data) => {
this.es_addForm.clusterName = data.cluster_name;
this.es_addForm.elasticsearchName = data.name;
this.addESInfo();
this.es_loading.addLoading = false;
}).catch(error => {
this.$message.error(error.toString());
this.$message.error("请您务必先测试ES连接！！！");
this.es_loading.addLoading = false;
});
// insertElasticSearchInfo(this.es_addForm).then((response) => {
// let res = response.data;
// if (res.code !== '200') {
// this.es_loading.addLoading = false;
// return this.$message.error(res.msg);
// }
// this.es_loading.addLoading = false;
// this.es_dialog.addDialog = false;
// this.es_getList();
// }).catch(error => {
// this.es_loading.addLoading = false;
// this.$message.error(error.toString());
// });
}
)
},
/**
* 增加ES信息至后台
*/
addESInfo() {
insertElasticSearchInfo(this.es_addForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.es_loading.addLoading = false;
return this.$message.error(res.msg);
}
this.es_loading.addLoading = false;
this.es_dialog.addDialog = false;
this.es_getList();
}).catch(error => {
this.es_loading.addLoading = false;
this.$message.error(error.toString());
});
},
/**
* 删除
... ... @@ -575,17 +595,89 @@
this.$refs.es_editFormRef.resetFields();
},
/**
* 编辑事件之测试连接
*/
es_edit_test() {
this.$refs.es_editFormRef.validate(valid => {
if (!valid) return;
let scheme = this.es_editForm.scheme;
let hostname = this.es_editForm.hostname;
let port = this.es_editForm.port;
let url = scheme + "://" + hostname + ":" + port;
this.$confirm('测试ES信息，是否可用?', '警告', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
this.es_loading.editLoading = true;
fetch(url, {
method: 'get',
timeout: 2000,
headers: {
'Content-type': 'application/json;charset=UTF-8',
}
}).then((response) => {
if (response.status === 200) {
this.es_loading.editLoading = false;
this.$message.success("测试ES连接：通过！！！");
// window.open(url, '_blank')
} else {
this.es_loading.editLoading = false;
this.$message.error("测试ES连接：失败！请仔细检查ES信息");
}
}).catch(error => {
this.es_loading.editLoading = false;
this.$message.error("测试ES连接：失败！请仔细检查ES信息");
});
});
});
},
/**
* ES信息，编辑事件
*/
es_edit() {
this.$refs.es_editFormRef.validate(valid => {
if (!valid) return;
this.es_loading.editLoading = true;
let scheme = this.es_editForm.scheme;
let hostname = this.es_editForm.hostname;
let port = this.es_editForm.port;
let url = scheme + "://" + hostname + ":" + port;
fetch(url, {
method: 'get',
timeout: 2000,
headers: {
'Content-type': 'application/json;charset=UTF-8',
}
}).then((response) => {
if (response.status === 200) {
this.editESInfo();
this.es_loading.editLoading = false;
} else {
this.es_loading.editLoading = false;
this.$message.error("请仔细检查ES信息,请务必进行ES连接测试！");
}
}).catch(error => {
this.es_loading.editLoading = false;
this.$message.error("请仔细检查ES信息,请务必进行ES连接测试！");
});
});
},
/**
* 编辑ES信息至后台
*/
editESInfo() {
updateElasticSearchInfo(this.es_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.es_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.es_loading.editLoading = false;
this.$message.success(res.msg);
this.es_dialog.editDialog = false;
this.es_getList();
... ... @@ -593,15 +685,45 @@
this.es_loading.editLoading = false;
this.$message.error(error.toString());
});
},
/**
* 监控es信息的状态
*/
es_viewStatus() {
if (this.es_page.esList !== null) {
this.es_page.esList.forEach((item) => {
let scheme = item.scheme;
let hostname = item.hostname;
let port = item.port;
let url = scheme + "://" + hostname + ":" + port;
fetch(url, {
method: 'get',
timeout: 3000,
headers: {
'Content-type': 'application/json;charset=UTF-8',
}
}).then((response) => {
if (response.status === 200) {
item.elasticsearchState = true;
} else {
item.elasticsearchState = false;
}
}).catch(error => {
item.elasticsearchState = false;
});
})
}
},
},
created() {
},
mounted() {
}
this.timer = setInterval(this.es_viewStatus, 5000);
},
beforeDestroy() {
clearInterval(this.timer);
},
}
</script>
... ...