From 846b33e66b8c98d75f32f488c3207606e9822da6 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Wed, 17 May 2023 17:24:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/PreviewFullScreen.vue   |   4 +-
 .../canvas/customComponent/DeVideo.vue        |   3 +
 frontend/src/main.js                          |  27 +-
 frontend/src/router/index.js                  |  12 +-
 .../componentStyle/TitleSelectorAntV.vue      |   2 +
 .../chart/components/table/TableNormal.vue    |   4 +-
 frontend/src/views/chart/view/ChartEdit.vue   |   5 +-
 frontend/src/views/chart/view/FuSplitPane.vue | 237 +++++++++++++
 frontend/src/views/dataset/add/AddApi.vue     |   2 +
 frontend/src/views/dataset/add/AddCustom.vue  |   3 +-
 frontend/src/views/dataset/add/AddDB.vue      |   2 +
 frontend/src/views/dataset/add/AddExcel.vue   |   2 +
 .../views/dataset/add/union/UnionPreview.vue  |   2 +
 .../views/dataset/common/DatasetTableData.vue |   2 +
 .../src/views/dataset/data/TabDataPreview.vue |   2 +
 frontend/src/views/panel/edit/index.vue       |   5 +
 .../panel/filter/filterMain/FilterHead.vue    |  33 +-
 frontend/src/views/panel/index.vue            |   2 +
 .../src/views/panel/list/PanelViewShow.vue    |   4 +
 .../views/system/datasource/DriverForm.vue    | 314 ------------------
 .../system/datasource/DsConfiguration.vue     |   4 +-
 frontend/vue.config.js                        |  18 +-
 22 files changed, 322 insertions(+), 367 deletions(-)
 create mode 100644 frontend/src/views/chart/view/FuSplitPane.vue
 delete mode 100644 frontend/src/views/system/datasource/DriverForm.vue

diff --git a/frontend/src/components/canvas/components/editor/PreviewFullScreen.vue b/frontend/src/components/canvas/components/editor/PreviewFullScreen.vue
index 15575b4d2c..d5810ae7c1 100644
--- a/frontend/src/components/canvas/components/editor/PreviewFullScreen.vue
+++ b/frontend/src/components/canvas/components/editor/PreviewFullScreen.vue
@@ -17,7 +17,9 @@
 </template>
 
 <script>
-
+import fullscreen from 'vue-fullscreen'
+import Vue from 'vue'
+Vue.use(fullscreen)
 import Preview from './Preview'
 import bus from '@/utils/bus'
 import { mapState } from 'vuex'
diff --git a/frontend/src/components/canvas/customComponent/DeVideo.vue b/frontend/src/components/canvas/customComponent/DeVideo.vue
index c741c3c423..1416d16b46 100644
--- a/frontend/src/components/canvas/customComponent/DeVideo.vue
+++ b/frontend/src/components/canvas/customComponent/DeVideo.vue
@@ -37,8 +37,11 @@
 import '@/custom-theme.css'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
