diff --git a/zyplayer-doc-ui/db-ui/package-lock.json b/zyplayer-doc-ui/db-ui/package-lock.json
index 8713f5a0..61d336eb 100644
--- a/zyplayer-doc-ui/db-ui/package-lock.json
+++ b/zyplayer-doc-ui/db-ui/package-lock.json
@@ -1902,7 +1902,7 @@
     },
     "asn1.js": {
       "version": "4.10.1",
-      "resolved": "https://registry.npm.taobao.org/asn1.js/download/asn1.js-4.10.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/asn1.js/download/asn1.js-4.10.1.tgz",
       "integrity": "sha1-ucK/WAXx5kqt7tbfOiv6+1pz9aA=",
       "dev": true,
       "requires": {
@@ -1923,7 +1923,7 @@
       "dependencies": {
         "inherits": {
           "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finherits%2Fdownload%2Finherits-2.0.1.tgz",
+          "resolved": "http://registry.npm.taobao.org/inherits/download/inherits-2.0.1.tgz",
           "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
           "dev": true
         },
@@ -2065,7 +2065,7 @@
     },
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
-      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "resolved": "http://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
       "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
     },
     "babel-loader": {
@@ -2104,7 +2104,7 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
-      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "requires": {
         "core-js": "^2.4.0",
@@ -2237,7 +2237,7 @@
     },
     "bn.js": {
       "version": "4.11.8",
-      "resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz",
+      "resolved": "http://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz",
       "integrity": "sha1-LN4J617jQfSEdGuwMJsyU7GxRC8=",
       "dev": true
     },
@@ -3010,7 +3010,7 @@
     },
     "color-convert": {
       "version": "1.9.3",
-      "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolor-convert%2Fdownload%2Fcolor-convert-1.9.3.tgz",
+      "resolved": "http://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
       "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
       "dev": true,
       "requires": {
@@ -3662,7 +3662,7 @@
     },
     "deepmerge": {
       "version": "1.5.2",
-      "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&sync_timestamp=1572279812893&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
       "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
@@ -4017,19 +4017,19 @@
     },
     "domain-browser": {
       "version": "1.2.0",
-      "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1574051269386&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
       "integrity": "sha1-PTH1AZGmdJ3RN1p/Ui6CPULlTto=",
       "dev": true
     },
     "domelementtype": {
       "version": "1.3.1",
-      "resolved": "https://registry.npm.taobao.org/domelementtype/download/domelementtype-1.3.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomelementtype%2Fdownload%2Fdomelementtype-1.3.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/domelementtype/download/domelementtype-1.3.1.tgz",
       "integrity": "sha1-0EjESzew0Qp/Kj1f7j9DM9eQSB8=",
       "dev": true
     },
     "domhandler": {
       "version": "2.4.2",
-      "resolved": "https://registry.npm.taobao.org/domhandler/download/domhandler-2.4.2.tgz",
+      "resolved": "http://registry.npm.taobao.org/domhandler/download/domhandler-2.4.2.tgz",
       "integrity": "sha1-iAUJfpM9ZehVRvcm1g9euItE+AM=",
       "dev": true,
       "requires": {
@@ -4107,11 +4107,11 @@
       }
     },
     "echarts": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.5.0.tgz",
-      "integrity": "sha1-IRGWBkWjReuBndrEeSosBlvf8WI=",
+      "version": "4.9.0",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz",
+      "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
       "requires": {
-        "zrender": "4.1.2"
+        "zrender": "4.3.2"
       }
     },
     "ee-first": {
@@ -4168,7 +4168,7 @@
     },
     "emojis-list": {
       "version": "2.1.0",
-      "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
       "dev": true
     },
@@ -4656,7 +4656,7 @@
     },
     "faye-websocket": {
       "version": "0.10.0",
-      "resolved": "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",
       "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
       "dev": true,
       "requires": {
@@ -5521,7 +5521,7 @@
     },
     "glob-parent": {
       "version": "3.1.0",
-      "resolved": "https://registry.npm.taobao.org/glob-parent/download/glob-parent-3.1.0.tgz?cache=0&sync_timestamp=1569136652060&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglob-parent%2Fdownload%2Fglob-parent-3.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/glob-parent/download/glob-parent-3.1.0.tgz",
       "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
       "dev": true,
       "requires": {
@@ -5625,7 +5625,7 @@
     },
     "has-ansi": {
       "version": "2.0.0",
-      "resolved": "https://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
       "dev": true,
       "requires": {
@@ -5696,7 +5696,7 @@
     },
     "hash-sum": {
       "version": "1.0.2",
-      "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
+      "resolved": "http://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
@@ -5858,7 +5858,7 @@
     },
     "htmlparser2": {
       "version": "3.10.1",
-      "resolved": "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz",
       "integrity": "sha1-vWedw/WYl7ajS7EHSchVu1OpOS8=",
       "dev": true,
       "requires": {
@@ -5935,7 +5935,7 @@
     },
     "http-proxy-middleware": {
       "version": "0.19.1",
-      "resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-0.19.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-0.19.1.tgz",
       "integrity": "sha1-GDx9xKoUeRUDBkmMIQza+WCApDo=",
       "dev": true,
       "requires": {
@@ -6144,13 +6144,13 @@
     },
     "ipaddr.js": {
       "version": "1.9.0",
-      "resolved": "https://registry.npm.taobao.org/ipaddr.js/download/ipaddr.js-1.9.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/ipaddr.js/download/ipaddr.js-1.9.0.tgz",
       "integrity": "sha1-N9905DCg5HVQ/lSi3v4w2KzZX2U=",
       "dev": true
     },
     "is-absolute-url": {
       "version": "2.1.0",
-      "resolved": "https://registry.npm.taobao.org/is-absolute-url/download/is-absolute-url-2.1.0.tgz?cache=0&sync_timestamp=1569736493122&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-absolute-url%2Fdownload%2Fis-absolute-url-2.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/is-absolute-url/download/is-absolute-url-2.1.0.tgz",
       "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
       "dev": true
     },
@@ -6197,7 +6197,7 @@
     },
     "is-buffer": {
       "version": "1.1.6",
-      "resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz?cache=0&sync_timestamp=1569905495687&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-buffer%2Fdownload%2Fis-buffer-1.1.6.tgz",
+      "resolved": "http://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz",
       "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=",
       "dev": true
     },
@@ -6422,7 +6422,7 @@
     },
     "isarray": {
       "version": "1.0.0",
-      "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz?cache=0&sync_timestamp=1562592096220&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fisarray%2Fdownload%2Fisarray-1.0.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz",
       "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
       "dev": true
     },
@@ -7038,7 +7038,7 @@
     },
     "memory-fs": {
       "version": "0.4.1",
-      "resolved": "https://registry.npm.taobao.org/memory-fs/download/memory-fs-0.4.1.tgz?cache=0&sync_timestamp=1570537491040&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmemory-fs%2Fdownload%2Fmemory-fs-0.4.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/memory-fs/download/memory-fs-0.4.1.tgz",
       "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
       "dev": true,
       "requires": {
@@ -7518,7 +7518,7 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnormalize-wheel%2Fdownload%2Fnormalize-wheel-1.0.1.tgz",
       "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
     },
     "npm-run-path": {
@@ -7792,7 +7792,7 @@
     },
     "p-limit": {
       "version": "1.3.0",
-      "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-1.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-1.3.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/p-limit/download/p-limit-1.3.0.tgz",
       "integrity": "sha1-uGvV8MJWkJEcdZD8v8IBDVSzzLg=",
       "dev": true,
       "requires": {
@@ -7905,7 +7905,7 @@
     },
     "pascalcase": {
       "version": "0.1.1",
-      "resolved": "https://registry.npm.taobao.org/pascalcase/download/pascalcase-0.1.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/pascalcase/download/pascalcase-0.1.1.tgz",
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
       "dev": true
     },
@@ -7953,7 +7953,7 @@
     },
     "path-to-regexp": {
       "version": "0.1.7",
-      "resolved": "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz?cache=0&sync_timestamp=1574278262588&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-0.1.7.tgz",
+      "resolved": "http://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz",
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
       "dev": true
     },
@@ -8581,7 +8581,7 @@
     },
     "postcss-value-parser": {
       "version": "3.3.1",
-      "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-3.3.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-3.3.1.tgz",
       "integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE=",
       "dev": true
     },
@@ -8825,13 +8825,13 @@
     },
     "qs": {
       "version": "6.5.2",
-      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
       "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
       "dev": true
     },
     "query-string": {
       "version": "4.3.4",
-      "resolved": "https://registry.npm.taobao.org/query-string/download/query-string-4.3.4.tgz?cache=0&sync_timestamp=1573620418700&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquery-string%2Fdownload%2Fquery-string-4.3.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/query-string/download/query-string-4.3.4.tgz",
       "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
       "dev": true,
       "requires": {
@@ -8937,7 +8937,7 @@
     },
     "readdirp": {
       "version": "2.2.1",
-      "resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-2.2.1.tgz?cache=0&sync_timestamp=1571011714883&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freaddirp%2Fdownload%2Freaddirp-2.2.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-2.2.1.tgz",
       "integrity": "sha1-DodiKjMlqjPokihcr4tOhGUppSU=",
       "dev": true,
       "requires": {
@@ -9285,12 +9285,12 @@
     },
     "safe-buffer": {
       "version": "5.1.2",
-      "resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1562377642757&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz",
+      "resolved": "http://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
       "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "https://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz?cache=0&sync_timestamp=1571687334026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-regex%2Fdownload%2Fsafe-regex-1.1.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "dev": true,
       "requires": {
@@ -9990,7 +9990,7 @@
     },
     "stream-http": {
       "version": "2.8.3",
-      "resolved": "https://registry.npm.taobao.org/stream-http/download/stream-http-2.8.3.tgz",
+      "resolved": "http://registry.npm.taobao.org/stream-http/download/stream-http-2.8.3.tgz",
       "integrity": "sha1-stJCRpKIpaJ+xP6JM6z2I95lFPw=",
       "dev": true,
       "requires": {
@@ -10448,7 +10448,7 @@
       "dependencies": {
         "commander": {
           "version": "2.19.0",
-          "resolved": "https://registry.npm.taobao.org/commander/download/commander-2.19.0.tgz?cache=0&sync_timestamp=1573464045808&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.19.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/commander/download/commander-2.19.0.tgz",
           "integrity": "sha1-9hmKqE5bg8RgVLlN3tv+1e6f8So=",
           "dev": true
         },
@@ -10849,7 +10849,7 @@
     },
     "wangeditor": {
       "version": "3.1.1",
-      "resolved": "http://registry.npm.taobao.org/wangeditor/download/wangeditor-3.1.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/wangeditor/download/wangeditor-3.1.1.tgz",
       "integrity": "sha1-+9PB1JdpI8nt67hbKdMLNVEq0Dk="
     },
     "watchpack": {
@@ -11499,9 +11499,9 @@
       }
     },
     "zrender": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.1.2.tgz",
-      "integrity": "sha1-g2je/yTH4jfLy9Oi/5MBeQWuQ/c="
+      "version": "4.3.2",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-4.3.2.tgz",
+      "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
     }
   }
 }
diff --git a/zyplayer-doc-ui/db-ui/package.json b/zyplayer-doc-ui/db-ui/package.json
index a7226d31..8e79ee5a 100644
--- a/zyplayer-doc-ui/db-ui/package.json
+++ b/zyplayer-doc-ui/db-ui/package.json
@@ -9,7 +9,7 @@
 	"dependencies": {
 		"axios": "^0.19.0",
 		"core-js": "^3.3.2",
-		"echarts": "^4.5.0",
+		"echarts": "^4.9.0",
 		"element-ui": "^2.15.0",
 		"js-cookie": "^2.2.1",
 		"pouchdb": "^7.1.1",
diff --git a/zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue b/zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue
index 226c2955..80ea3d9c 100644
--- a/zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue
+++ b/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
                 });
             },
         }
diff --git a/zyplayer-doc-ui/db-ui/src/views/table/Info.vue b/zyplayer-doc-ui/db-ui/src/views/table/Info.vue
index ef94644f..d26b24dc 100644
--- a/zyplayer-doc-ui/db-ui/src/views/table/Info.vue
+++ b/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;}
diff --git a/zyplayer-doc-ui/db-ui/src/views/table/TableRelation.vue b/zyplayer-doc-ui/db-ui/src/views/table/TableRelation.vue
new file mode 100644
index 00000000..433c1fc6
--- /dev/null
+++ b/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>