manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

es功能开发，基本可用了

Browse Source
This commit is contained in:
暮光：城中城
2019-07-27 22:58:16 +08:00
parent 116e04e3bf
commit fadf52cec8
5 changed files with 129 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
zyplayer-doc-ui/es-ui/src/App.vue
View File

@@ -6,8 +6,13 @@
<el-container v-else>
<el-aside>
<div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
<div style="margin-bottom: 10px;">
<el-select v-model="choiceDatasource" @change="datasourceChangeEvents" filterable placeholder="选择数据源查看索引列表" style="width: 100%;">
<el-option v-for="item in datasourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<el-menu :router="true" class="el-menu-vertical" style="height: auto;">
<el-menu-item index="/"><i class="el-icon-s-home"></i>控制台</el-menu-item>
<!-- <el-menu-item index="/"><i class="el-icon-s-home"></i>控制台</el-menu-item>-->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-s-platform"></i>
@@ -27,7 +32,7 @@
ref="databaseTree" highlight-current draggable
:default-expanded-keys="esIndexExpandedKeys"
node-key="id" @node-expand="handleNodeExpand"
style="background-color: #fafafa;">
style="background-color: #fafafa;" empty-text="">
<span slot-scope="{node, data}">
<span>{{node.label}}</span>
</span>
@@ -92,6 +97,9 @@
defaultProps: {children: 'children', label: 'name'},
esIndexList: [],
esIndexExpandedKeys: [],
// 数据源相关
datasourceOptions: [],
choiceDatasource: "",
// 升级信息
upgradeInfo: {},
}
@@ -101,7 +109,7 @@
global.vue.$app = this;
this.getSelfUserInfo();
this.checkSystemUpgrade();
this.loadEsMappingList();
this.loadDatasourceList();
},
methods: {
userSettingDropdown(command) {
@@ -131,7 +139,7 @@
handleNodeClick(node) {
console.log("点击节点：", node);
if (node.type == 1) {
this.nowClickPath = {index: node.name};
this.nowClickPath = {id: this.choiceDatasource, index: node.name};
this.$router.push({path: '/index/show', query: this.nowClickPath});
}
},
@@ -140,8 +148,12 @@
console.log("加载节点：", node);
}
},
datasourceChangeEvents() {
app.loadEsMappingList();
},
loadEsMappingList() {
this.common.post(this.apilist1.esMappings, {}, function (json) {
var param = {id: this.choiceDatasource};
this.common.post(this.apilist1.esMappings, param, function (json) {
var result = json.data || {};
var pathIndex = [], pathChildren = [];
for (var key in result) {
@@ -160,6 +172,18 @@
app.esIndexList = pathIndex;
});
},
loadDatasourceList() {
this.common.post(this.apilist1.manageDatasourceList, {}, function (json) {
var datasourceList = json.data || [];
var datasourceOptions = [];
for (var i = 0; i < datasourceList.length; i++) {
datasourceOptions.push({
label: datasourceList[i].name, value: datasourceList[i].id
});
}
app.datasourceOptions = datasourceOptions;
});
},
checkSystemUpgrade() {
this.common.post(this.apilist1.systemUpgradeInfo, {}, function (json) {
if (!!json.data) {

6
zyplayer-doc-ui/es-ui/src/views/data/DatasourceManage.vue
View File

@@ -21,13 +21,13 @@
</el-card>
</div>
<!--增加数据源弹窗-->
<el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="600px">
<el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="650px">
<el-form label-width="120px">
<el-form-item label="名字：">
<el-input v-model="newDatasource.name" placeholder="中文名字"></el-input>
</el-form-item>
<el-form-item label="数据源URL：">
<el-input v-model="newDatasource.hostPort" placeholder="地址和端口"></el-input>
<el-input v-model="newDatasource.hostPort" placeholder="地址和端口，集群使用英文逗号分隔，例：127.0.0.1:7200,127.0.0.1:7201"></el-input>
</el-form-item>
<el-form-item label="scheme：">
<el-select v-model="newDatasource.scheme" placeholder="scheme" style="width: 100%">
@@ -68,7 +68,7 @@
this.newDatasource = {name: "", hostPort: "", scheme: "http"};
},
editDatasource(row) {
this.newDatasource = row;
this.newDatasource = JSON.parse(JSON.stringify(row));
this.datasourceDialogVisible = true;
},
deleteDatasource(row) {

2
zyplayer-doc-ui/es-ui/src/views/home/Home.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style="padding: 10px;">
<div style="max-width: 1200px;margin: 20px auto;">
<div style="text-align: center;">欢迎使用ヾ(๑╹◡╹)ﾉ" - 在左上角选择一个数据源吧~</div>
<div style="text-align: center;">欢迎使用鸭ヾ(๑╹◡╹)ﾉ"</div>
</div>
</div>
</template>

127
zyplayer-doc-ui/es-ui/src/views/index/Executer.vue
View File

@@ -1,29 +1,52 @@
<template>
<div class="index-executer-vue">
<el-card style="margin: 10px;">
<div style="margin: 10px 0;">
<span>选择索引：</span>
<el-select v-model="executeParam.index" filterable placeholder="选择索引">
<el-option label="zyplayer_doc_wiki" value="zyplayer_doc_wiki"></el-option>
</el-select>
<div style="margin-bottom: 20px;">
<el-form :model="executeParam" :inline="true" :rules="paramRules" ref="paramRulesForm">
<el-form-item label="选择数据源：" prop="id">
<el-select v-model="executeParam.id" @change="loadIndexList" filterable placeholder="选择数据源">
<el-option v-for="item in datasourceOptions" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择索引：">
<el-select v-model="executeParam.index" filterable placeholder="选择索引">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in esIndexList" :label="item.name" :value="item.index"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<el-input type="textarea" v-model="executeParam.sql" :rows="10" placeholder="请输入"></el-input>
<div style="text-align: center;margin: 10px 0;">
<!-- 例：{"_source":["id","name","createUserName","viewNum"]}-->
<el-input type="textarea" v-model="executeParam.sql" :rows="10" placeholder="请输入DSL查询条件"></el-input>
<div style="text-align: center;margin-top: 10px;">
<el-button type="primary" icon="el-icon-video-play" v-on:click="submitExecute">执行</el-button>
</div>
</el-card>
<el-card style="margin: 10px;" v-loading="executeLoading">
<div style="margin: 10px 0;">
<span>执行状态：{{executeResult.errCode == 200 ? '成功' : '失败'}}</span>
</div>
<div style="margin: 10px 0;" v-if="executeResult.errCode == 200">
<div style="margin: 10px 0;">返回结果：</div>
<div v-html="executeResult.data" @click="executeResultClick($event)"></div>
</div>
<div style="margin: 10px 0;" v-else>
<div style="margin: 10px 0;">错误信息：</div>
<div class="error-text">{{executeResult.errMsg}}</div>
</div>
<el-tabs value="first">
<el-tab-pane label="返回结果" name="first">
<div v-if="!!executeResult.errCode">
<div v-if="executeResult.errCode == 200">
<el-table :data="executeResult.data" stripe border style="width: 100%;">
<el-table-column v-for="item in executeResultCols" :prop="item.prop" :label="item.prop"></el-table-column>
</el-table>
</div>
<div class="error-text" v-else>{{executeResult.errMsg}}</div>
</div>
<div v-else>请先执行</div>
</el-tab-pane>
<el-tab-pane label="JSON结果" name="second">
<div v-if="!!executeResult.errCode">
<div v-html="executeResult.jsonHtmlStr" @click="executeResultClick($event)" v-if="executeResult.errCode == 200"></div>
<div class="error-text" v-else>{{executeResult.errMsg}}</div>
</div>
<div v-else>请先执行</div>
</el-tab-pane>
<el-tab-pane label="执行状态" name="third">
<div v-if="!!executeResult.errCode">{{executeResult.errCode == 200 ? '成功' : '失败'}}</div>
<div v-else>请先执行</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
@@ -37,39 +60,57 @@
data() {
return {
vueQueryParam: {},
indexMappingList: [],
datasourceOptions: [],
esIndexList: [],
executeParam: {
id: '',
sql: '',
index: '',
},
executeResult: {},
executeResultCols: [],
executeLoading: false,
paramRules: {
id: [
{required: true, message: '请选择数据源', trigger: 'change'},
],
},
};
},
beforeRouteUpdate(to, from, next) {
this.initQueryParam(to);
next();
},
mounted: function () {
app = this;
this.initQueryParam(this.$route);
// 延迟设置展开的目录，edit比app先初始化
setTimeout(function () {
//global.vue.$app.initLoadDataList(app.vueQueryParam.host, app.vueQueryParam.dbName);
}, 500);
this.loadDatasourceList();
},
methods: {
submitExecute() {
this.$refs.paramRulesForm.validate((valid) => {
if (!valid) return;
app.doSubmitExecute();
});
},
doSubmitExecute() {
this.executeLoading = true;
this.executeResult = {};
this.common.postNonCheck(this.apilist1.esExecuter, this.executeParam, function (json) {
var executeResult = json;
try {
executeResult.data = formatjson.processObjectToHtmlPre(json.data, 0, false, false, false, false);
executeResult.jsonHtmlStr = formatjson.processObjectToHtmlPre(json.data, 0, false, false, false, false);
} catch (e) {
executeResult.data = "结果解析失败";
executeResult.jsonHtmlStr = "结果解析失败";
}
app.executeResult = executeResult;
var executeResultCols = [];
if (!!json.data && json.data.length > 0) {
var colItem = json.data[0];
for (var key in colItem) {
executeResultCols.push({prop: key});
}
}
// reverse 反转下，不然查询出来的结果字段反的
app.executeResultCols = executeResultCols.reverse();
// 防止遮罩消失太快~
setTimeout(()=>{app.executeLoading = false;}, 500);
});
@@ -79,23 +120,21 @@
formatjson.expImgClicked(e.target);
}
},
initQueryParam(to) {
// this.indexMappingListLoading = true;
// this.vueQueryParam = to.query;
// this.common.post(this.apilist1.esMappings, this.vueQueryParam, function (json) {
// var data = json.data || {};
// var properties = data[app.vueQueryParam.index].sourceAsMap.properties;
// var propertiesArr = [];
// for (var propertiesKey in properties) {
// var propertiesItem = properties[propertiesKey];
// var item = {
// name: propertiesKey, type: propertiesItem.type
// };
// propertiesArr.push(item);
// }
// app.indexMappingList = propertiesArr;
// app.indexMappingListLoading = false;
// });
loadDatasourceList() {
this.common.post(this.apilist1.manageDatasourceList, {}, function (json) {
app.datasourceOptions = json.data || [];
});
},
loadIndexList() {
var param = {id: this.executeParam.id};
this.common.post(this.apilist1.esMappings, param, function (json) {
var result = json.data || {};
var propertiesArr = [];
for (var key in result) {
propertiesArr.push({name: key, index: key});
}
app.esIndexList = propertiesArr;
});
},
}
}