+import { videoPlayer } from 'vue-video-player'
+import 'video.js/dist/video-js.css'
 
 export default {
+  components: { videoPlayer },
   props: {
     propValue: {
       type: String,
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 8081fd0d2b..93e3441a24 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -2,8 +2,6 @@ import Vue from 'vue'
 import Cookies from 'js-cookie'
 import '@/styles/index.scss' // global css
 import ElementUI from 'element-ui'
-import Vuetify from 'vuetify'
-import Fit2CloudUI from 'fit2cloud-ui'
 
 import i18n from './lang' // internationalization
 import App from './App'
@@ -16,16 +14,12 @@ import api from '@/api/index.js'
 import filter from '@/filter/filter'
 import directives from './directive'
 import VueClipboard from 'vue-clipboard2'
-import widgets from '@/components/widget'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import './utils/dialog'
 import DeComplexInput from '@/components/business/conditionTable/DeComplexInput'
 import DeComplexSelect from '@/components/business/conditionTable/DeComplexSelect'
 import DeViewSelect from '@/components/deViewSelect'
-import RemarkEditor from '@/views/chart/components/componentStyle/dialog/RemarkEditor'
-import TitleRemark from '@/views/chart/view/TitleRemark'
-import '@/components/canvas/customComponent' // 注册自定义组件
 import deBtn from '@/components/deCustomCm/DeBtn.vue'
 
 import '@/utils/DateUtil'
@@ -33,15 +27,11 @@ import draggable from 'vuedraggable'
 import deWebsocket from '@/websocket'
 import { GaodeMap } from '@antv/l7-maps'
 import * as echarts from 'echarts'
-import UmyUi from 'umy-ui'
 // 全屏插件
-import fullscreen from 'vue-fullscreen'
 import VueFriendlyIframe from 'vue-friendly-iframe'
 import vueToPdf from 'vue-to-pdf'
-import VueVideoPlayer from 'vue-video-player'
-import 'video.js/dist/video-js.css'
+
 // 控制标签宽高成比例的指令
-import proportion from 'vue-proportion-directive'
 
 import xss from 'xss'
 // 定义全局XSS解决方法
@@ -51,19 +41,13 @@ Object.defineProperty(Vue.prototype, '$xss', {
 
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
-Vue.use(widgets)
 Vue.component('Draggable', draggable)
 Vue.prototype.$api = api
 
 Vue.prototype.$echarts = echarts
 Vue.prototype.$gaodeMap = GaodeMap
 
-Vue.use(UmyUi)
-
-Vue.use(fullscreen)
-
 Vue.use(VueFriendlyIframe)
-Vue.use(Vuetify)
 // import TEditor from '@/components/Tinymce/index.vue'
 // Vue.component('TEditor', TEditor)
 
@@ -89,9 +73,6 @@ Vue.use(ElementUI, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
 })
-Vue.use(Fit2CloudUI, {
-  i18n: (key, value) => i18n.t(key, value)
-})
 // Vue.use(VueAxios, axios)
 Vue.use(filter)
 Vue.use(directives)
@@ -100,18 +81,12 @@ Vue.component('Treeselect', Treeselect)
 Vue.component('DeComplexInput', DeComplexInput)
 Vue.component('DeComplexSelect', DeComplexSelect)
 Vue.component('DeViewSelect', DeViewSelect)
-Vue.component('RemarkEditor', RemarkEditor)
-Vue.component('TitleRemark', TitleRemark)
 Vue.component('DeBtn', deBtn)
 
 Vue.config.productionTip = false
 
 Vue.use(vueToPdf)
 
-Vue.use(VueVideoPlayer)
-
-Vue.use(proportion)
-
 Vue.prototype.hasDataPermission = function(pTarget, pSource) {
   if (this.$store.state.user.user.isAdmin || pSource === 'ignore') {
     return true
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 757a70155e..c045473682 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -44,7 +44,7 @@ export const constantRoutes = [
   },
   {
     path: '/login',
-    component: () => import('@/views/login/index'),
+    component: () => import(/* webpackChunkName:"login" */'@/views/login/index'),
     hidden: true
   },
 
@@ -67,29 +67,29 @@ export const constantRoutes = [
     children: [
       {
         path: 'edit',
-        component: () => import('@/views/panel/edit')
+        component: () => import(/* webpackChunkName:"panelEdit" */'@/views/panel/edit')
       }
     ]
   },
   {
     path: '/delink',
-    component: () => import('@/views/link'),
+    component: () => import(/* webpackChunkName:"link" */'@/views/link'),
     hidden: true
   },
 
   {
     path: '/preview/:reportId',
-    component: () => import('@/components/canvas/components/editor/PreviewEject'),
+    component: () => import(/* webpackChunkName:"preview" */'@/components/canvas/components/editor/PreviewEject'),
     hidden: true
   },
   {
     path: '/previewScreenShot/:reportId/:backScreenShot',
-    component: () => import('@/components/canvas/components/editor/PreviewEject'),
+    component: () => import(/* webpackChunkName:"PreviewEject" */'@/components/canvas/components/editor/PreviewEject'),
     hidden: true
   },
   {
     path: '/previewFullScreen',
-    component: () => import('@/components/canvas/components/editor/PreviewFullScreen'),
+    component: () => import(/* webpackChunkName:"previewFullScreen" */'@/components/canvas/components/editor/PreviewFullScreen'),
     hidden: true
   },
   {
diff --git a/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue b/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
index df9de17c55..56f7f5da82 100644
--- a/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
@@ -226,9 +226,11 @@
 import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'
+import RemarkEditor from '@/views/chart/components/componentStyle/dialog/RemarkEditor'
 
 export default {
   name: 'TitleSelectorAntV',
+  components: { RemarkEditor },
   props: {
     param: {
       type: Object,
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index b29675456e..4ff3767c04 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -99,10 +99,10 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { DEFAULT_COLOR_CASE, DEFAULT_SCROLL, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import { mapState } from 'vuex'
 import DePagination from '@/components/deCustomCm/pagination.js'
-
+import { UxGrid, UxTableColumn } from 'umy-ui'
 export default {
   name: 'TableNormal',
-  components: { DePagination },
+  components: { DePagination, UxGrid, UxTableColumn },
   props: {
     chart: {
       type: Object,
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index ffc2c303ee..7be77c6793 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1763,7 +1763,7 @@ import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
 import { equalsAny, includesAny } from '@/utils/StringUtils'
 import PositionAdjust from '@/views/chart/view/PositionAdjust'
 import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
-
+import FuSplitPane from './FuSplitPane.vue'
 export default {
   name: 'ChartEdit',
   components: {
@@ -1801,7 +1801,8 @@ export default {
     DrillPath,
     PluginCom,
     MapMapping,
-    MarkMapDataEditor
+    MarkMapDataEditor,
+    FuSplitPane
   },
   props: {
     param: {
diff --git a/frontend/src/views/chart/view/FuSplitPane.vue b/frontend/src/views/chart/view/FuSplitPane.vue
new file mode 100644
index 0000000000..e8a747a30d
--- /dev/null
+++ b/frontend/src/views/chart/view/FuSplitPane.vue
@@ -0,0 +1,237 @@
+<template>
+  <div :style="{ cursor, userSelect }" class="fu-split-pane" ref="outerWrapper">
+    <div
+      :class="[`is-${direction}`, 'fu-split-pane__left']"
+      :style="{
+        [attr]: isReverse ? valueAnother : `${value}px`,
+        'padding-right': padding,
+      }"
+    >
+      <slot :name="isHorizontal ? 'left' : 'top'"></slot>
+    </div>
+    <div
+      :class="resizerClasses"
+      :style="{ [resizerAttr]: `${value}px`, ...resizerStyle }"
+      @mousedown="onMouseDown"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+    >
+      <div class="icon" v-if="resizerType === 'resizer'">
+        <slot name="resizer">
+          <i class="el-icon-more"></i>
+        </slot>
+      </div>
+    </div>
+    <div
+      :class="[`is-${direction}`, 'fu-split-pane__right']"
+      :style="{
+        [attr]: isReverse ? `${value}px` : valueAnother,
+        'padding-left': padding,
+      }"
+    >
+      <slot :name="isHorizontal ? 'right' : 'bottom'"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FuSplitPane",
+  props: {
+    min: {
+      type: [Number, String],
+      default: "10px",
+    },
+    left: [Number, String],
+    right: [Number, String],
+    top: [Number, String],
+    bottom: [Number, String],
+    direction: {
+      validator: (val) => ["vertical", "horizontal"].includes(val),
+      default: "horizontal",
+    },
+    localKey: String,
+    resizable: {
+      type: Boolean,
+      default: true,
+    },
+    resizerType: {
+      validator: (val) => ["resizer", "line"].includes(val),
+      default: "resizer",
+    },
+    resizerClass: String,
+    resizerStyle: Object,
+    resizerHoverClass: String,
+  },
+  watch: {
+    left: {
+      immediate: true,
+      handler: function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          this.$nextTick(() => {
+            this.value = this.defaultValue;
+          });
+        }
+      },
+    },
+    bottom: {
+      immediate: true,
+      handler: function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          this.$nextTick(() => {
+            this.value = this.defaultValue;
+          });
+        }
+      },
+    },
+  },
+  computed: {
+    isReverse() {
+      return this.right || this.bottom;
+    },
+    isHorizontal() {
+      return this.direction === "horizontal";
+    },
+    userSelect() {
+      return this.active ? "none" : "";
+    },
+    cursor() {
+      return this.active && this.resizable
+        ? this.isHorizontal
+          ? "col-resize"
+          : "row-resize"
+        : "";
+    },
+    outerWrapperSize() {
+      return this.$refs.outerWrapper[this.offsetSize];
+    },
+    offsetSize() {
+      return this.isHorizontal ? "offsetWidth" : "offsetHeight";
+    },
+    defaultValue() {
+      if (this.isHorizontal) {
+        return this.left
+          ? this.getMin(this.percentToValue(this.left))
+          : (this.right && this.getMin(this.percentToValue(this.right))) ||
+              this.outerWrapperSize / 2;
+      } else {
+        return this.top
+          ? this.getMin(this.percentToValue(this.top))
+          : (this.bottom && this.getMin(this.percentToValue(this.bottom))) ||
+              this.outerWrapperSize / 2;
+      }
+    },
+    valueAnother() {
+      return `calc(100% - ${this.value}px)`;
+    },
+    attr() {
+      return this.isHorizontal ? "width" : "height";
+    },
+    resizerAttr() {
+      return this.isHorizontal
+        ? this.isReverse
+          ? "right"
+          : "left"
+        : this.isReverse
+        ? "bottom"
+        : "top";
+    },
+    saveKey({ localKey }) {
+      return "Fu-SP-" + localKey;
+    },
+    resizerClasses() {
+      const classes = [
+        `fu-split-pane__${this.resizerType}`,
+        `is-${this.direction}`,
+        this.resizable && "is-resizable",
+        this.resizerClass,
+        this.hover && (this.resizerHoverClass || "hover"),
+      ];
+      return classes;
+    },
+    padding() {
+      return this.resizerType === "resizer" && "3px";
+    },
+  },
+  data() {
+    return {
+      active: false,
+      value: 0,
+      oldValue: 0,
+      initOffset: 0,
+      hover: false,
+    };
+  },
+  mounted() {
+    this.readValue();
+  },
+  methods: {
+    onMouseDown(e) {
+      this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
+      this.oldValue = this.value;
+      this.active = true;
+      document.addEventListener("mousemove", this.onMouseMove);
+      document.addEventListener("mouseup", this.onMouseUp);
+    },
+    onMouseUp() {
+      this.active = false;
+      document.removeEventListener("mousemove", this.onMouseMove);
+      document.removeEventListener("mouseup", this.onMouseUp);
+      this.$emit("changeSplit", this.value);
+    },
+    onMouseMove(e) {
+      if (!this.resizable) return;
+      if (this.active) {
+        const currentPage = this.isHorizontal ? e.pageX : e.pageY;
+        const offset = currentPage - this.initOffset;
+        const value = this.isReverse
+          ? this.oldValue - offset
+          : this.oldValue + offset;
+        if (
+          value > this.percentToValue(this.min) &&
+          value < this.outerWrapperSize - this.percentToValue(this.min)
+        ) {
+          this.value = value;
+          this.writeValue();
+        }
+      }
+    },
+    // 百分比换算成像素
+    percentToValue(val) {
+      const size = this.$refs.outerWrapper[this.offsetSize];
+      if (typeof val === "string" && val.includes("%")) {
+        return (parseInt(val) / 100) * size;
+      } else {
+        return parseInt(val);
+      }
+    },
+    // 是否取最小值
+    getMin(val) {
+      return val < this.percentToValue(this.min)
+        ? this.percentToValue(this.min)
+        : val;
+    },
+    // localStorage储存数值
+    writeValue() {
+      const obj = {
+        [this.resizerAttr]: this.value,
+      };
+      if (this.localKey) {
+        localStorage.setItem(this.saveKey, JSON.stringify(obj));
+      }
+    },
+    readValue() {
+      if (this.localKey) {
+        const local = localStorage.getItem(this.saveKey);
+        if (local && local[this.resizerAttr]) {
+          this.value = parseInt(local) || this.defaultValue;
+        } else {
+          this.value = this.defaultValue;
+        }
+      } else {
+        this.value = this.defaultValue;
+      }
+    },
+  },
+};
+</script>
diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue
index 0b90528090..a73d380f57 100644
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -220,9 +220,11 @@ import cancelMix from './cancelMix'
 import msgCfm from '@/components/msgCfm/index'
 import { pySort } from './util'
 import { updateCacheTree } from '@/components/canvas/utils/utils'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 
 export default {
   name: 'AddApi',
+  components: { UxGrid, UxTableColumn },
   mixins: [cancelMix, msgCfm],
   props: {
     param: {
diff --git a/frontend/src/views/dataset/add/AddCustom.vue b/frontend/src/views/dataset/add/AddCustom.vue
index e336ce4bb0..1ac9440c46 100644
--- a/frontend/src/views/dataset/add/AddCustom.vue
+++ b/frontend/src/views/dataset/add/AddCustom.vue
@@ -109,10 +109,11 @@ import { getTable, post } from '@/api/dataset/dataset'
 import DatasetGroupSelector from '../common/DatasetGroupSelector'
 import DatasetCustomField from '../common/DatasetCustomField'
 import { updateCacheTree } from '@/components/canvas/utils/utils'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 
 export default {
   name: 'AddCustom',
-  components: { DatasetCustomField, DatasetGroupSelector },
+  components: { DatasetCustomField, DatasetGroupSelector, UxGrid, UxTableColumn },
   props: {
     param: {
       type: Object,
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index d7ef3e36e3..292a0394d7 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -228,9 +228,11 @@ import cancelMix from './cancelMix'
 
 import { pySort } from './util'
 import { updateCacheTree } from '@/components/canvas/utils/utils'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 
 export default {
   name: 'AddDB',
+  components: { UxGrid, UxTableColumn },
   mixins: [msgCfm, cancelMix],
   props: {
     param: {
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 66aee823ff..88db7412ec 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -239,6 +239,7 @@ import msgCfm from '@/components/msgCfm/index'
 import cancelMix from './cancelMix'
 import Config from "@/settings";
 import { updateCacheTree } from '@/components/canvas/utils/utils'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 
 const token = getToken()
 const RefreshTokenKey = Config.RefreshTokenKey
@@ -246,6 +247,7 @@ const RefreshTokenKey = Config.RefreshTokenKey
 export default {
   name: 'AddExcel',
   mixins: [msgCfm, cancelMix],
+  components: { UxGrid, UxTableColumn },
   props: {
     param: {
       type: Object,
diff --git a/frontend/src/views/dataset/add/union/UnionPreview.vue b/frontend/src/views/dataset/add/union/UnionPreview.vue
index 058f1040c3..d48578c83a 100644
--- a/frontend/src/views/dataset/add/union/UnionPreview.vue
+++ b/frontend/src/views/dataset/add/union/UnionPreview.vue
@@ -23,9 +23,11 @@
 <script>
 import { post } from '@/api/dataset/dataset'
 import _ from 'lodash'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 
 export default {
   name: 'UnionPreview',
+  components: { UxGrid, UxTableColumn },
   props: {
     table: {
       type: Object,
diff --git a/frontend/src/views/dataset/common/DatasetTableData.vue b/frontend/src/views/dataset/common/DatasetTableData.vue
index ecdf741a7b..fdbe74880b 100644
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@@ -57,9 +57,11 @@
 
 <script>
 import { post } from '@/api/dataset/dataset'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 
 export default {
   name: 'DatasetTableData',
+  components: { UxGrid, UxTableColumn },
   props: {
     table: {
       type: Object,
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 38e487b89f..9018616506 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -81,8 +81,10 @@
 
 <script>
 import _ from 'lodash'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 export default {
   name: 'TabDataPreview',
+  components: { UxGrid, UxTableColumn },
   props: {
     table: {
       type: Object,
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 3a12ce4475..b8932e26c7 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -536,7 +536,12 @@ import TextAttr from '@/components/canvas/components/TextAttr'
 import { userLoginInfo } from '@/api/systemInfo/userLogin'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
 import PositionAdjust from '@/views/chart/view/PositionAdjust'
+import fullscreen from 'vue-fullscreen'
+import proportion from 'vue-proportion-directive'
+import Vue from 'vue'
+Vue.use(proportion)
 
+Vue.use(fullscreen)
 export default {
   name: 'PanelEdit',
   components: {
diff --git a/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
index 8be3861cfb..8c2f673aa4 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -16,20 +16,13 @@
                 style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
                 @end="end2"
               >
-
-                <v-flex
-                  v-for="(item,index) in element.options.attrs.dragItems"
+              <drag-item
                   :key="item.id"
-                >
-                  <drag-item
-                    :key="item.id"
-                    :item="item"
-                    :index="index"
-
-                    @closeItem="closeItem"
-                  />
-                </v-flex>
-
+                  :item="item"
+                  :index="index"
+                  v-for="(item,index) in element.options.attrs.dragItems"
+                  @closeItem="closeItem"
+                />
                 <span solt="footer">{{ $t('panel.drag_here') }}</span>
               </draggable>
             </el-row>
@@ -134,6 +127,20 @@ export default {
       padding: 4px 0 0 0;
       height: 100%;
       line-height: 100%;
+      .v-flex {
+        font-variant: tabular-nums;
+        font-feature-settings: "tnum";
+        text-rendering: optimizeLegibility;
+        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, FangSong, SimHei, STHeiti, STKaiti, STSong, STFangsong sans-serif;
+        font-size: 14px;
+        word-break: break-all;
+        white-space: nowrap;
+        color: #9ea6b2;
+        line-height: 100%;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
     }
   }
 
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 134e3453e3..6593016628 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -19,6 +19,8 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import PanelMain from '@/views/panel/list/PanelMain'
 import PanelEdit from '@/views/panel/edit'
+import '@/components/canvas/customComponent' // 注册自定义组件
+import '@/components/widget'
 
 export default {
   name: 'Panel',
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 85eee9d883..5e532e5080 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -368,6 +368,9 @@
   </el-row>
 </template>
 <script>
+import Vue from 'vue'
+import fullscreen from 'vue-fullscreen'
+Vue.use(fullscreen)
 import PDFPreExport from '@/views/panel/export/PDFPreExport'
 import Preview from '@/components/canvas/components/editor/Preview'
 import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
@@ -388,6 +391,7 @@ import AppExportForm from '@/views/panel/list/AppExportForm'
 import GrantAuth from '../grantAuth'
 import msgCfm from '@/components/msgCfm/index'
 import { inOtherPlatform } from '@/utils/index'
+
 export default {
   name: 'PanelViewShow',
   components: { AppExportForm, PanelDetailInfo, Preview, SaveToTemplate, PDFPreExport, ShareHead, GrantAuth },
diff --git a/frontend/src/views/system/datasource/DriverForm.vue b/frontend/src/views/system/datasource/DriverForm.vue
deleted file mode 100644
index 22f1e2dd19..0000000000
--- a/frontend/src/views/system/datasource/DriverForm.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-  <layout-content>
-    <template #header>
-      <el-icon
-        name="back"
-        class="back-button"
-        @click.native="backToList"
-      />
-      {{
-        params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('driver.show_info') : $t('driver.modify')
-      }}
-      <el-button
-        v-if="canEdit"
-        size="mini"
-        style="float: right;"
-        type="primary"
-        @click="save"
-      >{{ $t('commons.save') }}
-      </el-button>
-      <el-button
-        v-else
-        size="mini"
-        style="float: right;"
-        type="primary"
-        @click="changeEdit"
-      >{{ $t('commons.edit') }}
-      </el-button>
-
-    </template>
-    <div>
-
-      <el-form
-        ref="driverForm"
-        :model="driverForm"
-        :rules="rule"
-        size="small"
-        :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"
-        label-width="180px"
-        label-position="right"
-      >
-        <el-form-item
-          :label="$t('commons.name')"
-          prop="name"
-        >
-          <el-input
-            v-model="driverForm.name"
-            autocomplete="off"
-          />
-        </el-form-item>
-        <el-form-item :label="$t('commons.description')">
-          <el-input
-            v-model="driverForm.desc"
-            autocomplete="off"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$t('datasource.type')"
-          prop="type"
-        >
-          <el-select
-            v-model="driverForm.type"
-            :placeholder="$t('datasource.please_choose_type')"
-            class="select-width"
-            style="width: 100%"
-            disabled
-            filterable
-          >
-            <el-option
-              v-for="item in dsTypes"
-              :key="item.type"
-              :label="item.name"
-              :value="item.type"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item
-          :label="$t('driver.driver')"
-          prop="driverClass"
-        >
-          <el-input
-            v-model="driverForm.driverClass"
-            autocomplete="off"
-          />
-        </el-form-item>
-
-      </el-form>
-
-      <el-upload
-        :action="baseUrl+'driver/file/upload'"
-        :multiple="true"
-        :show-file-list="false"
-        :file-list="fileList"
-        :data="params"
-        accept=".jar"
-        :before-upload="beforeUpload"
-        :on-success="uploadSuccess"
-        :on-error="uploadFail"
-        name="file"
-        :headers="headers"
-        style="float: right;"
-      >
-        <el-button
-          size="mini"
-          type="primary"
-          style="float: right;"
-          :disabled="uploading"
-        >
-          <span
-            v-if="!uploading"
-            style="font-size: 12px;"
-          >{{ $t('dataset.upload_file') }}</span>
-          <span
-            v-if="uploading"
-            style="font-size: 12px;"
-          ><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
-        </el-button>
-      </el-upload>
-      <fu-table :data="driverFiles">
-        <el-table-column
-          prop="fileName"
-          :label="$t('driver.file_name')"
-        />
-        <fu-table-operations
-          :buttons="buttons"
-          :label="$t('commons.operating')"
-          fix
-        />
-      </fu-table>
-
-    </div>
-  </layout-content>
-</template>
-
-<script>
-import LayoutContent from '@/components/business/LayoutContent'
-import i18n from '@/lang/index'
-import { deleteDriverFile, listDriverDetails, updateDriver } from '@/api/system/datasource'
-import { $alert } from '@/utils/message'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
-
-const token = getToken()
-
-export default {
-  name: 'DriverForm',
-  components: {
-    LayoutContent
-  },
-  props: {
-    params: {
-      type: Object,
-      default: null
-    },
-    tData: {
-      type: Array,
-      default: null
-    },
-    dsTypes: {
-      type: Array,
-      default: null
-    }
-  },
-  data() {
-    return {
-      disabled: false,
-      driverForm: {
-        id: '',
-        name: '',
-        desc: '',
-        type: '',
-        driverClass: ''
-      },
-      datasourceType: {},
-      driverClassList: [],
-      rule: {
-        name: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
-          { min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
-        desc: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
-          { min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
-        type: [{ required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur' }],
-        driverClass: [{ required: true, message: i18n.t('driver.please_set_driverClass'), trigger: 'blur' }]
-      },
-      canEdit: false,
-      driverFiles: [],
-      btnDisabled: false,
-      buttons: [
-        {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.deleteDriverFile,
-          disabled: this.btnDisabled
-        }
-      ],
-      uploading: false,
-      baseUrl: process.env.VUE_APP_BASE_API,
-      headers: { Authorization: token, 'Accept-Language': i18n.locale.replace('_', '-') },
-      fileList: []
-    }
-  },
-
-  created() {
-    const row = this.params
-    this.driverForm = JSON.parse(JSON.stringify(row))
-    this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
-    this.listDriverDetails()
-  },
-  methods: {
-    beforeUpload(file) {
-      this.uploading = true
-    },
-    uploadSuccess(response, file, fileList) {
-      this.uploading = false
-      this.listDriverDetails()
-    },
-    uploadFail(response, file, fileList) {
-      let myError = response.toString()
-      myError = myError.replace('Error: ', '')
-      if (myError.indexOf('AuthenticationException') >= 0) {
-        const message = i18n.t('login.tokenError')
-        $alert(message, () => {
-          store.dispatch('user/logout').then(() => {
-            location.reload()
-          })
-        }, {
-          confirmButtonText: i18n.t('login.re_login'),
-          showClose: false
-        })
-        return
-      }
-      const errorMessage = JSON.parse(myError).message
-      this.uploading = false
-      this.$message({
-        type: 'error',
-        message: errorMessage,
-        showClose: true
-      })
-    },
-    deleteDriverFile(row) {
-      deleteDriverFile(row).then(res => {
-        this.$success(this.$t('commons.delete_success'))
-        this.listDriverDetails()
-      })
-    },
-    listDriverDetails() {
-      listDriverDetails(this.driverForm.id).then(res => {
-        this.driverFiles = res.data
-        this.driverClassList = []
-        this.driverFiles.forEach(driverFile => {
-          this.driverClassList = this.driverClassList.concat(driverFile.driverClass.split(','))
-        })
-      })
-    },
-    changeEdit() {
-      this.canEdit = true
-      this.formType = 'modify'
-      this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
-    },
-    save() {
-      this.$refs.driverForm.validate(valid => {
-        if (!valid) {
-          return false
-        }
-        updateDriver(this.driverForm).then(res => {
-          this.$success(i18n.t('commons.success'))
-          this.canEdit = false
-        })
-      })
-    },
-    reset() {
-      this.$refs.dsForm.resetFields()
-    },
-    backToList() {
-      this.$emit('switch-component', {})
-    },
-    refreshType(form) {
-      this.$emit('refresh-type', form)
-    }
-  }
-}
-</script>
-<style scoped>
-.ms-http-input {
-  width: 500px;
-  margin-top: 5px;
-}
-
-.tip {
-  padding: 3px 5px;
-  font-size: 16px;
-  border-radius: 0;
-  border-left: 4px solid #409EFF;
-  margin: 5px 5px 10px 5px;
-}
-
-.el-select ::v-deep input {
-  padding-right: 10px;
-}
-
-.el-select ::v-deep .el-input__suffix {
-  right: 0;
-}
-
-.dialog-css ::v-deep .el-dialog__header {
-  padding: 10px 20px 0px;
-}
-
-.dialog-css ::v-deep .el-dialog__body {
-  padding: 10px 20px 10px;
-}
-
-.dialog-footer ::v-deep .el-dialog__footer {
-  padding: 10px 10px 10px;
-}
-
-</style>
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index abbc54dd32..ac622af32f 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -795,11 +795,13 @@ import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
 import dePwd from '@/components/deCustomCm/DePwd.vue'
 import msgCfm from '@/components/msgCfm'
 import { Base64 } from 'js-base64'
+import { UxGrid, UxTableColumn } from 'umy-ui'
 export default {
   name: 'DsConfiguration',
   components: {
     ApiHttpRequestForm,
-    dePwd
+    dePwd,
+    UxGrid, UxTableColumn
   },
   mixins: [msgCfm],
   props: {
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index f5298600b0..490d82fb23 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -1,6 +1,7 @@
 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const pkg = require('./package.json')
 
@@ -56,6 +57,7 @@ module.exports = {
       chunkFilename: `js/[name].[contenthash:8].${pkg.version}.js`
     },
     plugins: [
+      // new BundleAnalyzerPlugin(),
       new CopyWebpackPlugin([
         {
           from: path.join(__dirname, 'static'),
@@ -75,7 +77,18 @@ module.exports = {
         // dll最终输出的目录
         outputPath: './vendor'
       })
-    ]
+    ],
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          brace: {
+            name: 'chunk-brace',
+            priority: 20,
+            test: /[\\/]node_modules[\\/]brace/
+          }
+        }
+      },
+    },
   },
   chainWebpack: config => {
     config.module.rules.delete('svg') // 删除默认配置中处理svg,
@@ -111,6 +124,9 @@ module.exports = {
       .options({
         symbolId: '[name]'
       })
+      // 删除预加载  针对请求 删除预加载 数进行优化
+    config.plugins.delete('prefetch-index')
+    config.plugins.delete('preload-index')
   },
   css: {
     loaderOptions: {