From dfb83b4a43382fb159d0267c49597b29ad089f6a Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 8 Dec 2021 18:42:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E5=90=8C=E7=8E=AF?=
 =?UTF-8?q?=E6=AF=94=E5=89=8D=E7=AB=AFUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |  21 ++-
 frontend/src/lang/tw.js                       |  22 +++-
 frontend/src/lang/zh.js                       |  21 ++-
 frontend/src/views/chart/chart/compare.js     |  29 +++++
 .../chart/components/compare/CompareEdit.vue  | 123 ++++++++++++++++++
 .../components/drag-item/DimensionItem.vue    |   2 +-
 .../components/drag-item/QuotaExtItem.vue     |  84 +++++++++++-
 .../chart/components/drag-item/QuotaItem.vue  |  84 +++++++++++-
 frontend/src/views/chart/view/ChartEdit.vue   |  64 +++++++--
 9 files changed, 420 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/views/chart/chart/compare.js
 create mode 100644 frontend/src/views/chart/components/compare/CompareEdit.vue

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 72ccaf8ee1..f08a57cb8e 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -973,7 +973,26 @@ export default {
     next: 'Next',
     select_dataset: 'Select Dataset',
     select_chart_type: 'Select Chart Type',
-    recover: 'Reset'
+    recover: 'Reset',
+    yoy_label: 'YOY/MOM',
+    yoy_setting: 'Setting',
+    pls_select_field: 'Select Field',
+    compare_date: 'Compare Date',
+    compare_type: 'Compare Type',
+    compare_data: 'Data Setting',
+    year_yoy: 'Year yoy',
+    month_yoy: 'Month yoy',
+    quarter_yoy: 'Quarter yoy',
+    week_yoy: 'Week yoy',
+    day_yoy: 'Day yoy',
+    year_mom: 'Year mom',
+    month_mom: 'Month mom',
+    quarter_mom: 'Quarter mom',
+    week_mom: 'Week mom',
+    day_mom: 'Day mom',
+    data_sub: 'Sub',
+    data_percent: 'Percent',
+    compare_calc_expression: 'Expression'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index a7b55f367a..5a46fc610f 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -973,8 +973,26 @@ export default {
     preview: '上一步',
     next: '下一步',
     select_dataset: '選擇數據集',
-    select_chart_type: '選擇圖表類型',
-    recover: '重置'
+    recover: '重置',
+    yoy_label: '同比/環比',
+    yoy_setting: '同環比設置',
+    pls_select_field: '請選擇字段',
+    compare_date: '對比日期',
+    compare_type: '對比類型',
+    compare_data: '數據設置',
+    year_yoy: '年同比',
+    month_yoy: '月同比',
+    quarter_yoy: '季同比',
+    week_yoy: '周同比',
+    day_yoy: '日同比',
+    year_mom: '年環比',
+    month_mom: '月環比',
+    quarter_mom: '季環比',
+    week_mom: '周環比',
+    day_mom: '日環比',
+    data_sub: '對比差值',
+    data_percent: '差值百分比',
+    compare_calc_expression: '計算公式'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 140013faff..845fce3a65 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -976,7 +976,26 @@ export default {
     next: '下一步',
     select_dataset: '选择数据集',
     select_chart_type: '选择图表类型',
-    recover: '重置'
+    recover: '重置',
+    yoy_label: '同比/环比',
+    yoy_setting: '同环比设置',
+    pls_select_field: '请选择字段',
+    compare_date: '对比日期',
+    compare_type: '对比类型',
+    compare_data: '数据设置',
+    year_yoy: '年同比',
+    month_yoy: '月同比',
+    quarter_yoy: '季同比',
+    week_yoy: '周同比',
+    day_yoy: '日同比',
+    year_mom: '年环比',
+    month_mom: '月环比',
+    quarter_mom: '季环比',
+    week_mom: '周环比',
+    day_mom: '日环比',
+    data_sub: '对比差值',
+    data_percent: '差值百分比',
+    compare_calc_expression: '计算公式'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/compare.js b/frontend/src/views/chart/chart/compare.js
new file mode 100644
index 0000000000..b06a104a10
--- /dev/null
+++ b/frontend/src/views/chart/chart/compare.js
@@ -0,0 +1,29 @@
+export const compareItem = {
+  type: 'none', // year-yoy/month-yoy等
+  resultData: 'percent', // 对比差sub，百分比percent等
+  field: '',
+  custom: {
+    field: '',
+    calcType: '0', // 0-增长值，1-增长率
+    timeType: '0', // 0-固定日期，1-日期区间
+    currentTime: '',
+    compareTime: '',
+    currentTimeRange: [],
+    compareTimeRange: []
+  }
+}
+
+export const compareYearList = [
+  { name: 'year_mom', value: 'year_mom' }
+]
+
+export const compareMonthList = [
+  { name: 'month_mom', value: 'month_mom' },
+  { name: 'year_yoy', value: 'year_yoy' }
+]
+
+export const compareDayList = [
+  { name: 'day_mom', value: 'day_mom' },
+  { name: 'month_yoy', value: 'month_yoy' },
+  { name: 'year_yoy', value: 'year_yoy' }
+]
diff --git a/frontend/src/views/chart/components/compare/CompareEdit.vue b/frontend/src/views/chart/components/compare/CompareEdit.vue
new file mode 100644
index 0000000000..988b372323
--- /dev/null
+++ b/frontend/src/views/chart/components/compare/CompareEdit.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <el-form ref="form" :model="compareItem.compareCalc" label-width="80px" size="mini" class="compare-form">
+      <el-form-item :label="$t('chart.compare_date')">
+        <el-select v-model="compareItem.compareCalc.field" :placeholder="$t('chart.pls_select_field')" size="mini" @change="initCompareType">
+          <el-option v-for="field in fieldList" :key="field.id" :label="field.name + '(' + $t('chart.' + field.dateStyle) + ')'" :value="field.id" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('chart.compare_type')">
+        <el-radio-group v-model="compareItem.compareCalc.type">
+          <el-radio v-for="radio in compareList" :key="radio.value" :label="radio.value">{{ $t('chart.' + radio.value) }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item :label="$t('chart.compare_data')">
+        <el-radio-group v-model="compareItem.compareCalc.resultData">
+          <el-radio label="sub">{{ $t('chart.data_sub') }}</el-radio>
+          <el-radio label="percent">{{ $t('chart.data_percent') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item :label="$t('chart.compare_calc_expression')">
+        <span v-if="compareItem.compareCalc.resultData === 'sub'" class="exp-style">本期数据 - 上期数据</span>
+        <span v-else-if="compareItem.compareCalc.resultData === 'percent'" class="exp-style">(本期数据 / 上期数据 - 1) * 100%</span>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { compareDayList, compareMonthList, compareYearList } from '@/views/chart/chart/compare'
+
+export default {
+  name: 'CompareEdit',
+  props: {
+    compareItem: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      fieldList: [],
+      compareList: []
+    }
+  },
+  watch: {
+    'chart': function() {
+      this.initFieldList()
+      this.initCompareType()
+    }
+  },
+  mounted() {
+    this.initFieldList()
+    this.initCompareType()
+  },
+  methods: {
+    // 过滤xaxis，extStack所有日期字段
+    initFieldList() {
+      const xAxis = JSON.parse(this.chart.xaxis)
+      const extStack = JSON.parse(this.chart.extStack)
+      const t1 = xAxis.filter(ele => { return ele.deType === 1 })
+      const t2 = extStack.filter(ele => { return ele.deType === 1 })
+      this.fieldList = t1.concat(t2)
+      // 如果没有选中字段，则默认选中第一个
+      if ((!this.compareItem.compareCalc.field || this.compareItem.compareCalc.field === '') && this.fieldList.length > 0) {
+        this.compareItem.compareCalc.field = this.fieldList[0].id
+      }
+    },
+    // 获得不同字段格式对应能计算的同环比列表
+    initCompareType() {
+      const checkedField = this.fieldList.filter(ele => ele.id === this.compareItem.compareCalc.field)
+      if (checkedField && checkedField.length > 0) {
+        switch (checkedField[0].dateStyle) {
+          case 'y':
+            this.compareList = compareYearList
+            break
+          case 'y_M':
+            this.compareList = compareMonthList
+            break
+          case 'y_M_d':
+            this.compareList = compareDayList
+            break
+          default:
+            break
+        }
+      } else {
+        this.compareList = []
+      }
+      // 如果没有选中一个同环比类型，则默认选中第一个
+      if ((!this.compareItem.compareCalc.type || this.compareItem.compareCalc.type === '' || this.compareItem.compareCalc.type === 'none') && this.compareList.length > 0) {
+        this.compareItem.compareCalc.type = this.compareList[0].value
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item{
+  margin-bottom: 10px!important;
+}
+.compare-form >>> .el-form-item__label{
+  font-size: 12px!important;
+  font-weight: 400!important;
+}
+.compare-form >>> .el-radio__label{
+  font-size: 12px!important;
+  font-weight: 400!important;
+}
+.el-select-dropdown__item >>> span{
+  font-size: 12px!important;
+}
+.exp-style{
+  color: #C0C4CC;
+  font-size: 12px;
+}
+</style>
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index acbc047608..073edc2b01 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -61,7 +61,7 @@
                 <el-dropdown-item :command="beforeDateStyle('y')">{{ $t('chart.y') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M')">{{ $t('chart.y_M') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d')">{{ $t('chart.y_M_d') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeDateStyle('H_m_s')">{{ $t('chart.H_m_s') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('H_m_s')" divided>{{ $t('chart.H_m_s') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m')">{{ $t('chart.y_M_d_H_m') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m_s')">{{ $t('chart.y_M_d_H_m_s') }}</el-dropdown-item>
               </el-dropdown-menu>
diff --git a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
index 2ec9104734..7684e24757 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
@@ -13,7 +13,9 @@
         <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>
-      <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+      <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
+        {{ $t('chart.' + item.summary) }}<span v-if="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">
@@ -30,7 +32,9 @@
             <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>
-          <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+          <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
+            {{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
+          </span>
           <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
@@ -87,6 +91,25 @@
           <!--              </el-dropdown-menu>-->
           <!--            </el-dropdown>-->
           <!--          </el-dropdown-item>-->
+
+          <!--同比/环比-->
+          <el-dropdown-item v-show="chart.type !== 'table-info'">
+            <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-crop" />
+                  <span>{{ $t('chart.yoy_label') }}</span>
+                  <span class="summary-span-item">({{ !item.compareCalc ? $t('chart.none') : $t('chart.' + item.compareCalc.type) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeQuickCalc('none')">{{ $t('chart.none') }}</el-dropdown-item>
+                <el-dropdown-item :disabled="disableEditCompare" :command="beforeQuickCalc('setting')">{{ $t('commons.setting') }}...</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+
           <el-dropdown-item :divided="chart.type !== 'table-info'">
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
               <span class="el-dropdown-link inner-dropdown-menu">
@@ -120,6 +143,8 @@
 </template>
 
 <script>
+import { compareItem } from '@/views/chart/chart/compare'
+
 export default {
   name: 'QuotaExtItem',
   props: {
@@ -142,12 +167,43 @@ export default {
   },
   data() {
     return {
+      compareItem: compareItem,
+      disableEditCompare: false
+    }
+  },
+  watch: {
+    'chart.xaxis': function() {
+      this.isEnableCompare()
+    },
+    'chart.extStack': function() {
+      this.isEnableCompare()
     }
   },
   mounted() {
-
+    this.init()
+    this.isEnableCompare()
   },
   methods: {
+    init() {
+      if (!this.item.compareCalc) {
+        this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
+      }
+    },
+    isEnableCompare() {
+      const xAxis = JSON.parse(this.chart.xaxis)
+      const extStack = JSON.parse(this.chart.extStack)
+      const t1 = xAxis.filter(ele => {
+        return ele.deType === 1
+      })
+      const t2 = extStack.filter(ele => {
+        return ele.deType === 1
+      })
+      if (t1.length > 0 || t2.length > 0) {
+        this.disableEditCompare = false
+      } else {
+        this.disableEditCompare = true
+      }
+    },
     clickItem(param) {
       if (!param) {
         return
@@ -195,7 +251,17 @@ export default {
     },
 
     quickCalc(param) {
-
+      switch (param.type) {
+        case 'none':
+          this.item.compareCalc.type = 'none'
+          this.$emit('onQuotaItemChange', this.item)
+          break
+        case 'setting':
+          this.editCompare()
+          break
+        default:
+          break
+      }
     },
     beforeQuickCalc(type) {
       return {
@@ -227,6 +293,12 @@ export default {
       this.item.index = this.index
       this.item.filterType = 'quotaExt'
       this.$emit('editItemFilter', this.item)
+    },
+
+    editCompare() {
+      this.item.index = this.index
+      this.item.calcType = 'quotaExt'
+      this.$emit('editItemCompare', this.item)
     }
   }
 }
@@ -264,7 +336,7 @@ export default {
     margin-left: 4px;
     color: #878d9f;
     position: absolute;
-    right: 30px;
+    right: 25px;
   }
 
   .inner-dropdown-menu{
@@ -276,7 +348,7 @@ export default {
 
   .item-span-style{
     display: inline-block;
-    width: 70px;
+    width: 50px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index dbf6e00916..16d079cc7e 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -13,7 +13,9 @@
         <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>
-      <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+      <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
+        {{ $t('chart.' + item.summary) }}<span v-if="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">
@@ -30,7 +32,9 @@
             <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>
-          <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+          <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
+            {{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
+          </span>
           <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
@@ -87,6 +91,25 @@
           <!--              </el-dropdown-menu>-->
           <!--            </el-dropdown>-->
           <!--          </el-dropdown-item>-->
+
+          <!--同比/环比-->
+          <el-dropdown-item v-show="chart.type !== 'table-info'">
+            <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-crop" />
+                  <span>{{ $t('chart.yoy_label') }}</span>
+                  <span class="summary-span-item">({{ !item.compareCalc ? $t('chart.none') : $t('chart.' + item.compareCalc.type) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeQuickCalc('none')">{{ $t('chart.none') }}</el-dropdown-item>
+                <el-dropdown-item :disabled="disableEditCompare" :command="beforeQuickCalc('setting')">{{ $t('commons.setting') }}...</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+
           <el-dropdown-item :divided="chart.type !== 'table-info'">
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
               <span class="el-dropdown-link inner-dropdown-menu">
@@ -120,6 +143,8 @@
 </template>
 
 <script>
+import { compareItem } from '@/views/chart/chart/compare'
+
 export default {
   name: 'QuotaItem',
   props: {
@@ -142,12 +167,43 @@ export default {
   },
   data() {
     return {
+      compareItem: compareItem,
+      disableEditCompare: false
+    }
+  },
+  watch: {
+    'chart.xaxis': function() {
+      this.isEnableCompare()
+    },
+    'chart.extStack': function() {
+      this.isEnableCompare()
     }
   },
   mounted() {
-
+    this.init()
+    this.isEnableCompare()
   },
   methods: {
+    init() {
+      if (!this.item.compareCalc) {
+        this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
+      }
+    },
+    isEnableCompare() {
+      const xAxis = JSON.parse(this.chart.xaxis)
+      const extStack = JSON.parse(this.chart.extStack)
+      const t1 = xAxis.filter(ele => {
+        return ele.deType === 1
+      })
+      const t2 = extStack.filter(ele => {
+        return ele.deType === 1
+      })
+      if (t1.length > 0 || t2.length > 0) {
+        this.disableEditCompare = false
+      } else {
+        this.disableEditCompare = true
+      }
+    },
     clickItem(param) {
       if (!param) {
         return
@@ -195,7 +251,17 @@ export default {
     },
 
     quickCalc(param) {
-
+      switch (param.type) {
+        case 'none':
+          this.item.compareCalc.type = 'none'
+          this.$emit('onQuotaItemChange', this.item)
+          break
+        case 'setting':
+          this.editCompare()
+          break
+        default:
+          break
+      }
     },
     beforeQuickCalc(type) {
       return {
@@ -227,6 +293,12 @@ export default {
       this.item.index = this.index
       this.item.filterType = 'quota'
       this.$emit('editItemFilter', this.item)
+    },
+
+    editCompare() {
+      this.item.index = this.index
+      this.item.calcType = 'quota'
+      this.$emit('editItemCompare', this.item)
     }
   }
 }
@@ -264,7 +336,7 @@ export default {
     margin-left: 4px;
     color: #878d9f;
     position: absolute;
-    right: 30px;
+    right: 25px;
   }
 
   .inner-dropdown-menu{
@@ -276,7 +348,7 @@ export default {
 
   .item-span-style{
     display: inline-block;
-    width: 70px;
+    width: 50px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index ec346f9900..c20fff56dd 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -330,6 +330,7 @@
                           @onQuotaItemRemove="quotaItemRemove"
                           @editItemFilter="showQuotaEditFilter"
                           @onNameEdit="showRename"
+                          @editItemCompare="showQuotaEditCompare"
                         />
                       </transition-group>
                     </draggable>
@@ -365,6 +366,7 @@
                           @onQuotaItemRemove="quotaItemRemove"
                           @editItemFilter="showQuotaEditFilter"
                           @onNameEdit="showRename"
+                          @editItemCompare="showQuotaEditCompare"
                         />
                       </transition-group>
                     </draggable>
@@ -858,8 +860,8 @@
       <p style="margin-top: 10px;color:#F56C6C;font-size: 12px;">{{ $t('chart.change_ds_tip') }}</p>
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeChangeChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" :disabled="!changeTable || !changeTable.id" @click="changeChart">{{
-          $t('chart.confirm') }}
+        <el-button type="primary" size="mini" :disabled="!changeTable || !changeTable.id" @click="changeChart">
+          {{ $t('chart.confirm') }}
         </el-button>
       </div>
     </el-dialog>
@@ -881,11 +883,27 @@
         <el-button size="mini" style="float: right;" @click="closeEditDsField">{{ $t('chart.close') }}</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog
+      v-if="showEditQuotaCompare"
+      v-dialogDrag
+      :title="$t('chart.yoy_setting')"
+      :visible="showEditQuotaCompare"
+      :show-close="false"
+      width="600px"
+      class="dialog-css"
+    >
+      <compare-edit :compare-item="quotaItemCompare" :chart="chart" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeQuotaEditCompare">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveQuotaEditCompare">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
-import { ajaxGetData, ajaxGetDataOnly, post } from '@/api/chart/chart'
+import { ajaxGetDataOnly, post } from '@/api/chart/chart'
 import draggable from 'vuedraggable'
 import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
@@ -904,12 +922,12 @@ import {
   DEFAULT_LABEL,
   DEFAULT_LEGEND_STYLE,
   DEFAULT_SIZE,
+  DEFAULT_SPLIT,
   DEFAULT_TITLE_STYLE,
   DEFAULT_TOOLTIP,
   DEFAULT_XAXIS_STYLE,
-  DEFAULT_YAXIS_STYLE,
-  DEFAULT_SPLIT,
-  DEFAULT_YAXIS_EXT_STYLE
+  DEFAULT_YAXIS_EXT_STYLE,
+  DEFAULT_YAXIS_STYLE
 } from '../chart/chart'
 import ColorSelector from '../components/shape-attr/ColorSelector'
 import SizeSelector from '../components/shape-attr/SizeSelector'
@@ -942,10 +960,13 @@ import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSel
 import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
 import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
 import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
+import CompareEdit from '@/views/chart/components/compare/CompareEdit'
+import { compareItem } from '@/views/chart/chart/compare'
 
 export default {
   name: 'ChartEdit',
   components: {
+    CompareEdit,
     SplitSelectorAntV,
     SizeSelectorAntV,
     YAxisExtSelectorAntV,
@@ -1071,7 +1092,9 @@ export default {
         { name: 'ECharts', value: 'echarts' }
       ],
       drill: false,
-      hasEdit: false
+      hasEdit: false,
+      quotaItemCompare: {},
+      showEditQuotaCompare: false
     }
   },
   computed: {
@@ -1217,6 +1240,9 @@ export default {
         if (!ele.filter) {
           ele.filter = []
         }
+        if (!ele.compareCalc) {
+          ele.compareCalc = compareItem
+        }
       })
       if (view.type === 'chart-mix') {
         view.yaxisExt.forEach(function(ele) {
@@ -1489,12 +1515,6 @@ export default {
     },
 
     quotaItemChange(item) {
-      // 更新item
-      // this.view.yaxis.forEach(function(ele) {
-      //   if (ele.id === item.id) {
-      //     ele.summary = item.summary
-      //   }
-      // })
       this.calcData(true)
     },
 
@@ -1673,6 +1693,24 @@ export default {
       // this.itemForm = {}
     },
 
+    showQuotaEditCompare(item) {
+      this.quotaItemCompare = JSON.parse(JSON.stringify(item))
+      this.showEditQuotaCompare = true
+    },
+    closeQuotaEditCompare() {
+      this.showEditQuotaCompare = false
+    },
+    saveQuotaEditCompare() {
+      // 更新指标
+      if (this.quotaItemCompare.calcType === 'quota') {
+        this.view.yaxis[this.quotaItemCompare.index].compareCalc = this.quotaItemCompare.compareCalc
+      } else if (this.quotaItemCompare.calcType === 'quotaExt') {
+        this.view.yaxisExt[this.quotaItemCompare.index].compareCalc = this.quotaItemCompare.compareCalc
+      }
+      this.calcData(true)
+      this.closeQuotaEditCompare()
+    },
+
     showTab() {
       this.tabStatus = true
     },