Merge pull request #9733 from dataease/pr@dev-v2@feat_hang-component

Pr@dev v2@feat hang component

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -42,6 +42,7 @@ import PointShadow from '@/components/data-visualization/canvas/PointShadow.vue'
 import DragInfo from '@/components/visualization/common/DragInfo.vue'
 import { activeWatermark } from '@/components/watermark/watermark'
 import { personInfoApi } from '@/api/user'
+import ComponentHangPopver from '@/custom-component/independent-hang/ComponentHangPopver.vue'
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
 const composeStore = composeStoreWithOut()

core/core-frontend/src/custom-component/component-list.ts

@@ -211,6 +211,7 @@ const list = [
     propValue: '',
     icon: 'other_text',
     innerType: 'VQuery',
+    isHang: false,
     x: 1,
     y: 1,
     sizeX: 72,

core/core-frontend/src/custom-component/independent-hang/ComponentHang.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="hang-main" @keydown.stop @keyup.stop>
+    <div :key="index" v-for="(config, index) in hangComponentData">
+      <component
+        :is="findComponent(config['component'])"
+        :view="canvasViewInfo[config['id']]"
+        ref="component"
+        class="component"
+        :element="config"
+        :scale="deepScale"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import findComponent from '@/utils/components'
+const props = defineProps({
+  hangComponentData: {
+    type: Object,
+    required: true
+  },
+  canvasViewInfo: {
+    type: Object,
+    required: true
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 100
+  }
+})
+
+const { hangComponentData, scale } = toRefs(props)
+const deepScale = computed(() => scale.value / 100)
+</script>
+
+<style lang="less" scoped>
+.hang-main {
+  overflow: auto;
+  width: 100%;
+  height: 300px;
+}
+</style>

core/core-frontend/src/custom-component/independent-hang/ComponentHangPopver.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import ComponentHang from '@/custom-component/independent-hang/ComponentHang.vue'
+
+const props = defineProps({
+  componentData: {
+    type: Object,
+    required: true
+  },
+  canvasViewInfo: {
+    type: Object,
+    required: true
+  },
+  themes: {
+    type: String,
+    required: true,
+    default: 'dark'
+  }
+})
+
+const { componentData, canvasViewInfo } = toRefs(props)
+
+const hangComponentData = computed(() =>
+  componentData.value.filter(ele => {
+    return ele.component === 'VQuery' && ele.isHang === true
+  })
+)
+</script>
+
+<template>
+  <el-popover
+    width="300"
+    trigger="click"
+    :show-arrow="false"
+    :popper-class="'custom-popover-' + themes"
+  >
+    <template #reference>
+      <div class="reference-position">
+        <el-button style="margin-right: 16px">隐藏按钮</el-button>
+      </div>
+    </template>
+    <div>
+      <component-hang
+        :hang-component-data="hangComponentData"
+        :canvas-view-info="canvasViewInfo"
+        :scale="100"
+      >
+      </component-hang>
+    </div>
+  </el-popover>
+</template>
+<style lang="less" scoped>
+.reference-position {
+  position: absolute;
+  right: 100px;
+  top: 100px;
+}
+</style>

core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue

@@ -9,6 +9,10 @@ const state = {
 }
 
 const props = defineProps({
+  element: {
+    type: Object,
+    required: true
+  },
   chart: {
     type: Object,
     required: true
@@ -24,7 +28,7 @@ const props = defineProps({
 })
 const predefineColors = COLOR_PANEL
 
-const { chart, commonBackgroundPop } = toRefs(props)
+const { element, chart, commonBackgroundPop } = toRefs(props)
 </script>
 
 <template>
@@ -33,6 +37,11 @@ const { chart, commonBackgroundPop } = toRefs(props)
       <el-collapse v-model="state.styleActiveNames" class="style-collapse">
         <el-collapse-item :effect="themes" name="component" :title="t('visualization.module')">
           <el-form label-position="top">
+            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+              <el-checkbox :effect="themes" v-model="element.isHang" size="small">
+                隐藏组件
+              </el-checkbox>
+            </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -1512,15 +1512,20 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
         </div>
         <div v-if="!canvasCollapse.chartAreaCollapse" style="width: 240px" class="view-panel-row">
           <el-row class="editor-title">
-            <span class="name-area" @dblclick="editComponentName" id="component-name">{{
-              view.title
-            }}</span>
+            <span
+              class="name-area"
+              :class="{ 'component-name-dark': themes === 'dark' }"
+              @dblclick="editComponentName"
+              id="component-name"
+              >{{ view.title }}</span
+            >
           </el-row>
 
           <el-row style="height: calc(100vh - 110px); overflow-y: auto">
-            <div class="query-style-tab" v-if="view.type === 'VQuery'">
+            <div class="query-style-tab" v-if="view.type === 'VQuery' && curComponent">
               <div style="padding-top: 1px">
                 <VQueryChartStyle
+                  :element="curComponent"
                   :common-background-pop="curComponent?.commonBackground"
                   :chart="view"
                   :themes="themes"
@@ -2889,6 +2894,7 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
   <Teleport v-if="componentNameEdit" :to="'#component-name'">
     <input
+      :effect="themes"
       width="100%"
       @change="onComponentNameChange"
       ref="componentNameInput"
@@ -4019,4 +4025,19 @@ span {
     height: 100%;
   }
 }
+
+.component-name-dark {
+  input {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    color: @dv-canvas-main-font-color;
+    background-color: #050e21;
+    outline: none;
+    border: 1px solid #295acc;
+    border-radius: 4px;
+    padding: 0 4px;
+    height: 100%;
+  }
+}
 </style>

core/core-frontend/src/views/data-visualization/index.vue

@@ -409,7 +409,7 @@ eventBus.on('handleNew', handleNew)
       <div style="width: auto; height: 100%" ref="leftSidebarRef">
         <dv-sidebar
           v-if="commonPropertiesShow"
-          :title="'属性'"
+          :title="curComponent['name']"
           :width="240"
           :side-name="'componentProp'"
           :aside-position="'right'"

sdk/common/src/main/java/io/dataease/cache/impl/DefaultCacheImpl.java

@@ -93,7 +93,9 @@ public class DefaultCacheImpl implements DECacheService {
     @Override
     public void keyRemove(String cacheName, String key) {
         Cache<Object, Object> cache = cacheManager.getCache(cacheName);
-        cache.remove(key);
+        if(cache != null){
+            cache.remove(key);
+        }
     }
 
     @PostConstruct