feat: 仪表板条件过滤组件增加标题

2021-07-14 16:58:07 +08:00 · 2021-07-14 16:58:07 +08:00 · dfd0f04698
commit dfd0f04698
parent aa99b45cf5
11 changed files with 85 additions and 34 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -20,7 +20,7 @@
    "axios": "^0.21.1",
    "core-js": "^2.6.5",
    "echarts": "^5.0.1",
-    "element-resize-detector": "^1.2.2",
+    "element-resize-detector": "^1.2.3",
    "element-ui": "2.13.0",
    "file-save": "^0.2.0",
    "file-saver": "^2.0.5",
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@ -5,8 +5,7 @@
    class="component"
    @click="handleClick"
  >
-    <component
-      :is="config.component"
+    <de-out-widget
      v-if="config.type==='custom'"
      :id="'component' + config.id"
      class="component-custom"
@ -14,6 +13,7 @@
      :out-style="config.style"
      :element="config"
    />
+
    <component
      :is="config.component"
      v-else
@ -31,8 +31,9 @@ import { getStyle } from '@/components/canvas/utils/style'
 import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'
 import { mapState } from 'vuex'
-
+import DeOutWidget from '@/components/dataease/DeOutWidget'
 export default {
+  components: { DeOutWidget },
  mixins: [mixins],
  props: {
    config: {
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -44,6 +44,27 @@
        :active="item === curComponent"
        @input="handleInput"
      />
+      <!-- <out-widget
+        :is="item.component"
+        v-else-if="item.type==='custom'"
+        :id="'component' + item.id"
+        class="component"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
+      /> -->
+      <de-out-widget
+        v-else-if="item.type==='custom'"
+        :id="'component' + item.id"
+        class="component"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
+      />
      <component
        :is="item.component"
        v-else-if="item.type==='other'"
@ -127,9 +148,9 @@ import Grid from './Grid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
-
+import DeOutWidget from '@/components/dataease/DeOutWidget'
 export default {
-  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog },
+  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget },
  props: {
    isEdit: {
      type: Boolean,
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@ -26,7 +26,8 @@ const drawPanel = {
  type: 'custom',
  style: {
    width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '',
--- a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
@ -22,7 +22,8 @@ const drawPanel = {
  type: 'custom',
  style: {
    width: 300,
-    height: 45.5,
+    // height: 45.5,
+    height: 90,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '',
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@ -27,7 +27,7 @@ const drawPanel = {
  type: 'custom',
  style: {
    width: 300,
-    height: 38,
+    height: 90,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '',
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@ -24,7 +24,8 @@ const drawPanel = {
  type: 'custom',
  style: {
    width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '',
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@ -22,7 +22,8 @@ const drawPanel = {
  type: 'custom',
  style: {
    width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '',
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@ -22,7 +22,8 @@ const drawPanel = {
  type: 'custom',
  style: {
    width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '',
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@ -22,7 +22,8 @@ const drawPanel = {
  type: 'custom',
  style: {
    width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '',
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@ -182,28 +182,44 @@
            </div>
          </el-col>
          <el-col :span="16"><div class="filter-options-right">
-            <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
+            <el-col :span="8">
+              <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题</el-checkbox>
+              <el-popover
+                v-model="titlePopovervisible"
+                placement="bottom-end"
+                :disabled="!componentInfo.options.attrs.showTitle"
+                width="200"
+              >
+                <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
+                  <el-input v-model="componentInfo.options.attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
+                </div>

-            <el-popover
-              v-model="popovervisible"
-              placement="bottom-end"
-              :disabled="!componentInfo.options.attrs.enableRange"
-              width="200"
-            >
-              <div class="view-container-class">
-                <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
-                  <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
-                    <span>
-                      <svg-icon :icon-class="item.type" class="chart-icon" />
-                      <span style="margin-left: 6px">{{ item.name }}</span>
-                    </span>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </div>
+                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}" class="el-icon-setting i-filter" />
+              </el-popover>
+            </el-col>
+            <el-col :span="8">
+              <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>  {{ $t('panel.custom_scope') }} </span> </el-checkbox>

-              <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
-            </el-popover>
-            <!-- <el-checkbox disabled>备选项</el-checkbox> -->
+              <el-popover
+                v-model="popovervisible"
+                placement="bottom-end"
+                :disabled="!componentInfo.options.attrs.enableRange"
+                width="200"
+              >
+                <div class="view-container-class">
+                  <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
+                    <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
+                      <span>
+                        <svg-icon :icon-class="item.type" class="chart-icon" />
+                        <span style="margin-left: 6px">{{ item.name }}</span>
+                      </span>
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+
+                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
+              </el-popover>
+            </el-col>
          </div>

          </el-col>
@ -301,7 +317,8 @@ export default {
      keyWord: '',
      timer: null,
      expandedArray: [],
-      viewKeyWord: ''
+      viewKeyWord: '',
+      titlePopovervisible: false
    }
  },
  computed: {
@ -610,6 +627,12 @@ export default {
      }
      // this.componentInfo.options.attrs.enableRange = value
      this.$emit('re-fresh-component', this.componentInfo)
+    },
+    showTitleChange(value) {
+      if (!value) {
+        this.componentInfo.options.attrs.title = ''
+      }
+      this.$emit('re-fresh-component', this.componentInfo)
    }
  }
 }