Merge pull request #3658 from dataease/pr@dev@feat_new-app

refactor: 文件命名标准化

frontend/src/components/business/DeLayoutContent.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import BackButton from '@/components/back-button'
+import BackButton from '@/components/backButton'
 
 export default {
   name: 'DeLayoutContent',
@@ -57,13 +57,14 @@ export default {
   border-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
   box-sizing: border-box;
-  background-color: var(--MainBG,#f5f6f7);
+  background-color: var(--MainBG, #f5f6f7);
   overflow: hidden;
   padding: 24px 24px 24px 24px;
   height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
+
   .route-title {
     font-family: PingFang SC;
     font-size: 20px;
@@ -74,6 +75,7 @@ export default {
     width: 100%;
     margin: 0;
   }
+
   .container-wrapper {
     width: 100%;
     overflow: auto;

frontend/src/components/business/LayoutContent.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import BackButton from '@/components/back-button'
+import BackButton from '@/components/backButton'
 
 export default {
   name: 'LayoutContent',

frontend/src/components/canvas/DeCanvas.vue

@@ -93,16 +93,18 @@
 
 <script>
 import { mapState } from 'vuex'
-import DeEditor from '@/components/canvas/components/Editor/DeEditor'
+import DeEditor from '@/components/canvas/components/editor/DeEditor'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import bus from '@/utils/bus'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 import componentList, {
   BASE_MOBILE_STYLE,
-  COMMON_BACKGROUND, commonAttr,
-  HYPERLINKS, PIC_STYLE
-} from '@/components/canvas/custom-component/component-list'
+  COMMON_BACKGROUND,
+  commonAttr,
+  HYPERLINKS,
+  PIC_STYLE
+} from '@/components/canvas/customComponent/component-list'
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { chartCopy } from '@/api/chart/chart'
 import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
@@ -582,6 +584,7 @@ export default {
   overflow-y: auto;
   background-size: 100% 100% !important;
 }
+
 .min-width-730 {
   min-width: 730px !important;
 }

frontend/src/components/canvas/components/AttrListExtend.vue

@@ -85,9 +85,10 @@
 </template>
 
 <script>
-import VText from '@/components/canvas/custom-component/VText'
-import RectShape from '@/components/canvas/custom-component/RectShape'
+import VText from '@/components/canvas/customComponent/VText'
+import RectShape from '@/components/canvas/customComponent/RectShape'
 import { getStyle } from '@/components/canvas/utils/style'
+
 export default {
   components: { VText, RectShape },
   data() {
@@ -194,10 +195,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 5px;
-    padding-top: 0;
-    height: 100%;
-  }
+.attr-list {
+  overflow: auto;
+  padding: 5px;
+  padding-top: 0;
+  height: 100%;
+}
 </style>

frontend/src/components/canvas/components/ComponentList.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import componentList from '@/components/canvas/custom-component/component-list'
+import componentList from '@/components/canvas/customComponent/component-list'
 
 export default {
   data() {

frontend/src/components/canvas/components/TextAttr.vue

@@ -24,7 +24,7 @@
           >
             <el-tooltip :content="item.tooltip">
               <span style="float: left;">
-                <i :class="item.icon" />
+                <i :class="item.icon"/>
               </span>
             </el-tooltip>
           </el-radio-button>
@@ -47,7 +47,7 @@
               :value="item.value"
             >
               <span style="float: left;">
-                <i :class="item.icon" />
+                <i :class="item.icon"/>
               </span>
               <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
             </el-option>
@@ -233,7 +233,7 @@
               @click="goColor"
             />
           </el-tooltip>
-          <div :style="letterDivColor" />
+          <div :style="letterDivColor"/>
           <el-color-picker
             ref="colorPicker"
             v-model="styleInfo.color"
@@ -255,7 +255,7 @@
               @click="goBoardColor"
             />
           </el-tooltip>
-          <div :style="boardDivColor" />
+          <div :style="boardDivColor"/>
           <el-color-picker
             ref="boardColorPicker"
             v-model="styleInfo.borderColor"
@@ -278,7 +278,7 @@
               @click="goBackgroundColor"
             />
           </el-tooltip>
-          <div :style="backgroundDivColor" />
+          <div :style="backgroundDivColor"/>
           <el-color-picker
             ref="backgroundColorPicker"
             v-model="styleInfo.backgroundColor"
@@ -294,7 +294,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.video_info')">
-          <VideoLinks :link-info="curComponent.videoLinks" />
+          <VideoLinks :link-info="curComponent.videoLinks"/>
         </el-tooltip>
       </div>
 
@@ -303,7 +303,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.stream_media_info')">
-          <StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
+          <StreamMediaLinks :link-info="curComponent.streamMediaLinks"/>
         </el-tooltip>
       </div>
 
@@ -312,7 +312,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.web_addr')">
-          <FrameLinks :link-info="curComponent.frameLinks" />
+          <FrameLinks :link-info="curComponent.frameLinks"/>
         </el-tooltip>
       </div>
       <div
@@ -332,7 +332,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
       >
         <el-tooltip :content="$t('panel.tab_inner_style')">
-          <tab-style :style-info="styleInfo" />
+          <tab-style :style-info="styleInfo"/>
         </el-tooltip>
       </div>
 
@@ -410,12 +410,12 @@
 
 <script>
 import { mapState } from 'vuex'
-import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
-import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaLinks'
-import DateFormat from '@/components/canvas/components/Editor/DateFormat'
+import VideoLinks from '@/components/canvas/components/editor/VideoLinks'
+import StreamMediaLinks from '@/components/canvas/components/editor/StreamMediaLinks'
+import DateFormat from '@/components/canvas/components/editor/DateFormat'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
-import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
-import TitlePosition from '@/components/widget/DeWidget/TitlePosition'
+import FrameLinks from '@/components/canvas/components/editor/FrameLinks'
+import TitlePosition from '@/components/widget/deWidget/TitlePosition'
 
 export default {
   components: { TitlePosition, FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },

frontend/src/components/canvas/components/Toolbar.vue

@@ -194,11 +194,13 @@
           style="float: left"
           size="mini"
           @click="closeNotSave()"
-        >{{ $t('panel.do_not_save') }}</el-button>
+        >{{ $t('panel.do_not_save') }}
+        </el-button>
         <el-button
           size="mini"
           @click="closePanelVisible=false"
-        >{{ $t('panel.cancel') }}</el-button>
+        >{{ $t('panel.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
@@ -214,11 +216,11 @@
 import generateID from '@/components/canvas/utils/generateID'
 import toast from '@/components/canvas/utils/toast'
 import { mapState } from 'vuex'
-import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
+import { commonAttr, commonStyle } from '@/components/canvas/customComponent/component-list'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
-import { panelUpdate, saveCache, removePanelCache } from '@/api/panel/panel'
-import { saveLinkage, getPanelAllLinkageInfo } from '@/api/panel/linkage'
+import { panelUpdate, removePanelCache, saveCache } from '@/api/panel/panel'
+import { getPanelAllLinkageInfo, saveLinkage } from '@/api/panel/linkage'
 import bus from '@/utils/bus'
 import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 
@@ -821,11 +823,11 @@ export default {
 }
 
 .icon16_only {
-  font-size: 16px!important;
+  font-size: 16px !important;
 }
 
 .icon16 {
-  font-size: 16px!important;
+  font-size: 16px !important;
   color: var(--TextPrimary, #1F2329);
 }
 
@@ -842,9 +844,11 @@ export default {
   line-height: 22px;
   color: var(--TextPrimary, #1F2329);
 }
+
 .margin-left52 {
   margin-left: 52px !important;
 }
+
 .margin-left12 {
   margin-left: 12px !important;
 }
@@ -852,11 +856,12 @@ export default {
 .el-divider--vertical {
   margin: 0 20px 0 20px
 }
-.el-dropdown-menu__item{
+
+.el-dropdown-menu__item {
   line-height: 32px;
 }
 
-::v-deep .el-radio-button__inner{
-padding:7px 7px
+::v-deep .el-radio-button__inner {
+  padding: 7px 7px
 }
 </style>

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

@@ -76,9 +76,9 @@ import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'
 import { mapState } from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
-import EditBar from '@/components/canvas/components/Editor/EditBar'
-import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
-import CloseBar from '@/components/canvas/components/Editor/CloseBar'
+import EditBar from '@/components/canvas/components/editor/EditBar'
+import MobileCheckBar from '@/components/canvas/components/editor/MobileCheckBar'
+import CloseBar from '@/components/canvas/components/editor/CloseBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
@@ -311,36 +311,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .component {
-    position: absolute;
-  }
+.component {
+  position: absolute;
+}
 
-  .component:hover {
-    box-shadow: 0px 0px 3px #0a7be0;
-  }
+.component:hover {
+  box-shadow: 0px 0px 3px #0a7be0;
+}
 
-  .gap_class {
-    padding: 5px;
-  }
+.gap_class {
+  padding: 5px;
+}
 
-  .component-custom {
-    outline: none;
-    width: 100% !important;
-    height: 100%;
-  }
-  .main_view{
-    position: relative;
-    background-size: 100% 100%!important;
-  }
-  .component{
-    //position: relative;
-  }
+.component-custom {
+  outline: none;
+  width: 100% !important;
+  height: 100%;
+}
 
-  .svg-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+.main_view {
+  position: relative;
+  background-size: 100% 100% !important;
+}
+
+.component {
+  //position: relative;
+}
+
+.svg-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>

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

@@ -120,7 +120,7 @@
       :canvas-id="canvasId"
     />
     <!-- 右击菜单 -->
-    <ContextMenu />
+    <ContextMenu/>
 
     <!-- 对齐标线 -->
     <span
@@ -146,10 +146,10 @@
 <script>
 import { mapState } from 'vuex'
 import Shape from './Shape'
-import DeDrag from '@/components/DeDrag'
+import DeDrag from '@/components/deDrag'
 
 // eslint-disable-next-line no-unused-vars
-import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
+import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
 import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
@@ -158,9 +158,9 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import PGrid from './PGrid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
+import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
-import DragShadow from '@/components/DeDrag/shadow'
+import DragShadow from '@/components/deDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
 import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
@@ -168,7 +168,7 @@ import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMat
 import _ from 'lodash'
 import _jq from 'jquery'
 import Background from '@/views/background/index'
-import PointShadow from '@/components/DeDrag/pointShadow'
+import PointShadow from '@/components/deDrag/pointShadow'
 
 // let positionBox = []
 // let coordinates = [] // 坐标点集合
@@ -1790,7 +1790,6 @@ export default {
 }
 
 .edit {
-  /*outline: 1px solid gainsboro;*/
   .component {
     outline: none;
     width: 100%;

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

@@ -179,10 +179,10 @@
 <script>
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
-import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
-import LinkageField from '@/components/canvas/components/Editor/LinkageField'
+import SettingMenu from '@/components/canvas/components/editor/SettingMenu'
+import LinkageField from '@/components/canvas/components/editor/LinkageField'
 import toast from '@/components/canvas/utils/toast'
-import FieldsList from '@/components/canvas/components/Editor/fieldsList'
+import FieldsList from '@/components/canvas/components/editor/fieldsList'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
 import Background from '@/views/background/index'
 
@@ -200,7 +200,8 @@ export default {
     },
     sourceElement: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     element: {
       type: Object,
@@ -378,7 +379,10 @@ export default {
     multiplexingCheck(val) {
       if (val) {
         // push
-        this.$store.commit('addCurMultiplexingComponent', { 'component': this.sourceElement, 'componentId': this.element.id })
+        this.$store.commit('addCurMultiplexingComponent', {
+          'component': this.sourceElement,
+          'componentId': this.element.id
+        })
       } else {
         // remove
         this.$store.commit('removeCurMultiplexingComponentWithId', this.element.id)
@@ -439,7 +443,9 @@ export default {
         bus.$emit('button-dialog-edit')
       } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') {
         bus.$emit('component-dialog-style')
-      } else { bus.$emit('change_panel_right_draw', true) }
+      } else {
+        bus.$emit('change_panel_right_draw', true)
+      }
     },
     linkageEdit() {
 
@@ -502,46 +508,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .bar-main{
-    position: absolute;
-    float:right;
-    z-index: 2;
-    border-radius:2px;
-    padding-left: 3px;
-    padding-right: 0px;
-    cursor:pointer!important;
-    background-color: var(--primary,#3370ff);
-  }
-  .bar-main i{
-    color: white;
-    float: right;
-    margin-right: 3px;
-  }
+.bar-main {
+  position: absolute;
+  float: right;
+  z-index: 2;
+  border-radius: 2px;
+  padding-left: 3px;
+  padding-right: 0px;
+  cursor: pointer !important;
+  background-color: var(--primary, #3370ff);
+}
 
-  .bar-main ::v-deep .el-checkbox__inner{
-    width: 16px;
-    height: 16px;
-  }
+.bar-main i {
+  color: white;
+  float: right;
+  margin-right: 3px;
+}
 
-  .bar-main ::v-deep .el-checkbox__inner::after{
-    width: 4.5px;
-  }
-  .bar-main-right{
-    width: 22px;
-    right: -25px;
-  }
-  .bar-main-left-inner{
-    width: 22px;
-    left: 0px;
-  }
+.bar-main ::v-deep .el-checkbox__inner {
+  width: 16px;
+  height: 16px;
+}
 
-  .bar-main-left-outer{
-    width: 22px;
-    left: -25px;
-  }
+.bar-main ::v-deep .el-checkbox__inner::after {
+  width: 4.5px;
+}
 
-  .bar-main-preview{
-    right: 0px;
-  }
+.bar-main-right {
+  width: 22px;
+  right: -25px;
+}
+
+.bar-main-left-inner {
+  width: 22px;
+  left: 0px;
+}
+
+.bar-main-left-outer {
+  width: 22px;
+  left: -25px;
+}
+
+.bar-main-preview {
+  right: 0px;
+}
 
 </style>

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

@@ -68,10 +68,11 @@ import { uuid } from 'vue-uuid'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
 import bus from '@/utils/bus'
 import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
 import { hasDataPermission } from '@/utils/permission'
+
 const erd = elementResizeDetectorMaker()
 
 export default {
@@ -338,9 +339,7 @@ export default {
         buttonExist: false,
         relationFilterIds: [],
         autoTrigger: true,
-        filterMap: {
-
-        }
+        filterMap: {}
       }
       if (!panelItems || !panelItems.length) return result
       let sureButtonItem = null
@@ -443,7 +442,10 @@ export default {
         this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
       }
       if (this.isMainCanvas()) {
-        this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+        this.$store.commit('setPreviewCanvasScale', {
+          scaleWidth: (this.scaleWidth / 100),
+          scaleHeight: (this.scaleHeight / 100)
+        })
       }
       this.handleScaleChange()
     },
@@ -529,63 +531,64 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .bg {
-    min-width: 200px;
-    min-height: 300px;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    background-size: 100% 100% !important;
-  }
+.bg {
+  min-width: 200px;
+  min-height: 300px;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  background-size: 100% 100% !important;
+}
 
-  .main-class {
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100% !important;
-  }
+.main-class {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100% !important;
+}
 
-  .custom-position {
-    line-height: 30px;
-    width: 100%;
-    z-index: 100;
-    height: 100%;
-    text-align: center;
-    cursor:not-allowed;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    flex-flow: row nowrap;
-    color: #9ea6b2;
-  }
+.custom-position {
+  line-height: 30px;
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  text-align: center;
+  cursor: not-allowed;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  flex-flow: row nowrap;
+  color: #9ea6b2;
+}
 
-  .dialog-css ::v-deep .el-dialog__title {
-    font-size: 14px;
-  }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
 
-  .dialog-css ::v-deep .el-dialog__header {
-    padding: 40px 20px 0;
-  }
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 40px 20px 0;
+}
 
-  .dialog-css ::v-deep  .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 
-  .mobile-dialog-css ::v-deep .el-dialog__headerbtn {
-    top: 7px
-  }
+.mobile-dialog-css ::v-deep .el-dialog__headerbtn {
+  top: 7px
+}
 
-  .mobile-dialog-css ::v-deep .el-dialog__body {
-    padding: 0px;
-  }
-  ::-webkit-scrollbar {
-    width: 0px!important;
-    height: 0px!important;
-  }
+.mobile-dialog-css ::v-deep .el-dialog__body {
+  padding: 0px;
+}
 
-  ::v-deep .el-tabs__nav{
-   z-index: 0;
-  }
+::-webkit-scrollbar {
+  width: 0px !important;
+  height: 0px !important;
+}
+
+::v-deep .el-tabs__nav {
+  z-index: 0;
+}
 
 </style>

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

@@ -47,7 +47,7 @@ import { uuid } from 'vue-uuid'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
 
 export default {
   components: { ComponentWrapper, CanvasOptBar },
@@ -245,51 +245,51 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .bg {
-    padding: 5px;
-    min-width: 600px;
-    min-height: 300px;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    background-size: 100% 100% !important;
-  }
+.bg {
+  padding: 5px;
+  min-width: 600px;
+  min-height: 300px;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  background-size: 100% 100% !important;
+}
 
-  .main-class {
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100% !important;
-  }
+.main-class {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100% !important;
+}
 
-  .custom-position {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    flex-flow: row nowrap;
-    color: #9ea6b2;
-  }
+.custom-position {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  flex-flow: row nowrap;
+  color: #9ea6b2;
+}
 
-  .gap_class {
-    padding: 5px;
-  }
+.gap_class {
+  padding: 5px;
+}
 
-  .dialog-css ::v-deep .el-dialog__title {
-    font-size: 14px;
-  }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
 
-  .dialog-css ::v-deep .el-dialog__header {
-    padding: 40px 20px 0;
-  }
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 40px 20px 0;
+}
 
-  .dialog-css ::v-deep .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 
-  ::-webkit-scrollbar {
-    width: 0px!important;
-    height: 0px!important;
-  }
+::-webkit-scrollbar {
+  width: 0px !important;
+  height: 0px !important;
+}
 
 </style>

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

@@ -148,7 +148,7 @@
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { getViewLinkageGather } from '@/api/panel/linkage'
-import HyperlinksDialog from '@/components/canvas/components/Editor/HyperlinksDialog'
+import HyperlinksDialog from '@/components/canvas/components/editor/HyperlinksDialog'
 import CustomTabsSort from '@/components/widget/DeWidget/CustomTabsSort'
 
 export default {

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

@@ -114,7 +114,7 @@
       v-if="(curComponent&&curComponent.auxiliaryMatrix&&(curComponent.optStatus.dragging||curComponent.optStatus.resizing))||(dragComponentInfo)"
     />
     <!-- 右击菜单 -->
-    <ContextMenu />
+    <ContextMenu/>
     <!-- 标线 (临时去掉标线 吸附等功能)-->
     <!--    <MarkLine />-->
     <!-- 选中区域 -->
@@ -215,11 +215,11 @@
 <script>
 import { mapState } from 'vuex'
 import Shape from './Shape'
-import DeDrag from '@/components/DeDrag'
+import DeDrag from '@/components/deDrag'
 
 // eslint-disable-next-line no-unused-vars
-import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
-import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
+import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
+import { _$, deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
 import Area from './Area'
@@ -227,10 +227,9 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import PGrid from './PGrid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import { deepCopy } from '@/components/canvas/utils/utils'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
+import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
-import DragShadow from '@/components/DeDrag/shadow'
+import DragShadow from '@/components/deDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
 import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
@@ -280,9 +279,9 @@ function scrollScreen(e) {
 }
 
 /**
-   * 重置位置盒子
-   *
-   */
+ * 重置位置盒子
+ *
+ */
 function resetPositionBox() {
   // 根据当前容器的宽度来决定多少列
   itemMaxX = this.maxCell
@@ -299,10 +298,10 @@ function resetPositionBox() {
 }
 
 /**
-   * 填充位置盒子
-   *
-   * @param {any} item
-   */
+ * 填充位置盒子
+ *
+ * @param {any} item
+ */
 function addItemToPositionBox(item) {
   try {
     const pb = positionBox
@@ -350,9 +349,9 @@ function removeItemFromPositionBox(item) {
 }
 
 /**
-   * 重新计算宽度，使最小单元格能占满整个容器
-   *
-   */
+ * 重新计算宽度，使最小单元格能占满整个容器
+ *
+ */
 function recalcCellWidth() {
   this.maxCell = this.matrixCount.x
 }
@@ -429,11 +428,11 @@ function resizePlayer(item, newSize) {
 }
 
 /**
-   * 检查移动的位置，如果不合法，会自动修改
-   *
-   * @param {any} item
-   * @param {any} position
-   */
+ * 检查移动的位置，如果不合法，会自动修改
+ *
+ * @param {any} item
+ * @param {any} position
+ */
 function checkItemPosition(item, position) {
   position = position || {}
   position.x = position.x || item.x
@@ -474,11 +473,11 @@ function checkItemPosition(item, position) {
 }
 
 /**
-   * 移动正在拖动的元素
-   *
-   * @param {any} item
-   * @param {any} position
-   */
+ * 移动正在拖动的元素
+ *
+ * @param {any} item
+ * @param {any} position
+ */
 function movePlayer(item, position) {
   const vm = this
   removeItemFromPositionBox(item)
@@ -563,10 +562,10 @@ function changeToCoord(left, top, width, height) {
 }
 
 /**
-   * 检测有无碰撞，并作出处理
-   *
-   * @param {any} tCoord 比对对象的坐标
-   */
+ * 检测有无碰撞，并作出处理
+ *
+ * @param {any} tCoord 比对对象的坐标
+ */
 // eslint-disable-next-line no-unused-vars
 function findClosetCoords(item, tCoord) {
   if (isOverlay) return
@@ -607,10 +606,10 @@ function findClosetCoords(item, tCoord) {
 }
 
 /**
-   * 生成坐标点
-   *
-   * @param {any} item
-   */
+ * 生成坐标点
+ *
+ * @param {any} item
+ */
 // eslint-disable-next-line no-unused-vars
 function makeCoordinate(item) {
   const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
@@ -656,10 +655,10 @@ function changeItemCoord(item) {
 }
 
 /**
-   * 清空目标位置的元素
-   *
-   * @param {any} item
-   */
+ * 清空目标位置的元素
+ *
+ * @param {any} item
+ */
 function emptyTargetCell(item) {
   const vm = this
   const belowItems = findBelowItems(item)
@@ -674,11 +673,11 @@ function emptyTargetCell(item) {
 }
 
 /**
-   * 当前位置的item能否上浮
-   *
-   * @param {any} item
-   * @returns
-   */
+ * 当前位置的item能否上浮
+ *
+ * @param {any} item
+ * @returns
+ */
 function canItemGoUp(item) {
   let upperRows = 0
   for (let row = item.y - 2; row >= 0; row--) {
@@ -694,11 +693,11 @@ function canItemGoUp(item) {
 }
 
 /**
-   * 在移动之前，找到当前下移的元素的下面的元素（递归）
-   *
-   * @param {any} items
-   * @param {any} size
-   */
+ * 在移动之前，找到当前下移的元素的下面的元素（递归）
+ *
+ * @param {any} items
+ * @param {any} size
+ */
 function moveItemDown(item, size) {
   const vm = this
   removeItemFromPositionBox(item)
@@ -736,12 +735,12 @@ function setPlayerPosition(item, position) {
 }
 
 /**
-   * 寻找子元素到父元素的最大距离
-   *
-   * @param {any} parent
-   * @param {any} son
-   * @param {any} size
-   */
+ * 寻找子元素到父元素的最大距离
+ *
+ * @param {any} parent
+ * @param {any} son
+ * @param {any} size
+ */
 function calcDiff(parent, son, size) {
   const diffs = []
 
@@ -1729,11 +1728,11 @@ export default {
 
     },
     /**
-       * 计算当前item的位置和大小
-       *
-       * @param {any} item
-       * @returns
-       */
+     * 计算当前item的位置和大小
+     *
+     * @param {any} item
+     * @returns
+     */
     nowItemStyle(item, index) {
       return {
         width: (this.cellWidth * (item.sizex) - this.baseMarginLeft) + 'px',
@@ -1756,18 +1755,18 @@ export default {
       return finalList
     },
     /**
-       * 获取x最大值
-       *
-       * @returns
-       */
+     * 获取x最大值
+     *
+     * @returns
+     */
     getMaxCell() {
       return this.maxCell
     },
     /**
-       * 获取渲染状态
-       *
-       * @returns
-       */
+     * 获取渲染状态
+     *
+     * @returns
+     */
     getRenderState() {
       return this.moveAnimate
     },
@@ -1835,64 +1834,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .editor {
+.editor {
+  width: 100%;
+  position: relative;
+  /*background: #fff;*/
+  margin: auto;
+  /*会影响设置组件不能出现在最高层*/
+  /*overflow-x: hidden;*/
+  background-size: 100% 100% !important;
+  /*transform-style:preserve-3d;*/
+  .lock {
+    opacity: .5;
+  }
+}
+
+.parent_transform {
+  //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
+  // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
+  transform-style: preserve-3d;
+}
+
+.edit {
+  .component {
+    outline: none;
     width: 100%;
+    height: 100%;
     position: relative;
-    /*background: #fff;*/
-    margin: auto;
-    /*会影响设置组件不能出现在最高层*/
-    /*overflow-x: hidden;*/
-    background-size: 100% 100% !important;
-    /*transform-style:preserve-3d;*/
-    .lock {
-      opacity: .5;
-    }
   }
+}
 
-  .parent_transform {
-    //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
-    // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
-    transform-style: preserve-3d;
-  }
+.gap_class {
+  padding: 3px;
+}
 
-  .edit {
-    /*outline: 1px solid gainsboro;*/
-    .component {
-      outline: none;
-      width: 100%;
-      height: 100%;
-      position: relative;
-    }
-  }
+.ref-line {
+  position: absolute;
+  background-color: #70c0ff;;
+  z-index: 9999;
+}
 
-  .gap_class {
-    padding: 3px;
-  }
+.v-line {
+  width: 1px;
+}
 
-  .ref-line {
-    position: absolute;
-    background-color: #70c0ff;;
-    z-index: 9999;
-  }
+.h-line {
+  height: 1px;
+}
 
-  .v-line {
-    width: 1px;
-  }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
 
-  .h-line {
-    height: 1px;
-  }
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 40px 20px 0;
+}
 
-  .dialog-css ::v-deep .el-dialog__title {
-    font-size: 14px;
-  }
-
-  .dialog-css ::v-deep .el-dialog__header {
-    padding: 40px 20px 0;
-  }
-
-  .dialog-css ::v-deep .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 
 </style>

frontend/src/components/canvas/custom-component/index.js

@@ -1,24 +0,0 @@
-import Vue from 'vue'
-
-import Picture from '@/components/canvas/custom-component/Picture'
-import VText from '@/components/canvas/custom-component/VText'
-import VButton from '@/components/canvas/custom-component/VButton'
-import Group from '@/components/canvas/custom-component/Group'
-import RectShape from '@/components/canvas/custom-component/RectShape'
-import UserView from '@/components/canvas/custom-component/UserView'
-import DeVideo from '@/components/canvas/custom-component/DeVideo'
-import DeFrame from '@/components/canvas/custom-component/DeFrame'
-import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia'
-import DeRichText from '@/components/canvas/custom-component/DeRichText'
-Vue.component('DeRichText', DeRichText)
-Vue.component('DeStreamMedia', DeStreamMedia)
-// eslint-disable-next-line
-Vue.component('Picture', Picture)
-Vue.component('VText', VText)
-Vue.component('VButton', VButton)
-Vue.component('Group', Group)
-Vue.component('RectShape', RectShape)
-Vue.component('UserView', UserView)
-Vue.component('DeVideo', DeVideo)
-Vue.component('DeFrame', DeFrame)
-

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

@@ -196,26 +196,39 @@ import { mapState } from 'vuex'
 import { isChange } from '@/utils/conditionUtil'
 import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
 import { deepCopy } from '@/components/canvas/utils/utils'
-import { getToken, getLinkToken } from '@/utils/auth'
+import { getLinkToken, getToken } from '@/utils/auth'
 import DrillPath from '@/views/chart/view/DrillPath'
 import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
-import EditBarView from '@/components/canvas/components/Editor/EditBarView'
+import EditBarView from '@/components/canvas/components/editor/EditBarView'
 import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { viewEditSave, viewPropsSave } from '@/api/chart/chart'
 import { checkAddHttp } from '@/utils/urlUtils'
-import DeRichTextView from '@/components/canvas/custom-component/DeRichTextView'
+import DeRichTextView from '@/components/canvas/customComponent/DeRichTextView'
 import Vue from 'vue'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
-import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
+import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
+import UserViewMobileDialog from '@/components/canvas/customComponent/UserViewMobileDialog'
 
 export default {
   name: 'UserView',
-  components: { UserViewMobileDialog, UserViewDialog, DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: {
+    UserViewMobileDialog,
+    UserViewDialog,
+    DeRichTextView,
+    LabelNormalText,
+    PluginCom,
+    ChartComponentS2,
+    EditBarView,
+    ChartComponent,
+    TableNormal,
+    LabelNormal,
+    DrillPath,
+    ChartComponentG2
+  },
   props: {
     canvasId: {
       type: String,
@@ -688,7 +701,11 @@ export default {
               adaptCurTheme(customStyleObj, customAttrObj)
               this.chart.customStyle = JSON.stringify(customStyleObj)
               this.chart.customAttr = JSON.stringify(customAttrObj)
-              viewEditSave(this.panelInfo.id, { id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
+              viewEditSave(this.panelInfo.id, {
+                id: this.chart.id,
+                customStyle: this.chart.customStyle,
+                customAttr: this.chart.customAttr
+              })
               this.$store.commit('adaptorStatusDisable', this.element.id)
             }
             this.sourceCustomAttrStr = this.chart.customAttr
@@ -933,7 +950,10 @@ export default {
         const current = this.$refs[this.element.propValue.id]
 
         if (this.chart.isPlugin) {
-          current && current.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
+          current && current.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({
+            methodName: 'registerDynamicMap',
+            methodParam: null
+          })
         } else {
           current && current.registerDynamicMap && this.setDetailMapCode(null) && current.registerDynamicMap(null)
         }
@@ -963,7 +983,10 @@ export default {
       this.currentAcreaNode = tempNode
       const current = this.$refs[this.element.propValue.id]
       if (this.chart.isPlugin) {
-        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
+        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({
+          methodName: 'registerDynamicMap',
+          methodParam: this.currentAcreaNode.code
+        })
       } else {
         current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
       }
@@ -990,7 +1013,10 @@ export default {
         this.currentAcreaNode = nextNode
         const current = this.$refs[this.element.propValue.id]
         if (this.chart.isPlugin) {
-          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
+          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({
+            methodName: 'registerDynamicMap',
+            methodParam: nextNode.code
+          })
         } else {
           nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
         }
@@ -1024,7 +1050,10 @@ export default {
       const current = this.$refs[this.element.propValue.id]
 
       if (this.chart.isPlugin) {
-        current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: areaNode.code })
+        current && current.callPluginInner && current.callPluginInner({
+          methodName: 'registerDynamicMap',
+          methodParam: areaNode.code
+        })
       } else {
         current && current.registerDynamicMap && current.registerDynamicMap(areaNode.code)
       }
@@ -1126,45 +1155,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .rect-shape {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
+.rect-shape {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 
-  .chart-class {
-    height: 100%;
-    padding: 0px!important;
-  }
+.chart-class {
+  height: 100%;
+  padding: 0px !important;
+}
 
-  .table-class {
-    height: 100%;
-  }
+.table-class {
+  height: 100%;
+}
 
-  .chart-error-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ece7e7;
-  }
+.chart-error-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ece7e7;
+}
 
-  .chart-error-message-class {
-    font-size: 12px;
-    color: #9ea6b2;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.chart-error-message-class {
+  font-size: 12px;
+  color: #9ea6b2;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .active {
+.active {
 
-  }
+}
 
-  .active ::v-deep .icon-fangda {
-    z-index: 2;
-    display: block !important;
-  }
+.active ::v-deep .icon-fangda {
+  z-index: 2;
+  display: block !important;
+}
 </style>

frontend/src/components/canvas/customComponent/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+
+import Picture from '@/components/canvas/customComponent/Picture'
+import VText from '@/components/canvas/customComponent/VText'
+import VButton from '@/components/canvas/customComponent/VButton'
+import Group from '@/components/canvas/customComponent/Group'
+import RectShape from '@/components/canvas/customComponent/RectShape'
+import UserView from '@/components/canvas/customComponent/UserView'
+import DeVideo from '@/components/canvas/customComponent/DeVideo'
+import DeFrame from '@/components/canvas/customComponent/DeFrame'
+import DeStreamMedia from '@/components/canvas/customComponent/DeStreamMedia'
+import DeRichText from '@/components/canvas/customComponent/DeRichText'
+Vue.component('DeRichText', DeRichText)
+Vue.component('DeStreamMedia', DeStreamMedia)
+// eslint-disable-next-line
+Vue.component('Picture', Picture)
+Vue.component('VText', VText)
+Vue.component('VButton', VButton)
+Vue.component('Group', Group)
+Vue.component('RectShape', RectShape)
+Vue.component('UserView', UserView)
+Vue.component('DeVideo', DeVideo)
+Vue.component('DeFrame', DeFrame)
+

frontend/src/components/canvas/index.vue

@@ -20,12 +20,13 @@
 
 <script>
 import Editor from '@/components/Editor/index'
-import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+import componentList from '@/components/canvas/customComponent/component-list' // 左侧列表数据
 import Toolbar from '@/components/Toolbar'
 import { deepCopy } from '@/utils/utils'
 import { mapState } from 'vuex'
 import generateID from '@/utils/generateID'
 import { uuid } from 'vue-uuid'
+
 export default {
   components: { Editor, Toolbar },
   data() {

frontend/src/components/canvas/store/compose.js

@@ -3,7 +3,7 @@ import generateID from '@/components/canvas/utils/generateID'
 import eventBus from '@/components/canvas/utils/eventBus'
 import decomposeComponent from '@/components/canvas/utils/decomposeComponent'
 import { $ } from '@/components/canvas/utils/utils'
-import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
+import { commonStyle, commonAttr } from '@/components/canvas/customComponent/component-list'
 
 export default {
   state: {

frontend/src/components/canvas/utils/utils.js

@@ -1,7 +1,7 @@
 import {
   BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
   HYPERLINKS
-} from '@/components/canvas/custom-component/component-list'
+} from '@/components/canvas/customComponent/component-list'
 
 import {
   ApplicationContext

frontend/src/components/dataease/DeOutWidget.vue

@@ -59,7 +59,8 @@
 </template>
 
 <script>
-import inputStyleMixin from '@/components/widget/DeWidget/inputStyleMixin'
+import inputStyleMixin from '@/components/widget/deWidget/inputStyleMixin'
+
 export default {
   name: 'DeOutWidget',
   mixins: [inputStyleMixin],
@@ -70,7 +71,8 @@ export default {
     },
     element: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     inDraw: {
       type: Boolean,
@@ -194,77 +196,90 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .my-container {
-    position: relative;
-    overflow: auto !important;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-  }
-  .ccondition-main {
-    position: absolute;
-    overflow: auto;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    display: flex;
-  }
-  .condition-title {
-    height: 2em;
-    cursor: -webkit-grab;
-    line-height: 2em;
-    white-space: nowrap;
-  }
-  .span-container {
-    overflow: hidden auto;
-    position: relative;
-    padding: 0 5px;
-  }
-  .condition-content {
-    overflow: auto hidden;
-    letter-spacing: 0px !important;
+.my-container {
+  position: relative;
+  overflow: auto !important;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.ccondition-main {
+  position: absolute;
+  overflow: auto;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+}
+
+.condition-title {
+  height: 2em;
+  cursor: -webkit-grab;
+  line-height: 2em;
+  white-space: nowrap;
+}
+
+.span-container {
+  overflow: hidden auto;
+  position: relative;
+  padding: 0 5px;
+}
+
+.condition-content {
+  overflow: auto hidden;
+  letter-spacing: 0px !important;
+  width: 100%;
+}
+
+.condition-content-container {
+  position: relative;
+  display: table;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+}
+
+.first-element {
+  position: relative;
+  display: table-cell;
+  vertical-align: middle;
+  margin: 0px;
+  padding: 0px;
+  height: 100%;
+}
+
+.first-element-container {
+  width: calc(100% - 10px);
+  background: initial;
+  margin: 0 4px;
+
+  div {
     width: 100%;
   }
-  .condition-content-container {
-    position: relative;
-    display: table;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-  }
-  .first-element {
-    position: relative;
-    display: table-cell;
-    vertical-align: middle;
-    margin: 0px;
-    padding: 0px;
-    height: 100%;
-  }
-  .first-element-container {
-    width: calc(100% - 10px);
-    background: initial;
-    margin: 0 4px;
-    div {
-      width: 100%;
-    }
-    display: flex;
-    align-items: flex-end;
-  }
-  .first-element-grid-container {
-    background: #fff;
-    border: 1px solid #d7dae2;
-    top: 5px;
-  }
-  .condition-main-line {
-    height: 40px !important;
-  }
-  .condition-main {
-    display: flex;
-    padding-top: 5px;
-  }
-  .condition-content-default {
-    inset: 0px 0px 0px !important;
-  }
+
+  display: flex;
+  align-items: flex-end;
+}
+
+.first-element-grid-container {
+  background: #fff;
+  border: 1px solid #d7dae2;
+  top: 5px;
+}
+
+.condition-main-line {
+  height: 40px !important;
+}
+
+.condition-main {
+  display: flex;
+  padding-top: 5px;
+}
+
+.condition-content-default {
+  inset: 0px 0px 0px !important;
+}
 </style>

frontend/src/components/deDrag/index.vue

@@ -84,20 +84,19 @@
 </template>
 
 <script>
-import { matchesSelectorToParentElements, getComputedSize, addEvent, removeEvent } from '../../utils/dom'
-import { computeWidth, computeHeight, restrictToBounds, snapToGrid, rotatedPoint, getAngle } from '../../utils/fns'
-import { events, userSelectNone, userSelectAuto } from './option.js'
-
-let eventsFor = events.mouse
-
+import { addEvent, getComputedSize, matchesSelectorToParentElements, removeEvent } from '../../utils/dom'
+import { computeHeight, computeWidth, getAngle, restrictToBounds, rotatedPoint, snapToGrid } from '../../utils/fns'
+import { events, userSelectAuto, userSelectNone } from './option.js'
 // private
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
-import EditBar from '@/components/canvas/components/Editor/EditBar'
-import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
+import EditBar from '@/components/canvas/components/editor/EditBar'
+import MobileCheckBar from '@/components/canvas/components/editor/MobileCheckBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
+let eventsFor = events.mouse
+
 export default {
   replace: true,
   name: 'DeDrag',
@@ -2120,6 +2119,6 @@ export default {
 }
 
 .drag-on-tab-collision {
-  z-index: 1000!important;
+  z-index: 1000 !important;
 }
 </style>

frontend/src/components/deViewSelect/index.vue

@@ -65,10 +65,11 @@
 </template>
 
 <script>
-import Preview from '@/components/canvas/components/Editor/Preview'
+import Preview from '@/components/canvas/components/editor/Preview'
 import { findOne } from '@/api/panel/panel'
 import { viewOptions } from '@/api/chart/chart'
 import { panelDataPrepare } from '@/components/canvas/utils/utils'
+
 export default {
   name: 'DeViewSelect',
   components: { Preview },
@@ -240,6 +241,7 @@ export default {
 .my-top-class {
   width: 100%;
 }
+
 .dialog-css ::v-deep .el-dialog__title {
   font-size: 14px;
 }

frontend/src/components/elVisualSelect/index.vue

@@ -15,12 +15,15 @@
     <p
       v-if="startIndex === 0 && $attrs.multiple"
       class="select-all"
-    ><el-checkbox
-      v-model="selectAll"
-      v-customStyle="customStyle"
-      :indeterminate="isIndeterminate"
-      @change="selectAllChange"
-    >{{ $t('dataset.check_all') }}</el-checkbox></p>
+    >
+      <el-checkbox
+        v-model="selectAll"
+        v-customStyle="customStyle"
+        :indeterminate="isIndeterminate"
+        @change="selectAllChange"
+      >{{ $t('dataset.check_all') }}
+      </el-checkbox>
+    </p>
     <el-option
       v-for="item in options"
       :key="item.id"
@@ -34,9 +37,10 @@
 </template>
 
 <script>
-import { handlerInputStyle } from '@/components/widget/DeWidget/serviceNameFn.js'
+import { handlerInputStyle } from '@/components/widget/deWidget/serviceNameFn.js'
 
 import { uuid } from 'vue-uuid'
+
 export default {
   name: 'ElVisualSelect',
   model: {
@@ -51,7 +55,8 @@ export default {
     },
     customStyle: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     list: {
       type: Array,
@@ -234,26 +239,31 @@ export default {
     overflow-x: hidden;
     content-visibility: auto;
   }
+
   ::-webkit-scrollbar {
     background: #ffffff !important;
   }
+
   .el-select-height {
     width: 1px;
     position: absolute;
     top: 0;
     left: 0;
   }
+
   .el-select-dropdown__list {
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
   }
+
   .el-select-dropdown__wrap {
     height: 0;
   }
 }
+
 .select-all {
-    padding: 10px 20px 0 20px;
-  }
+  padding: 10px 20px 0 20px;
+}
 </style>

frontend/src/components/widget/deWidget/DeDate.vue

@@ -23,14 +23,10 @@
 </template>
 
 <script>
-import {
-  ApplicationContext
-} from '@/utils/ApplicationContext'
-import {
-  timeSection
-} from '@/utils'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import { timeSection } from '@/utils'
 import bus from '@/utils/bus'
-import customInput from '@/components/widget/DeWidget/customInput'
+import customInput from '@/components/widget/deWidget/customInput'
 
 export default {
   mixins: [customInput],
@@ -279,13 +275,13 @@ export default {
       const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
       if (this.element.options.attrs.type === 'daterange') {
         if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-            '[object Object]') {
+          '[object Object]') {
           return []
         }
         return defaultV.split(',').map(item => parseFloat(item))
       } else {
         if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
-            '[object Object]') {
+          '[object Object]') {
           return null
         }
         return parseFloat(defaultV.split(',')[0])
@@ -298,7 +294,7 @@ export default {
 
 <style lang="scss">
 .coustom-date-picker {
-  border:1px solid var(--BrDateColor, #dfe4ed) !important;
+  border: 1px solid var(--BrDateColor, #dfe4ed) !important;
   background: var(--BgDateColor, #FFFFFF) !important;
 
   .el-picker-panel__sidebar {
@@ -323,7 +319,7 @@ export default {
   .el-date-range-picker__time-picker-wrap,
   .el-date-picker__time-header {
     .el-input__inner {
-      border:1px solid var(--BrDateColor, #dfe4ed) !important;
+      border: 1px solid var(--BrDateColor, #dfe4ed) !important;
       color: var(--DateColor, #606266);
       background: var(--BgDateColor, #FFFFFF) !important;
     }
@@ -332,7 +328,7 @@ export default {
   .el-picker-panel__link-btn:nth-child(2) {
     color: var(--DateColor, #409eff);
     background: var(--BgDateColor, #FFFFFF) !important;
-    border:1px solid var(--BrDateColor, #dfe4ed) !important;
+    border: 1px solid var(--BrDateColor, #dfe4ed) !important;
   }
 
   .popper__arrow,
@@ -340,13 +336,13 @@ export default {
     display: none !important;
   }
 
-  .el-date-range-picker__content.is-left{
-    border-right:1px solid var(--BrDateColor, #e6ebf5) !important;
+  .el-date-range-picker__content.is-left {
+    border-right: 1px solid var(--BrDateColor, #e6ebf5) !important;
   }
 
   .el-date-table th,
   .el-date-picker__header--bordered {
-    border-bottom:1px solid var(--BrDateColor, #e6ebf5) !important;
+    border-bottom: 1px solid var(--BrDateColor, #e6ebf5) !important;
   }
 
   .el-date-table td.in-range:not(.end-date):not(.start-date) div span {
@@ -359,7 +355,7 @@ export default {
   .el-month-table td .cell,
   .el-year-table td .cell,
   .el-picker-panel__icon-btn,
-  .el-date-picker__header-label{
+  .el-date-picker__header-label {
     color: var(--DateColor, #606266);
 
   }
@@ -376,6 +372,7 @@ export default {
   .el-time-spinner__wrapper {
     width: 100% !important;
   }
+
   .el-scrollbar:nth-of-type(2) {
     display: none;
   }