数据表信息查看页面优化，合并数据查看页面

zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue

@@ -36,7 +36,7 @@
                         </el-tab-pane>
 						<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
 							<div v-if="!!resultItem.errMsg" style="color: #f00;">{{resultItem.errMsg}}</div>
-							<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" max-height="600"
+							<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight"
 									  @selection-change="handleSelectionChange">
 								<el-table-column type="selection" width="55"></el-table-column>
 								<el-table-column type="index" width="50"></el-table-column>
@@ -85,8 +85,8 @@
 					</el-select>
 				</el-form-item>
 				<el-form-item label="数据表：" v-if="downloadDataParam.downloadType === 'insert'">
-					<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag" @change="dropTableFlagChange">删除表</el-checkbox>
-					<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag">创建表</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag" @change="dropTableFlagChange">删除表{{downloadDataParam.dropTableFlag==1?'!!':''}}</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag" @change="createTableFlagChange">创建表</el-checkbox>
 				</el-form-item>
 				<el-form-item label="保留的列：">
 					<el-select v-model="downloadDataParam.retainColumnArr" multiple placeholder="不选则保留全部列" style="width: 370px;">
@@ -122,6 +122,7 @@
     import sqlFormatter from "sql-formatter";
 
     export default {
+    	name: 'dataPreview',
         data() {
             return {
                 sqlExecuting: false,
@@ -131,6 +132,7 @@
                 sqlExecutorEditor: {},
                 nowExecutorId: 1,
                 executeError: "",
+				pageParam: {},
                 vueQueryParam: {},
                 pageSize: 50,
                 currentPage: 1,
@@ -160,7 +162,7 @@
         },
         mounted: function () {
             let that = this;
-            this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 5);
+            this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 3);
             this.sqlExecutorEditor.setFontSize(16);
             this.sqlExecutorEditor.commands.addCommand({
                 name: "execute-sql",
@@ -170,26 +172,28 @@
                 }
             });
 			// 延迟设置展开的目录，edit比app先初始化
