From ef41583187d989915bd2135c59f2c25eb4aa6202 Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Mon, 25 Jul 2022 10:07:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=A4=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chart/components/ChartComponentG2.vue     | 20 ++++-
 .../chart/components/ChartComponentS2.vue     | 20 ++++-
 .../component-style/TitleSelectorAntV.vue     | 84 +++++++++++++++++--
 .../component-style/dialog/RemarkEditor.vue   | 72 ++++++++++++++++
 .../chart/components/normal/LabelNormal.vue   | 29 +++++--
 .../components/normal/LabelNormalText.vue     | 28 +++++--
 6 files changed, 224 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue

diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 1c22f98532..447faf672e 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -2,7 +2,10 @@
   <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
     <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
     <span v-if="chart.type && antVRenderStatus" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
-      <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
+      <div>
+        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
+        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+      </div>
     </span>
     <div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
   </div>
@@ -12,7 +15,7 @@
 import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
 import { uuid } from 'vue-uuid'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseBarOptionAntV, hBaseBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
 import { baseAreaOptionAntV, baseLineOptionAntV } from '@/views/chart/chart/line/line_antv'
 import { basePieOptionAntV, basePieRoseOptionAntV } from '@/views/chart/chart/pie/pie_antv'
@@ -23,10 +26,11 @@ import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
 import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
 import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
 import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
