Merge pull request #5308 from dataease/pr@dev_st_fix

fix: 组件优化导致加载异常

frontend/src/components/canvas/components/editor/PreviewFullScreen.vue

@@ -17,9 +17,6 @@
 </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'

frontend/src/components/canvas/customComponent/DeVideo.vue

@@ -37,11 +37,8 @@
 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,

frontend/src/main.js

@@ -2,6 +2,8 @@ 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'
@@ -14,12 +16,16 @@ 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'
@@ -27,11 +33,15 @@ 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解决方法
@@ -41,13 +51,19 @@ 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)
 
@@ -73,6 +89,9 @@ 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)
@@ -81,12 +100,18 @@ 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

frontend/src/router/index.js

@@ -44,7 +44,7 @@ export const constantRoutes = [
   },
   {
     path: '/login',
-    component: () => import(/* webpackChunkName:"login" */'@/views/login/index'),
+    component: () => import('@/views/login/index'),
     hidden: true
   },
 
@@ -67,29 +67,29 @@ export const constantRoutes = [
     children: [
       {
         path: 'edit',
-        component: () => import(/* webpackChunkName:"panelEdit" */'@/views/panel/edit')
+        component: () => import('@/views/panel/edit')
       }
     ]
   },
   {
     path: '/delink',
-    component: () => import(/* webpackChunkName:"link" */'@/views/link'),
+    component: () => import('@/views/link'),
     hidden: true
   },
 
   {
     path: '/preview/:reportId',
-    component: () => import(/* webpackChunkName:"preview" */'@/components/canvas/components/editor/PreviewEject'),
+    component: () => import('@/components/canvas/components/editor/PreviewEject'),
     hidden: true
   },
   {
     path: '/previewScreenShot/:reportId/:backScreenShot',
-    component: () => import(/* webpackChunkName:"PreviewEject" */'@/components/canvas/components/editor/PreviewEject'),
+    component: () => import('@/components/canvas/components/editor/PreviewEject'),
     hidden: true
   },
   {
     path: '/previewFullScreen',
-    component: () => import(/* webpackChunkName:"previewFullScreen" */'@/components/canvas/components/editor/PreviewFullScreen'),
+    component: () => import('@/components/canvas/components/editor/PreviewFullScreen'),
     hidden: true
   },
   {

frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue

@@ -226,11 +226,9 @@
 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,

frontend/src/views/chart/components/table/TableNormal.vue

@@ -99,10 +99,9 @@ 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, UxGrid, UxTableColumn },
+  components: { DePagination },
   props: {
     chart: {
       type: Object,

frontend/src/views/chart/view/ChartEdit.vue

@@ -1758,7 +1758,6 @@ 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: {
@@ -1797,7 +1796,6 @@ export default {
     PluginCom,
     MapMapping,
     MarkMapDataEditor,
-    FuSplitPane
   },
   props: {
     param: {

frontend/src/views/chart/view/FuSplitPane.vue

@@ -1,237 +0,0 @@
-<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>

frontend/src/views/dataset/add/AddApi.vue

@@ -220,11 +220,9 @@ 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: {

frontend/src/views/dataset/add/AddCustom.vue

@@ -109,11 +109,10 @@ 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, UxGrid, UxTableColumn },
+  components: { DatasetCustomField, DatasetGroupSelector },
   props: {
     param: {
       type: Object,

frontend/src/views/dataset/add/AddDB.vue

@@ -228,11 +228,9 @@ 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: {

frontend/src/views/dataset/add/AddExcel.vue

@@ -239,7 +239,6 @@ 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
@@ -247,7 +246,6 @@ const RefreshTokenKey = Config.RefreshTokenKey
 export default {
   name: 'AddExcel',
   mixins: [msgCfm, cancelMix],
-  components: { UxGrid, UxTableColumn },
   props: {
     param: {
       type: Object,

frontend/src/views/dataset/add/union/UnionPreview.vue

@@ -23,11 +23,9 @@
 <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,

frontend/src/views/dataset/common/DatasetTableData.vue

@@ -57,11 +57,9 @@
 
 <script>
 import { post } from '@/api/dataset/dataset'
-import { UxGrid, UxTableColumn } from 'umy-ui'
 
 export default {
   name: 'DatasetTableData',
-  components: { UxGrid, UxTableColumn },
   props: {
     table: {
       type: Object,

frontend/src/views/dataset/data/TabDataPreview.vue

@@ -81,10 +81,8 @@
 
 <script>
 import _ from 'lodash'
-import { UxGrid, UxTableColumn } from 'umy-ui'
 export default {
   name: 'TabDataPreview',
-  components: { UxGrid, UxTableColumn },
   props: {
     table: {
       type: Object,

frontend/src/views/panel/edit/index.vue

@@ -536,12 +536,6 @@ 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: {

frontend/src/views/panel/filter/filterMain/FilterHead.vue

@@ -16,13 +16,20 @@
                 style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
                 @end="end2"
               >
-              <drag-item
+
-                  :key="item.id"
+                <v-flex
-                  :item="item"
-                  :index="index"
                   v-for="(item,index) in element.options.attrs.dragItems"
-                  @closeItem="closeItem"
+                  :key="item.id"
-                />
+                >
+                  <drag-item
+                    :key="item.id"
+                    :item="item"
+                    :index="index"
+
+                    @closeItem="closeItem"
+                  />
+                </v-flex>
+
                 <span solt="footer">{{ $t('panel.drag_here') }}</span>
               </draggable>
             </el-row>
@@ -127,20 +134,6 @@ 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;
-      }
     }
   }
 

frontend/src/views/panel/index.vue

@@ -19,9 +19,6 @@ 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',
   components: { DeMainContainer, DeContainer, PanelMain, PanelEdit },

frontend/src/views/panel/list/PanelViewShow.vue

@@ -377,9 +377,6 @@
   </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'

frontend/src/views/system/datasource/DsConfiguration.vue

@@ -796,13 +796,11 @@ 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: {

frontend/src/views/system/plugin/Dynamic.vue

@@ -47,18 +47,11 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import Fit2CloudUI from 'fit2cloud-ui'
 import DeLayoutContent from '@/components/business/DeLayoutContent'
 import AsyncComponent from '@/components/asyncComponent'
 import i18n from '@/lang'
 import bus from '@/utils/bus'
 import { execute } from '@/api/system/dynamic'
-import RemarkEditor from '@/views/chart/components/componentStyle/dialog/RemarkEditor'
-import DeRichText from '@/components/canvas/customComponent/DeRichText'
-Vue.component('DeRichText', DeRichText)
-Vue.component('RemarkEditor', RemarkEditor)
-Vue.use(Fit2CloudUI)
 
 export default {
   name: 'Dynamic',

frontend/vue.config.js

@@ -1,7 +1,6 @@
 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const pkg = require('./package.json')
 
@@ -57,7 +56,6 @@ module.exports = {
       chunkFilename: `js/[name].[contenthash:8].${pkg.version}.js`
     },
     plugins: [
-      // new BundleAnalyzerPlugin(),
       new CopyWebpackPlugin([
         {
           from: path.join(__dirname, 'static'),
@@ -77,18 +75,7 @@ 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,
@@ -124,9 +111,6 @@ module.exports = {
       .options({
         symbolId: '[name]'
       })
-      // 删除预加载  针对请求 删除预加载 数进行优化
-    config.plugins.delete('prefetch-index')
-    config.plugins.delete('preload-index')
   },
   css: {
     loaderOptions: {