feat(frontend):前端调整

frontend/src/views/chart/components/shape-attr/TooltipSelector.vue

@@ -25,7 +25,30 @@
             <el-form-item :label="$t('chart.text_color')" class="form-item">
               <colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
             </el-form-item>
-            <el-form-item :label="$t('chart.content_formatter')" class="form-item">
+            <el-form-item class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.content_formatter') }}</span>
+                  <el-tooltip class="item" effect="dark" placement="bottom">
+                    <div slot="content">
+                      模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
+                      <br>
+                      在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
+                      <br>
+                      不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
+                      <br><br>
+                      折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
+                      <br>
+                      散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
+                      <br>
+                      地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
+                      <br>
+                      饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+                    </div>
+                    <i class="el-icon-info" style="cursor: pointer;" />
+                  </el-tooltip>
+                </span>
+              </span>
               <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
             </el-form-item>
           </el-form>

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

@@ -47,7 +47,7 @@ export default {
   .ms-aside-container {
     height: 50vh;
     min-width: 180px;
-    max-width: 300px;
+    max-width: 280px;
   }
 
   .ms-main-container {

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

@@ -9,19 +9,19 @@
       </el-row>
       <el-divider />
 
-      <el-row>
-        <el-form>
-          <el-form-item class="form-item">
-            <el-input
-              v-model="search"
-              size="mini"
-              :placeholder="$t('dataset.search')"
-              prefix-icon="el-icon-search"
-              clearable
-            />
-          </el-form-item>
-        </el-form>
-      </el-row>
+      <!--      <el-row>-->
+      <!--        <el-form>-->
+      <!--          <el-form-item class="form-item">-->
+      <!--            <el-input-->
+      <!--              v-model="search"-->
+      <!--              size="mini"-->
+      <!--              :placeholder="$t('dataset.search')"-->
+      <!--              prefix-icon="el-icon-search"-->
+      <!--              clearable-->
+      <!--            />-->
+      <!--          </el-form-item>-->
+      <!--        </el-form>-->
+      <!--      </el-row>-->
 
       <el-col class="custom-tree-container">
         <div class="block">
@@ -77,9 +77,10 @@
         :data="tableData"
         node-key="id"
         :expand-on-click-node="true"
+        class="tree-list"
         @node-click="sceneClick"
       >
-        <span slot-scope="{ node, data }" class="custom-tree-node">
+        <span slot-scope="{ node, data }" class="custom-tree-node-list">
           <span>
             <span>
               ({{ data.type }})
@@ -107,6 +108,7 @@ export default {
       search: '',
       data: [],
       tableData: [],
+      tables: [],
       currGroup: null,
       expandedArray: [],
       groupForm: {
@@ -129,6 +131,13 @@ export default {
     //   this.groupForm.name = val;
     //   this.tree(this.groupForm);
     // }
+    search(val) {
+      if (val && val !== '') {
+        this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
+      } else {
+        this.tableData = JSON.parse(JSON.stringify(this.tables))
+      }
+    }
   },
   mounted() {
     this.tree(this.groupForm)
@@ -171,7 +180,8 @@ export default {
           sort: 'type asc,create_time desc,name asc',
           sceneId: this.currGroup.id
         }).then(response => {
-          this.tableData = response.data
+          this.tables = response.data
+          this.tableData = JSON.parse(JSON.stringify(this.tables))
         })
       }
     },
@@ -216,6 +226,10 @@ export default {
     padding: 12px 0;
   }
 
+  .tree-list>>>.el-tree-node__expand-icon.is-leaf{
+    display: none;
+  }
+
   .custom-tree-node {
     flex: 1;
     display: flex;
@@ -225,6 +239,15 @@ export default {
     padding-right: 8px;
   }
 
+  .custom-tree-node-list {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding:0 8px;
+  }
+
   .custom-position {
     flex: 1;
     display: flex;