+import TitleRemark from '@/views/chart/view/TitleRemark'
 
 export default {
   name: 'ChartComponentG2',
-  components: { ViewTrackBar },
+  components: { TitleRemark, ViewTrackBar },
   props: {
     chart: {
       type: Object,
@@ -84,7 +88,11 @@ export default {
       title_show: true,
       antVRenderStatus: false,
       linkageActiveParam: null,
-      linkageActiveHistory: false
+      linkageActiveHistory: false,
+      remarkCfg: {
+        show: false,
+        content: ''
+      }
 
     }
   },
@@ -320,6 +328,7 @@ export default {
           this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
       }
+      this.initRemark()
     },
 
     calcHeightRightNow() {
@@ -337,6 +346,9 @@ export default {
       setTimeout(() => {
         this.calcHeightRightNow()
       }, 100)
+    },
+    initRemark() {
+      this.remarkCfg = getRemark(this.chart)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 489f6b8f20..39426a84c6 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -2,7 +2,10 @@
   <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
     <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
     <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
-      <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
+      <div>
+        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
+        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+      </div>
     </span>
     <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
       <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
@@ -34,12 +37,13 @@
 <script>
 import { uuid } from 'vue-uuid'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
+import TitleRemark from '@/views/chart/view/TitleRemark'
 
 export default {
   name: 'ChartComponentS2',
-  components: { ViewTrackBar },
+  components: { TitleRemark, ViewTrackBar },
   props: {
     chart: {
       type: Object,
@@ -102,7 +106,11 @@ export default {
       tableData: [],
       showPage: false,
       scrollTimer: null,
-      scrollTop: 0
+      scrollTop: 0,
+      remarkCfg: {
+        show: false,
+        content: ''
+      }
     }
   },
 
@@ -322,6 +330,7 @@ export default {
           this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
         }
       }
+      this.initRemark()
     },
 
     calcHeightRightNow() {
@@ -389,6 +398,9 @@ export default {
           this.myChart.render()
         }, senior.scrollCfg.interval)
       }
+    },
+    initRemark() {
+      this.remarkCfg = getRemark(this.chart)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index 2728db7819..fc13f30d46 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -36,8 +36,44 @@
             <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
         </div>
+
+        <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
+          <el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <span v-show="titleForm.remarkShow">
+          <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_edit')" class="form-item">
+            <el-button
+              :title="$t('chart.edit')"
+              icon="el-icon-edit"
+              type="text"
+              size="small"
+              @click="editRemark"
+            />
+          </el-form-item>
+          <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_bg_color')" class="form-item">
+            <el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
+          </el-form-item>
+        </span>
       </el-form>
     </el-col>
+
+    <!--富文本编辑框-->
+    <el-dialog
+      v-if="showEditRemark"
+      v-dialogDrag
+      :title="$t('chart.remark')"
+      :visible="showEditRemark"
+      :show-close="false"
+      width="70%"
+      class="dialog-css"
+      append-to-body
+    >
+      <remark-editor :remark="titleForm.remark" @onRemarkChange="onRemarkChange" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeRemark">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="changeRemark">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -45,9 +81,11 @@
 import { 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/component-style/dialog/RemarkEditor'
 
 export default {
   name: 'TitleSelectorAntV',
+  components: { RemarkEditor },
   props: {
     param: {
       type: Object,
@@ -70,7 +108,9 @@ export default {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
       fontSize: [],
       isSetting: false,
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      showEditRemark: false,
+      tmpRemark: ''
     }
   },
   computed: {
@@ -101,6 +141,9 @@ export default {
         }
         if (customStyle.text) {
           this.titleForm = customStyle.text
+          this.titleForm.remarkShow = this.titleForm.remarkShow ? this.titleForm.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
+          this.titleForm.remark = this.titleForm.remark ? this.titleForm.remark : DEFAULT_TITLE_STYLE.remark
+          this.titleForm.remarkBackgroundColor = this.titleForm.remarkBackgroundColor ? this.titleForm.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
         }
         if (!this.batchOptStatus) {
           this.titleForm.title = this.chart.title
@@ -138,6 +181,21 @@ export default {
     },
     showProperty(property) {
       return this.propertyInner.includes(property)
+    },
+
+    editRemark() {
+      this.showEditRemark = true
+    },
+    closeRemark() {
+      this.showEditRemark = false
+    },
+    changeRemark() {
+      this.titleForm.remark = this.tmpRemark
+      this.changeTitleStyle('remark')
+      this.closeRemark()
+    },
+    onRemarkChange(val) {
+      this.tmpRemark = val
     }
   }
 }
@@ -162,12 +220,12 @@ export default {
 .el-select-dropdown__item{
   padding: 0 20px;
 }
-  span{
-    font-size: 12px
-  }
-  .el-form-item{
-    margin-bottom: 6px;
-  }
+span{
+  font-size: 12px
+}
+.el-form-item{
+  margin-bottom: 6px;
+}
 
 .switch-style{
   position: absolute;
@@ -178,4 +236,16 @@ export default {
   cursor: pointer;
   z-index: 1003;
 }
+
+.dialog-css >>> .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css >>> .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css >>> .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 </style>
diff --git a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
new file mode 100644
index 0000000000..621a06d39a
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
@@ -0,0 +1,72 @@
+<template>
+  <div style="max-height: 50vh;overflow-y: auto;">
+    <Editor
+      v-model="content"
+      style="width: 100%;height: 100%"
+      :init="init"
+    />
+  </div>
+</template>
+
+<script>
+import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
+import Editor from '@tinymce/tinymce-vue'// 编辑器引入
+export default {
+  name: 'RemarkEditor',
+  components: {
+    Editor
+  },
+  props: {
+    remark: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      content: '',
+      // 初始化配置
+      init: {
+        auto_focus: true,
+        toolbar_items_size: 'small',
+        language_url: '/tinymce/langs/zh_CN.js', // 汉化路径是自定义的，一般放在public或static里面
+        language: 'zh_CN',
+        skin_url: '/tinymce/skins/ui/oxide', // 皮肤
+        content_css: '/tinymce/skins/content/default/content.css',
+        plugins: 'advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
+        // 工具栏
+        toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
+          'alignleft aligncenter alignright | bullist numlist |' +
+          ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
+          '| bdmap indent2em lineheight formatpainter axupimgs',
+        toolbar_location: '/',
+        toolbar_mode: 'wrap',
+        font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
+        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
+        menubar: false,
+        branding: false,
+        height: 300,
+        min_height: 200,
+        max_height: 500,
+        elementpath: false,
+        statusbar: false
+      }
+    }
+  },
+  watch: {
+    content: {
+      handler(newValue) {
+        this.$emit('onRemarkChange', newValue)
+      }
+    }
+  },
+  mounted() {
+    this.content = this.remark
+    tinymce.init({})
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index aa39b60651..f1707beeac 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -1,6 +1,11 @@
 <template>
-  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
-    <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
+  <div ref="tableContainer" :style="bg_class" style="width: 100%;height: 100%;overflow: hidden;">
+    <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+      <div>
+        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+      </div>
+    </span>
     <div
       v-if="chart.data && chart.data.x && chart.data.x.length > 0 && chart.data.series && chart.data.series.length > 0 && chart.data.series[0].data && chart.data.series[0].data.length > 0"
       id="label-content"
@@ -21,12 +26,14 @@
 </template>
 
 <script>
-import { hexColorToRGBA } from '../../chart/util'
+import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
+import TitleRemark from '@/views/chart/view/TitleRemark'
 
 export default {
   name: 'LabelNormal',
+  components: { TitleRemark },
   props: {
     chart: {
       type: Object,
@@ -78,7 +85,11 @@ export default {
       },
       title_show: true,
       borderRadius: '0px',
-      result: ''
+      result: '',
+      remarkCfg: {
+        show: false,
+        content: ''
+      }
     }
   },
   computed: {
@@ -113,6 +124,7 @@ export default {
         that.calcHeight()
       }
       this.setBackGroundBorder()
+      this.initRemark()
     },
     setBackGroundBorder() {
       if (this.chart.customStyle) {
@@ -243,13 +255,16 @@ export default {
         const v = valueFormatter(value, formatterItem)
         this.result = v.includes('NaN') ? value : v
       }
+    },
+    initRemark() {
+      this.remarkCfg = getRemark(this.chart)
     }
   }
 }
 </script>
 
 <style scoped>
-  .table-class>>>.body--wrapper{
-    background: rgba(1,1,1,0);
-  }
+.table-class>>>.body--wrapper{
+  background: rgba(1,1,1,0);
+}
 </style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index db542ec0a0..17fb477a6e 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -1,7 +1,12 @@
 <template>
   <div ref="tableContainer" :style="bg_class" style="width: 100%;height: 100%;overflow: hidden;">
     <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
+    <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+      <div>
+        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+      </div>
+    </span>
     <div
       v-if="chart.data && chart.data.series && chart.data.series.length > 0"
       id="label-content"
@@ -22,13 +27,14 @@
 </template>
 
 <script>
-import { hexColorToRGBA } from '../../chart/util'
+import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import TitleRemark from '@/views/chart/view/TitleRemark'
 
 export default {
   name: 'LabelNormalText',
-  components: { ViewTrackBar },
+  components: { TitleRemark, ViewTrackBar },
   props: {
     chart: {
       type: Object,
@@ -93,7 +99,11 @@ export default {
         left: '0px',
         top: '0px'
       },
-      pointParam: null
+      pointParam: null,
+      remarkCfg: {
+        show: false,
+        content: ''
+      }
     }
   },
   computed: {
@@ -130,6 +140,7 @@ export default {
         that.calcHeight()
       }
       this.setBackGroundBorder()
+      this.initRemark()
     },
     setBackGroundBorder() {
       if (this.chart.customStyle) {
@@ -244,13 +255,16 @@ export default {
         this.trackBarStyle.top = (this.$refs['textData'].offsetTop + this.$refs['textData'].offsetHeight + 10) + 'px'
         this.$refs.viewTrack.trackButtonClick()
       }
+    },
+    initRemark() {
+      this.remarkCfg = getRemark(this.chart)
     }
   }
 }
 </script>
 
 <style scoped>
-  .table-class>>>.body--wrapper{
-    background: rgba(1,1,1,0);
-  }
+.table-class>>>.body--wrapper{
+  background: rgba(1,1,1,0);
+}
 </style>