Merge pull request #1761 from dataease/pr@dev@refactor_chart_field

frontend/src/lang/en.js

@@ -1022,7 +1022,8 @@ export default {
     table_column_adapt: 'Adapt',
     table_column_custom: 'Custom',
     chart_table_pivot: 'Pivot Table',
-    table_pivot_row: 'Data Row'
+    table_pivot_row: 'Data Row',
+    field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -1022,7 +1022,8 @@ export default {
     table_column_adapt: '自適應',
     table_column_custom: '自定義',
     chart_table_pivot: '透視表',
-    table_pivot_row: '數據行'
+    table_pivot_row: '數據行',
+    field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -1024,7 +1024,8 @@ export default {
     table_column_adapt: '自适应',
     table_column_custom: '自定义',
     chart_table_pivot: '透视表',
-    table_pivot_row: '数据行'
+    table_pivot_row: '数据行',
+    field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/components/drag-item/ChartDragItem.vue

 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="tagType">
       <span style="float: left">
         <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
         <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -10,6 +10,7 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <field-error-tips v-if="tagType === 'danger'" />
       <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
       <span v-if="item.deType === 1" class="summary-span">
         {{ $t('chart.' + item.dateStyle) }}
@@ -17,7 +18,7 @@
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+        <el-tag size="small" class="item-axis" :type="tagType">
           <span style="float: left">
             <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
             <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -27,6 +28,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <field-error-tips v-if="tagType === 'danger'" />
           <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
           <span v-if="item.deType === 1" class="summary-span">
             {{ $t('chart.' + item.dateStyle) }}
@@ -120,8 +122,12 @@
 </template>
 
 <script>
+import { getItemType } from '@/views/chart/components/drag-item/utils'
+import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+
 export default {
   name: 'ChartDragItem',
+  components: { FieldErrorTips },
   props: {
     param: {
       type: Object,
@@ -138,10 +144,30 @@ export default {
     conf: {
       type: String,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
+      tagType: getItemType(this.dimensionData, this.quotaData, this.item)
+    }
+  },
+  watch: {
+    dimensionData: function() {
+      this.getItemTagType()
+    },
+    quotaData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
     }
   },
   mounted() {
@@ -208,6 +234,9 @@ export default {
       return {
         type: type
       }
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
     }
   }
 }

frontend/src/views/chart/components/drag-item/DimensionExtItem.vue

 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="tagType">
       <span style="float: left">
         <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
         <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -10,13 +10,14 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <field-error-tips v-if="tagType === 'danger'" />
       <span v-if="item.deType === 1" class="summary-span">
         {{ $t('chart.' + item.dateStyle) }}
       </span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+        <el-tag size="small" class="item-axis" :type="tagType">
           <span style="float: left">
             <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
             <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -26,6 +27,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <field-error-tips v-if="tagType === 'danger'" />
           <span v-if="item.deType === 1" class="summary-span">
             {{ $t('chart.' + item.dateStyle) }}
           </span>
@@ -100,8 +102,12 @@
 </template>
 
 <script>
+import { getItemType } from '@/views/chart/components/drag-item/utils'
+import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+
 export default {
   name: 'DimensionExtItem',
+  components: { FieldErrorTips },
   props: {
     param: {
       type: Object,
@@ -114,10 +120,27 @@ export default {
     index: {
       type: Number,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
+      tagType: getItemType(this.dimensionData, this.quotaData, this.item)
+    }
+  },
+  watch: {
+    dimensionData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
     }
   },
   mounted() {
@@ -188,6 +211,9 @@ export default {
       this.item.index = this.index
       this.item.removeType = 'dimensionExt'
       this.$emit('onDimensionItemRemove', this.item)
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
     }
   }
 }

frontend/src/views/chart/components/drag-item/DimensionItem.vue

 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="tagType">
       <span style="float: left">
         <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
         <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -10,13 +10,14 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <field-error-tips v-if="tagType === 'danger'" />
       <span v-if="item.deType === 1" class="summary-span">
         {{ $t('chart.' + item.dateStyle) }}
       </span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+        <el-tag size="small" class="item-axis" :type="tagType">
           <span style="float: left">
             <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
             <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -26,6 +27,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <field-error-tips v-if="tagType === 'danger'" />
           <span v-if="item.deType === 1" class="summary-span">
             {{ $t('chart.' + item.dateStyle) }}
           </span>
@@ -103,8 +105,12 @@
 </template>
 
 <script>
+import { getItemType } from '@/views/chart/components/drag-item/utils'
+import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+
 export default {
   name: 'DimensionItem',
+  components: { FieldErrorTips },
   props: {
     param: {
       type: Object,
@@ -117,10 +123,27 @@ export default {
     index: {
       type: Number,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
+      tagType: getItemType(this.dimensionData, this.quotaData, this.item)
+    }
+  },
+  watch: {
+    dimensionData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
     }
   },
   mounted() {
@@ -192,6 +215,9 @@ export default {
       this.item.index = this.index
       this.item.removeType = 'dimension'
       this.$emit('onDimensionItemRemove', this.item)
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
     }
   }
 }

frontend/src/views/chart/components/drag-item/DrillItem.vue

 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="tagType">
       <span style="float: left">
         <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
         <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -10,10 +10,11 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <field-error-tips v-if="tagType === 'danger'" />
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+        <el-tag size="small" class="item-axis" :type="tagType">
           <span style="float: left">
             <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
             <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -23,6 +24,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <field-error-tips v-if="tagType === 'danger'" />
           <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
@@ -36,8 +38,12 @@
 </template>
 
 <script>
+import { getItemType } from '@/views/chart/components/drag-item/utils'
+import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+
 export default {
   name: 'DrillItem',
+  components: { FieldErrorTips },
   props: {
     param: {
       type: Object,
@@ -50,10 +56,30 @@ export default {
     index: {
       type: Number,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
+      tagType: getItemType(this.dimensionData, this.quotaData, this.item)
+    }
+  },
+  watch: {
+    dimensionData: function() {
+      this.getItemTagType()
+    },
+    quotaData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
     }
   },
   mounted() {
@@ -79,6 +105,9 @@ export default {
     removeItem() {
       this.item.index = this.index
       this.$emit('onDimensionItemRemove', this.item)
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
     }
   }
 }

frontend/src/views/chart/components/drag-item/FilterItem.vue

 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="tagType">
       <span style="float: left">
         <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
         <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -8,10 +8,11 @@
         <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <field-error-tips v-if="tagType === 'danger'" />
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+        <el-tag size="small" class="item-axis" :type="tagType">
           <span style="float: left">
             <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
             <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -19,6 +20,7 @@
             <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <field-error-tips v-if="tagType === 'danger'" />
           <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
@@ -35,8 +37,12 @@
 </template>
 
 <script>
+import { getItemType } from '@/views/chart/components/drag-item/utils'
+import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+
 export default {
   name: 'FilterItem',
+  components: { FieldErrorTips },
   props: {
     param: {
       type: Object,
@@ -49,10 +55,30 @@ export default {
     index: {
       type: Number,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
+      tagType: getItemType(this.dimensionData, this.quotaData, this.item)
+    }
+  },
+  watch: {
+    dimensionData: function() {
+      this.getItemTagType()
+    },
+    quotaData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
     }
   },
   mounted() {
@@ -85,6 +111,9 @@ export default {
     removeItem() {
       this.item.index = this.index
       this.$emit('onFilterItemRemove', this.item)
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
     }
   }
 }

frontend/src/views/chart/components/drag-item/QuotaExtItem.vue

 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="tagType">
       <span style="float: left">
         <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
         <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -13,13 +13,14 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <field-error-tips v-if="tagType === 'danger'" />
       <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
         {{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc && item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
       </span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+        <el-tag size="small" class="item-axis" :type="tagType">
           <span style="float: left">
             <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
             <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -32,6 +33,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <field-error-tips v-if="tagType === 'danger'" />
           <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
             {{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc && item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
           </span>
@@ -75,22 +77,6 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <!-- 快速计算先隐藏-->
-          <!--          <el-dropdown-item v-if="item.id !== 'count'">-->
-          <!--            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">-->
-          <!--              <span class="el-dropdown-link inner-dropdown-menu">-->
-          <!--                <span>-->
-          <!--                  <i class="el-icon-s-grid" />-->
-          <!--                  <span>{{ $t('chart.quick_calc') }}</span>-->
-          <!--                  <span class="summary-span-item">(无)</span>-->
-          <!--                </span>-->
-          <!--                <i class="el-icon-arrow-right el-icon&#45;&#45;right" />-->
-          <!--              </span>-->
-          <!--              <el-dropdown-menu slot="dropdown">-->
-          <!--                <el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item>-->
-          <!--              </el-dropdown-menu>-->
-          <!--            </el-dropdown>-->
-          <!--          </el-dropdown-item>-->
 
           <!--同比/环比-->
           <el-dropdown-item v-show="chart.type !== 'table-info'">
@@ -144,9 +130,12 @@
 
 <script>
 import { compareItem } from '@/views/chart/chart/compare'
+import { getItemType } from '@/views/chart/components/drag-item/utils'
+import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
 
 export default {
   name: 'QuotaExtItem',
+  components: { FieldErrorTips },
   props: {
     param: {
       type: Object,
@@ -163,12 +152,21 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
       compareItem: compareItem,
-      disableEditCompare: false
+      disableEditCompare: false,
+      tagType: getItemType(this.dimensionData, this.quotaData, this.item)
     }
   },
   watch: {
@@ -177,6 +175,12 @@ export default {
     },
     'chart.extStack': function() {
       this.isEnableCompare()
+    },
+    quotaData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
     }
   },
   mounted() {
@@ -296,6 +300,9 @@ export default {
       this.item.index = this.index
       this.item.calcType = 'quotaExt'
       this.$emit('editItemCompare', this.item)
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
     }
   }
 }

frontend/src/views/chart/components/drag-item/QuotaItem.vue

 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="tagType">
       <span style="float: left">
         <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
         <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -13,13 +13,14 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <field-error-tips v-if="tagType === 'danger'" />
       <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
         {{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc && item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
       </span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+        <el-tag size="small" class="item-axis" :type="tagType">
           <span style="float: left">
             <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
             <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
@@ -32,6 +33,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <field-error-tips v-if="tagType === 'danger'" />
           <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
             {{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc && item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
           </span>
@@ -75,22 +77,6 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <!-- 快速计算先隐藏-->
-          <!--          <el-dropdown-item v-if="item.id !== 'count'">-->
-          <!--            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">-->
-          <!--              <span class="el-dropdown-link inner-dropdown-menu">-->
-          <!--                <span>-->
-          <!--                  <i class="el-icon-s-grid" />-->
-          <!--                  <span>{{ $t('chart.quick_calc') }}</span>-->
-          <!--                  <span class="summary-span-item">(无)</span>-->
-          <!--                </span>-->
-          <!--                <i class="el-icon-arrow-right el-icon&#45;&#45;right" />-->
-          <!--              </span>-->
-          <!--              <el-dropdown-menu slot="dropdown">-->
-          <!--                <el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item>-->
-          <!--              </el-dropdown-menu>-->
-          <!--            </el-dropdown>-->
-          <!--          </el-dropdown-item>-->
 
           <!--同比/环比-->
           <el-dropdown-item v-show="chart.type !== 'table-info'">
@@ -144,9 +130,12 @@
 
 <script>
 import { compareItem } from '@/views/chart/chart/compare'
+import { getItemType } from '@/views/chart/components/drag-item/utils'
+import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
 
 export default {
   name: 'QuotaItem',
+  components: { FieldErrorTips },
   props: {
     param: {
       type: Object,
@@ -163,17 +152,32 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
       compareItem: compareItem,
-      disableEditCompare: false
+      disableEditCompare: false,
+      tagType: getItemType(this.dimensionData, this.quotaData, this.item)
     }
   },
   watch: {
     'chart': function() {
       this.isEnableCompare()
+    },
+    quotaData: function() {
+      this.getItemTagType()
+    },
+    item: function() {
+      this.getItemTagType()
     }
   },
   mounted() {
@@ -293,6 +297,9 @@ export default {
       this.item.index = this.index
       this.item.calcType = 'quota'
       this.$emit('editItemCompare', this.item)
+    },
+    getItemTagType() {
+      this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
     }
   }
 }

frontend/src/views/chart/components/drag-item/components/FieldErrorTips.vue

+<template>
+  <div class="tips-class">
+    <el-tooltip class="item" effect="dark" :content="$t('chart.field_error_tips')" placement="bottom">
+      <span><i class="el-icon-warning" /></span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FieldErrorTips'
+}
+</script>
+
+<style scoped>
+.tips-class{
+  position: absolute;
+  right: 10px;
+  z-index: 10;
+}
+</style>

frontend/src/views/chart/components/drag-item/utils.js

+export function getItemType(dimensionData, quotaData, item) {
+  // 将item的字段在数据集维度、指标字段中查询一遍，如果遇到id不存在、字段类型不一致、维度指标不一致，则提示
+  const status = item.groupType
+  let checked = false
+  if (status === 'd') {
+    for (let i = 0; i < dimensionData.length; i++) {
+      const ele = dimensionData[i]
+      if (ele.id === item.id && ele.deType === item.deType && ele.groupType === item.groupType) {
+        checked = true
+        break
+      }
+    }
+  }
+  if (status === 'q') {
+    for (let i = 0; i < quotaData.length; i++) {
+      const ele = quotaData[i]
+      if (ele.id === item.id && ele.deType === item.deType && ele.groupType === item.groupType) {
+        checked = true
+        break
+      }
+    }
+  }
+
+  if (checked) {
+    if (status === 'd') {
+      return ''
+    } else if (status === 'q') {
+      return 'success'
+    }
+  } else {
+    return 'danger'
+  }
+}

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

@@ -271,6 +271,8 @@
                             :param="param"
                             :index="index"
                             :item="item"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onDimensionItemChange="dimensionItemChange"
                             @onDimensionItemRemove="dimensionItemRemove"
                             @editItemFilter="showDimensionEditFilter"
@@ -323,6 +325,8 @@
                             :param="param"
                             :index="index"
                             :item="item"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onDimensionItemChange="dimensionItemChange"
                             @onDimensionItemRemove="dimensionItemRemove"
                             @editItemFilter="showDimensionEditFilter"
@@ -376,6 +380,8 @@
                             :index="index"
                             :item="item"
                             :chart="chart"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onQuotaItemChange="quotaItemChange"
                             @onQuotaItemRemove="quotaItemRemove"
                             @editItemFilter="showQuotaEditFilter"
@@ -413,6 +419,8 @@
                             :index="index"
                             :item="item"
                             :chart="chart"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onQuotaItemChange="quotaItemChange"
                             @onQuotaItemRemove="quotaItemRemove"
                             @editItemFilter="showQuotaEditFilter"
@@ -450,6 +458,8 @@
                             :param="param"
                             :index="index"
                             :item="item"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onItemChange="stackItemChange"
                             @onItemRemove="stackItemRemove"
                           />
@@ -490,6 +500,8 @@
                             :param="param"
                             :index="index"
                             :item="item"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onItemChange="bubbleItemChange"
                             @onItemRemove="bubbleItemRemove"
                           />
@@ -522,6 +534,8 @@
                             :param="param"
                             :index="index"
                             :item="item"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onFilterItemRemove="filterItemRemove"
                             @editItemFilter="showEditFilter"
                           />
@@ -558,6 +572,8 @@
                             :param="param"
                             :index="index"
                             :item="item"
+                            :dimension-data="dimensionData"
+                            :quota-data="quotaData"
                             @onDimensionItemChange="drillItemChange"
                             @onDimensionItemRemove="drillItemRemove"
                           />
@@ -568,7 +584,6 @@
                       </div>
                     </el-row>
                   </div>
-
                 </el-row>
               </div>
             </el-col>