-			setTimeout(() => {
-				this.doExecutorSqlCommon();
-				this.$emit('initLoadDataList', {
-					sourceId: this.vueQueryParam.sourceId,
-					host: this.vueQueryParam.host,
-					dbName: this.vueQueryParam.dbName
-				});
-			}, 500);
-        },
-        activated: function () {
-            this.initQueryParam(this.$route);
+			// setTimeout(() => {
+			// 	this.doExecutorSqlCommon();
+				// this.$emit('initLoadDataList', {
+				// 	sourceId: this.vueQueryParam.sourceId,
+				// 	host: this.vueQueryParam.host,
+				// 	dbName: this.vueQueryParam.dbName
+				// });
+			// }, 500);
         },
         methods: {
-            initQueryParam(to) {
-                this.vueQueryParam = to.query;
-                let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
-                this.$store.commit('global/addTableName', newName);
-				datasourceApi.tableStatus(this.vueQueryParam).then(json => {
-					this.tableStatusInfo = json.data || {};
-				});
+			init(param) {
+				if (this.pageParam.sourceId == param.sourceId) {
+					return;
+				}
+				this.pageParam = param;
+				this.doExecutorSqlCommon();
+                // this.vueQueryParam = to.query;
+                // let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
+                // this.$store.commit('global/addTableName', newName);
+				// datasourceApi.tableStatus(this.pageParam).then(json => {
+				// 	this.tableStatusInfo = json.data || {};
+				// });
             },
             handleCurrentChange(to) {
                 this.currentPage = to;
@@ -222,12 +226,12 @@
                 this.doExecutorSqlCommon();
             },
             doExecutorSqlCommon() {
-                if (!this.vueQueryParam.sourceId) {
+                if (!this.pageParam.sourceId) {
                     this.$message.error("请先选择数据源");
                     return;
 				}
 				if (!this.tableSort.prop) {
-					this.tableSort = {prop: this.vueQueryParam.orderColumn, order: 'ascending'};
+					this.tableSort = {prop: this.pageParam.orderColumn, order: 'ascending'};
 				}
 				let conditionSql = this.sqlExecutorEditor.getSelectedText();
 				conditionSql = conditionSql || this.sqlExecutorEditor.getValue();
@@ -235,13 +239,13 @@
 				this.executeError = "";
 				this.executeUseTime = "";
 				this.executeResultList = [];
-				this.tableMaxHeight = document.body.clientHeight - 400;
+				this.tableMaxHeight = document.body.clientHeight - 420;
 				this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
 				this.sqlExecuting = true;
 				let param = {
-					sourceId: this.vueQueryParam.sourceId,
-					dbName: this.vueQueryParam.dbName,
-					tableName: this.vueQueryParam.tableName,
+					sourceId: this.pageParam.sourceId,
+					dbName: this.pageParam.dbName,
+					tableName: this.pageParam.tableName,
 					executeId: this.nowExecutorId,
 					condition: conditionSql,
 					pageNum: this.currentPage,
@@ -321,7 +325,7 @@
 				let choiceData = this.choiceResultObj[this.executeShowTable] || [];
 				if (choiceData.length > 0) {
 					let dataCols = this.executeResultList.find(item => item.name === this.executeShowTable).dataCols;
-					let tableName = '`' + this.vueQueryParam.dbName + '`.`' + this.vueQueryParam.tableName + '`';
+					let tableName = '`' + this.pageParam.dbName + '`.`' + this.pageParam.tableName + '`';
 					let copyData = copyFormatter.format('update', this.editorDbProduct, dataCols, choiceData, this.conditionDataColsChoice, tableName);
 					this.conditionDataColsChoice = [];
 					this.exportConditionVisible = false;
@@ -341,7 +345,7 @@
 						this.exportConditionVisible = true;
 						return;
 					}
-					let tableName = '`' + this.vueQueryParam.dbName + '`.`' + this.vueQueryParam.tableName + '`';
+					let tableName = '`' + this.pageParam.dbName + '`.`' + this.pageParam.tableName + '`';
 					let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, '', tableName);
 					this.$copyText(copyData).then(
 							res => this.$message.success("内容已复制到剪切板！"),
@@ -355,9 +359,9 @@
 				conditionSql = conditionSql || "";
 				this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
 				this.downloadFormParam.param = {
-					sourceId: this.vueQueryParam.sourceId,
-					dbName: this.vueQueryParam.dbName,
-					tableName: this.vueQueryParam.tableName,
+					sourceId: this.pageParam.sourceId,
+					dbName: this.pageParam.dbName,
+					tableName: this.pageParam.tableName,
 					downloadType: this.downloadDataParam.downloadType,
 					conditionColumn: this.downloadDataParam.conditionArr.join(","),
 					retainColumn: this.downloadDataParam.retainColumnArr.join(","),
@@ -379,6 +383,11 @@
 					this.downloadDataParam.createTableFlag = 1;
 				}
 			},
+			createTableFlagChange() {
+				if (this.downloadDataParam.createTableFlag == 0) {
+					this.downloadDataParam.dropTableFlag = 0;
+				}
+			},
             initAceEditor(editor, minLines) {
                 return ace.edit(editor, {
                     theme: "ace/theme/monokai",
@@ -389,7 +398,7 @@
                     enableSnippets: true,
                     enableLiveAutocompletion: true,
                     minLines: minLines,
-                    maxLines: 5
+                    maxLines: minLines
                 });
             },
         }

zyplayer-doc-ui/db-ui/src/views/table/Info.vue

@@ -1,86 +1,107 @@
 <template>
     <div class="table-info-vue">
-        <el-card style="margin: 10px;">
-            <div slot="header" class="clearfix">
-                表信息
-                <span style="float: right;margin-top: -5px;">
-                    <el-button class="search-submit" size="small" type="primary" icon="el-icon-search" @click="previewTableData">查看表数据</el-button>
-                </span>
-            </div>
-            <el-row class="status-info-row">
-                <el-col :span="24"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
-            </el-row>
-            <el-row class="status-info-row">
-                <el-col :span="6"><span class="label">数据库：</span>{{vueQueryParam.dbName}}</el-col>
-                <el-col :span="6"><span class="label">数据表：</span>{{tableStatusInfo.name}}</el-col>
-                <el-col :span="6"><span class="label">引擎：</span>{{tableStatusInfo.engine}}</el-col>
-            </el-row>
-            <el-row class="status-info-row">
-                <el-col :span="6"><span class="label">行数：</span>{{tableStatusInfo.rows||0}}</el-col>
-                <el-col :span="6"><span class="label">自动递增：</span>{{tableStatusInfo.avgRowLength||0}}</el-col>
-                <el-col :span="6"><span class="label">行格式：</span>{{tableStatusInfo.rowFormat}}</el-col>
-                <el-col :span="6"><span class="label">排序规则：</span>{{tableStatusInfo.collation}}</el-col>
-            </el-row>
-            <el-row class="status-info-row">
-                <el-col :span="6"><span class="label">索引长度：</span>{{getBytesSize(tableStatusInfo.indexLength)}}</el-col>
-                <el-col :span="6"><span class="label">数据长度：</span>{{getBytesSize(tableStatusInfo.dataLength)}}</el-col>
-                <el-col :span="6"><span class="label">最大长度：</span>{{getBytesSize(tableStatusInfo.maxDataLength)}}</el-col>
-                <el-col :span="6"><span class="label">可用空间：</span>{{getBytesSize(tableStatusInfo.dataFree)}}</el-col>
-            </el-row>
-            <el-row class="status-info-row">
-                <el-col :span="6"><span class="label">创建时间：</span>{{tableStatusInfo.createTime}}</el-col>
-                <el-col :span="6"><span class="label">修改时间：</span>{{tableStatusInfo.updateTime}}</el-col>
-                <el-col :span="6"><span class="label">检查时间：</span>{{tableStatusInfo.checkTime}}</el-col>
-                <el-col :span="6"><span class="label">创建选项：</span>{{tableStatusInfo.createOptions}}</el-col>
-            </el-row>
-            <el-row class="status-info-row">
-                <el-col :span="24">
-                    <span class="label">表注释：</span>
-                    <span v-if="tableInfo.inEdit == 1">
+		<el-tabs v-model="tabActiveName" @tab-click="tabActiveNameChange">
+			<el-tab-pane label="表字段" name="columns">
+				<div v-loading="columnListLoading">
+					<div style="text-align: right; margin-bottom: 10px;">
+						<el-button size="small" @click="showCreateTableDdl" style="margin-left: 10px;" icon="el-icon-magic-stick">DDL</el-button>
+					</div>
+					<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
+						<el-table-column prop="name" label="字段名" width="220"></el-table-column>
+						<el-table-column label="自增" width="50">
+							<template slot-scope="scope">{{scope.row.isidentity ? '是' : '否'}}</template>
+						</el-table-column>
+						<el-table-column prop="type" label="类型" width="110"></el-table-column>
+						<el-table-column prop="length" label="长度" width="110"></el-table-column>
+						<el-table-column prop="numericScale" label="小数点" width="80">
+							<template slot-scope="scope">{{scope.row.numericScale==0 ? '' : scope.row.numericScale}}</template>
+						</el-table-column>
+						<el-table-column prop="nullable" label="空值" width="80">
+							<template slot-scope="scope">{{scope.row.nullable==1 ? '允许' : '不允许'}}</template>
+						</el-table-column>
+						<el-table-column label="主键" width="50">
+							<template slot-scope="scope">{{scope.row.ispramary==1 ? '是' : '否'}}</template>
+						</el-table-column>
+						<el-table-column>
+							<template slot="header" slot-scope="scope">
+								注释
+								<el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">
+									<i class="el-icon-info" style="color: #999;"></i>
+								</el-tooltip>
+							</template>
+							<template slot-scope="scope">
+								<div v-if="scope.row.inEdit == 1">
+									<el-input v-model="scope.row.newDesc" placeholder="输入字段注释" @keyup.enter.native="saveColumnDescription(scope.row)" v-on:blur="saveColumnDescription(scope.row)"></el-input>
+								</div>
+								<div v-else class="description" v-on:click="descBoxClick(scope.row)">{{scope.row.description}}</div>
+							</template>
+						</el-table-column>
+					</el-table>
+				</div>
+			</el-tab-pane>
+			<el-tab-pane label="表信息" name="tableInfo">
+				<el-row class="status-info-row">
+					<el-col :span="24"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
+				</el-row>
+				<el-row class="status-info-row">
+					<el-col :span="6"><span class="label">数据库：</span>{{vueQueryParam.dbName}}</el-col>
+					<el-col :span="6"><span class="label">数据表：</span>{{tableStatusInfo.name}}</el-col>
+					<el-col :span="6"><span class="label">引擎：</span>{{tableStatusInfo.engine}}</el-col>
+				</el-row>
+				<el-row class="status-info-row">
+					<el-col :span="6"><span class="label">行数：</span>{{tableStatusInfo.rows||0}}</el-col>
+					<el-col :span="6"><span class="label">自动递增：</span>{{tableStatusInfo.avgRowLength||0}}</el-col>
+					<el-col :span="6"><span class="label">行格式：</span>{{tableStatusInfo.rowFormat}}</el-col>
+					<el-col :span="6"><span class="label">排序规则：</span>{{tableStatusInfo.collation}}</el-col>
+				</el-row>
+				<el-row class="status-info-row">
+					<el-col :span="6"><span class="label">索引长度：</span>{{getBytesSize(tableStatusInfo.indexLength)}}</el-col>
+					<el-col :span="6"><span class="label">数据长度：</span>{{getBytesSize(tableStatusInfo.dataLength)}}</el-col>
+					<el-col :span="6"><span class="label">最大长度：</span>{{getBytesSize(tableStatusInfo.maxDataLength)}}</el-col>
+					<el-col :span="6"><span class="label">可用空间：</span>{{getBytesSize(tableStatusInfo.dataFree)}}</el-col>
+				</el-row>
+				<el-row class="status-info-row">
+					<el-col :span="6"><span class="label">创建时间：</span>{{tableStatusInfo.createTime}}</el-col>
+					<el-col :span="6"><span class="label">修改时间：</span>{{tableStatusInfo.updateTime}}</el-col>
+					<el-col :span="6"><span class="label">检查时间：</span>{{tableStatusInfo.checkTime}}</el-col>
+					<el-col :span="6"><span class="label">创建选项：</span>{{tableStatusInfo.createOptions}}</el-col>
+				</el-row>
+				<el-row class="status-info-row">
+					<el-col :span="24">
+						<span class="label">表注释：</span>
+						<span v-if="tableInfo.inEdit == 1">
                         <el-input v-model="tableInfo.newDesc" placeholder="输入表注释" @keyup.enter.native="saveTableDescription" v-on:blur="saveTableDescription" style="width: 500px;"></el-input>
                     </span>
-                    <span v-else>{{tableInfo.description || '暂无注释'}} <i class="el-icon-edit edit-table-desc" v-on:click="tableInfo.inEdit = 1"></i></span>
-                </el-col>
-            </el-row>
-        </el-card>
-        <el-card style="margin: 10px;">
-            <div slot="header" class="clearfix">
-                字段信息
-                <el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">
-                    <i class="el-icon-info" style="color: #999;"></i>
-                </el-tooltip>
-                <span style="float: right;margin-top: -5px;">
-                    <el-button size="small" @click="showCreateTableDdl">DDL</el-button>
-                </span>
-            </div>
-            <div style="padding: 10px;" v-loading="columnListLoading">
-                <el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
-                    <el-table-column prop="name" label="字段名" width="220"></el-table-column>
-                    <el-table-column label="自增" width="50">
-                        <template slot-scope="scope">{{scope.row.isidentity ? '是' : '否'}}</template>
-                    </el-table-column>
-                    <el-table-column prop="type" label="类型" width="110"></el-table-column>
-                    <el-table-column prop="length" label="长度" width="110"></el-table-column>
-                    <el-table-column prop="numericScale" label="小数点" width="80">
-						<template slot-scope="scope">{{scope.row.numericScale==0 ? '' : scope.row.numericScale}}</template>
-					</el-table-column>
-                    <el-table-column prop="nullable" label="空值" width="80">
-						<template slot-scope="scope">{{scope.row.nullable==1 ? '允许' : '不允许'}}</template>
-					</el-table-column>
-                    <el-table-column label="主键" width="50">
-                        <template slot-scope="scope">{{scope.row.ispramary==1 ? '是' : '否'}}</template>
-                    </el-table-column>
-                    <el-table-column label="注释">
-                        <template slot-scope="scope">
-                            <div v-if="scope.row.inEdit == 1">
-                                <el-input v-model="scope.row.newDesc" placeholder="输入字段注释" @keyup.enter.native="saveColumnDescription(scope.row)" v-on:blur="saveColumnDescription(scope.row)"></el-input>
-                            </div>
-                            <div v-else class="description" v-on:click="descBoxClick(scope.row)">{{scope.row.description}}</div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </el-card>
+						<span v-else>{{tableInfo.description || '暂无注释'}} <i class="el-icon-edit edit-table-desc" v-on:click="tableInfo.inEdit = 1"></i></span>
+					</el-col>
+				</el-row>
+			</el-tab-pane>
+			<el-tab-pane label="关系图" name="relationChart">
+				<table-relation-charts ref="relationChart"></table-relation-charts>
+			</el-tab-pane>
+			<el-tab-pane label="表数据" name="tableData">
+				<data-preview ref="dataPreview"></data-preview>
+			</el-tab-pane>
+		</el-tabs>
+<!--        <el-card style="margin: 10px;">-->
+<!--            <div slot="header" class="clearfix">-->
+<!--                表信息-->
+<!--                <span style="float: right;margin-top: -5px;">-->
+<!--                    <el-button class="search-submit" size="small" type="primary" icon="el-icon-search" @click="previewTableData">查看表数据</el-button>-->
+<!--                </span>-->
+<!--            </div>-->
+<!--        </el-card>-->
+<!--        <el-card style="margin: 10px;">-->
+<!--            <div slot="header" class="clearfix">-->
+<!--                字段信息-->
+<!--                <el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">-->
+<!--                    <i class="el-icon-info" style="color: #999;"></i>-->
+<!--                </el-tooltip>-->
+<!--                <span style="float: right;margin-top: -5px;">-->
+<!--                    <el-button size="small" @click="showCreateTableDdl">DDL</el-button>-->
+<!--                </span>-->
+<!--            </div>-->
+<!--        </el-card>-->
         <!--增加数据源弹窗-->
         <el-dialog :visible.sync="tableDDLInfoDialogVisible" :footer="null" width="760px">
 			<div slot="title">
@@ -120,6 +141,8 @@
 
 <script>
     import datasourceApi from '../../common/api/datasource'
+    import dataPreview from '../data/DataPreview'
+    import tableRelation from './TableRelation'
 
     export default {
         data() {
@@ -133,6 +156,8 @@
 				tableDDLInfoTab: '',
                 tableDDLInfo: '',
                 tableDDLInfoDialogVisible: false,
+				// 标签
+				tabActiveName: 'columns',
             };
         },
 		mounted: function () {
@@ -148,6 +173,10 @@
 		activated: function () {
 			this.initQueryParam(this.$route);
 		},
+		components: {
+			'data-preview': dataPreview,
+			'table-relation-charts': tableRelation,
+		},
         methods: {
             initQueryParam(to) {
                 if (this.columnListLoading) {
@@ -173,6 +202,31 @@
                 datasourceApi.tableStatus(this.vueQueryParam).then(json => {
                     this.tableStatusInfo = json.data || {};
                 });
+            },
+			tabActiveNameChange() {
+				if (this.tabActiveName == 'relationChart') {
+					this.$refs.relationChart.init({
+						sourceId: this.vueQueryParam.sourceId,
+						dbName: this.vueQueryParam.dbName,
+						tableName: this.vueQueryParam.tableName,
+					});
+				} else if (this.tabActiveName == 'tableData') {
+					if (!this.columnList || this.columnList.length <= 0) {
+						this.$message.error("字段信息尚未加载成功，请稍候...");
+						setTimeout(() => this.tabActiveName = 'columns', 0);
+						return;
+					}
+					let primaryColumn = this.columnList.find(item => item.ispramary == 1) || this.columnList[0];
+					this.$refs.dataPreview.init({
+						sourceId: this.vueQueryParam.sourceId,
+						dbName: this.vueQueryParam.dbName,
+						tableName: this.vueQueryParam.tableName,
+						host: this.vueQueryParam.host,
+						dbType: this.tableStatusInfo.dbType,
+						// 默认排序字段，先随便取一个，impala等数据库必须排序后才能分页查
+						orderColumn: primaryColumn.name,
+					});
+				}
             },
 			onCopySuccess(e) {
 				this.$message.success("内容已复制到剪切板！");
@@ -208,22 +262,6 @@
                 // row.newDesc = row.description;
                 row.inEdit = 1;
             },
-            previewTableData() {
-				if (!this.columnList || this.columnList.length <= 0) {
-					this.$message.error("字段信息尚未加载成功，请稍候...");
-					return;
-				}
-                let previewParam = {
-                    sourceId: this.vueQueryParam.sourceId,
-                    dbName: this.vueQueryParam.dbName,
-                    tableName: this.vueQueryParam.tableName,
-                    host: this.vueQueryParam.host,
-                    dbType: this.tableStatusInfo.dbType,
-					// 默认排序字段，先随便取一个，impala等数据库必须排序后才能分页查
-                    orderColumn: this.columnList[0].name,
-                };
-                this.$router.push({path: '/data/dataPreview', query: previewParam});
-            },
             getBytesSize(size) {
                 if (!size) return "0 bytes";
                 var num = 1024.00;
@@ -261,7 +299,9 @@
         }
     }
 </script>
+
 <style>
+    .table-info-vue{padding: 0 20px;}
     .table-info-vue .el-dialog__body{padding: 0 20px 10px;}
     .table-info-vue .el-form-item{margin-bottom: 5px;}
     .table-info-vue .edit-table-desc{cursor: pointer; color: #409EFF;}

zyplayer-doc-ui/db-ui/src/views/table/TableRelation.vue

@@ -0,0 +1,175 @@
+<template>
+	<div class="data-executor-vue">
+		<div id="relationChart" style="width: 100%; height: max(calc(100vh - 160px), 600px);"></div>
+		<!--选择导出为update的条件列弹窗-->
+		<el-dialog :visible.sync="choiceRelationColumnVisible" width="500px" title="选择关联的表字段">
+			<div>
+				更新条件列：
+			</div>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="choiceRelationColumnVisible = false">取 消</el-button>
+				<el-button type="primary" @click="">确 定</el-button>
+			</span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	import datasourceApi from '../../common/api/datasource'
+
+	export default {
+		name: 'tableRelation',
+		data() {
+			return {
+				pageParam: {},
+				relationChart: {},
+				relationChartData: {},
+				relationChartOption: {},
+				// 选择复制
+				choiceRelationColumnVisible: false,
+				columnListLoading: false,
+			}
+		},
+		mounted () {
+		},
+		methods: {
+			init(param) {
+				if (this.pageParam.sourceId == param.sourceId) {
+					return;
+				}
+				this.pageParam = param;
+				this.relationChartData.name = param.tableName;
+				// 基于准备好的dom，初始化echarts实例
+				this.relationChart = echarts.init(document.getElementById('relationChart'));
+				this.relationChartOption = {
+					tooltip: {
+						trigger: 'item',
+						triggerOn: 'mousemove'
+					},
+					series: [
+						{
+							type: 'tree',
+							id: 0,
+							name: 'tree1',
+							data: [this.relationChartData],
+							top: '10%',
+							left: '8%',
+							bottom: '22%',
+							right: '20%',
+							symbolSize: 7,
+							edgeShape: 'polyline',
+							edgeForkPosition: '63%',
+							initialTreeDepth: 3,
+							lineStyle: {
+								width: 2
+							},
+							label: {
+								backgroundColor: '#fff',
+								position: 'left',
+								verticalAlign: 'middle',
+								align: 'right'
+							},
+							leaves: {
+								label: {
+									position: 'right',
+									verticalAlign: 'middle',
+									align: 'left'
+								}
+							},
+							emphasis: {
+								focus: 'descendant'
+							},
+							expandAndCollapse: false,
+							animationDuration: 550,
+							animationDurationUpdate: 750
+						}
+					]
+				};
+				// 使用刚指定的配置项和数据显示图表。
+				this.relationChart.setOption(this.relationChartOption);
+				this.relationChart.on('click', (params) => {
+					console.log(params);
+					var dataIndex = params.data.index;
+					var description = params.data.description;
+					if (!!params.data.columnName) {
+						this.choiceRelationColumnVisible = true;
+					} else {
+						params.data.collapsed = true;
+					}
+				});
+				this.relationChart.on('contextmenu', function (params) {
+					console.log(params);
+				});
+				datasourceApi.tableColumnList(this.pageParam).then(json => {
+					this.columnList = json.data.columnList || [];
+					this.tableInfo = json.data.tableInfo || {};
+					this.columnListLoading = false;
+					this.changeTableRelationOption(this.relationChartData, this.columnList);
+					this.relationChart.setOption(this.relationChartOption);
+					setTimeout(() => this.relationChart.resize(), 0);
+				});
+			},
+			changeTableRelationOption(data, columnList) {
+				let childrenArr = [];
+				for (let i = 0; i < columnList.length; i++) {
+					let item = columnList[i];
+					childrenArr.push({
+						name: item.name,
+						tableName: item.tableName,
+						columnName: item.name,
+						children: [],
+						collapsed: false,
+					});
+				}
+				data.children = childrenArr;
+			}
+		}
+	}
+</script>
+
+<style>
+	.data-executor-vue .ace-monokai .ace_print-margin {
+		display: none;
+	}
+
+	.data-executor-vue .el-card__body {
+		padding: 10px;
+	}
+
+	.data-executor-vue .el-table td, .el-table th {
+		padding: 6px 0;
+	}
+
+	.data-executor-vue .execute-result-table .el-input__inner {
+		height: 25px;
+		line-height: 25px;
+		padding: 0 5px;
+	}
+
+	.data-executor-vue .execute-result-table .el-textarea__inner {
+		height: 27px;
+		min-height: 27px;
+		line-height: 25px;
+		padding: 0 5px;
+		resize: none;
+	}
+
+	.data-executor-vue .execute-use-time {
+		font-size: 12px;
+		margin-right: 10px;
+	}
+
+	.data-executor-vue-out .el-tabs__nav-scroll {
+		padding-left: 20px;
+	}
+
+	.data-executor-vue-out .el-button + .el-button {
+		margin-left: 0px;
+	}
+
+	.data-executor-vue-out .el-table__body-wrapper {
+		height: calc(100vh - 180px);
+		overflow-y: auto;
+	}
+</style>