diff --git a/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue b/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue
index bb5254c686..cbeeb01e47 100644
--- a/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue
+++ b/extensions/dataease-extensions-view/view-3dpie/view-3dpie-frontend/src/views/highcharts/3dpie/data.vue
@@ -71,7 +71,6 @@
     </el-row>
 
     <el-row class="padding-lr" style="margin-top: 6px;">
-        <span>test</span>
         <span class="data-area-label">
           <span>{{ $t('chart.result_filter') }}</span>
           <span
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/.babelrc b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/.babelrc
index 3a280ba34b..ea629d351c 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/.babelrc
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-object-rest-spread"]
 }
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/package.json b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/package.json
index dd121e3144..a72e2f8d7a 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/package.json
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/package.json
@@ -12,8 +12,11 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.4.31",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/runtime": "^7.18.9",
     "@riophae/vue-treeselect": "0.4.0",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "vue": "2.6.10",
     "vue-i18n": "7.3.2",
     "vue-router": "^3.0.1",
@@ -22,15 +25,13 @@
     "vuex": "3.1.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-loader": "^8.0.6",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.0",
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/FilterTree.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/FilterTree.vue
new file mode 100644
index 0000000000..2be1ec02d8
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/FilterTree.vue
@@ -0,0 +1,122 @@
+<template>
+    <el-dialog
+        width="896px"
+        append-to-body
+        title="添加过滤"
+        destroy-on-close
+        class="de-dialog-form filter-tree-cont"
+        :visible.sync="dialogVisible"
+    >
+    <div class="tree-cont">
+            <div class="content">
+              <rowAuth ref="rowAuth" />
+            </div>
+          </div>
+          <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <de-btn
+          secondary
+          @click="closeFilter"
+        >{{ $t('chart.cancel') }}
+        </de-btn>
+        <de-btn
+          type="primary"
+          @click="changeFilter"
+        >{{ $t('chart.confirm') }}
+        </de-btn>
+      </div>
+    </el-dialog>
+</template>
+<script>
+import rowAuth from './rowAuth.vue'
+export default {
+  name: 'FilterTree',
+  inject: ['filedList'],
+  components: {
+    rowAuth
+  },
+    data() {
+        return {
+            dialogVisible: false,
+        }
+  },
+  computed: {
+    computedFiledList() {
+      return this.filedList().reduce((pre, next) => {
+        if (next.id !== 'count') {
+          pre[next.id] = next
+        }
+          return pre
+        }, {})
+      }
+    },
+    methods: {
+        closeFilter() {
+            this.dialogVisible = false
+        },
+        changeFilter() {
+            const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
+            if (errorMessage) {
+              this.$message({
+                message: errorMessage,
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            this.dfsTreeDelete(items)
+            this.$emit('filter-data', { logic, items })
+            this.dialogVisible = false
+      },
+      dfsTreeDelete(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTreeDelete(ele.subTree.items)
+          } else {
+            if (ele.field) {
+               this.$delete(ele, 'field')
+            }
+          }
+        })
+      },
+      dfsTree(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTree(ele.subTree.items)
+          } else {
+            if (this.computedFiledList[ele.fieldId]) {
+              ele.field = this.computedFiledList[ele.fieldId]
+            }
+          }
+        })
+      },
+      init(tree) {
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          this.dfsTree(tree.items || [])
+          this.$refs.rowAuth.init(tree || {})
+        })
+      }
+    }
+}
+</script>
+
+<style lang="scss">
+.filter-tree-cont {
+  .tree-cont {
+      min-height: 67px;
+      width: 100%;
+      padding: 16px;
+      border-radius: 4px;
+      border: 1px solid var(--deBorderBase, #DCDFE6);
+      overflow: auto;
+      max-height: 500px;
+      .content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/filterFiled.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/filterFiled.vue
new file mode 100644
index 0000000000..39549bd051
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/filterFiled.vue
@@ -0,0 +1,1043 @@
+<template>
+  <div class="white-nowrap">
+    <div
+      class="field-xpack"
+      :style="computedWidth"
+      @mouseover="showDel = true"
+      @mouseleave="showDel = false"
+    >
+      <span class="filed-title">{{ $t("auth.filter_fields") }}</span>
+
+      <el-dropdown trigger="click" :hide-on-click="false">
+        <el-input
+          :placeholder="$t('auth.select_filter_fields')"
+          v-model="item.name"
+          size="mini"
+          @input="cancel"
+        >
+        </el-input>
+        <el-dropdown-menu class="de-el-dropdown-menu" slot="dropdown">
+          <el-input
+            :placeholder="$t('auth.enter_keywords')"
+            prefix-icon="el-icon-search"
+            size="mini"
+            v-model="keywords"
+          >
+          </el-input>
+          <ul class="dimension">
+            <li
+              @click="selectItem(item)"
+              :style="{
+                backgroundColor: activeName === item.name ? '#f0f7ff' : '',
+              }"
+              :key="item.id"
+              v-for="item in dimensions"
+            >
+              <svg-icon
+                :icon-class="`field_${fieldEnum[item.deType]}`"
+                :class="`field-icon-${fieldEnum[item.deType]}`"
+              />
+              <span>{{ item.name }}</span>
+            </li>
+          </ul>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div class="white-nowrap" style="position: relative" v-if="item.fieldId">
+        <span class="filed-title">{{ $t("auth.screen_method") }}</span>
+        <el-select
+          size="mini"
+          @change="filterTypeChange"
+          v-model="item.filterType"
+          :placeholder="$t('auth.select')"
+        >
+          <el-option
+            v-for="item in filterList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <span class="filed-title">{{ $t("auth.fixed_value") }}</span>
+        <template v-if="item.filterType === 'logic'">
+          <el-select
+            class="w100"
+            size="mini"
+            @change="onOptionsChange"
+            v-model="item.term"
+            :placeholder="$t('auth.default_method')"
+          >
+            <el-option
+              v-for="item in operators"
+              :key="item.value"
+              :label="$t(item.label)"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <template v-if="[2 ,3].includes(item.deType) && !['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input-number
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+              controls-position="right"
+            ></el-input-number>
+            <div class="bottom-line"></div>
+          </template>
+          <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+            />
+            <div class="bottom-line"></div>
+          </template>
+        </template>
+
+        <el-dropdown
+          v-else
+          trigger="click"
+          ref="deElDropdownMenuFixed"
+          :hide-on-click="false"
+        >
+          <el-input
+            v-model="item.enumValue"
+            ref="enumInput"
+            size="mini"
+            @input="cancelfixValue"
+            clearable
+            @clear="clearAll"
+          >
+          </el-input>
+          <el-dropdown-menu class="de-el-dropdown-menu-fixed" slot="dropdown">
+            <div class="de-panel clearfix">
+              <div class="mod-left">
+                <el-input
+                  :placeholder="$t('auth.enter_keywords')"
+                  v-model="filterFiled"
+                >
+                </el-input>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto;height: 231px"
+                >
+                  <li
+                    :key="i"
+                    v-for="i in checkListWithFilter"
+                    class="infinite-list-item"
+                    @click="checkItem(i)"
+                  >
+                    <i
+                      class="el-icon-check"
+                      :style="{ opacity: checklist.includes(i) ? 1 : 0 }"
+                    ></i>
+                    <label>{{ i }}</label>
+                    <span>+</span>
+                  </li>
+                </ul>
+                <button class="select-all" @click="selectAll">
+                  {{ $t("auth.select_all") }}
+                </button>
+              </div>
+              <div class="mod-left right-de">
+                <div class="right-top clearfix">
+                  {{ $t("auth.added") }}{{ checklist.length }}
+                  <div class="right-btn">
+                    <span @click="cancelKeyDow">
+                      <i class="el-icon-edit"></i>
+                      {{ $t("auth.manual_input") }}
+                    </span>
+                    <transition name="el-zoom-in-top">
+                      <div v-if="showTextArea" class="de-el-dropdown-menu-manu">
+                        <div class="text-area">
+                          <textarea
+                            :placeholder="$t('auth.please_fill')"
+                            class="input"
+                            v-model="textareaValue"
+                          ></textarea>
+                          <div class="text-area-btn">
+                            <button
+                              type="button"
+                              @click="showTextArea = false"
+                              class="btn"
+                            >
+                              <span>{{ $t("auth.close") }}</span>
+                            </button>
+                            <button
+                              type="button"
+                              @click="addFields"
+                              class="btn right-add"
+                            >
+                              <span>{{ $t("auth.add") }}</span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </transition>
+                  </div>
+                </div>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto"
+                >
+                  <li
+                    :key="i"
+                    v-for="(i, idx) in checklist"
+                    class="infinite-list-item"
+                  >
+                    <el-tooltip
+                      class="item"
+                      effect="light"
+                      :content="i"
+                      placement="top"
+                      :open-delay="1000"
+                    >
+                      <label>{{ i }}</label>
+                    </el-tooltip>
+                    <i
+                      class="el-icon-delete"
+                      @click="delChecks(idx)"
+                      style="opacity: 1"
+                    ></i>
+                  </li>
+                </ul>
+                <div class="right-menu-foot">
+                  <div class="footer-left">
+                    &nbsp;
+                  </div>
+                  <div class="confirm-btn" @click="confirm">
+                    {{ $t("auth.sure") }}
+                  </div>
+                  <div class="footer-right">
+                    <i class="el-icon-delete" @click="clearAll"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <i
+        v-if="showDel"
+        class="el-icon-delete font12"
+        @click="$emit('del', index)"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum,
+} from "./options";
+export default {
+  inject: ["filedList"],
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      showDel: false,
+      keywords: "",
+      activeName: "",
+      fieldEnum,
+      filterFiled: "",
+      enumList: [],
+      showTextArea: false,
+      keydownCanceled: false,
+      checklist: [],
+      filterList: [],
+      textareaValue: "",
+    };
+  },
+  computed: {
+    checkListWithFilter() {
+      if (!this.filterFiled) return this.enumList;
+      return this.enumList.filter((ele) => ele.includes(this.filterFiled));
+    },
+    checkResult() {
+      return this.checklist.join(",");
+    },
+    computedWidth() {
+      const { term, fieldId, filterType } = this.item;
+      const isNull = ['null', 'empty', 'not_null', 'not_empty'].includes(term) && filterType === 'logic';
+      return {
+        width: !fieldId ? "270px" : isNull ? '670px' : "750px",
+      };
+    },
+    operators() {
+      const { deType } = this.item;
+      if ([0, 5].includes(deType)) {
+        return textOptions;
+      } else if (deType === 1) {
+        return dateOptions;
+      } else {
+        return valueOptions;
+      }
+    },
+    dimensions() {
+      if (!this.keywords) return this.computedFiledList;
+      return this.computedFiledList.filter((ele) =>
+        ele.name.includes(this.keywords)
+      );
+    },
+    computedFiledList() {
+      return this.filedList();
+    }
+  },
+  watch: {
+    checkResult() {
+      this.cancelfixValue();
+    },
+  },
+  created() {
+    this.initNameEnumName();
+    this.filterListInit(this.item.deType)
+  },
+  methods: {
+    confirm() {
+      this.$refs.enumInput.$el.click();
+    },
+    initNameEnumName() {
+      const { name, enumValue, fieldId } = this.item;
+      if (!name && fieldId) {
+        this.checklist = enumValue.split(",");
+      }
+      if (!name && !fieldId) return;
+      this.initEnumOptions();
+      this.activeName = this.item.name;
+      this.checklist = enumValue.split(",");
+    },
+    cancelKeyDow() {
+      if (!this.showTextArea && !this.keydownCanceled) {
+        this.keydownCanceled = true;
+        const { dropdownElm, handleItemKeyDown } =
+          this.$refs.deElDropdownMenuFixed;
+        dropdownElm.removeEventListener("keydown", handleItemKeyDown, true);
+      }
+      this.showTextArea = true;
+    },
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    filterTypeChange(val) {
+      this.item.term = val === 'logic' ? 'eq' : ''
+      this.item.value = '';
+      this.initEnumOptions()
+    },
+    initEnumOptions() {
+      const { deType, filterType, fieldId } = this.item;
+      // 查找枚举值
+      if (filterType === "enum" && [0, 5].includes(deType)) {
+        this.executeAxios(
+          "dataset/field/multFieldValuesForPermissions",
+          "post",
+          { fieldIds: [fieldId] },
+          (res) => {
+            this.enumList = this.optionData(res.data);
+          }
+        );
+      }
+    },
+    onOptionsChange() {
+      this.item.value = "";
+    },
+    optionData(data) {
+      if (!data) return null;
+      return data.filter((item) => !!item);
+    },
+    cancel() {
+      this.item.name = this.activeName || "";
+    },
+    cancelfixValue() {
+      this.item.enumValue = this.checkResult || "";
+    },
+    delChecks(idx) {
+      this.checklist.splice(idx, 1);
+    },
+    selectItem({ name, id, deType }) {
+      this.activeName = name;
+      Object.assign(this.item, {
+        fieldId: id,
+        name,
+        deType,
+        filterType: "logic",
+        enumValue: "",
+        value: "",
+        term: 'eq'
+      });
+      this.filterListInit(deType);
+      this.checklist = []
+    },
+    filterListInit(deType) {
+      this.filterList = [
+        {
+          value: "logic",
+          label: this.$t('deDataset.logic_filter')
+        },
+        {
+          value: "enum",
+          label: this.$t('deDataset.enum_filter')
+        },
+      ];
+      if ([1, 2, 3].includes(deType)) {
+        this.filterList = [this.filterList[0]];
+      }
+    },
+    clearAll() {
+      this.checklist = [];
+    },
+    selectAll() {
+      this.checkListWithFilter.forEach((ele) => {
+        if (!this.checklist.includes(ele)) {
+          this.checklist.push(ele);
+        }
+      });
+    },
+    addFields() {
+      const list = this.textareaValue.split("\n").reduce((pre, next) => {
+        const str = next.trim();
+        if (!str) return pre;
+        pre.add(str);
+        return pre;
+      }, new Set([]));
+      if (list.size) {
+        this.checklist = [...this.checklist, ...list];
+      }
+      this.showTextArea = false;
+    },
+    checkItem(i) {
+      const index = this.checklist.findIndex((ele) => ele === i);
+      if (index === -1) {
+        this.checklist.push(i);
+      } else {
+        this.delChecks(index);
+      }
+    },
+    handleClickOutside() {
+      this.showTextArea = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.white-nowrap {
+  white-space: nowrap;
+}
+.field-xpack {
+  height: 41.4px;
+  padding: 1px 3px 1px 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  min-width: 200px;
+  justify-content: left;
+  position: relative;
+  white-space: nowrap;
+
+  .filed-title {
+    word-wrap: break-word;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    margin-right: 5px;
+    display: inline-block;
+    min-width: 50px;
+    text-align: right;
+  }
+
+  .font12 {
+    font-size: 12px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .el-input:not(.el-input--mini) {
+    width: 170px;
+  }
+
+  .w100.el-select {
+    width: 100px;
+  }
+
+  .w70 {
+    width: 70px;
+  }
+
+  .mar5 {
+    margin-left: -5px;
+  }
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    width: 20px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: none;
+  }
+
+  .el-input-number__decrease:hover {
+    height: 16px;
+    & + .el-input-number__increase {
+      height: 8px;
+    }
+  }
+  .el-input-number__increase:hover {
+    height: 16px;
+    & + .el-input-number__decrease {
+      height: 8px;
+    }
+  }
+
+  .bottom-line {
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    word-wrap: break-word;
+    text-align: left;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: pre;
+    box-sizing: border-box;
+    height: 1px;
+    background-color: #000;
+    opacity: 0.3;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 70px;
+    z-index: 10;
+  }
+
+  .el-input-number.is-controls-right .el-input__inner {
+    padding-right: 20px;
+  }
+
+  .el-input-number {
+    line-height: 26px;
+    height: 27px;
+  }
+
+  .el-select {
+     .el-input__suffix-inner {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-input__icon {
+        height: auto;
+      }
+    }
+  }
+
+  .el-input__inner {
+    background-color: #f8f8fa;
+    border: none;
+    border-radius: 0;
+    height: 26px;
+
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    word-wrap: break-word;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    list-style: none;
+    user-select: none;
+    cursor: pointer;
+    line-height: 26px;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 1;
+  }
+
+  i {
+    margin-left: 5px;
+    color: #7e7e7e;
+  }
+}
+.field-xpack:hover {
+  background-color: #e9eaef;
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="scss">
+.de-el-dropdown-menu {
+  .dimension {
+    max-height: 200px;
+    padding: 0;
+    overflow-y: auto;
+    li {
+      font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+        PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      font-variant: tabular-nums;
+      font-feature-settings: "tnum";
+      list-style: none;
+      box-sizing: border-box;
+      display: block;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+      position: relative;
+      overflow: hidden;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      padding: 0 16px 0 28px;
+      line-height: 32px;
+      height: 32px;
+      margin: 0;
+      padding-left: 16px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+    li:hover {
+      color: #2e74ff;
+      background-color: #f0f7ff;
+    }
+  }
+
+  .el-input__inner {
+    font-family: inherit;
+    overflow: visible;
+    box-sizing: border-box;
+    margin: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: "tnum";
+    display: inline-block;
+    width: 100%;
+    height: 28px;
+    padding: 4px 7px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    line-height: 28px;
+    background-color: #fff;
+    background-image: none;
+    transition: all 0.3s;
+    -webkit-appearance: none;
+    touch-action: manipulation;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: inherit;
+    min-height: 100%;
+    border: 0;
+    border-bottom: 1px solid #e5e5e5;
+    border-radius: 0;
+    padding-left: 26px;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+      border-right-width: 1px !important;
+      outline: 0;
+      border-color: none;
+    }
+  }
+
+  .el-input {
+    font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+      PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    box-sizing: border-box;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: "tnum";
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    text-align: start;
+    padding: 0 6px;
+  }
+}
+
+.de-el-dropdown-menu-fixed {
+  .de-panel {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    box-sizing: border-box;
+    position: relative;
+    padding: 0;
+    width: 360px;
+    max-width: 600px;
+    min-height: 30px;
+    background-color: #fff;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    .mod-left {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      vertical-align: top;
+      padding: 5px;
+      width: 50%;
+      height: 300px;
+      float: left;
+      box-sizing: border-box;
+      .el-input__inner {
+        font-family: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        line-height: 28px;
+        background-color: #fff;
+        background-image: none;
+        border-radius: 2px;
+        transition: all 0.3s;
+        -webkit-appearance: none;
+        touch-action: manipulation;
+        text-overflow: ellipsis;
+        width: 100%;
+        border-bottom: 1px solid hsla(0, 0%, 59%, 0.1);
+        border: 1px solid hsla(0, 0%, 59%, 0.1);
+        height: 30px;
+        padding: 0 8px;
+        outline: 0;
+
+        &:focus {
+          box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+          border-right-width: 1px !important;
+          outline: 0;
+          border-color: none;
+        }
+      }
+    }
+
+    .right-de {
+      border-left: 1px solid hsla(0, 0%, 59%, 0.1);
+    }
+    .autochecker-list {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 221px;
+      position: relative;
+      padding: 0;
+
+      li {
+        direction: ltr;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #333;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 28px;
+        height: 28px;
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+
+        &:hover {
+          background-color: #f8f8fa;
+          color: #2153d4;
+          opacity: 1;
+          span {
+            display: block;
+          }
+        }
+
+        i {
+          color: #333;
+          font-size: 12px;
+          cursor: pointer;
+          vertical-align: top;
+          line-height: 28px;
+          height: 28px;
+          display: inline-block;
+          opacity: 0;
+        }
+
+        label {
+          font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei,
+            sans-serif;
+          font-size: 12px;
+          direction: ltr;
+          color: #333;
+          box-sizing: border-box;
+          touch-action: manipulation;
+          width: 87%;
+          height: 28px;
+          line-height: 14px;
+          padding: 8px 20px;
+          cursor: pointer;
+          display: inline-block;
+          position: relative;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        span {
+          display: none;
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          line-height: 11px;
+          top: 6px;
+          right: 5px;
+          font-size: 15px;
+          cursor: pointer;
+          background: #2153d4;
+          color: #fff;
+          text-align: center;
+          border-radius: 999px;
+        }
+      }
+    }
+
+    .select-all {
+      box-sizing: border-box;
+      margin: 0;
+      overflow: visible;
+      position: relative;
+      font-weight: 400;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;
+      touch-action: manipulation;
+      padding: 0 15px;
+      font-size: 12px;
+      outline: 0;
+      color: #fff;
+      border-color: #2e74ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      border-radius: 0;
+      background: #2153d4;
+      padding-left: 5px;
+      text-align: center;
+      display: inline-block;
+      width: 100%;
+      height: 25px;
+
+      &:hover {
+        border: 1px solid transparent;
+        background: #4794ff;
+        color: #fff;
+      }
+    }
+
+    .right-top {
+      color: rgba(0, 0, 0, 0.65);
+      text-align: left;
+      box-sizing: border-box;
+      zoom: 1;
+      border-bottom: 1px solid #f8f8fa;
+      height: 30px;
+      width: 100%;
+      font-size: 12px;
+      line-height: 35px;
+      // overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .right-btn {
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
+        float: right;
+        cursor: pointer;
+        line-height: 25px;
+        padding: 0 5px;
+        // overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(70, 140, 255, 0.1);
+        width: 75px;
+      }
+    }
+
+    .right-menu-foot {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      box-sizing: border-box;
+      height: 30px;
+      text-align: right;
+      line-height: 30px;
+      margin-top: 5px;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+
+      .footer-left {
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .footer-right {
+        float: right;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+
+      .confirm-btn {
+        box-sizing: border-box;
+        position: relative;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        border: 1px solid transparent;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        border-radius: 2px;
+        outline: 0;
+        color: #fff;
+        background-color: #2e74ff;
+        border-color: #2e74ff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.de-el-dropdown-menu-manu {
+  padding: 0;
+  margin: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 12px;
+  position: absolute;
+  top: 20px;
+  width: 150px;
+  box-sizing: border-box;
+  right: 0;
+  .text-area {
+    box-sizing: border-box;
+    height: 220px;
+    position: relative;
+    .input {
+      touch-action: manipulation;
+      overflow: auto;
+      resize: vertical;
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      background-color: #fff;
+      background-image: none;
+      max-width: 100%;
+      min-height: 28px;
+      line-height: 1.5;
+      vertical-align: bottom;
+      transition: all 0.3s, height 0s;
+      text-overflow: ellipsis;
+      outline: 0;
+      padding: 5px 5px 28px;
+      width: 100%;
+      height: 220px;
+      border-radius: 0;
+      border: none;
+      box-shadow: 0 2px 6px 0 rgba(130, 150, 183, 0.72);
+    }
+
+    .text-area-btn {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      background: #fff;
+      bottom: -1px;
+      padding-bottom: 4px;
+
+      .btn {
+        font-weight: 400;
+        text-align: center;
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        background-color: #fff;
+        outline: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+        border-radius: 0;
+        width: 70px;
+        border: 1px solid rgba(33, 83, 212, 0.9);
+      }
+
+      .right-add {
+        background: #2153d4;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: "020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  /* 触发 hasLayout */
+  zoom: 1;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/options.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/options.js
new file mode 100644
index 0000000000..36a1f426bc
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/options.js
@@ -0,0 +1,24 @@
+function formatEnum(ele) {
+  return {
+    value: ele,
+    label: `chart.filter_${ele.replace(' ', '_')}`
+  }
+}
+
+const textEnum = ['eq', 'not_eq', 'like', 'not like', 'null', 'not_null', 'empty', 'not_empty']
+const textOptions = textEnum.map(formatEnum)
+
+const dateEnum = ['eq', 'not_eq', 'lt', 'gt', 'le', 'ge']
+const dateOptions = dateEnum.map(formatEnum)
+
+const valueEnum = [...dateEnum]
+const valueOptions = valueEnum.map(formatEnum)
+
+const fieldEnum = ['text', 'time', 'value', 'value', '', 'location']
+
+export {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum
+}
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/rowAuth.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/rowAuth.vue
new file mode 100644
index 0000000000..fb3417d5ad
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/rowAuth.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="rowAuth">
+    <rowAuthTree
+      @del="(idx) => del(idx)"
+      @addCondReal="addCondReal"
+      @removeRelationList="removeRelationList"
+      @changeAndOrDfs="(type) => changeAndOrDfs(relationList, type)"
+      :relationList="relationList"
+      :logic.sync="logic"
+      @execute-axios="executeAxios"
+    />
+    <svg width="388" height="100%" class="real-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgRealinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+      ></path>
+    </svg>
+    <svg width="388" height="100%" class="dash-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgDashinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+        stroke-dasharray="4,4"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<script>
+import rowAuthTree from "./rowTeeAuth.vue";
+
+export default {
+  name: "RowAuth",
+  components: {
+    rowAuthTree,
+  },
+  computed: {
+    svgRealinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return "";
+      let path = this.calculateDepth(a);
+      return path;
+    },
+    svgDashinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return `M48 20 L68 20`;
+      let path = this.calculateDepthDash(a);
+      return path;
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    init(expressionTree) {
+      const { logic = "or", items = [] } = expressionTree;
+      this.logic = logic;
+      this.relationList = this.dfsInit(items);
+    },
+    submit() {
+      this.errorMessage = '';
+      return {
+        logic: this.logic,
+        items: this.dfsSubmit(this.relationList),
+        errorMessage: this.errorMessage
+      }
+    },
+    errorDetected({ enumValue, deType, filterType, term, value }) {
+      if (filterType === "logic") {
+        if (
+          !term.includes("null") &&
+          !term.includes("empty") &&
+          (value === "")
+        ) {
+          this.errorMessage = this.$t("chart.filter_value_can_null");
+          return;
+        }
+        if ([2, 3].includes(deType)) {
+          if (parseFloat(value).toString() === "NaN") {
+            this.errorMessage = this.$t("chart.filter_value_can_not_str");
+            return;
+          }
+        }
+      }
+      if (filterType === "enum") {
+        if (enumValue.length < 1) {
+          this.errorMessage = this.$t("chart.enum_value_can_not_null");
+          return;
+        }
+      }
+    },
+    dfsInit(arr) {
+      const elementList = [];
+      arr.forEach((ele) => {
+        const { subTree } = ele;
+        if (subTree) {
+          const { items, logic } = subTree;
+          const child = this.dfsInit(items);
+          elementList.push({ logic, child });
+        } else {
+          const {
+            enumValue,
+            fieldId,
+            filterType,
+            term,
+            value,
+            field,
+          } = ele;
+          const { name, deType } = (field || {});
+          elementList.push({
+            enumValue: enumValue.join(','),
+            fieldId,
+            filterType,
+            term,
+            value,
+            name,
+            deType,
+          });
+        }
+      });
+      return elementList;
+    },
+    dfsSubmit(arr) {
+      const items = [];
+      arr.forEach((ele) => {
+        const { child = [] } = ele;
+        if (child.length) {
+          const { logic } = ele;
+          const subTree = this.dfsSubmit(child);
+          items.push({
+            enumValue: [],
+            fieldId: '',
+            filterType: '',
+            term: '',
+            type: 'tree',
+            value: '', subTree: { logic, items: subTree} });
+        } else {
+          const { enumValue, fieldId, filterType,deType, term, value } = ele;
+          this.errorDetected({ deType, enumValue, filterType, term, value})
+          if (fieldId) {
+            items.push({
+              enumValue: enumValue ?  enumValue.split(',') : [],
+              fieldId,
+              filterType,
+              term,
+              value,
+              type: 'item',
+              subTree: null
+            });
+          }
+        }
+      });
+      return items;
+    },
+    removeRelationList() {
+      this.relationList = [];
+    },
+    getY(arr) {
+      const [a] = arr;
+      if (a.child?.length) {
+        return this.getY(a.child);
+      }
+      return a.y;
+    },
+    getLastY(arr) {
+      const a = arr[arr.length];
+      if (a.child?.length) {
+        return this.getLastY(a.child);
+      }
+      return a.y;
+    },
+    calculateDepthDash(obj) {
+      const lg = obj.child?.length;
+      let path = "";
+      if (!lg && Array.isArray(obj.child)) {
+        const { x, y } = obj;
+        path += `M${48 + x * 68} ${y * 41.4 + 20} L${88 + x * 68} ${
+          y * 41.4 + 20
+        }`;
+      } else if (obj.child?.length) {
+        let y = Math.max(
+          this.dfsY(obj, 0),
+          this.dfs(obj.child, 0) + this.getY(obj.child) - 1
+        );
+        let parent =
+          (this.dfs(obj.child, 0) * 41.4) / 2 +
+          (this.getY(obj.child) || 0) * 41.4;
+        const { x } = obj;
+        path += `M${24 + x * 68} ${parent} L${24 + x * 68} ${y * 41.4 + 20} L${
+          64 + x * 68
+        } ${y * 41.4 + 20}`;
+        obj.child.forEach((item) => {
+          path += this.calculateDepthDash(item);
+        });
+      }
+
+      return path;
+    },
+    calculateDepth(obj) {
+      const lg = obj.child.length;
+      if (!lg) return "";
+      let path = "";
+      const { x: depth, y } = obj;
+      obj.child.forEach((item, index) => {
+        const { y: sibingLg, z } = item;
+        if (item.child?.length) {
+          let parent =
+            (this.dfs(obj.child, 0) * 41.4) / 2 +
+            (this.getY(obj.child) || 0) * 41.4;
+          let children =
+            (this.dfs(item.child, 0) * 41.4) / 2 + this.getY(item.child) * 41.4;
+          let path1 = 0;
+          let path2 = 0;
+          if (parent < children) {
+            path1 = parent;
+            path2 = children;
+          } else {
+            [path1, path2] = [children, parent];
+          }
+          if (y >= sibingLg) {
+            path1 = parent;
+            path2 = children;
+          }
+          path += `M${24 + depth * 68} ${path1} L${24 + depth * 68} ${path2} L${
+            68 + depth * 68
+          } ${path2}`;
+          // path += a;
+          path += this.calculateDepth(item);
+        }
+        if (!item.child?.length) {
+          // console.log(123, y, sibingLg, lg === 1 && index === 0 , item.z);
+          if (sibingLg >= y) {
+            path += `M${24 + depth * 68} ${y * 40} L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 - 20.69921875
+            } L${68 + depth * 68} ${(sibingLg + 1) * 41.4 - 20.69921875}`;
+          } else {
+            path += `M${24 + depth * 68} ${
+              (sibingLg +
+                (lg === 1 && index === 0 ? 0 : 1) +
+                (obj.child[index + 1]?.child?.length ? y - sibingLg - 1 : 0)) *
+                41.4 +
+              20 +
+              (lg === 1 && index === 0 ? 26 : 0)
+            } L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            } L${68 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            }`;
+          }
+        }
+      });
+      return path;
+    },
+    changeAndOrDfs(arr, logic) {
+      arr.forEach((ele) => {
+        if (ele.child) {
+          ele.logic = logic === "and" ? "or" : "and";
+          this.changeAndOrDfs(ele.child, ele.logic);
+        }
+      });
+    },
+    dfs(arr, count) {
+      arr.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfs(ele.child, count);
+        } else {
+          count += 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    dfsY(obj, count) {
+      obj.child.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfsY(ele, count);
+        } else {
+          count = Math.max(count, ele.y, obj.y);
+        }
+      });
+      return count;
+    },
+    dfsXY(obj, count) {
+      obj.child.forEach((ele) => {
+        ele.x = obj.x + 1;
+        if (ele.child?.length) {
+          let l = this.dfs(ele.child, 0);
+          ele.y = Math.floor(l / 2) + count;
+          count = this.dfsXY(ele, count);
+        } else {
+          count += 1;
+          ele.y = count - 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    addCondReal(type, logic) {
+      this.relationList.push(
+        type === "condition"
+          ? { fieldId: '', value: "", enumValue: "", term: "", filterType: "logic", name: "", deType: "" }
+          : { child: [], logic }
+      );
+    },
+    del(index) {
+      this.relationList.splice(index, 1);
+    },
+  },
+  data() {
+    return {
+      relationList: [],
+      logic: "or",
+      errorMessage: "",
+    };
+  },
+};
+</script>
+
+<style>
+.rowAuth {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+}
+.real-line,
+.dash-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/rowTeeAuth.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/rowTeeAuth.vue
new file mode 100644
index 0000000000..571ff08028
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/views/filter/rowTeeAuth.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="logic" :style="marginLeft">
+    <div class="logic-left">
+      <div class="operate-title">
+        <span
+          style="
+             {
+              color: '#bfbfbf';
+            }
+          "
+          class="mrg-title"
+          v-if="x"
+        >
+          {{ logic === 'or' ? "OR" : "AND" }}
+        </span>
+        <el-dropdown @command="handleCommand" trigger="click" v-else>
+          <span
+            style="
+               {
+                color: 'rgba(0,0,0,.65)';
+              }
+            "
+            class="mrg-title"
+          >
+            {{ logic === 'or' ? "OR" : "AND" }}<i class="el-icon-arrow-down"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="and">AND</el-dropdown-item>
+            <el-dropdown-item command="or">OR</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <span class="operate-icon" v-if="x">
+        <!-- <el-tooltip
+          class="item"
+          effect="light"
+          content="切换最外侧关系节点类型时，所有关系都会切换，内外层关系必然相反"
+          placement="top-end"
+        >
+          <i v-if="!x" class="el-icon-warning-outline"></i>
+        </el-tooltip> -->
+        <i class="el-icon-delete"  @click="$emit('removeRelationList')"></i>
+      </span>
+    </div>
+    <div class="logic-right">
+      <template v-for="(item, index) in relationList">
+        <logic-relation
+          :x="item.x"
+          @del="(idx) => del(idx, item.child)"
+          @addCondReal="(type, logic) => add(type, item.child, logic)"
+          v-if="item.child"
+          :key="index"
+          :logic="item.logic"
+          @execute-axios="executeAxios"
+          @removeRelationList="removeRelationList(index)"
+          :relationList="item.child"
+        >
+        </logic-relation>
+        <filter-filed
+          v-else
+          :item="item"
+          @del="$emit('del', index)"
+          :index="index"
+          :key="index"
+          @execute-axios="executeAxios"
+        ></filter-filed>
+      </template>
+      <div class="logic-right-add">
+        <button @click="addCondReal('condition')" class="operand-btn">
+          + {{ $t('auth.add_condition')}}
+        </button>
+        <button v-if="x < 2" @click="addCondReal('relation')" class="operand-btn">
+          + {{ $t('auth.add_relationship')}}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import filterFiled from "./filterFiled";
+export default {
+  name: "LogicRelation",
+  props: {
+    relationList: {
+      type: Array,
+      default: () => [],
+    },
+    x: {
+      type: Number,
+      default: 0,
+    },
+    logic: {
+      type: String,
+      default: 'or',
+    },
+  },
+  components: {
+    filterFiled,
+  },
+  computed: {
+    marginLeft() {
+      return {
+        marginLeft: this.x ? "20px" : 0,
+      };
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    handleCommand(type) {
+      this.$emit('update:logic', type); 
+      this.$emit("changeAndOrDfs", type)
+    },
+    removeRelationList(index) {
+      this.relationList.splice(index, 1);
+    },
+    addCondReal(type) {
+      this.$emit("addCondReal", type, this.logic === 'or' ? 'and' : 'or');
+    },
+    add(type, child, logic) {
+      child.push(type === "condition" ?{ fieldId: '', value: '', enumValue: '', term: '', filterType: 'logic', name: '', deType: "" } : { child: [], logic });
+    },
+    del(index, child) {
+      child.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.logic {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  .logic-left {
+    box-sizing: border-box;
+    width: 48px;
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    z-index: 10;
+
+    .operate-title {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      word-wrap: break-word;
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      display: inline-block;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      width: 65px;
+      background-color: #f8f8fa;
+      line-height: 28px;
+      position: relative;
+      z-index: 1;
+      height: 28px;
+
+      .mrg-title {
+        text-align: left;
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        margin-left: 11px;
+        margin-right: 11px;
+        line-height: 28px;
+        height: 28px;
+
+        i {
+        font-size: 12px;
+      }
+      }
+    }
+
+    &:hover {
+    //   width: 65px;
+
+      .operate-icon {
+        display: flex;
+        align-items: center;
+      }
+
+      .operate-title {
+          .mrg-title {
+            margin-right: 0 !important;
+          }
+      }
+
+    }
+
+    .operate-icon {
+      width: 40px;
+      height: 28px;
+      line-height: 28px;
+      background-color: #f8f8fa;
+      z-index: 1;
+      display: none;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        display: unset;
+        padding: 5px 3px;
+        cursor: pointer;
+        position: relative;
+        z-index: 10;
+      }
+    }
+  }
+
+  .logic-right-add {
+    display: flex;
+    height: 41.4px;
+    align-items: center;
+    padding-left: 26px;
+
+    .operand-btn {
+      box-sizing: border-box;
+      font-weight: 400;
+      text-align: center;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      outline: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      height: 28px;
+      padding: 0 10px;
+      margin-right: 10px;
+      font-size: 12px;
+      color: #246dff;
+      background: #fff;
+      border: 1px solid #246dff;
+      border-radius: 2px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue
index afdec7fcc6..7904d4b4a5 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue
@@ -111,37 +111,33 @@
 
     <!-- 结果过滤器 -->
     <el-row class="padding-lr" style="margin-top: 6px;">
-      <span>{{ $t('chart.result_filter') }}</span>
-
-      <draggable
-        v-model="view.customFilter"
-        :move="onMove"
-        animation="300"
-        class="theme-item-class"
-        group="drag"
-        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-        @add="addCustomFilter"
-        @update="calcData(true)"
-      >
-        <transition-group class="draggable-group">
-          <filter-item
-            v-for="(item,index) in view.customFilter"
-            :key="item.id"
-            :bus="bus"
-            :dimension-data="dimension"
-            :index="index"
-            :item="item"
-            :param="param"
-            :quota-data="quota"
-            @editItemFilter="showEditFilter"
-            @onFilterItemRemove="filterItemRemove"
+      <span class="data-area-label">
+          <span>{{ $t('chart.result_filter') }}</span>
+          <span
+            v-if="!!view.customFilter.logic"
+            class="setting"
+          >已设置</span>
+          <i
+            class="el-icon-arrow-down el-icon-delete data-area-clear"
+            @click="deleteTreeFilter"
           />
-        </transition-group>
-      </draggable>
-      <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
-        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-      </div>
+        </span>
+        <div
+          class="tree-btn"
+          :class="!!view.customFilter.logic && 'active'"
+          @click="openTreeFilter"
+        >
+          <svg-icon
+            class="svg-background"
+            icon-class="icon-filter_outlined"
+          />
+          <span>过滤</span>
+        </div>
     </el-row>
+    <FilterTree
+      ref="filterTree"
+      @filter-data="changeFilterData"
+    />
 
   </div>
 </template>
@@ -153,8 +149,14 @@ import QuotaExtItem from '../../../components/views/QuotaExtItem'
 import FilterItem from '../../../components/views/FilterItem'
 import messages from '@/de-base/lang/messages'
 import {defaultTo} from "lodash-es"
+import FilterTree from '@/components/views/filter/FilterTree.vue'
 
 export default {
+  provide() {
+    return {
+      filedList: () => this.filedList
+    }
+  },
   props: {
     obj: {
       type: Object,
@@ -171,7 +173,8 @@ export default {
     DimensionItem,
     QuotaItem,
     QuotaExtItem,
-    FilterItem
+    FilterItem,
+    FilterTree
   },
   data() {
     return {
@@ -194,6 +197,9 @@ export default {
     }
   },
   computed: {
+    filedList() {
+      return [...this.dimension, ...this.quota].filter(ele => ele.id !== 'count')
+    },
     param() {
       return this.obj.param
     },
@@ -260,6 +266,16 @@ export default {
     }*/
   },
   methods: {
+    changeFilterData(customFilter) {
+      this.view.customFilter =JSON.parse(JSON.stringify(customFilter))
+      this.calcData(true)
+    },
+    openTreeFilter() {
+      this.$refs.filterTree.init(JSON.parse(JSON.stringify(this.view.customFilter)))
+    },
+    deleteTreeFilter() {
+      this.changeFilterData({})
+    },
     executeAxios(url, type, data, callBack) {
       const param = {
         url: url,
@@ -463,6 +479,49 @@ export default {
 <style lang="scss" scoped>
 .padding-lr {
   padding: 0 6px;
+  .data-area-label {
+    text-align: left;
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    .setting {
+      padding: 0px 4px 0px 4px;
+      border-radius: 2px;
+      background-color: #1F23291A;
+      color: #646A73;
+      position: absolute;
+      top: 1px;
+      right: 23px;
+      z-index: 1;
+    }
+  }
+
+  .tree-btn {
+      width: 100%;
+      background: #fff;
+      height: 32px;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      display: flex;
+      color: #CCCCCC;
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      font-size: 12px;
+
+      &.active {
+        color: #3370FF;
+        border-color: #3370FF;
+      }
+    }
+    .data-area-clear {
+      position: absolute;
+      top: 4px;
+      right: 6px;
+      color: rgb(135, 141, 159);
+      cursor: pointer;
+      z-index: 1;
+    }
 }
 
 .itxst {
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/.babelrc b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/.babelrc
index 3a280ba34b..ea629d351c 100644
--- a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/.babelrc
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-object-rest-spread"]
 }
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/package.json b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/package.json
index 01a456b08b..32266adcce 100644
--- a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/package.json
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/package.json
@@ -11,6 +11,8 @@
     "buildPlugin": "node build/build-async-plugins.js"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "@babel/runtime": "^7.18.9",
     "@riophae/vue-treeselect": "0.4.0",
     "lodash": "^4.17.21",
     "vue": "2.6.10",
@@ -22,14 +24,12 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "babel-loader": "^8.0.6",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.0",
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/FilterTree.vue b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/FilterTree.vue
new file mode 100644
index 0000000000..2be1ec02d8
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/FilterTree.vue
@@ -0,0 +1,122 @@
+<template>
+    <el-dialog
+        width="896px"
+        append-to-body
+        title="添加过滤"
+        destroy-on-close
+        class="de-dialog-form filter-tree-cont"
+        :visible.sync="dialogVisible"
+    >
+    <div class="tree-cont">
+            <div class="content">
+              <rowAuth ref="rowAuth" />
+            </div>
+          </div>
+          <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <de-btn
+          secondary
+          @click="closeFilter"
+        >{{ $t('chart.cancel') }}
+        </de-btn>
+        <de-btn
+          type="primary"
+          @click="changeFilter"
+        >{{ $t('chart.confirm') }}
+        </de-btn>
+      </div>
+    </el-dialog>
+</template>
+<script>
+import rowAuth from './rowAuth.vue'
+export default {
+  name: 'FilterTree',
+  inject: ['filedList'],
+  components: {
+    rowAuth
+  },
+    data() {
+        return {
+            dialogVisible: false,
+        }
+  },
+  computed: {
+    computedFiledList() {
+      return this.filedList().reduce((pre, next) => {
+        if (next.id !== 'count') {
+          pre[next.id] = next
+        }
+          return pre
+        }, {})
+      }
+    },
+    methods: {
+        closeFilter() {
+            this.dialogVisible = false
+        },
+        changeFilter() {
+            const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
+            if (errorMessage) {
+              this.$message({
+                message: errorMessage,
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            this.dfsTreeDelete(items)
+            this.$emit('filter-data', { logic, items })
+            this.dialogVisible = false
+      },
+      dfsTreeDelete(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTreeDelete(ele.subTree.items)
+          } else {
+            if (ele.field) {
+               this.$delete(ele, 'field')
+            }
+          }
+        })
+      },
+      dfsTree(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTree(ele.subTree.items)
+          } else {
+            if (this.computedFiledList[ele.fieldId]) {
+              ele.field = this.computedFiledList[ele.fieldId]
+            }
+          }
+        })
+      },
+      init(tree) {
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          this.dfsTree(tree.items || [])
+          this.$refs.rowAuth.init(tree || {})
+        })
+      }
+    }
+}
+</script>
+
+<style lang="scss">
+.filter-tree-cont {
+  .tree-cont {
+      min-height: 67px;
+      width: 100%;
+      padding: 16px;
+      border-radius: 4px;
+      border: 1px solid var(--deBorderBase, #DCDFE6);
+      overflow: auto;
+      max-height: 500px;
+      .content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/filterFiled.vue b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/filterFiled.vue
new file mode 100644
index 0000000000..39549bd051
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/filterFiled.vue
@@ -0,0 +1,1043 @@
+<template>
+  <div class="white-nowrap">
+    <div
+      class="field-xpack"
+      :style="computedWidth"
+      @mouseover="showDel = true"
+      @mouseleave="showDel = false"
+    >
+      <span class="filed-title">{{ $t("auth.filter_fields") }}</span>
+
+      <el-dropdown trigger="click" :hide-on-click="false">
+        <el-input
+          :placeholder="$t('auth.select_filter_fields')"
+          v-model="item.name"
+          size="mini"
+          @input="cancel"
+        >
+        </el-input>
+        <el-dropdown-menu class="de-el-dropdown-menu" slot="dropdown">
+          <el-input
+            :placeholder="$t('auth.enter_keywords')"
+            prefix-icon="el-icon-search"
+            size="mini"
+            v-model="keywords"
+          >
+          </el-input>
+          <ul class="dimension">
+            <li
+              @click="selectItem(item)"
+              :style="{
+                backgroundColor: activeName === item.name ? '#f0f7ff' : '',
+              }"
+              :key="item.id"
+              v-for="item in dimensions"
+            >
+              <svg-icon
+                :icon-class="`field_${fieldEnum[item.deType]}`"
+                :class="`field-icon-${fieldEnum[item.deType]}`"
+              />
+              <span>{{ item.name }}</span>
+            </li>
+          </ul>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div class="white-nowrap" style="position: relative" v-if="item.fieldId">
+        <span class="filed-title">{{ $t("auth.screen_method") }}</span>
+        <el-select
+          size="mini"
+          @change="filterTypeChange"
+          v-model="item.filterType"
+          :placeholder="$t('auth.select')"
+        >
+          <el-option
+            v-for="item in filterList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <span class="filed-title">{{ $t("auth.fixed_value") }}</span>
+        <template v-if="item.filterType === 'logic'">
+          <el-select
+            class="w100"
+            size="mini"
+            @change="onOptionsChange"
+            v-model="item.term"
+            :placeholder="$t('auth.default_method')"
+          >
+            <el-option
+              v-for="item in operators"
+              :key="item.value"
+              :label="$t(item.label)"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <template v-if="[2 ,3].includes(item.deType) && !['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input-number
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+              controls-position="right"
+            ></el-input-number>
+            <div class="bottom-line"></div>
+          </template>
+          <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+            />
+            <div class="bottom-line"></div>
+          </template>
+        </template>
+
+        <el-dropdown
+          v-else
+          trigger="click"
+          ref="deElDropdownMenuFixed"
+          :hide-on-click="false"
+        >
+          <el-input
+            v-model="item.enumValue"
+            ref="enumInput"
+            size="mini"
+            @input="cancelfixValue"
+            clearable
+            @clear="clearAll"
+          >
+          </el-input>
+          <el-dropdown-menu class="de-el-dropdown-menu-fixed" slot="dropdown">
+            <div class="de-panel clearfix">
+              <div class="mod-left">
+                <el-input
+                  :placeholder="$t('auth.enter_keywords')"
+                  v-model="filterFiled"
+                >
+                </el-input>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto;height: 231px"
+                >
+                  <li
+                    :key="i"
+                    v-for="i in checkListWithFilter"
+                    class="infinite-list-item"
+                    @click="checkItem(i)"
+                  >
+                    <i
+                      class="el-icon-check"
+                      :style="{ opacity: checklist.includes(i) ? 1 : 0 }"
+                    ></i>
+                    <label>{{ i }}</label>
+                    <span>+</span>
+                  </li>
+                </ul>
+                <button class="select-all" @click="selectAll">
+                  {{ $t("auth.select_all") }}
+                </button>
+              </div>
+              <div class="mod-left right-de">
+                <div class="right-top clearfix">
+                  {{ $t("auth.added") }}{{ checklist.length }}
+                  <div class="right-btn">
+                    <span @click="cancelKeyDow">
+                      <i class="el-icon-edit"></i>
+                      {{ $t("auth.manual_input") }}
+                    </span>
+                    <transition name="el-zoom-in-top">
+                      <div v-if="showTextArea" class="de-el-dropdown-menu-manu">
+                        <div class="text-area">
+                          <textarea
+                            :placeholder="$t('auth.please_fill')"
+                            class="input"
+                            v-model="textareaValue"
+                          ></textarea>
+                          <div class="text-area-btn">
+                            <button
+                              type="button"
+                              @click="showTextArea = false"
+                              class="btn"
+                            >
+                              <span>{{ $t("auth.close") }}</span>
+                            </button>
+                            <button
+                              type="button"
+                              @click="addFields"
+                              class="btn right-add"
+                            >
+                              <span>{{ $t("auth.add") }}</span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </transition>
+                  </div>
+                </div>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto"
+                >
+                  <li
+                    :key="i"
+                    v-for="(i, idx) in checklist"
+                    class="infinite-list-item"
+                  >
+                    <el-tooltip
+                      class="item"
+                      effect="light"
+                      :content="i"
+                      placement="top"
+                      :open-delay="1000"
+                    >
+                      <label>{{ i }}</label>
+                    </el-tooltip>
+                    <i
+                      class="el-icon-delete"
+                      @click="delChecks(idx)"
+                      style="opacity: 1"
+                    ></i>
+                  </li>
+                </ul>
+                <div class="right-menu-foot">
+                  <div class="footer-left">
+                    &nbsp;
+                  </div>
+                  <div class="confirm-btn" @click="confirm">
+                    {{ $t("auth.sure") }}
+                  </div>
+                  <div class="footer-right">
+                    <i class="el-icon-delete" @click="clearAll"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <i
+        v-if="showDel"
+        class="el-icon-delete font12"
+        @click="$emit('del', index)"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum,
+} from "./options";
+export default {
+  inject: ["filedList"],
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      showDel: false,
+      keywords: "",
+      activeName: "",
+      fieldEnum,
+      filterFiled: "",
+      enumList: [],
+      showTextArea: false,
+      keydownCanceled: false,
+      checklist: [],
+      filterList: [],
+      textareaValue: "",
+    };
+  },
+  computed: {
+    checkListWithFilter() {
+      if (!this.filterFiled) return this.enumList;
+      return this.enumList.filter((ele) => ele.includes(this.filterFiled));
+    },
+    checkResult() {
+      return this.checklist.join(",");
+    },
+    computedWidth() {
+      const { term, fieldId, filterType } = this.item;
+      const isNull = ['null', 'empty', 'not_null', 'not_empty'].includes(term) && filterType === 'logic';
+      return {
+        width: !fieldId ? "270px" : isNull ? '670px' : "750px",
+      };
+    },
+    operators() {
+      const { deType } = this.item;
+      if ([0, 5].includes(deType)) {
+        return textOptions;
+      } else if (deType === 1) {
+        return dateOptions;
+      } else {
+        return valueOptions;
+      }
+    },
+    dimensions() {
+      if (!this.keywords) return this.computedFiledList;
+      return this.computedFiledList.filter((ele) =>
+        ele.name.includes(this.keywords)
+      );
+    },
+    computedFiledList() {
+      return this.filedList();
+    }
+  },
+  watch: {
+    checkResult() {
+      this.cancelfixValue();
+    },
+  },
+  created() {
+    this.initNameEnumName();
+    this.filterListInit(this.item.deType)
+  },
+  methods: {
+    confirm() {
+      this.$refs.enumInput.$el.click();
+    },
+    initNameEnumName() {
+      const { name, enumValue, fieldId } = this.item;
+      if (!name && fieldId) {
+        this.checklist = enumValue.split(",");
+      }
+      if (!name && !fieldId) return;
+      this.initEnumOptions();
+      this.activeName = this.item.name;
+      this.checklist = enumValue.split(",");
+    },
+    cancelKeyDow() {
+      if (!this.showTextArea && !this.keydownCanceled) {
+        this.keydownCanceled = true;
+        const { dropdownElm, handleItemKeyDown } =
+          this.$refs.deElDropdownMenuFixed;
+        dropdownElm.removeEventListener("keydown", handleItemKeyDown, true);
+      }
+      this.showTextArea = true;
+    },
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    filterTypeChange(val) {
+      this.item.term = val === 'logic' ? 'eq' : ''
+      this.item.value = '';
+      this.initEnumOptions()
+    },
+    initEnumOptions() {
+      const { deType, filterType, fieldId } = this.item;
+      // 查找枚举值
+      if (filterType === "enum" && [0, 5].includes(deType)) {
+        this.executeAxios(
+          "dataset/field/multFieldValuesForPermissions",
+          "post",
+          { fieldIds: [fieldId] },
+          (res) => {
+            this.enumList = this.optionData(res.data);
+          }
+        );
+      }
+    },
+    onOptionsChange() {
+      this.item.value = "";
+    },
+    optionData(data) {
+      if (!data) return null;
+      return data.filter((item) => !!item);
+    },
+    cancel() {
+      this.item.name = this.activeName || "";
+    },
+    cancelfixValue() {
+      this.item.enumValue = this.checkResult || "";
+    },
+    delChecks(idx) {
+      this.checklist.splice(idx, 1);
+    },
+    selectItem({ name, id, deType }) {
+      this.activeName = name;
+      Object.assign(this.item, {
+        fieldId: id,
+        name,
+        deType,
+        filterType: "logic",
+        enumValue: "",
+        value: "",
+        term: 'eq'
+      });
+      this.filterListInit(deType);
+      this.checklist = []
+    },
+    filterListInit(deType) {
+      this.filterList = [
+        {
+          value: "logic",
+          label: this.$t('deDataset.logic_filter')
+        },
+        {
+          value: "enum",
+          label: this.$t('deDataset.enum_filter')
+        },
+      ];
+      if ([1, 2, 3].includes(deType)) {
+        this.filterList = [this.filterList[0]];
+      }
+    },
+    clearAll() {
+      this.checklist = [];
+    },
+    selectAll() {
+      this.checkListWithFilter.forEach((ele) => {
+        if (!this.checklist.includes(ele)) {
+          this.checklist.push(ele);
+        }
+      });
+    },
+    addFields() {
+      const list = this.textareaValue.split("\n").reduce((pre, next) => {
+        const str = next.trim();
+        if (!str) return pre;
+        pre.add(str);
+        return pre;
+      }, new Set([]));
+      if (list.size) {
+        this.checklist = [...this.checklist, ...list];
+      }
+      this.showTextArea = false;
+    },
+    checkItem(i) {
+      const index = this.checklist.findIndex((ele) => ele === i);
+      if (index === -1) {
+        this.checklist.push(i);
+      } else {
+        this.delChecks(index);
+      }
+    },
+    handleClickOutside() {
+      this.showTextArea = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.white-nowrap {
+  white-space: nowrap;
+}
+.field-xpack {
+  height: 41.4px;
+  padding: 1px 3px 1px 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  min-width: 200px;
+  justify-content: left;
+  position: relative;
+  white-space: nowrap;
+
+  .filed-title {
+    word-wrap: break-word;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    margin-right: 5px;
+    display: inline-block;
+    min-width: 50px;
+    text-align: right;
+  }
+
+  .font12 {
+    font-size: 12px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .el-input:not(.el-input--mini) {
+    width: 170px;
+  }
+
+  .w100.el-select {
+    width: 100px;
+  }
+
+  .w70 {
+    width: 70px;
+  }
+
+  .mar5 {
+    margin-left: -5px;
+  }
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    width: 20px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: none;
+  }
+
+  .el-input-number__decrease:hover {
+    height: 16px;
+    & + .el-input-number__increase {
+      height: 8px;
+    }
+  }
+  .el-input-number__increase:hover {
+    height: 16px;
+    & + .el-input-number__decrease {
+      height: 8px;
+    }
+  }
+
+  .bottom-line {
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    word-wrap: break-word;
+    text-align: left;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: pre;
+    box-sizing: border-box;
+    height: 1px;
+    background-color: #000;
+    opacity: 0.3;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 70px;
+    z-index: 10;
+  }
+
+  .el-input-number.is-controls-right .el-input__inner {
+    padding-right: 20px;
+  }
+
+  .el-input-number {
+    line-height: 26px;
+    height: 27px;
+  }
+
+  .el-select {
+     .el-input__suffix-inner {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-input__icon {
+        height: auto;
+      }
+    }
+  }
+
+  .el-input__inner {
+    background-color: #f8f8fa;
+    border: none;
+    border-radius: 0;
+    height: 26px;
+
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    word-wrap: break-word;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    list-style: none;
+    user-select: none;
+    cursor: pointer;
+    line-height: 26px;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 1;
+  }
+
+  i {
+    margin-left: 5px;
+    color: #7e7e7e;
+  }
+}
+.field-xpack:hover {
+  background-color: #e9eaef;
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="scss">
+.de-el-dropdown-menu {
+  .dimension {
+    max-height: 200px;
+    padding: 0;
+    overflow-y: auto;
+    li {
+      font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+        PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      font-variant: tabular-nums;
+      font-feature-settings: "tnum";
+      list-style: none;
+      box-sizing: border-box;
+      display: block;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+      position: relative;
+      overflow: hidden;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      padding: 0 16px 0 28px;
+      line-height: 32px;
+      height: 32px;
+      margin: 0;
+      padding-left: 16px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+    li:hover {
+      color: #2e74ff;
+      background-color: #f0f7ff;
+    }
+  }
+
+  .el-input__inner {
+    font-family: inherit;
+    overflow: visible;
+    box-sizing: border-box;
+    margin: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: "tnum";
+    display: inline-block;
+    width: 100%;
+    height: 28px;
+    padding: 4px 7px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    line-height: 28px;
+    background-color: #fff;
+    background-image: none;
+    transition: all 0.3s;
+    -webkit-appearance: none;
+    touch-action: manipulation;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: inherit;
+    min-height: 100%;
+    border: 0;
+    border-bottom: 1px solid #e5e5e5;
+    border-radius: 0;
+    padding-left: 26px;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+      border-right-width: 1px !important;
+      outline: 0;
+      border-color: none;
+    }
+  }
+
+  .el-input {
+    font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+      PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    box-sizing: border-box;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: "tnum";
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    text-align: start;
+    padding: 0 6px;
+  }
+}
+
+.de-el-dropdown-menu-fixed {
+  .de-panel {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    box-sizing: border-box;
+    position: relative;
+    padding: 0;
+    width: 360px;
+    max-width: 600px;
+    min-height: 30px;
+    background-color: #fff;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    .mod-left {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      vertical-align: top;
+      padding: 5px;
+      width: 50%;
+      height: 300px;
+      float: left;
+      box-sizing: border-box;
+      .el-input__inner {
+        font-family: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        line-height: 28px;
+        background-color: #fff;
+        background-image: none;
+        border-radius: 2px;
+        transition: all 0.3s;
+        -webkit-appearance: none;
+        touch-action: manipulation;
+        text-overflow: ellipsis;
+        width: 100%;
+        border-bottom: 1px solid hsla(0, 0%, 59%, 0.1);
+        border: 1px solid hsla(0, 0%, 59%, 0.1);
+        height: 30px;
+        padding: 0 8px;
+        outline: 0;
+
+        &:focus {
+          box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+          border-right-width: 1px !important;
+          outline: 0;
+          border-color: none;
+        }
+      }
+    }
+
+    .right-de {
+      border-left: 1px solid hsla(0, 0%, 59%, 0.1);
+    }
+    .autochecker-list {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 221px;
+      position: relative;
+      padding: 0;
+
+      li {
+        direction: ltr;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #333;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 28px;
+        height: 28px;
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+
+        &:hover {
+          background-color: #f8f8fa;
+          color: #2153d4;
+          opacity: 1;
+          span {
+            display: block;
+          }
+        }
+
+        i {
+          color: #333;
+          font-size: 12px;
+          cursor: pointer;
+          vertical-align: top;
+          line-height: 28px;
+          height: 28px;
+          display: inline-block;
+          opacity: 0;
+        }
+
+        label {
+          font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei,
+            sans-serif;
+          font-size: 12px;
+          direction: ltr;
+          color: #333;
+          box-sizing: border-box;
+          touch-action: manipulation;
+          width: 87%;
+          height: 28px;
+          line-height: 14px;
+          padding: 8px 20px;
+          cursor: pointer;
+          display: inline-block;
+          position: relative;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        span {
+          display: none;
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          line-height: 11px;
+          top: 6px;
+          right: 5px;
+          font-size: 15px;
+          cursor: pointer;
+          background: #2153d4;
+          color: #fff;
+          text-align: center;
+          border-radius: 999px;
+        }
+      }
+    }
+
+    .select-all {
+      box-sizing: border-box;
+      margin: 0;
+      overflow: visible;
+      position: relative;
+      font-weight: 400;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;
+      touch-action: manipulation;
+      padding: 0 15px;
+      font-size: 12px;
+      outline: 0;
+      color: #fff;
+      border-color: #2e74ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      border-radius: 0;
+      background: #2153d4;
+      padding-left: 5px;
+      text-align: center;
+      display: inline-block;
+      width: 100%;
+      height: 25px;
+
+      &:hover {
+        border: 1px solid transparent;
+        background: #4794ff;
+        color: #fff;
+      }
+    }
+
+    .right-top {
+      color: rgba(0, 0, 0, 0.65);
+      text-align: left;
+      box-sizing: border-box;
+      zoom: 1;
+      border-bottom: 1px solid #f8f8fa;
+      height: 30px;
+      width: 100%;
+      font-size: 12px;
+      line-height: 35px;
+      // overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .right-btn {
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
+        float: right;
+        cursor: pointer;
+        line-height: 25px;
+        padding: 0 5px;
+        // overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(70, 140, 255, 0.1);
+        width: 75px;
+      }
+    }
+
+    .right-menu-foot {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      box-sizing: border-box;
+      height: 30px;
+      text-align: right;
+      line-height: 30px;
+      margin-top: 5px;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+
+      .footer-left {
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .footer-right {
+        float: right;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+
+      .confirm-btn {
+        box-sizing: border-box;
+        position: relative;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        border: 1px solid transparent;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        border-radius: 2px;
+        outline: 0;
+        color: #fff;
+        background-color: #2e74ff;
+        border-color: #2e74ff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.de-el-dropdown-menu-manu {
+  padding: 0;
+  margin: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 12px;
+  position: absolute;
+  top: 20px;
+  width: 150px;
+  box-sizing: border-box;
+  right: 0;
+  .text-area {
+    box-sizing: border-box;
+    height: 220px;
+    position: relative;
+    .input {
+      touch-action: manipulation;
+      overflow: auto;
+      resize: vertical;
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      background-color: #fff;
+      background-image: none;
+      max-width: 100%;
+      min-height: 28px;
+      line-height: 1.5;
+      vertical-align: bottom;
+      transition: all 0.3s, height 0s;
+      text-overflow: ellipsis;
+      outline: 0;
+      padding: 5px 5px 28px;
+      width: 100%;
+      height: 220px;
+      border-radius: 0;
+      border: none;
+      box-shadow: 0 2px 6px 0 rgba(130, 150, 183, 0.72);
+    }
+
+    .text-area-btn {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      background: #fff;
+      bottom: -1px;
+      padding-bottom: 4px;
+
+      .btn {
+        font-weight: 400;
+        text-align: center;
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        background-color: #fff;
+        outline: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+        border-radius: 0;
+        width: 70px;
+        border: 1px solid rgba(33, 83, 212, 0.9);
+      }
+
+      .right-add {
+        background: #2153d4;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: "020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  /* 触发 hasLayout */
+  zoom: 1;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/options.js b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/options.js
new file mode 100644
index 0000000000..36a1f426bc
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/options.js
@@ -0,0 +1,24 @@
+function formatEnum(ele) {
+  return {
+    value: ele,
+    label: `chart.filter_${ele.replace(' ', '_')}`
+  }
+}
+
+const textEnum = ['eq', 'not_eq', 'like', 'not like', 'null', 'not_null', 'empty', 'not_empty']
+const textOptions = textEnum.map(formatEnum)
+
+const dateEnum = ['eq', 'not_eq', 'lt', 'gt', 'le', 'ge']
+const dateOptions = dateEnum.map(formatEnum)
+
+const valueEnum = [...dateEnum]
+const valueOptions = valueEnum.map(formatEnum)
+
+const fieldEnum = ['text', 'time', 'value', 'value', '', 'location']
+
+export {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum
+}
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/rowAuth.vue b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/rowAuth.vue
new file mode 100644
index 0000000000..fb3417d5ad
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/rowAuth.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="rowAuth">
+    <rowAuthTree
+      @del="(idx) => del(idx)"
+      @addCondReal="addCondReal"
+      @removeRelationList="removeRelationList"
+      @changeAndOrDfs="(type) => changeAndOrDfs(relationList, type)"
+      :relationList="relationList"
+      :logic.sync="logic"
+      @execute-axios="executeAxios"
+    />
+    <svg width="388" height="100%" class="real-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgRealinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+      ></path>
+    </svg>
+    <svg width="388" height="100%" class="dash-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgDashinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+        stroke-dasharray="4,4"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<script>
+import rowAuthTree from "./rowTeeAuth.vue";
+
+export default {
+  name: "RowAuth",
+  components: {
+    rowAuthTree,
+  },
+  computed: {
+    svgRealinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return "";
+      let path = this.calculateDepth(a);
+      return path;
+    },
+    svgDashinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return `M48 20 L68 20`;
+      let path = this.calculateDepthDash(a);
+      return path;
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    init(expressionTree) {
+      const { logic = "or", items = [] } = expressionTree;
+      this.logic = logic;
+      this.relationList = this.dfsInit(items);
+    },
+    submit() {
+      this.errorMessage = '';
+      return {
+        logic: this.logic,
+        items: this.dfsSubmit(this.relationList),
+        errorMessage: this.errorMessage
+      }
+    },
+    errorDetected({ enumValue, deType, filterType, term, value }) {
+      if (filterType === "logic") {
+        if (
+          !term.includes("null") &&
+          !term.includes("empty") &&
+          (value === "")
+        ) {
+          this.errorMessage = this.$t("chart.filter_value_can_null");
+          return;
+        }
+        if ([2, 3].includes(deType)) {
+          if (parseFloat(value).toString() === "NaN") {
+            this.errorMessage = this.$t("chart.filter_value_can_not_str");
+            return;
+          }
+        }
+      }
+      if (filterType === "enum") {
+        if (enumValue.length < 1) {
+          this.errorMessage = this.$t("chart.enum_value_can_not_null");
+          return;
+        }
+      }
+    },
+    dfsInit(arr) {
+      const elementList = [];
+      arr.forEach((ele) => {
+        const { subTree } = ele;
+        if (subTree) {
+          const { items, logic } = subTree;
+          const child = this.dfsInit(items);
+          elementList.push({ logic, child });
+        } else {
+          const {
+            enumValue,
+            fieldId,
+            filterType,
+            term,
+            value,
+            field,
+          } = ele;
+          const { name, deType } = (field || {});
+          elementList.push({
+            enumValue: enumValue.join(','),
+            fieldId,
+            filterType,
+            term,
+            value,
+            name,
+            deType,
+          });
+        }
+      });
+      return elementList;
+    },
+    dfsSubmit(arr) {
+      const items = [];
+      arr.forEach((ele) => {
+        const { child = [] } = ele;
+        if (child.length) {
+          const { logic } = ele;
+          const subTree = this.dfsSubmit(child);
+          items.push({
+            enumValue: [],
+            fieldId: '',
+            filterType: '',
+            term: '',
+            type: 'tree',
+            value: '', subTree: { logic, items: subTree} });
+        } else {
+          const { enumValue, fieldId, filterType,deType, term, value } = ele;
+          this.errorDetected({ deType, enumValue, filterType, term, value})
+          if (fieldId) {
+            items.push({
+              enumValue: enumValue ?  enumValue.split(',') : [],
+              fieldId,
+              filterType,
+              term,
+              value,
+              type: 'item',
+              subTree: null
+            });
+          }
+        }
+      });
+      return items;
+    },
+    removeRelationList() {
+      this.relationList = [];
+    },
+    getY(arr) {
+      const [a] = arr;
+      if (a.child?.length) {
+        return this.getY(a.child);
+      }
+      return a.y;
+    },
+    getLastY(arr) {
+      const a = arr[arr.length];
+      if (a.child?.length) {
+        return this.getLastY(a.child);
+      }
+      return a.y;
+    },
+    calculateDepthDash(obj) {
+      const lg = obj.child?.length;
+      let path = "";
+      if (!lg && Array.isArray(obj.child)) {
+        const { x, y } = obj;
+        path += `M${48 + x * 68} ${y * 41.4 + 20} L${88 + x * 68} ${
+          y * 41.4 + 20
+        }`;
+      } else if (obj.child?.length) {
+        let y = Math.max(
+          this.dfsY(obj, 0),
+          this.dfs(obj.child, 0) + this.getY(obj.child) - 1
+        );
+        let parent =
+          (this.dfs(obj.child, 0) * 41.4) / 2 +
+          (this.getY(obj.child) || 0) * 41.4;
+        const { x } = obj;
+        path += `M${24 + x * 68} ${parent} L${24 + x * 68} ${y * 41.4 + 20} L${
+          64 + x * 68
+        } ${y * 41.4 + 20}`;
+        obj.child.forEach((item) => {
+          path += this.calculateDepthDash(item);
+        });
+      }
+
+      return path;
+    },
+    calculateDepth(obj) {
+      const lg = obj.child.length;
+      if (!lg) return "";
+      let path = "";
+      const { x: depth, y } = obj;
+      obj.child.forEach((item, index) => {
+        const { y: sibingLg, z } = item;
+        if (item.child?.length) {
+          let parent =
+            (this.dfs(obj.child, 0) * 41.4) / 2 +
+            (this.getY(obj.child) || 0) * 41.4;
+          let children =
+            (this.dfs(item.child, 0) * 41.4) / 2 + this.getY(item.child) * 41.4;
+          let path1 = 0;
+          let path2 = 0;
+          if (parent < children) {
+            path1 = parent;
+            path2 = children;
+          } else {
+            [path1, path2] = [children, parent];
+          }
+          if (y >= sibingLg) {
+            path1 = parent;
+            path2 = children;
+          }
+          path += `M${24 + depth * 68} ${path1} L${24 + depth * 68} ${path2} L${
+            68 + depth * 68
+          } ${path2}`;
+          // path += a;
+          path += this.calculateDepth(item);
+        }
+        if (!item.child?.length) {
+          // console.log(123, y, sibingLg, lg === 1 && index === 0 , item.z);
+          if (sibingLg >= y) {
+            path += `M${24 + depth * 68} ${y * 40} L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 - 20.69921875
+            } L${68 + depth * 68} ${(sibingLg + 1) * 41.4 - 20.69921875}`;
+          } else {
+            path += `M${24 + depth * 68} ${
+              (sibingLg +
+                (lg === 1 && index === 0 ? 0 : 1) +
+                (obj.child[index + 1]?.child?.length ? y - sibingLg - 1 : 0)) *
+                41.4 +
+              20 +
+              (lg === 1 && index === 0 ? 26 : 0)
+            } L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            } L${68 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            }`;
+          }
+        }
+      });
+      return path;
+    },
+    changeAndOrDfs(arr, logic) {
+      arr.forEach((ele) => {
+        if (ele.child) {
+          ele.logic = logic === "and" ? "or" : "and";
+          this.changeAndOrDfs(ele.child, ele.logic);
+        }
+      });
+    },
+    dfs(arr, count) {
+      arr.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfs(ele.child, count);
+        } else {
+          count += 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    dfsY(obj, count) {
+      obj.child.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfsY(ele, count);
+        } else {
+          count = Math.max(count, ele.y, obj.y);
+        }
+      });
+      return count;
+    },
+    dfsXY(obj, count) {
+      obj.child.forEach((ele) => {
+        ele.x = obj.x + 1;
+        if (ele.child?.length) {
+          let l = this.dfs(ele.child, 0);
+          ele.y = Math.floor(l / 2) + count;
+          count = this.dfsXY(ele, count);
+        } else {
+          count += 1;
+          ele.y = count - 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    addCondReal(type, logic) {
+      this.relationList.push(
+        type === "condition"
+          ? { fieldId: '', value: "", enumValue: "", term: "", filterType: "logic", name: "", deType: "" }
+          : { child: [], logic }
+      );
+    },
+    del(index) {
+      this.relationList.splice(index, 1);
+    },
+  },
+  data() {
+    return {
+      relationList: [],
+      logic: "or",
+      errorMessage: "",
+    };
+  },
+};
+</script>
+
+<style>
+.rowAuth {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+}
+.real-line,
+.dash-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/rowTeeAuth.vue b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/rowTeeAuth.vue
new file mode 100644
index 0000000000..571ff08028
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/components/views/filter/rowTeeAuth.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="logic" :style="marginLeft">
+    <div class="logic-left">
+      <div class="operate-title">
+        <span
+          style="
+             {
+              color: '#bfbfbf';
+            }
+          "
+          class="mrg-title"
+          v-if="x"
+        >
+          {{ logic === 'or' ? "OR" : "AND" }}
+        </span>
+        <el-dropdown @command="handleCommand" trigger="click" v-else>
+          <span
+            style="
+               {
+                color: 'rgba(0,0,0,.65)';
+              }
+            "
+            class="mrg-title"
+          >
+            {{ logic === 'or' ? "OR" : "AND" }}<i class="el-icon-arrow-down"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="and">AND</el-dropdown-item>
+            <el-dropdown-item command="or">OR</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <span class="operate-icon" v-if="x">
+        <!-- <el-tooltip
+          class="item"
+          effect="light"
+          content="切换最外侧关系节点类型时，所有关系都会切换，内外层关系必然相反"
+          placement="top-end"
+        >
+          <i v-if="!x" class="el-icon-warning-outline"></i>
+        </el-tooltip> -->
+        <i class="el-icon-delete"  @click="$emit('removeRelationList')"></i>
+      </span>
+    </div>
+    <div class="logic-right">
+      <template v-for="(item, index) in relationList">
+        <logic-relation
+          :x="item.x"
+          @del="(idx) => del(idx, item.child)"
+          @addCondReal="(type, logic) => add(type, item.child, logic)"
+          v-if="item.child"
+          :key="index"
+          :logic="item.logic"
+          @execute-axios="executeAxios"
+          @removeRelationList="removeRelationList(index)"
+          :relationList="item.child"
+        >
+        </logic-relation>
+        <filter-filed
+          v-else
+          :item="item"
+          @del="$emit('del', index)"
+          :index="index"
+          :key="index"
+          @execute-axios="executeAxios"
+        ></filter-filed>
+      </template>
+      <div class="logic-right-add">
+        <button @click="addCondReal('condition')" class="operand-btn">
+          + {{ $t('auth.add_condition')}}
+        </button>
+        <button v-if="x < 2" @click="addCondReal('relation')" class="operand-btn">
+          + {{ $t('auth.add_relationship')}}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import filterFiled from "./filterFiled";
+export default {
+  name: "LogicRelation",
+  props: {
+    relationList: {
+      type: Array,
+      default: () => [],
+    },
+    x: {
+      type: Number,
+      default: 0,
+    },
+    logic: {
+      type: String,
+      default: 'or',
+    },
+  },
+  components: {
+    filterFiled,
+  },
+  computed: {
+    marginLeft() {
+      return {
+        marginLeft: this.x ? "20px" : 0,
+      };
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    handleCommand(type) {
+      this.$emit('update:logic', type); 
+      this.$emit("changeAndOrDfs", type)
+    },
+    removeRelationList(index) {
+      this.relationList.splice(index, 1);
+    },
+    addCondReal(type) {
+      this.$emit("addCondReal", type, this.logic === 'or' ? 'and' : 'or');
+    },
+    add(type, child, logic) {
+      child.push(type === "condition" ?{ fieldId: '', value: '', enumValue: '', term: '', filterType: 'logic', name: '', deType: "" } : { child: [], logic });
+    },
+    del(index, child) {
+      child.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.logic {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  .logic-left {
+    box-sizing: border-box;
+    width: 48px;
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    z-index: 10;
+
+    .operate-title {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      word-wrap: break-word;
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      display: inline-block;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      width: 65px;
+      background-color: #f8f8fa;
+      line-height: 28px;
+      position: relative;
+      z-index: 1;
+      height: 28px;
+
+      .mrg-title {
+        text-align: left;
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        margin-left: 11px;
+        margin-right: 11px;
+        line-height: 28px;
+        height: 28px;
+
+        i {
+        font-size: 12px;
+      }
+      }
+    }
+
+    &:hover {
+    //   width: 65px;
+
+      .operate-icon {
+        display: flex;
+        align-items: center;
+      }
+
+      .operate-title {
+          .mrg-title {
+            margin-right: 0 !important;
+          }
+      }
+
+    }
+
+    .operate-icon {
+      width: 40px;
+      height: 28px;
+      line-height: 28px;
+      background-color: #f8f8fa;
+      z-index: 1;
+      display: none;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        display: unset;
+        padding: 5px 3px;
+        cursor: pointer;
+        position: relative;
+        z-index: 10;
+      }
+    }
+  }
+
+  .logic-right-add {
+    display: flex;
+    height: 41.4px;
+    align-items: center;
+    padding-left: 26px;
+
+    .operand-btn {
+      box-sizing: border-box;
+      font-weight: 400;
+      text-align: center;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      outline: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      height: 28px;
+      padding: 0 10px;
+      margin-right: 10px;
+      font-size: 12px;
+      color: #246dff;
+      background: #fff;
+      border: 1px solid #246dff;
+      border-radius: 2px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue
index 30d1a66be4..49634858eb 100644
--- a/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue
+++ b/extensions/dataease-extensions-view/view-racebar/view-racebar-frontend/src/views/antv/racebar/data.vue
@@ -114,37 +114,33 @@
 
     <!-- 结果过滤器 -->
     <el-row class="padding-lr" style="margin-top: 6px;">
-      <span>{{ $t('chart.result_filter') }}</span>
-
-      <draggable
-        v-model="view.customFilter"
-        :move="onMove"
-        animation="300"
-        class="theme-item-class"
-        group="drag"
-        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-        @add="addCustomFilter"
-        @update="calcData(true)"
-      >
-        <transition-group class="draggable-group">
-          <filter-item
-            v-for="(item,index) in view.customFilter"
-            :key="item.id"
-            :bus="bus"
-            :dimension-data="dimension"
-            :index="index"
-            :item="item"
-            :param="param"
-            :quota-data="quota"
-            @editItemFilter="showEditFilter"
-            @onFilterItemRemove="filterItemRemove"
+      <span class="data-area-label">
+          <span>{{ $t('chart.result_filter') }}</span>
+          <span
+            v-if="!!view.customFilter.logic"
+            class="setting"
+          >已设置</span>
+          <i
+            class="el-icon-arrow-down el-icon-delete data-area-clear"
+            @click="deleteTreeFilter"
           />
-        </transition-group>
-      </draggable>
-      <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
-        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-      </div>
+        </span>
+        <div
+          class="tree-btn"
+          :class="!!view.customFilter.logic && 'active'"
+          @click="openTreeFilter"
+        >
+          <svg-icon
+            class="svg-background"
+            icon-class="icon-filter_outlined"
+          />
+          <span>过滤</span>
+        </div>
     </el-row>
+    <FilterTree
+      ref="filterTree"
+      @filter-data="changeFilterData"
+    />
 
   </div>
 </template>
@@ -155,8 +151,14 @@ import DimensionExtItem from '../../../components/views/DimensionExtItem'
 import QuotaItem from '../../../components/views/QuotaItem'
 import FilterItem from '../../../components/views/FilterItem'
 import messages from '@/de-base/lang/messages'
+import FilterTree from '@/components/views/filter/FilterTree.vue'
 
 export default {
+  provide() {
+    return {
+      filedList: () => this.filedList
+    }
+  },
   props: {
     obj: {
       type: Object,
@@ -173,7 +175,8 @@ export default {
     DimensionItem,
     DimensionExtItem,
     QuotaItem,
-    FilterItem
+    FilterItem,
+    FilterTree
   },
   data() {
     return {
@@ -194,6 +197,9 @@ export default {
     }
   },
   computed: {
+    filedList() {
+      return [...this.dimension, ...this.quota].filter(ele => ele.id !== 'count')
+    },
     param() {
       return this.obj.param
     },
@@ -257,6 +263,16 @@ export default {
 
   },
   methods: {
+    changeFilterData(customFilter) {
+      this.view.customFilter =JSON.parse(JSON.stringify(customFilter))
+      this.calcData(true)
+    },
+    openTreeFilter() {
+      this.$refs.filterTree.init(JSON.parse(JSON.stringify(this.view.customFilter)))
+    },
+    deleteTreeFilter() {
+      this.changeFilterData({})
+    },
     executeAxios(url, type, data, callBack) {
       const param = {
         url: url,
@@ -455,6 +471,49 @@ export default {
 <style lang="scss" scoped>
 .padding-lr {
   padding: 0 6px;
+  .data-area-label {
+    text-align: left;
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    .setting {
+      padding: 0px 4px 0px 4px;
+      border-radius: 2px;
+      background-color: #1F23291A;
+      color: #646A73;
+      position: absolute;
+      top: 1px;
+      right: 23px;
+      z-index: 1;
+    }
+  }
+
+  .tree-btn {
+      width: 100%;
+      background: #fff;
+      height: 32px;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      display: flex;
+      color: #CCCCCC;
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      font-size: 12px;
+
+      &.active {
+        color: #3370FF;
+        border-color: #3370FF;
+      }
+    }
+    .data-area-clear {
+      position: absolute;
+      top: 4px;
+      right: 6px;
+      color: rgb(135, 141, 159);
+      cursor: pointer;
+      z-index: 1;
+    }
 }
 
 .itxst {
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/.babelrc b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/.babelrc
index 3a280ba34b..ea629d351c 100644
--- a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/.babelrc
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-object-rest-spread"]
 }
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/package.json b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/package.json
index dd121e3144..2c5c6508af 100644
--- a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/package.json
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/package.json
@@ -11,6 +11,8 @@
     "buildPlugin": "node build/build-async-plugins.js"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "@babel/runtime": "^7.18.9",
     "@antv/g2plot": "^2.4.31",
     "@riophae/vue-treeselect": "0.4.0",
     "lodash": "^4.17.21",
@@ -23,14 +25,12 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "babel-loader": "^8.0.6",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.0",
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/FilterTree.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/FilterTree.vue
new file mode 100644
index 0000000000..2be1ec02d8
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/FilterTree.vue
@@ -0,0 +1,122 @@
+<template>
+    <el-dialog
+        width="896px"
+        append-to-body
+        title="添加过滤"
+        destroy-on-close
+        class="de-dialog-form filter-tree-cont"
+        :visible.sync="dialogVisible"
+    >
+    <div class="tree-cont">
+            <div class="content">
+              <rowAuth ref="rowAuth" />
+            </div>
+          </div>
+          <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <de-btn
+          secondary
+          @click="closeFilter"
+        >{{ $t('chart.cancel') }}
+        </de-btn>
+        <de-btn
+          type="primary"
+          @click="changeFilter"
+        >{{ $t('chart.confirm') }}
+        </de-btn>
+      </div>
+    </el-dialog>
+</template>
+<script>
+import rowAuth from './rowAuth.vue'
+export default {
+  name: 'FilterTree',
+  inject: ['filedList'],
+  components: {
+    rowAuth
+  },
+    data() {
+        return {
+            dialogVisible: false,
+        }
+  },
+  computed: {
+    computedFiledList() {
+      return this.filedList().reduce((pre, next) => {
+        if (next.id !== 'count') {
+          pre[next.id] = next
+        }
+          return pre
+        }, {})
+      }
+    },
+    methods: {
+        closeFilter() {
+            this.dialogVisible = false
+        },
+        changeFilter() {
+            const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
+            if (errorMessage) {
+              this.$message({
+                message: errorMessage,
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            this.dfsTreeDelete(items)
+            this.$emit('filter-data', { logic, items })
+            this.dialogVisible = false
+      },
+      dfsTreeDelete(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTreeDelete(ele.subTree.items)
+          } else {
+            if (ele.field) {
+               this.$delete(ele, 'field')
+            }
+          }
+        })
+      },
+      dfsTree(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTree(ele.subTree.items)
+          } else {
+            if (this.computedFiledList[ele.fieldId]) {
+              ele.field = this.computedFiledList[ele.fieldId]
+            }
+          }
+        })
+      },
+      init(tree) {
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          this.dfsTree(tree.items || [])
+          this.$refs.rowAuth.init(tree || {})
+        })
+      }
+    }
+}
+</script>
+
+<style lang="scss">
+.filter-tree-cont {
+  .tree-cont {
+      min-height: 67px;
+      width: 100%;
+      padding: 16px;
+      border-radius: 4px;
+      border: 1px solid var(--deBorderBase, #DCDFE6);
+      overflow: auto;
+      max-height: 500px;
+      .content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/filterFiled.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/filterFiled.vue
new file mode 100644
index 0000000000..39549bd051
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/filterFiled.vue
@@ -0,0 +1,1043 @@
+<template>
+  <div class="white-nowrap">
+    <div
+      class="field-xpack"
+      :style="computedWidth"
+      @mouseover="showDel = true"
+      @mouseleave="showDel = false"
+    >
+      <span class="filed-title">{{ $t("auth.filter_fields") }}</span>
+
+      <el-dropdown trigger="click" :hide-on-click="false">
+        <el-input
+          :placeholder="$t('auth.select_filter_fields')"
+          v-model="item.name"
+          size="mini"
+          @input="cancel"
+        >
+        </el-input>
+        <el-dropdown-menu class="de-el-dropdown-menu" slot="dropdown">
+          <el-input
+            :placeholder="$t('auth.enter_keywords')"
+            prefix-icon="el-icon-search"
+            size="mini"
+            v-model="keywords"
+          >
+          </el-input>
+          <ul class="dimension">
+            <li
+              @click="selectItem(item)"
+              :style="{
+                backgroundColor: activeName === item.name ? '#f0f7ff' : '',
+              }"
+              :key="item.id"
+              v-for="item in dimensions"
+            >
+              <svg-icon
+                :icon-class="`field_${fieldEnum[item.deType]}`"
+                :class="`field-icon-${fieldEnum[item.deType]}`"
+              />
+              <span>{{ item.name }}</span>
+            </li>
+          </ul>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div class="white-nowrap" style="position: relative" v-if="item.fieldId">
+        <span class="filed-title">{{ $t("auth.screen_method") }}</span>
+        <el-select
+          size="mini"
+          @change="filterTypeChange"
+          v-model="item.filterType"
+          :placeholder="$t('auth.select')"
+        >
+          <el-option
+            v-for="item in filterList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <span class="filed-title">{{ $t("auth.fixed_value") }}</span>
+        <template v-if="item.filterType === 'logic'">
+          <el-select
+            class="w100"
+            size="mini"
+            @change="onOptionsChange"
+            v-model="item.term"
+            :placeholder="$t('auth.default_method')"
+          >
+            <el-option
+              v-for="item in operators"
+              :key="item.value"
+              :label="$t(item.label)"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <template v-if="[2 ,3].includes(item.deType) && !['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input-number
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+              controls-position="right"
+            ></el-input-number>
+            <div class="bottom-line"></div>
+          </template>
+          <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+            />
+            <div class="bottom-line"></div>
+          </template>
+        </template>
+
+        <el-dropdown
+          v-else
+          trigger="click"
+          ref="deElDropdownMenuFixed"
+          :hide-on-click="false"
+        >
+          <el-input
+            v-model="item.enumValue"
+            ref="enumInput"
+            size="mini"
+            @input="cancelfixValue"
+            clearable
+            @clear="clearAll"
+          >
+          </el-input>
+          <el-dropdown-menu class="de-el-dropdown-menu-fixed" slot="dropdown">
+            <div class="de-panel clearfix">
+              <div class="mod-left">
+                <el-input
+                  :placeholder="$t('auth.enter_keywords')"
+                  v-model="filterFiled"
+                >
+                </el-input>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto;height: 231px"
+                >
+                  <li
+                    :key="i"
+                    v-for="i in checkListWithFilter"
+                    class="infinite-list-item"
+                    @click="checkItem(i)"
+                  >
+                    <i
+                      class="el-icon-check"
+                      :style="{ opacity: checklist.includes(i) ? 1 : 0 }"
+                    ></i>
+                    <label>{{ i }}</label>
+                    <span>+</span>
+                  </li>
+                </ul>
+                <button class="select-all" @click="selectAll">
+                  {{ $t("auth.select_all") }}
+                </button>
+              </div>
+              <div class="mod-left right-de">
+                <div class="right-top clearfix">
+                  {{ $t("auth.added") }}{{ checklist.length }}
+                  <div class="right-btn">
+                    <span @click="cancelKeyDow">
+                      <i class="el-icon-edit"></i>
+                      {{ $t("auth.manual_input") }}
+                    </span>
+                    <transition name="el-zoom-in-top">
+                      <div v-if="showTextArea" class="de-el-dropdown-menu-manu">
+                        <div class="text-area">
+                          <textarea
+                            :placeholder="$t('auth.please_fill')"
+                            class="input"
+                            v-model="textareaValue"
+                          ></textarea>
+                          <div class="text-area-btn">
+                            <button
+                              type="button"
+                              @click="showTextArea = false"
+                              class="btn"
+                            >
+                              <span>{{ $t("auth.close") }}</span>
+                            </button>
+                            <button
+                              type="button"
+                              @click="addFields"
+                              class="btn right-add"
+                            >
+                              <span>{{ $t("auth.add") }}</span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </transition>
+                  </div>
+                </div>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto"
+                >
+                  <li
+                    :key="i"
+                    v-for="(i, idx) in checklist"
+                    class="infinite-list-item"
+                  >
+                    <el-tooltip
+                      class="item"
+                      effect="light"
+                      :content="i"
+                      placement="top"
+                      :open-delay="1000"
+                    >
+                      <label>{{ i }}</label>
+                    </el-tooltip>
+                    <i
+                      class="el-icon-delete"
+                      @click="delChecks(idx)"
+                      style="opacity: 1"
+                    ></i>
+                  </li>
+                </ul>
+                <div class="right-menu-foot">
+                  <div class="footer-left">
+                    &nbsp;
+                  </div>
+                  <div class="confirm-btn" @click="confirm">
+                    {{ $t("auth.sure") }}
+                  </div>
+                  <div class="footer-right">
+                    <i class="el-icon-delete" @click="clearAll"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <i
+        v-if="showDel"
+        class="el-icon-delete font12"
+        @click="$emit('del', index)"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum,
+} from "./options";
+export default {
+  inject: ["filedList"],
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      showDel: false,
+      keywords: "",
+      activeName: "",
+      fieldEnum,
+      filterFiled: "",
+      enumList: [],
+      showTextArea: false,
+      keydownCanceled: false,
+      checklist: [],
+      filterList: [],
+      textareaValue: "",
+    };
+  },
+  computed: {
+    checkListWithFilter() {
+      if (!this.filterFiled) return this.enumList;
+      return this.enumList.filter((ele) => ele.includes(this.filterFiled));
+    },
+    checkResult() {
+      return this.checklist.join(",");
+    },
+    computedWidth() {
+      const { term, fieldId, filterType } = this.item;
+      const isNull = ['null', 'empty', 'not_null', 'not_empty'].includes(term) && filterType === 'logic';
+      return {
+        width: !fieldId ? "270px" : isNull ? '670px' : "750px",
+      };
+    },
+    operators() {
+      const { deType } = this.item;
+      if ([0, 5].includes(deType)) {
+        return textOptions;
+      } else if (deType === 1) {
+        return dateOptions;
+      } else {
+        return valueOptions;
+      }
+    },
+    dimensions() {
+      if (!this.keywords) return this.computedFiledList;
+      return this.computedFiledList.filter((ele) =>
+        ele.name.includes(this.keywords)
+      );
+    },
+    computedFiledList() {
+      return this.filedList();
+    }
+  },
+  watch: {
+    checkResult() {
+      this.cancelfixValue();
+    },
+  },
+  created() {
+    this.initNameEnumName();
+    this.filterListInit(this.item.deType)
+  },
+  methods: {
+    confirm() {
+      this.$refs.enumInput.$el.click();
+    },
+    initNameEnumName() {
+      const { name, enumValue, fieldId } = this.item;
+      if (!name && fieldId) {
+        this.checklist = enumValue.split(",");
+      }
+      if (!name && !fieldId) return;
+      this.initEnumOptions();
+      this.activeName = this.item.name;
+      this.checklist = enumValue.split(",");
+    },
+    cancelKeyDow() {
+      if (!this.showTextArea && !this.keydownCanceled) {
+        this.keydownCanceled = true;
+        const { dropdownElm, handleItemKeyDown } =
+          this.$refs.deElDropdownMenuFixed;
+        dropdownElm.removeEventListener("keydown", handleItemKeyDown, true);
+      }
+      this.showTextArea = true;
+    },
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    filterTypeChange(val) {
+      this.item.term = val === 'logic' ? 'eq' : ''
+      this.item.value = '';
+      this.initEnumOptions()
+    },
+    initEnumOptions() {
+      const { deType, filterType, fieldId } = this.item;
+      // 查找枚举值
+      if (filterType === "enum" && [0, 5].includes(deType)) {
+        this.executeAxios(
+          "dataset/field/multFieldValuesForPermissions",
+          "post",
+          { fieldIds: [fieldId] },
+          (res) => {
+            this.enumList = this.optionData(res.data);
+          }
+        );
+      }
+    },
+    onOptionsChange() {
+      this.item.value = "";
+    },
+    optionData(data) {
+      if (!data) return null;
+      return data.filter((item) => !!item);
+    },
+    cancel() {
+      this.item.name = this.activeName || "";
+    },
+    cancelfixValue() {
+      this.item.enumValue = this.checkResult || "";
+    },
+    delChecks(idx) {
+      this.checklist.splice(idx, 1);
+    },
+    selectItem({ name, id, deType }) {
+      this.activeName = name;
+      Object.assign(this.item, {
+        fieldId: id,
+        name,
+        deType,
+        filterType: "logic",
+        enumValue: "",
+        value: "",
+        term: 'eq'
+      });
+      this.filterListInit(deType);
+      this.checklist = []
+    },
+    filterListInit(deType) {
+      this.filterList = [
+        {
+          value: "logic",
+          label: this.$t('deDataset.logic_filter')
+        },
+        {
+          value: "enum",
+          label: this.$t('deDataset.enum_filter')
+        },
+      ];
+      if ([1, 2, 3].includes(deType)) {
+        this.filterList = [this.filterList[0]];
+      }
+    },
+    clearAll() {
+      this.checklist = [];
+    },
+    selectAll() {
+      this.checkListWithFilter.forEach((ele) => {
+        if (!this.checklist.includes(ele)) {
+          this.checklist.push(ele);
+        }
+      });
+    },
+    addFields() {
+      const list = this.textareaValue.split("\n").reduce((pre, next) => {
+        const str = next.trim();
+        if (!str) return pre;
+        pre.add(str);
+        return pre;
+      }, new Set([]));
+      if (list.size) {
+        this.checklist = [...this.checklist, ...list];
+      }
+      this.showTextArea = false;
+    },
+    checkItem(i) {
+      const index = this.checklist.findIndex((ele) => ele === i);
+      if (index === -1) {
+        this.checklist.push(i);
+      } else {
+        this.delChecks(index);
+      }
+    },
+    handleClickOutside() {
+      this.showTextArea = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.white-nowrap {
+  white-space: nowrap;
+}
+.field-xpack {
+  height: 41.4px;
+  padding: 1px 3px 1px 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  min-width: 200px;
+  justify-content: left;
+  position: relative;
+  white-space: nowrap;
+
+  .filed-title {
+    word-wrap: break-word;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    margin-right: 5px;
+    display: inline-block;
+    min-width: 50px;
+    text-align: right;
+  }
+
+  .font12 {
+    font-size: 12px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .el-input:not(.el-input--mini) {
+    width: 170px;
+  }
+
+  .w100.el-select {
+    width: 100px;
+  }
+
+  .w70 {
+    width: 70px;
+  }
+
+  .mar5 {
+    margin-left: -5px;
+  }
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    width: 20px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: none;
+  }
+
+  .el-input-number__decrease:hover {
+    height: 16px;
+    & + .el-input-number__increase {
+      height: 8px;
+    }
+  }
+  .el-input-number__increase:hover {
+    height: 16px;
+    & + .el-input-number__decrease {
+      height: 8px;
+    }
+  }
+
+  .bottom-line {
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    word-wrap: break-word;
+    text-align: left;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: pre;
+    box-sizing: border-box;
+    height: 1px;
+    background-color: #000;
+    opacity: 0.3;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 70px;
+    z-index: 10;
+  }
+
+  .el-input-number.is-controls-right .el-input__inner {
+    padding-right: 20px;
+  }
+
+  .el-input-number {
+    line-height: 26px;
+    height: 27px;
+  }
+
+  .el-select {
+     .el-input__suffix-inner {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-input__icon {
+        height: auto;
+      }
+    }
+  }
+
+  .el-input__inner {
+    background-color: #f8f8fa;
+    border: none;
+    border-radius: 0;
+    height: 26px;
+
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    word-wrap: break-word;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    list-style: none;
+    user-select: none;
+    cursor: pointer;
+    line-height: 26px;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 1;
+  }
+
+  i {
+    margin-left: 5px;
+    color: #7e7e7e;
+  }
+}
+.field-xpack:hover {
+  background-color: #e9eaef;
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="scss">
+.de-el-dropdown-menu {
+  .dimension {
+    max-height: 200px;
+    padding: 0;
+    overflow-y: auto;
+    li {
+      font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+        PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      font-variant: tabular-nums;
+      font-feature-settings: "tnum";
+      list-style: none;
+      box-sizing: border-box;
+      display: block;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+      position: relative;
+      overflow: hidden;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      padding: 0 16px 0 28px;
+      line-height: 32px;
+      height: 32px;
+      margin: 0;
+      padding-left: 16px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+    li:hover {
+      color: #2e74ff;
+      background-color: #f0f7ff;
+    }
+  }
+
+  .el-input__inner {
+    font-family: inherit;
+    overflow: visible;
+    box-sizing: border-box;
+    margin: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: "tnum";
+    display: inline-block;
+    width: 100%;
+    height: 28px;
+    padding: 4px 7px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    line-height: 28px;
+    background-color: #fff;
+    background-image: none;
+    transition: all 0.3s;
+    -webkit-appearance: none;
+    touch-action: manipulation;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: inherit;
+    min-height: 100%;
+    border: 0;
+    border-bottom: 1px solid #e5e5e5;
+    border-radius: 0;
+    padding-left: 26px;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+      border-right-width: 1px !important;
+      outline: 0;
+      border-color: none;
+    }
+  }
+
+  .el-input {
+    font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+      PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    box-sizing: border-box;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: "tnum";
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    text-align: start;
+    padding: 0 6px;
+  }
+}
+
+.de-el-dropdown-menu-fixed {
+  .de-panel {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    box-sizing: border-box;
+    position: relative;
+    padding: 0;
+    width: 360px;
+    max-width: 600px;
+    min-height: 30px;
+    background-color: #fff;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    .mod-left {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      vertical-align: top;
+      padding: 5px;
+      width: 50%;
+      height: 300px;
+      float: left;
+      box-sizing: border-box;
+      .el-input__inner {
+        font-family: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        line-height: 28px;
+        background-color: #fff;
+        background-image: none;
+        border-radius: 2px;
+        transition: all 0.3s;
+        -webkit-appearance: none;
+        touch-action: manipulation;
+        text-overflow: ellipsis;
+        width: 100%;
+        border-bottom: 1px solid hsla(0, 0%, 59%, 0.1);
+        border: 1px solid hsla(0, 0%, 59%, 0.1);
+        height: 30px;
+        padding: 0 8px;
+        outline: 0;
+
+        &:focus {
+          box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+          border-right-width: 1px !important;
+          outline: 0;
+          border-color: none;
+        }
+      }
+    }
+
+    .right-de {
+      border-left: 1px solid hsla(0, 0%, 59%, 0.1);
+    }
+    .autochecker-list {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 221px;
+      position: relative;
+      padding: 0;
+
+      li {
+        direction: ltr;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #333;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 28px;
+        height: 28px;
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+
+        &:hover {
+          background-color: #f8f8fa;
+          color: #2153d4;
+          opacity: 1;
+          span {
+            display: block;
+          }
+        }
+
+        i {
+          color: #333;
+          font-size: 12px;
+          cursor: pointer;
+          vertical-align: top;
+          line-height: 28px;
+          height: 28px;
+          display: inline-block;
+          opacity: 0;
+        }
+
+        label {
+          font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei,
+            sans-serif;
+          font-size: 12px;
+          direction: ltr;
+          color: #333;
+          box-sizing: border-box;
+          touch-action: manipulation;
+          width: 87%;
+          height: 28px;
+          line-height: 14px;
+          padding: 8px 20px;
+          cursor: pointer;
+          display: inline-block;
+          position: relative;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        span {
+          display: none;
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          line-height: 11px;
+          top: 6px;
+          right: 5px;
+          font-size: 15px;
+          cursor: pointer;
+          background: #2153d4;
+          color: #fff;
+          text-align: center;
+          border-radius: 999px;
+        }
+      }
+    }
+
+    .select-all {
+      box-sizing: border-box;
+      margin: 0;
+      overflow: visible;
+      position: relative;
+      font-weight: 400;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;
+      touch-action: manipulation;
+      padding: 0 15px;
+      font-size: 12px;
+      outline: 0;
+      color: #fff;
+      border-color: #2e74ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      border-radius: 0;
+      background: #2153d4;
+      padding-left: 5px;
+      text-align: center;
+      display: inline-block;
+      width: 100%;
+      height: 25px;
+
+      &:hover {
+        border: 1px solid transparent;
+        background: #4794ff;
+        color: #fff;
+      }
+    }
+
+    .right-top {
+      color: rgba(0, 0, 0, 0.65);
+      text-align: left;
+      box-sizing: border-box;
+      zoom: 1;
+      border-bottom: 1px solid #f8f8fa;
+      height: 30px;
+      width: 100%;
+      font-size: 12px;
+      line-height: 35px;
+      // overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .right-btn {
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
+        float: right;
+        cursor: pointer;
+        line-height: 25px;
+        padding: 0 5px;
+        // overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(70, 140, 255, 0.1);
+        width: 75px;
+      }
+    }
+
+    .right-menu-foot {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      box-sizing: border-box;
+      height: 30px;
+      text-align: right;
+      line-height: 30px;
+      margin-top: 5px;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+
+      .footer-left {
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .footer-right {
+        float: right;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+
+      .confirm-btn {
+        box-sizing: border-box;
+        position: relative;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        border: 1px solid transparent;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        border-radius: 2px;
+        outline: 0;
+        color: #fff;
+        background-color: #2e74ff;
+        border-color: #2e74ff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.de-el-dropdown-menu-manu {
+  padding: 0;
+  margin: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 12px;
+  position: absolute;
+  top: 20px;
+  width: 150px;
+  box-sizing: border-box;
+  right: 0;
+  .text-area {
+    box-sizing: border-box;
+    height: 220px;
+    position: relative;
+    .input {
+      touch-action: manipulation;
+      overflow: auto;
+      resize: vertical;
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      background-color: #fff;
+      background-image: none;
+      max-width: 100%;
+      min-height: 28px;
+      line-height: 1.5;
+      vertical-align: bottom;
+      transition: all 0.3s, height 0s;
+      text-overflow: ellipsis;
+      outline: 0;
+      padding: 5px 5px 28px;
+      width: 100%;
+      height: 220px;
+      border-radius: 0;
+      border: none;
+      box-shadow: 0 2px 6px 0 rgba(130, 150, 183, 0.72);
+    }
+
+    .text-area-btn {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      background: #fff;
+      bottom: -1px;
+      padding-bottom: 4px;
+
+      .btn {
+        font-weight: 400;
+        text-align: center;
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        background-color: #fff;
+        outline: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+        border-radius: 0;
+        width: 70px;
+        border: 1px solid rgba(33, 83, 212, 0.9);
+      }
+
+      .right-add {
+        background: #2153d4;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: "020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  /* 触发 hasLayout */
+  zoom: 1;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/options.js b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/options.js
new file mode 100644
index 0000000000..36a1f426bc
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/options.js
@@ -0,0 +1,24 @@
+function formatEnum(ele) {
+  return {
+    value: ele,
+    label: `chart.filter_${ele.replace(' ', '_')}`
+  }
+}
+
+const textEnum = ['eq', 'not_eq', 'like', 'not like', 'null', 'not_null', 'empty', 'not_empty']
+const textOptions = textEnum.map(formatEnum)
+
+const dateEnum = ['eq', 'not_eq', 'lt', 'gt', 'le', 'ge']
+const dateOptions = dateEnum.map(formatEnum)
+
+const valueEnum = [...dateEnum]
+const valueOptions = valueEnum.map(formatEnum)
+
+const fieldEnum = ['text', 'time', 'value', 'value', '', 'location']
+
+export {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum
+}
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/rowAuth.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/rowAuth.vue
new file mode 100644
index 0000000000..fb3417d5ad
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/rowAuth.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="rowAuth">
+    <rowAuthTree
+      @del="(idx) => del(idx)"
+      @addCondReal="addCondReal"
+      @removeRelationList="removeRelationList"
+      @changeAndOrDfs="(type) => changeAndOrDfs(relationList, type)"
+      :relationList="relationList"
+      :logic.sync="logic"
+      @execute-axios="executeAxios"
+    />
+    <svg width="388" height="100%" class="real-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgRealinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+      ></path>
+    </svg>
+    <svg width="388" height="100%" class="dash-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgDashinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+        stroke-dasharray="4,4"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<script>
+import rowAuthTree from "./rowTeeAuth.vue";
+
+export default {
+  name: "RowAuth",
+  components: {
+    rowAuthTree,
+  },
+  computed: {
+    svgRealinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return "";
+      let path = this.calculateDepth(a);
+      return path;
+    },
+    svgDashinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return `M48 20 L68 20`;
+      let path = this.calculateDepthDash(a);
+      return path;
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    init(expressionTree) {
+      const { logic = "or", items = [] } = expressionTree;
+      this.logic = logic;
+      this.relationList = this.dfsInit(items);
+    },
+    submit() {
+      this.errorMessage = '';
+      return {
+        logic: this.logic,
+        items: this.dfsSubmit(this.relationList),
+        errorMessage: this.errorMessage
+      }
+    },
+    errorDetected({ enumValue, deType, filterType, term, value }) {
+      if (filterType === "logic") {
+        if (
+          !term.includes("null") &&
+          !term.includes("empty") &&
+          (value === "")
+        ) {
+          this.errorMessage = this.$t("chart.filter_value_can_null");
+          return;
+        }
+        if ([2, 3].includes(deType)) {
+          if (parseFloat(value).toString() === "NaN") {
+            this.errorMessage = this.$t("chart.filter_value_can_not_str");
+            return;
+          }
+        }
+      }
+      if (filterType === "enum") {
+        if (enumValue.length < 1) {
+          this.errorMessage = this.$t("chart.enum_value_can_not_null");
+          return;
+        }
+      }
+    },
+    dfsInit(arr) {
+      const elementList = [];
+      arr.forEach((ele) => {
+        const { subTree } = ele;
+        if (subTree) {
+          const { items, logic } = subTree;
+          const child = this.dfsInit(items);
+          elementList.push({ logic, child });
+        } else {
+          const {
+            enumValue,
+            fieldId,
+            filterType,
+            term,
+            value,
+            field,
+          } = ele;
+          const { name, deType } = (field || {});
+          elementList.push({
+            enumValue: enumValue.join(','),
+            fieldId,
+            filterType,
+            term,
+            value,
+            name,
+            deType,
+          });
+        }
+      });
+      return elementList;
+    },
+    dfsSubmit(arr) {
+      const items = [];
+      arr.forEach((ele) => {
+        const { child = [] } = ele;
+        if (child.length) {
+          const { logic } = ele;
+          const subTree = this.dfsSubmit(child);
+          items.push({
+            enumValue: [],
+            fieldId: '',
+            filterType: '',
+            term: '',
+            type: 'tree',
+            value: '', subTree: { logic, items: subTree} });
+        } else {
+          const { enumValue, fieldId, filterType,deType, term, value } = ele;
+          this.errorDetected({ deType, enumValue, filterType, term, value})
+          if (fieldId) {
+            items.push({
+              enumValue: enumValue ?  enumValue.split(',') : [],
+              fieldId,
+              filterType,
+              term,
+              value,
+              type: 'item',
+              subTree: null
+            });
+          }
+        }
+      });
+      return items;
+    },
+    removeRelationList() {
+      this.relationList = [];
+    },
+    getY(arr) {
+      const [a] = arr;
+      if (a.child?.length) {
+        return this.getY(a.child);
+      }
+      return a.y;
+    },
+    getLastY(arr) {
+      const a = arr[arr.length];
+      if (a.child?.length) {
+        return this.getLastY(a.child);
+      }
+      return a.y;
+    },
+    calculateDepthDash(obj) {
+      const lg = obj.child?.length;
+      let path = "";
+      if (!lg && Array.isArray(obj.child)) {
+        const { x, y } = obj;
+        path += `M${48 + x * 68} ${y * 41.4 + 20} L${88 + x * 68} ${
+          y * 41.4 + 20
+        }`;
+      } else if (obj.child?.length) {
+        let y = Math.max(
+          this.dfsY(obj, 0),
+          this.dfs(obj.child, 0) + this.getY(obj.child) - 1
+        );
+        let parent =
+          (this.dfs(obj.child, 0) * 41.4) / 2 +
+          (this.getY(obj.child) || 0) * 41.4;
+        const { x } = obj;
+        path += `M${24 + x * 68} ${parent} L${24 + x * 68} ${y * 41.4 + 20} L${
+          64 + x * 68
+        } ${y * 41.4 + 20}`;
+        obj.child.forEach((item) => {
+          path += this.calculateDepthDash(item);
+        });
+      }
+
+      return path;
+    },
+    calculateDepth(obj) {
+      const lg = obj.child.length;
+      if (!lg) return "";
+      let path = "";
+      const { x: depth, y } = obj;
+      obj.child.forEach((item, index) => {
+        const { y: sibingLg, z } = item;
+        if (item.child?.length) {
+          let parent =
+            (this.dfs(obj.child, 0) * 41.4) / 2 +
+            (this.getY(obj.child) || 0) * 41.4;
+          let children =
+            (this.dfs(item.child, 0) * 41.4) / 2 + this.getY(item.child) * 41.4;
+          let path1 = 0;
+          let path2 = 0;
+          if (parent < children) {
+            path1 = parent;
+            path2 = children;
+          } else {
+            [path1, path2] = [children, parent];
+          }
+          if (y >= sibingLg) {
+            path1 = parent;
+            path2 = children;
+          }
+          path += `M${24 + depth * 68} ${path1} L${24 + depth * 68} ${path2} L${
+            68 + depth * 68
+          } ${path2}`;
+          // path += a;
+          path += this.calculateDepth(item);
+        }
+        if (!item.child?.length) {
+          // console.log(123, y, sibingLg, lg === 1 && index === 0 , item.z);
+          if (sibingLg >= y) {
+            path += `M${24 + depth * 68} ${y * 40} L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 - 20.69921875
+            } L${68 + depth * 68} ${(sibingLg + 1) * 41.4 - 20.69921875}`;
+          } else {
+            path += `M${24 + depth * 68} ${
+              (sibingLg +
+                (lg === 1 && index === 0 ? 0 : 1) +
+                (obj.child[index + 1]?.child?.length ? y - sibingLg - 1 : 0)) *
+                41.4 +
+              20 +
+              (lg === 1 && index === 0 ? 26 : 0)
+            } L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            } L${68 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            }`;
+          }
+        }
+      });
+      return path;
+    },
+    changeAndOrDfs(arr, logic) {
+      arr.forEach((ele) => {
+        if (ele.child) {
+          ele.logic = logic === "and" ? "or" : "and";
+          this.changeAndOrDfs(ele.child, ele.logic);
+        }
+      });
+    },
+    dfs(arr, count) {
+      arr.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfs(ele.child, count);
+        } else {
+          count += 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    dfsY(obj, count) {
+      obj.child.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfsY(ele, count);
+        } else {
+          count = Math.max(count, ele.y, obj.y);
+        }
+      });
+      return count;
+    },
+    dfsXY(obj, count) {
+      obj.child.forEach((ele) => {
+        ele.x = obj.x + 1;
+        if (ele.child?.length) {
+          let l = this.dfs(ele.child, 0);
+          ele.y = Math.floor(l / 2) + count;
+          count = this.dfsXY(ele, count);
+        } else {
+          count += 1;
+          ele.y = count - 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    addCondReal(type, logic) {
+      this.relationList.push(
+        type === "condition"
+          ? { fieldId: '', value: "", enumValue: "", term: "", filterType: "logic", name: "", deType: "" }
+          : { child: [], logic }
+      );
+    },
+    del(index) {
+      this.relationList.splice(index, 1);
+    },
+  },
+  data() {
+    return {
+      relationList: [],
+      logic: "or",
+      errorMessage: "",
+    };
+  },
+};
+</script>
+
+<style>
+.rowAuth {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+}
+.real-line,
+.dash-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/rowTeeAuth.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/rowTeeAuth.vue
new file mode 100644
index 0000000000..571ff08028
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/components/views/filter/rowTeeAuth.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="logic" :style="marginLeft">
+    <div class="logic-left">
+      <div class="operate-title">
+        <span
+          style="
+             {
+              color: '#bfbfbf';
+            }
+          "
+          class="mrg-title"
+          v-if="x"
+        >
+          {{ logic === 'or' ? "OR" : "AND" }}
+        </span>
+        <el-dropdown @command="handleCommand" trigger="click" v-else>
+          <span
+            style="
+               {
+                color: 'rgba(0,0,0,.65)';
+              }
+            "
+            class="mrg-title"
+          >
+            {{ logic === 'or' ? "OR" : "AND" }}<i class="el-icon-arrow-down"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="and">AND</el-dropdown-item>
+            <el-dropdown-item command="or">OR</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <span class="operate-icon" v-if="x">
+        <!-- <el-tooltip
+          class="item"
+          effect="light"
+          content="切换最外侧关系节点类型时，所有关系都会切换，内外层关系必然相反"
+          placement="top-end"
+        >
+          <i v-if="!x" class="el-icon-warning-outline"></i>
+        </el-tooltip> -->
+        <i class="el-icon-delete"  @click="$emit('removeRelationList')"></i>
+      </span>
+    </div>
+    <div class="logic-right">
+      <template v-for="(item, index) in relationList">
+        <logic-relation
+          :x="item.x"
+          @del="(idx) => del(idx, item.child)"
+          @addCondReal="(type, logic) => add(type, item.child, logic)"
+          v-if="item.child"
+          :key="index"
+          :logic="item.logic"
+          @execute-axios="executeAxios"
+          @removeRelationList="removeRelationList(index)"
+          :relationList="item.child"
+        >
+        </logic-relation>
+        <filter-filed
+          v-else
+          :item="item"
+          @del="$emit('del', index)"
+          :index="index"
+          :key="index"
+          @execute-axios="executeAxios"
+        ></filter-filed>
+      </template>
+      <div class="logic-right-add">
+        <button @click="addCondReal('condition')" class="operand-btn">
+          + {{ $t('auth.add_condition')}}
+        </button>
+        <button v-if="x < 2" @click="addCondReal('relation')" class="operand-btn">
+          + {{ $t('auth.add_relationship')}}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import filterFiled from "./filterFiled";
+export default {
+  name: "LogicRelation",
+  props: {
+    relationList: {
+      type: Array,
+      default: () => [],
+    },
+    x: {
+      type: Number,
+      default: 0,
+    },
+    logic: {
+      type: String,
+      default: 'or',
+    },
+  },
+  components: {
+    filterFiled,
+  },
+  computed: {
+    marginLeft() {
+      return {
+        marginLeft: this.x ? "20px" : 0,
+      };
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    handleCommand(type) {
+      this.$emit('update:logic', type); 
+      this.$emit("changeAndOrDfs", type)
+    },
+    removeRelationList(index) {
+      this.relationList.splice(index, 1);
+    },
+    addCondReal(type) {
+      this.$emit("addCondReal", type, this.logic === 'or' ? 'and' : 'or');
+    },
+    add(type, child, logic) {
+      child.push(type === "condition" ?{ fieldId: '', value: '', enumValue: '', term: '', filterType: 'logic', name: '', deType: "" } : { child: [], logic });
+    },
+    del(index, child) {
+      child.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.logic {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  .logic-left {
+    box-sizing: border-box;
+    width: 48px;
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    z-index: 10;
+
+    .operate-title {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      word-wrap: break-word;
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      display: inline-block;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      width: 65px;
+      background-color: #f8f8fa;
+      line-height: 28px;
+      position: relative;
+      z-index: 1;
+      height: 28px;
+
+      .mrg-title {
+        text-align: left;
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        margin-left: 11px;
+        margin-right: 11px;
+        line-height: 28px;
+        height: 28px;
+
+        i {
+        font-size: 12px;
+      }
+      }
+    }
+
+    &:hover {
+    //   width: 65px;
+
+      .operate-icon {
+        display: flex;
+        align-items: center;
+      }
+
+      .operate-title {
+          .mrg-title {
+            margin-right: 0 !important;
+          }
+      }
+
+    }
+
+    .operate-icon {
+      width: 40px;
+      height: 28px;
+      line-height: 28px;
+      background-color: #f8f8fa;
+      z-index: 1;
+      display: none;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        display: unset;
+        padding: 5px 3px;
+        cursor: pointer;
+        position: relative;
+        z-index: 10;
+      }
+    }
+  }
+
+  .logic-right-add {
+    display: flex;
+    height: 41.4px;
+    align-items: center;
+    padding-left: 26px;
+
+    .operand-btn {
+      box-sizing: border-box;
+      font-weight: 400;
+      text-align: center;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      outline: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      height: 28px;
+      padding: 0 10px;
+      margin-right: 10px;
+      font-size: 12px;
+      color: #246dff;
+      background: #fff;
+      border: 1px solid #246dff;
+      border-radius: 2px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue
index e97b1e73ef..af47dbeba5 100644
--- a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/data.vue
@@ -112,36 +112,33 @@
 
     <!-- 结果过滤器 -->
     <el-row class="padding-lr" style="margin-top: 6px;">
-      <span>{{ $t('chart.result_filter') }}</span>
-
-      <draggable
-        v-model="view.customFilter"
-        :move="onMove"
-        animation="300"
-        class="theme-item-class"
-        group="drag"
-        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-        @add="addCustomFilter"
-        @update="calcData(true)"
-      >
-        <transition-group class="draggable-group">
-          <filter-item
-            v-for="(item,index) in view.customFilter"
-            :key="item.id"
-            :dimension-data="dimension"
-            :index="index"
-            :item="item"
-            :param="param"
-            :quota-data="quota"
-            @editItemFilter="showEditFilter"
-            @onFilterItemRemove="filterItemRemove"
+      <span class="data-area-label">
+          <span>{{ $t('chart.result_filter') }}</span>
+          <span
+            v-if="!!view.customFilter.logic"
+            class="setting"
+          >已设置</span>
+          <i
+            class="el-icon-arrow-down el-icon-delete data-area-clear"
+            @click="deleteTreeFilter"
           />
-        </transition-group>
-      </draggable>
-      <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
-        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-      </div>
+        </span>
+        <div
+          class="tree-btn"
+          :class="!!view.customFilter.logic && 'active'"
+          @click="openTreeFilter"
+        >
+          <svg-icon
+            class="svg-background"
+            icon-class="icon-filter_outlined"
+          />
+          <span>过滤</span>
+        </div>
     </el-row>
+    <FilterTree
+      ref="filterTree"
+      @filter-data="changeFilterData"
+    />
 
   </div>
 </template>
@@ -151,8 +148,14 @@ import SankeyDimensionItem from '../../../components/views/SankeyDimensionItem'
 import SankeyQuotaItem from '../../../components/views/SankeyQuotaItem'
 import FilterItem from '../../../components/views/FilterItem'
 import messages from '@/de-base/lang/messages'
+import FilterTree from '@/components/views/filter/FilterTree.vue'
 
 export default {
+  provide() {
+    return {
+      filedList: () => this.filedList
+    }
+  },
   props: {
     obj: {
       type: Object,
@@ -168,7 +171,8 @@ export default {
   components: {
     SankeyDimensionItem,
     SankeyQuotaItem,
-    FilterItem
+    FilterItem,
+    FilterTree
   },
   data() {
     return {
@@ -190,6 +194,9 @@ export default {
     }
   },
   computed: {
+    filedList() {
+      return [...this.dimension, ...this.quota].filter(ele => ele.id !== 'count')
+    },
     param() {
       return this.obj.param
     },
@@ -242,6 +249,16 @@ export default {
     }
   },
   methods: {
+    changeFilterData(customFilter) {
+      this.view.customFilter =JSON.parse(JSON.stringify(customFilter))
+      this.calcData(true)
+    },
+    openTreeFilter() {
+      this.$refs.filterTree.init(JSON.parse(JSON.stringify(this.view.customFilter)))
+    },
+    deleteTreeFilter() {
+      this.changeFilterData({})
+    },
     executeAxios(url, type, data, callBack) {
       const param = {
         url: url,
@@ -430,6 +447,49 @@ export default {
 <style lang="scss" scoped>
 .padding-lr {
   padding: 0 6px;
+  .data-area-label {
+    text-align: left;
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    .setting {
+      padding: 0px 4px 0px 4px;
+      border-radius: 2px;
+      background-color: #1F23291A;
+      color: #646A73;
+      position: absolute;
+      top: 1px;
+      right: 23px;
+      z-index: 1;
+    }
+  }
+
+  .tree-btn {
+      width: 100%;
+      background: #fff;
+      height: 32px;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      display: flex;
+      color: #CCCCCC;
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      font-size: 12px;
+
+      &.active {
+        color: #3370FF;
+        border-color: #3370FF;
+      }
+    }
+    .data-area-clear {
+      position: absolute;
+      top: 4px;
+      right: 6px;
+      color: rgb(135, 141, 159);
+      cursor: pointer;
+      z-index: 1;
+    }
 }
 
 .itxst {
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/.babelrc b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/.babelrc
index 3a280ba34b..ea629d351c 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/.babelrc
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-object-rest-spread"]
 }
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/package.json b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/package.json
index 48531de436..5346b9f7e5 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/package.json
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/package.json
@@ -11,6 +11,8 @@
     "buildPlugin": "node build/build-async-plugins.js"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "@babel/runtime": "^7.18.9",
     "@antv/l7": "2.15.0",
     "@antv/l7-component": "2.15.0",
     "@antv/l7-core": "2.15.0",
@@ -30,14 +32,12 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "babel-loader": "^8.0.6",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.0",
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/FilterTree.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/FilterTree.vue
new file mode 100644
index 0000000000..2be1ec02d8
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/FilterTree.vue
@@ -0,0 +1,122 @@
+<template>
+    <el-dialog
+        width="896px"
+        append-to-body
+        title="添加过滤"
+        destroy-on-close
+        class="de-dialog-form filter-tree-cont"
+        :visible.sync="dialogVisible"
+    >
+    <div class="tree-cont">
+            <div class="content">
+              <rowAuth ref="rowAuth" />
+            </div>
+          </div>
+          <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <de-btn
+          secondary
+          @click="closeFilter"
+        >{{ $t('chart.cancel') }}
+        </de-btn>
+        <de-btn
+          type="primary"
+          @click="changeFilter"
+        >{{ $t('chart.confirm') }}
+        </de-btn>
+      </div>
+    </el-dialog>
+</template>
+<script>
+import rowAuth from './rowAuth.vue'
+export default {
+  name: 'FilterTree',
+  inject: ['filedList'],
+  components: {
+    rowAuth
+  },
+    data() {
+        return {
+            dialogVisible: false,
+        }
+  },
+  computed: {
+    computedFiledList() {
+      return this.filedList().reduce((pre, next) => {
+        if (next.id !== 'count') {
+          pre[next.id] = next
+        }
+          return pre
+        }, {})
+      }
+    },
+    methods: {
+        closeFilter() {
+            this.dialogVisible = false
+        },
+        changeFilter() {
+            const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
+            if (errorMessage) {
+              this.$message({
+                message: errorMessage,
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            this.dfsTreeDelete(items)
+            this.$emit('filter-data', { logic, items })
+            this.dialogVisible = false
+      },
+      dfsTreeDelete(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTreeDelete(ele.subTree.items)
+          } else {
+            if (ele.field) {
+               this.$delete(ele, 'field')
+            }
+          }
+        })
+      },
+      dfsTree(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTree(ele.subTree.items)
+          } else {
+            if (this.computedFiledList[ele.fieldId]) {
+              ele.field = this.computedFiledList[ele.fieldId]
+            }
+          }
+        })
+      },
+      init(tree) {
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          this.dfsTree(tree.items || [])
+          this.$refs.rowAuth.init(tree || {})
+        })
+      }
+    }
+}
+</script>
+
+<style lang="scss">
+.filter-tree-cont {
+  .tree-cont {
+      min-height: 67px;
+      width: 100%;
+      padding: 16px;
+      border-radius: 4px;
+      border: 1px solid var(--deBorderBase, #DCDFE6);
+      overflow: auto;
+      max-height: 500px;
+      .content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/filterFiled.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/filterFiled.vue
new file mode 100644
index 0000000000..39549bd051
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/filterFiled.vue
@@ -0,0 +1,1043 @@
+<template>
+  <div class="white-nowrap">
+    <div
+      class="field-xpack"
+      :style="computedWidth"
+      @mouseover="showDel = true"
+      @mouseleave="showDel = false"
+    >
+      <span class="filed-title">{{ $t("auth.filter_fields") }}</span>
+
+      <el-dropdown trigger="click" :hide-on-click="false">
+        <el-input
+          :placeholder="$t('auth.select_filter_fields')"
+          v-model="item.name"
+          size="mini"
+          @input="cancel"
+        >
+        </el-input>
+        <el-dropdown-menu class="de-el-dropdown-menu" slot="dropdown">
+          <el-input
+            :placeholder="$t('auth.enter_keywords')"
+            prefix-icon="el-icon-search"
+            size="mini"
+            v-model="keywords"
+          >
+          </el-input>
+          <ul class="dimension">
+            <li
+              @click="selectItem(item)"
+              :style="{
+                backgroundColor: activeName === item.name ? '#f0f7ff' : '',
+              }"
+              :key="item.id"
+              v-for="item in dimensions"
+            >
+              <svg-icon
+                :icon-class="`field_${fieldEnum[item.deType]}`"
+                :class="`field-icon-${fieldEnum[item.deType]}`"
+              />
+              <span>{{ item.name }}</span>
+            </li>
+          </ul>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div class="white-nowrap" style="position: relative" v-if="item.fieldId">
+        <span class="filed-title">{{ $t("auth.screen_method") }}</span>
+        <el-select
+          size="mini"
+          @change="filterTypeChange"
+          v-model="item.filterType"
+          :placeholder="$t('auth.select')"
+        >
+          <el-option
+            v-for="item in filterList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <span class="filed-title">{{ $t("auth.fixed_value") }}</span>
+        <template v-if="item.filterType === 'logic'">
+          <el-select
+            class="w100"
+            size="mini"
+            @change="onOptionsChange"
+            v-model="item.term"
+            :placeholder="$t('auth.default_method')"
+          >
+            <el-option
+              v-for="item in operators"
+              :key="item.value"
+              :label="$t(item.label)"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <template v-if="[2 ,3].includes(item.deType) && !['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input-number
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+              controls-position="right"
+            ></el-input-number>
+            <div class="bottom-line"></div>
+          </template>
+          <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              class="w70 mar5"
+              size="mini"
+              v-model="item.value"
+            />
+            <div class="bottom-line"></div>
+          </template>
+        </template>
+
+        <el-dropdown
+          v-else
+          trigger="click"
+          ref="deElDropdownMenuFixed"
+          :hide-on-click="false"
+        >
+          <el-input
+            v-model="item.enumValue"
+            ref="enumInput"
+            size="mini"
+            @input="cancelfixValue"
+            clearable
+            @clear="clearAll"
+          >
+          </el-input>
+          <el-dropdown-menu class="de-el-dropdown-menu-fixed" slot="dropdown">
+            <div class="de-panel clearfix">
+              <div class="mod-left">
+                <el-input
+                  :placeholder="$t('auth.enter_keywords')"
+                  v-model="filterFiled"
+                >
+                </el-input>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto;height: 231px"
+                >
+                  <li
+                    :key="i"
+                    v-for="i in checkListWithFilter"
+                    class="infinite-list-item"
+                    @click="checkItem(i)"
+                  >
+                    <i
+                      class="el-icon-check"
+                      :style="{ opacity: checklist.includes(i) ? 1 : 0 }"
+                    ></i>
+                    <label>{{ i }}</label>
+                    <span>+</span>
+                  </li>
+                </ul>
+                <button class="select-all" @click="selectAll">
+                  {{ $t("auth.select_all") }}
+                </button>
+              </div>
+              <div class="mod-left right-de">
+                <div class="right-top clearfix">
+                  {{ $t("auth.added") }}{{ checklist.length }}
+                  <div class="right-btn">
+                    <span @click="cancelKeyDow">
+                      <i class="el-icon-edit"></i>
+                      {{ $t("auth.manual_input") }}
+                    </span>
+                    <transition name="el-zoom-in-top">
+                      <div v-if="showTextArea" class="de-el-dropdown-menu-manu">
+                        <div class="text-area">
+                          <textarea
+                            :placeholder="$t('auth.please_fill')"
+                            class="input"
+                            v-model="textareaValue"
+                          ></textarea>
+                          <div class="text-area-btn">
+                            <button
+                              type="button"
+                              @click="showTextArea = false"
+                              class="btn"
+                            >
+                              <span>{{ $t("auth.close") }}</span>
+                            </button>
+                            <button
+                              type="button"
+                              @click="addFields"
+                              class="btn right-add"
+                            >
+                              <span>{{ $t("auth.add") }}</span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </transition>
+                  </div>
+                </div>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto"
+                >
+                  <li
+                    :key="i"
+                    v-for="(i, idx) in checklist"
+                    class="infinite-list-item"
+                  >
+                    <el-tooltip
+                      class="item"
+                      effect="light"
+                      :content="i"
+                      placement="top"
+                      :open-delay="1000"
+                    >
+                      <label>{{ i }}</label>
+                    </el-tooltip>
+                    <i
+                      class="el-icon-delete"
+                      @click="delChecks(idx)"
+                      style="opacity: 1"
+                    ></i>
+                  </li>
+                </ul>
+                <div class="right-menu-foot">
+                  <div class="footer-left">
+                    &nbsp;
+                  </div>
+                  <div class="confirm-btn" @click="confirm">
+                    {{ $t("auth.sure") }}
+                  </div>
+                  <div class="footer-right">
+                    <i class="el-icon-delete" @click="clearAll"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <i
+        v-if="showDel"
+        class="el-icon-delete font12"
+        @click="$emit('del', index)"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum,
+} from "./options";
+export default {
+  inject: ["filedList"],
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      showDel: false,
+      keywords: "",
+      activeName: "",
+      fieldEnum,
+      filterFiled: "",
+      enumList: [],
+      showTextArea: false,
+      keydownCanceled: false,
+      checklist: [],
+      filterList: [],
+      textareaValue: "",
+    };
+  },
+  computed: {
+    checkListWithFilter() {
+      if (!this.filterFiled) return this.enumList;
+      return this.enumList.filter((ele) => ele.includes(this.filterFiled));
+    },
+    checkResult() {
+      return this.checklist.join(",");
+    },
+    computedWidth() {
+      const { term, fieldId, filterType } = this.item;
+      const isNull = ['null', 'empty', 'not_null', 'not_empty'].includes(term) && filterType === 'logic';
+      return {
+        width: !fieldId ? "270px" : isNull ? '670px' : "750px",
+      };
+    },
+    operators() {
+      const { deType } = this.item;
+      if ([0, 5].includes(deType)) {
+        return textOptions;
+      } else if (deType === 1) {
+        return dateOptions;
+      } else {
+        return valueOptions;
+      }
+    },
+    dimensions() {
+      if (!this.keywords) return this.computedFiledList;
+      return this.computedFiledList.filter((ele) =>
+        ele.name.includes(this.keywords)
+      );
+    },
+    computedFiledList() {
+      return this.filedList();
+    }
+  },
+  watch: {
+    checkResult() {
+      this.cancelfixValue();
+    },
+  },
+  created() {
+    this.initNameEnumName();
+    this.filterListInit(this.item.deType)
+  },
+  methods: {
+    confirm() {
+      this.$refs.enumInput.$el.click();
+    },
+    initNameEnumName() {
+      const { name, enumValue, fieldId } = this.item;
+      if (!name && fieldId) {
+        this.checklist = enumValue.split(",");
+      }
+      if (!name && !fieldId) return;
+      this.initEnumOptions();
+      this.activeName = this.item.name;
+      this.checklist = enumValue.split(",");
+    },
+    cancelKeyDow() {
+      if (!this.showTextArea && !this.keydownCanceled) {
+        this.keydownCanceled = true;
+        const { dropdownElm, handleItemKeyDown } =
+          this.$refs.deElDropdownMenuFixed;
+        dropdownElm.removeEventListener("keydown", handleItemKeyDown, true);
+      }
+      this.showTextArea = true;
+    },
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    filterTypeChange(val) {
+      this.item.term = val === 'logic' ? 'eq' : ''
+      this.item.value = '';
+      this.initEnumOptions()
+    },
+    initEnumOptions() {
+      const { deType, filterType, fieldId } = this.item;
+      // 查找枚举值
+      if (filterType === "enum" && [0, 5].includes(deType)) {
+        this.executeAxios(
+          "dataset/field/multFieldValuesForPermissions",
+          "post",
+          { fieldIds: [fieldId] },
+          (res) => {
+            this.enumList = this.optionData(res.data);
+          }
+        );
+      }
+    },
+    onOptionsChange() {
+      this.item.value = "";
+    },
+    optionData(data) {
+      if (!data) return null;
+      return data.filter((item) => !!item);
+    },
+    cancel() {
+      this.item.name = this.activeName || "";
+    },
+    cancelfixValue() {
+      this.item.enumValue = this.checkResult || "";
+    },
+    delChecks(idx) {
+      this.checklist.splice(idx, 1);
+    },
+    selectItem({ name, id, deType }) {
+      this.activeName = name;
+      Object.assign(this.item, {
+        fieldId: id,
+        name,
+        deType,
+        filterType: "logic",
+        enumValue: "",
+        value: "",
+        term: 'eq'
+      });
+      this.filterListInit(deType);
+      this.checklist = []
+    },
+    filterListInit(deType) {
+      this.filterList = [
+        {
+          value: "logic",
+          label: this.$t('deDataset.logic_filter')
+        },
+        {
+          value: "enum",
+          label: this.$t('deDataset.enum_filter')
+        },
+      ];
+      if ([1, 2, 3].includes(deType)) {
+        this.filterList = [this.filterList[0]];
+      }
+    },
+    clearAll() {
+      this.checklist = [];
+    },
+    selectAll() {
+      this.checkListWithFilter.forEach((ele) => {
+        if (!this.checklist.includes(ele)) {
+          this.checklist.push(ele);
+        }
+      });
+    },
+    addFields() {
+      const list = this.textareaValue.split("\n").reduce((pre, next) => {
+        const str = next.trim();
+        if (!str) return pre;
+        pre.add(str);
+        return pre;
+      }, new Set([]));
+      if (list.size) {
+        this.checklist = [...this.checklist, ...list];
+      }
+      this.showTextArea = false;
+    },
+    checkItem(i) {
+      const index = this.checklist.findIndex((ele) => ele === i);
+      if (index === -1) {
+        this.checklist.push(i);
+      } else {
+        this.delChecks(index);
+      }
+    },
+    handleClickOutside() {
+      this.showTextArea = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.white-nowrap {
+  white-space: nowrap;
+}
+.field-xpack {
+  height: 41.4px;
+  padding: 1px 3px 1px 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  min-width: 200px;
+  justify-content: left;
+  position: relative;
+  white-space: nowrap;
+
+  .filed-title {
+    word-wrap: break-word;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    margin-right: 5px;
+    display: inline-block;
+    min-width: 50px;
+    text-align: right;
+  }
+
+  .font12 {
+    font-size: 12px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .el-input:not(.el-input--mini) {
+    width: 170px;
+  }
+
+  .w100.el-select {
+    width: 100px;
+  }
+
+  .w70 {
+    width: 70px;
+  }
+
+  .mar5 {
+    margin-left: -5px;
+  }
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    width: 20px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: none;
+  }
+
+  .el-input-number__decrease:hover {
+    height: 16px;
+    & + .el-input-number__increase {
+      height: 8px;
+    }
+  }
+  .el-input-number__increase:hover {
+    height: 16px;
+    & + .el-input-number__decrease {
+      height: 8px;
+    }
+  }
+
+  .bottom-line {
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    word-wrap: break-word;
+    text-align: left;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: pre;
+    box-sizing: border-box;
+    height: 1px;
+    background-color: #000;
+    opacity: 0.3;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 70px;
+    z-index: 10;
+  }
+
+  .el-input-number.is-controls-right .el-input__inner {
+    padding-right: 20px;
+  }
+
+  .el-input-number {
+    line-height: 26px;
+    height: 27px;
+  }
+
+  .el-select {
+     .el-input__suffix-inner {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-input__icon {
+        height: auto;
+      }
+    }
+  }
+
+  .el-input__inner {
+    background-color: #f8f8fa;
+    border: none;
+    border-radius: 0;
+    height: 26px;
+
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    word-wrap: break-word;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    list-style: none;
+    user-select: none;
+    cursor: pointer;
+    line-height: 26px;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 1;
+  }
+
+  i {
+    margin-left: 5px;
+    color: #7e7e7e;
+  }
+}
+.field-xpack:hover {
+  background-color: #e9eaef;
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="scss">
+.de-el-dropdown-menu {
+  .dimension {
+    max-height: 200px;
+    padding: 0;
+    overflow-y: auto;
+    li {
+      font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+        PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      font-variant: tabular-nums;
+      font-feature-settings: "tnum";
+      list-style: none;
+      box-sizing: border-box;
+      display: block;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+      position: relative;
+      overflow: hidden;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      padding: 0 16px 0 28px;
+      line-height: 32px;
+      height: 32px;
+      margin: 0;
+      padding-left: 16px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+    li:hover {
+      color: #2e74ff;
+      background-color: #f0f7ff;
+    }
+  }
+
+  .el-input__inner {
+    font-family: inherit;
+    overflow: visible;
+    box-sizing: border-box;
+    margin: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: "tnum";
+    display: inline-block;
+    width: 100%;
+    height: 28px;
+    padding: 4px 7px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    line-height: 28px;
+    background-color: #fff;
+    background-image: none;
+    transition: all 0.3s;
+    -webkit-appearance: none;
+    touch-action: manipulation;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: inherit;
+    min-height: 100%;
+    border: 0;
+    border-bottom: 1px solid #e5e5e5;
+    border-radius: 0;
+    padding-left: 26px;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+      border-right-width: 1px !important;
+      outline: 0;
+      border-color: none;
+    }
+  }
+
+  .el-input {
+    font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+      PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    box-sizing: border-box;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: "tnum";
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    text-align: start;
+    padding: 0 6px;
+  }
+}
+
+.de-el-dropdown-menu-fixed {
+  .de-panel {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    box-sizing: border-box;
+    position: relative;
+    padding: 0;
+    width: 360px;
+    max-width: 600px;
+    min-height: 30px;
+    background-color: #fff;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    .mod-left {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      vertical-align: top;
+      padding: 5px;
+      width: 50%;
+      height: 300px;
+      float: left;
+      box-sizing: border-box;
+      .el-input__inner {
+        font-family: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        line-height: 28px;
+        background-color: #fff;
+        background-image: none;
+        border-radius: 2px;
+        transition: all 0.3s;
+        -webkit-appearance: none;
+        touch-action: manipulation;
+        text-overflow: ellipsis;
+        width: 100%;
+        border-bottom: 1px solid hsla(0, 0%, 59%, 0.1);
+        border: 1px solid hsla(0, 0%, 59%, 0.1);
+        height: 30px;
+        padding: 0 8px;
+        outline: 0;
+
+        &:focus {
+          box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+          border-right-width: 1px !important;
+          outline: 0;
+          border-color: none;
+        }
+      }
+    }
+
+    .right-de {
+      border-left: 1px solid hsla(0, 0%, 59%, 0.1);
+    }
+    .autochecker-list {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 221px;
+      position: relative;
+      padding: 0;
+
+      li {
+        direction: ltr;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #333;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 28px;
+        height: 28px;
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+
+        &:hover {
+          background-color: #f8f8fa;
+          color: #2153d4;
+          opacity: 1;
+          span {
+            display: block;
+          }
+        }
+
+        i {
+          color: #333;
+          font-size: 12px;
+          cursor: pointer;
+          vertical-align: top;
+          line-height: 28px;
+          height: 28px;
+          display: inline-block;
+          opacity: 0;
+        }
+
+        label {
+          font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei,
+            sans-serif;
+          font-size: 12px;
+          direction: ltr;
+          color: #333;
+          box-sizing: border-box;
+          touch-action: manipulation;
+          width: 87%;
+          height: 28px;
+          line-height: 14px;
+          padding: 8px 20px;
+          cursor: pointer;
+          display: inline-block;
+          position: relative;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        span {
+          display: none;
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          line-height: 11px;
+          top: 6px;
+          right: 5px;
+          font-size: 15px;
+          cursor: pointer;
+          background: #2153d4;
+          color: #fff;
+          text-align: center;
+          border-radius: 999px;
+        }
+      }
+    }
+
+    .select-all {
+      box-sizing: border-box;
+      margin: 0;
+      overflow: visible;
+      position: relative;
+      font-weight: 400;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;
+      touch-action: manipulation;
+      padding: 0 15px;
+      font-size: 12px;
+      outline: 0;
+      color: #fff;
+      border-color: #2e74ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      border-radius: 0;
+      background: #2153d4;
+      padding-left: 5px;
+      text-align: center;
+      display: inline-block;
+      width: 100%;
+      height: 25px;
+
+      &:hover {
+        border: 1px solid transparent;
+        background: #4794ff;
+        color: #fff;
+      }
+    }
+
+    .right-top {
+      color: rgba(0, 0, 0, 0.65);
+      text-align: left;
+      box-sizing: border-box;
+      zoom: 1;
+      border-bottom: 1px solid #f8f8fa;
+      height: 30px;
+      width: 100%;
+      font-size: 12px;
+      line-height: 35px;
+      // overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .right-btn {
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
+        float: right;
+        cursor: pointer;
+        line-height: 25px;
+        padding: 0 5px;
+        // overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(70, 140, 255, 0.1);
+        width: 75px;
+      }
+    }
+
+    .right-menu-foot {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      box-sizing: border-box;
+      height: 30px;
+      text-align: right;
+      line-height: 30px;
+      margin-top: 5px;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+
+      .footer-left {
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .footer-right {
+        float: right;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+
+      .confirm-btn {
+        box-sizing: border-box;
+        position: relative;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        border: 1px solid transparent;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        border-radius: 2px;
+        outline: 0;
+        color: #fff;
+        background-color: #2e74ff;
+        border-color: #2e74ff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.de-el-dropdown-menu-manu {
+  padding: 0;
+  margin: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 12px;
+  position: absolute;
+  top: 20px;
+  width: 150px;
+  box-sizing: border-box;
+  right: 0;
+  .text-area {
+    box-sizing: border-box;
+    height: 220px;
+    position: relative;
+    .input {
+      touch-action: manipulation;
+      overflow: auto;
+      resize: vertical;
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      background-color: #fff;
+      background-image: none;
+      max-width: 100%;
+      min-height: 28px;
+      line-height: 1.5;
+      vertical-align: bottom;
+      transition: all 0.3s, height 0s;
+      text-overflow: ellipsis;
+      outline: 0;
+      padding: 5px 5px 28px;
+      width: 100%;
+      height: 220px;
+      border-radius: 0;
+      border: none;
+      box-shadow: 0 2px 6px 0 rgba(130, 150, 183, 0.72);
+    }
+
+    .text-area-btn {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      background: #fff;
+      bottom: -1px;
+      padding-bottom: 4px;
+
+      .btn {
+        font-weight: 400;
+        text-align: center;
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        background-color: #fff;
+        outline: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+        border-radius: 0;
+        width: 70px;
+        border: 1px solid rgba(33, 83, 212, 0.9);
+      }
+
+      .right-add {
+        background: #2153d4;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: "020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  /* 触发 hasLayout */
+  zoom: 1;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/options.js b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/options.js
new file mode 100644
index 0000000000..36a1f426bc
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/options.js
@@ -0,0 +1,24 @@
+function formatEnum(ele) {
+  return {
+    value: ele,
+    label: `chart.filter_${ele.replace(' ', '_')}`
+  }
+}
+
+const textEnum = ['eq', 'not_eq', 'like', 'not like', 'null', 'not_null', 'empty', 'not_empty']
+const textOptions = textEnum.map(formatEnum)
+
+const dateEnum = ['eq', 'not_eq', 'lt', 'gt', 'le', 'ge']
+const dateOptions = dateEnum.map(formatEnum)
+
+const valueEnum = [...dateEnum]
+const valueOptions = valueEnum.map(formatEnum)
+
+const fieldEnum = ['text', 'time', 'value', 'value', '', 'location']
+
+export {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum
+}
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/rowAuth.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/rowAuth.vue
new file mode 100644
index 0000000000..fb3417d5ad
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/rowAuth.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="rowAuth">
+    <rowAuthTree
+      @del="(idx) => del(idx)"
+      @addCondReal="addCondReal"
+      @removeRelationList="removeRelationList"
+      @changeAndOrDfs="(type) => changeAndOrDfs(relationList, type)"
+      :relationList="relationList"
+      :logic.sync="logic"
+      @execute-axios="executeAxios"
+    />
+    <svg width="388" height="100%" class="real-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgRealinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+      ></path>
+    </svg>
+    <svg width="388" height="100%" class="dash-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgDashinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+        stroke-dasharray="4,4"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<script>
+import rowAuthTree from "./rowTeeAuth.vue";
+
+export default {
+  name: "RowAuth",
+  components: {
+    rowAuthTree,
+  },
+  computed: {
+    svgRealinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return "";
+      let path = this.calculateDepth(a);
+      return path;
+    },
+    svgDashinePath() {
+      const lg = this.relationList.length;
+      let a = { x: 0, y: 0, child: this.relationList };
+      a.y = Math.floor(this.dfsXY(a, 0) / 2);
+      if (!lg) return `M48 20 L68 20`;
+      let path = this.calculateDepthDash(a);
+      return path;
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    init(expressionTree) {
+      const { logic = "or", items = [] } = expressionTree;
+      this.logic = logic;
+      this.relationList = this.dfsInit(items);
+    },
+    submit() {
+      this.errorMessage = '';
+      return {
+        logic: this.logic,
+        items: this.dfsSubmit(this.relationList),
+        errorMessage: this.errorMessage
+      }
+    },
+    errorDetected({ enumValue, deType, filterType, term, value }) {
+      if (filterType === "logic") {
+        if (
+          !term.includes("null") &&
+          !term.includes("empty") &&
+          (value === "")
+        ) {
+          this.errorMessage = this.$t("chart.filter_value_can_null");
+          return;
+        }
+        if ([2, 3].includes(deType)) {
+          if (parseFloat(value).toString() === "NaN") {
+            this.errorMessage = this.$t("chart.filter_value_can_not_str");
+            return;
+          }
+        }
+      }
+      if (filterType === "enum") {
+        if (enumValue.length < 1) {
+          this.errorMessage = this.$t("chart.enum_value_can_not_null");
+          return;
+        }
+      }
+    },
+    dfsInit(arr) {
+      const elementList = [];
+      arr.forEach((ele) => {
+        const { subTree } = ele;
+        if (subTree) {
+          const { items, logic } = subTree;
+          const child = this.dfsInit(items);
+          elementList.push({ logic, child });
+        } else {
+          const {
+            enumValue,
+            fieldId,
+            filterType,
+            term,
+            value,
+            field,
+          } = ele;
+          const { name, deType } = (field || {});
+          elementList.push({
+            enumValue: enumValue.join(','),
+            fieldId,
+            filterType,
+            term,
+            value,
+            name,
+            deType,
+          });
+        }
+      });
+      return elementList;
+    },
+    dfsSubmit(arr) {
+      const items = [];
+      arr.forEach((ele) => {
+        const { child = [] } = ele;
+        if (child.length) {
+          const { logic } = ele;
+          const subTree = this.dfsSubmit(child);
+          items.push({
+            enumValue: [],
+            fieldId: '',
+            filterType: '',
+            term: '',
+            type: 'tree',
+            value: '', subTree: { logic, items: subTree} });
+        } else {
+          const { enumValue, fieldId, filterType,deType, term, value } = ele;
+          this.errorDetected({ deType, enumValue, filterType, term, value})
+          if (fieldId) {
+            items.push({
+              enumValue: enumValue ?  enumValue.split(',') : [],
+              fieldId,
+              filterType,
+              term,
+              value,
+              type: 'item',
+              subTree: null
+            });
+          }
+        }
+      });
+      return items;
+    },
+    removeRelationList() {
+      this.relationList = [];
+    },
+    getY(arr) {
+      const [a] = arr;
+      if (a.child?.length) {
+        return this.getY(a.child);
+      }
+      return a.y;
+    },
+    getLastY(arr) {
+      const a = arr[arr.length];
+      if (a.child?.length) {
+        return this.getLastY(a.child);
+      }
+      return a.y;
+    },
+    calculateDepthDash(obj) {
+      const lg = obj.child?.length;
+      let path = "";
+      if (!lg && Array.isArray(obj.child)) {
+        const { x, y } = obj;
+        path += `M${48 + x * 68} ${y * 41.4 + 20} L${88 + x * 68} ${
+          y * 41.4 + 20
+        }`;
+      } else if (obj.child?.length) {
+        let y = Math.max(
+          this.dfsY(obj, 0),
+          this.dfs(obj.child, 0) + this.getY(obj.child) - 1
+        );
+        let parent =
+          (this.dfs(obj.child, 0) * 41.4) / 2 +
+          (this.getY(obj.child) || 0) * 41.4;
+        const { x } = obj;
+        path += `M${24 + x * 68} ${parent} L${24 + x * 68} ${y * 41.4 + 20} L${
+          64 + x * 68
+        } ${y * 41.4 + 20}`;
+        obj.child.forEach((item) => {
+          path += this.calculateDepthDash(item);
+        });
+      }
+
+      return path;
+    },
+    calculateDepth(obj) {
+      const lg = obj.child.length;
+      if (!lg) return "";
+      let path = "";
+      const { x: depth, y } = obj;
+      obj.child.forEach((item, index) => {
+        const { y: sibingLg, z } = item;
+        if (item.child?.length) {
+          let parent =
+            (this.dfs(obj.child, 0) * 41.4) / 2 +
+            (this.getY(obj.child) || 0) * 41.4;
+          let children =
+            (this.dfs(item.child, 0) * 41.4) / 2 + this.getY(item.child) * 41.4;
+          let path1 = 0;
+          let path2 = 0;
+          if (parent < children) {
+            path1 = parent;
+            path2 = children;
+          } else {
+            [path1, path2] = [children, parent];
+          }
+          if (y >= sibingLg) {
+            path1 = parent;
+            path2 = children;
+          }
+          path += `M${24 + depth * 68} ${path1} L${24 + depth * 68} ${path2} L${
+            68 + depth * 68
+          } ${path2}`;
+          // path += a;
+          path += this.calculateDepth(item);
+        }
+        if (!item.child?.length) {
+          // console.log(123, y, sibingLg, lg === 1 && index === 0 , item.z);
+          if (sibingLg >= y) {
+            path += `M${24 + depth * 68} ${y * 40} L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 - 20.69921875
+            } L${68 + depth * 68} ${(sibingLg + 1) * 41.4 - 20.69921875}`;
+          } else {
+            path += `M${24 + depth * 68} ${
+              (sibingLg +
+                (lg === 1 && index === 0 ? 0 : 1) +
+                (obj.child[index + 1]?.child?.length ? y - sibingLg - 1 : 0)) *
+                41.4 +
+              20 +
+              (lg === 1 && index === 0 ? 26 : 0)
+            } L${24 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            } L${68 + depth * 68} ${
+              (sibingLg + 1) * 41.4 -
+              20.69921875 -
+              (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+            }`;
+          }
+        }
+      });
+      return path;
+    },
+    changeAndOrDfs(arr, logic) {
+      arr.forEach((ele) => {
+        if (ele.child) {
+          ele.logic = logic === "and" ? "or" : "and";
+          this.changeAndOrDfs(ele.child, ele.logic);
+        }
+      });
+    },
+    dfs(arr, count) {
+      arr.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfs(ele.child, count);
+        } else {
+          count += 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    dfsY(obj, count) {
+      obj.child.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfsY(ele, count);
+        } else {
+          count = Math.max(count, ele.y, obj.y);
+        }
+      });
+      return count;
+    },
+    dfsXY(obj, count) {
+      obj.child.forEach((ele) => {
+        ele.x = obj.x + 1;
+        if (ele.child?.length) {
+          let l = this.dfs(ele.child, 0);
+          ele.y = Math.floor(l / 2) + count;
+          count = this.dfsXY(ele, count);
+        } else {
+          count += 1;
+          ele.y = count - 1;
+        }
+      });
+      count += 1;
+      return count;
+    },
+    addCondReal(type, logic) {
+      this.relationList.push(
+        type === "condition"
+          ? { fieldId: '', value: "", enumValue: "", term: "", filterType: "logic", name: "", deType: "" }
+          : { child: [], logic }
+      );
+    },
+    del(index) {
+      this.relationList.splice(index, 1);
+    },
+  },
+  data() {
+    return {
+      relationList: [],
+      logic: "or",
+      errorMessage: "",
+    };
+  },
+};
+</script>
+
+<style>
+.rowAuth {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+}
+.real-line,
+.dash-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/rowTeeAuth.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/rowTeeAuth.vue
new file mode 100644
index 0000000000..571ff08028
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/views/filter/rowTeeAuth.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="logic" :style="marginLeft">
+    <div class="logic-left">
+      <div class="operate-title">
+        <span
+          style="
+             {
+              color: '#bfbfbf';
+            }
+          "
+          class="mrg-title"
+          v-if="x"
+        >
+          {{ logic === 'or' ? "OR" : "AND" }}
+        </span>
+        <el-dropdown @command="handleCommand" trigger="click" v-else>
+          <span
+            style="
+               {
+                color: 'rgba(0,0,0,.65)';
+              }
+            "
+            class="mrg-title"
+          >
+            {{ logic === 'or' ? "OR" : "AND" }}<i class="el-icon-arrow-down"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="and">AND</el-dropdown-item>
+            <el-dropdown-item command="or">OR</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <span class="operate-icon" v-if="x">
+        <!-- <el-tooltip
+          class="item"
+          effect="light"
+          content="切换最外侧关系节点类型时，所有关系都会切换，内外层关系必然相反"
+          placement="top-end"
+        >
+          <i v-if="!x" class="el-icon-warning-outline"></i>
+        </el-tooltip> -->
+        <i class="el-icon-delete"  @click="$emit('removeRelationList')"></i>
+      </span>
+    </div>
+    <div class="logic-right">
+      <template v-for="(item, index) in relationList">
+        <logic-relation
+          :x="item.x"
+          @del="(idx) => del(idx, item.child)"
+          @addCondReal="(type, logic) => add(type, item.child, logic)"
+          v-if="item.child"
+          :key="index"
+          :logic="item.logic"
+          @execute-axios="executeAxios"
+          @removeRelationList="removeRelationList(index)"
+          :relationList="item.child"
+        >
+        </logic-relation>
+        <filter-filed
+          v-else
+          :item="item"
+          @del="$emit('del', index)"
+          :index="index"
+          :key="index"
+          @execute-axios="executeAxios"
+        ></filter-filed>
+      </template>
+      <div class="logic-right-add">
+        <button @click="addCondReal('condition')" class="operand-btn">
+          + {{ $t('auth.add_condition')}}
+        </button>
+        <button v-if="x < 2" @click="addCondReal('relation')" class="operand-btn">
+          + {{ $t('auth.add_relationship')}}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import filterFiled from "./filterFiled";
+export default {
+  name: "LogicRelation",
+  props: {
+    relationList: {
+      type: Array,
+      default: () => [],
+    },
+    x: {
+      type: Number,
+      default: 0,
+    },
+    logic: {
+      type: String,
+      default: 'or',
+    },
+  },
+  components: {
+    filterFiled,
+  },
+  computed: {
+    marginLeft() {
+      return {
+        marginLeft: this.x ? "20px" : 0,
+      };
+    },
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      this.$emit("execute-axios", url, type, data, callBack);
+    },
+    handleCommand(type) {
+      this.$emit('update:logic', type); 
+      this.$emit("changeAndOrDfs", type)
+    },
+    removeRelationList(index) {
+      this.relationList.splice(index, 1);
+    },
+    addCondReal(type) {
+      this.$emit("addCondReal", type, this.logic === 'or' ? 'and' : 'or');
+    },
+    add(type, child, logic) {
+      child.push(type === "condition" ?{ fieldId: '', value: '', enumValue: '', term: '', filterType: 'logic', name: '', deType: "" } : { child: [], logic });
+    },
+    del(index, child) {
+      child.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.logic {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  .logic-left {
+    box-sizing: border-box;
+    width: 48px;
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    z-index: 10;
+
+    .operate-title {
+      font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      word-wrap: break-word;
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      display: inline-block;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      width: 65px;
+      background-color: #f8f8fa;
+      line-height: 28px;
+      position: relative;
+      z-index: 1;
+      height: 28px;
+
+      .mrg-title {
+        text-align: left;
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        margin-left: 11px;
+        margin-right: 11px;
+        line-height: 28px;
+        height: 28px;
+
+        i {
+        font-size: 12px;
+      }
+      }
+    }
+
+    &:hover {
+    //   width: 65px;
+
+      .operate-icon {
+        display: flex;
+        align-items: center;
+      }
+
+      .operate-title {
+          .mrg-title {
+            margin-right: 0 !important;
+          }
+      }
+
+    }
+
+    .operate-icon {
+      width: 40px;
+      height: 28px;
+      line-height: 28px;
+      background-color: #f8f8fa;
+      z-index: 1;
+      display: none;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        display: unset;
+        padding: 5px 3px;
+        cursor: pointer;
+        position: relative;
+        z-index: 10;
+      }
+    }
+  }
+
+  .logic-right-add {
+    display: flex;
+    height: 41.4px;
+    align-items: center;
+    padding-left: 26px;
+
+    .operand-btn {
+      box-sizing: border-box;
+      font-weight: 400;
+      text-align: center;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      outline: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      height: 28px;
+      padding: 0 10px;
+      margin-right: 10px;
+      font-size: 12px;
+      color: #246dff;
+      background: #fff;
+      border: 1px solid #246dff;
+      border-radius: 2px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue
index 6a8570609a..c113398a06 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/data.vue
@@ -112,36 +112,33 @@
 
     <!-- 结果过滤器 -->
     <el-row class="padding-lr" style="margin-top: 6px;">
-      <span>{{ $t('chart.result_filter') }}</span>
-
-      <draggable
-        v-model="view.customFilter"
-        :move="onMove"
-        animation="300"
-        class="theme-item-class"
-        group="drag"
-        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-        @add="addCustomFilter"
-        @update="calcData(true)"
-      >
-        <transition-group class="draggable-group">
-          <filter-item
-            v-for="(item,index) in view.customFilter"
-            :key="item.id"
-            :dimension-data="dimensionData"
-            :index="index"
-            :item="item"
-            :param="param"
-            :quota-data="quotaData"
-            @editItemFilter="showEditFilter"
-            @onFilterItemRemove="filterItemRemove"
+      <span class="data-area-label">
+          <span>{{ $t('chart.result_filter') }}</span>
+          <span
+            v-if="!!view.customFilter.logic"
+            class="setting"
+          >已设置</span>
+          <i
+            class="el-icon-arrow-down el-icon-delete data-area-clear"
+            @click="deleteTreeFilter"
           />
-        </transition-group>
-      </draggable>
-      <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
-        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
-      </div>
+        </span>
+        <div
+          class="tree-btn"
+          :class="!!view.customFilter.logic && 'active'"
+          @click="openTreeFilter"
+        >
+          <svg-icon
+            class="svg-background"
+            icon-class="icon-filter_outlined"
+          />
+          <span>过滤</span>
+        </div>
     </el-row>
+    <FilterTree
+      ref="filterTree"
+      @filter-data="changeFilterData"
+    />
 
   </div>
 </template>
@@ -152,8 +149,14 @@ import LocationYItem from '@/components/views/LocationYItem'
 import QuotaItem from '@/components/views/QuotaItem'
 import FilterItem from '@/components/views/FilterItem'
 import messages from '@/de-base/lang/messages'
+import FilterTree from '@/components/views/filter/FilterTree.vue'
 
 export default {
+  provide() {
+    return {
+      filedList: () => this.filedList
+    }
+  },
   props: {
 
     obj: {
@@ -166,7 +169,8 @@ export default {
     LocationXItem,
     LocationYItem,
     QuotaItem,
-    FilterItem
+    FilterItem,
+    FilterTree
   },
   data() {
     return {
@@ -188,6 +192,9 @@ export default {
     }
   },
   computed: {
+    filedList() {
+      return [...this.dimensionData, ...this.quotaData].filter(ele => ele.id !== 'count')
+    },
     param() {
       return this.obj.param
     },
@@ -224,6 +231,16 @@ export default {
     }
   },
   methods: {
+    changeFilterData(customFilter) {
+      this.view.customFilter =JSON.parse(JSON.stringify(customFilter))
+      this.calcData(true)
+    },
+    openTreeFilter() {
+      this.$refs.filterTree.init(JSON.parse(JSON.stringify(this.view.customFilter)))
+    },
+    deleteTreeFilter() {
+      this.changeFilterData({})
+    },
     executeAxios(url, type, data, callBack) {
       const param = {
         url: url,
@@ -401,6 +418,49 @@ export default {
 <style lang="scss" scoped>
 .padding-lr {
   padding: 0 6px;
+  .data-area-label {
+    text-align: left;
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    .setting {
+      padding: 0px 4px 0px 4px;
+      border-radius: 2px;
+      background-color: #1F23291A;
+      color: #646A73;
+      position: absolute;
+      top: 1px;
+      right: 23px;
+      z-index: 1;
+    }
+  }
+
+  .tree-btn {
+      width: 100%;
+      background: #fff;
+      height: 32px;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      display: flex;
+      color: #CCCCCC;
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      font-size: 12px;
+
+      &.active {
+        color: #3370FF;
+        border-color: #3370FF;
+      }
+    }
+    .data-area-clear {
+      position: absolute;
+      top: 4px;
+      right: 6px;
+      color: rgb(135, 141, 159);
+      cursor: pointer;
+      z-index: 1;
+    }
 }
 
 .itxst {