Merge branch 'dev-3.8' of git.mesalab.cn:nezha/nezha-fronted into dev-3.9

2023-08-23 17:57:34 +08:00
parent b814a28463 0e47c29eab
commit 0bdd46056a
4 changed files with 65 additions and 14 deletions
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -396,8 +396,8 @@
  box-sizing: border-box;

  .legend-item {
+    padding: 0 8px;
    white-space: nowrap;
-    margin-right: 10px;
    cursor: pointer;
    display: inline-block;
    line-height: 20px;
@@ -406,16 +406,27 @@
  .legend-item, .legend--table-row {
    &.legend-item--inactive, &.row--inactive {
      color: $--color-text-secondary;
-
      .legend-shape {
        background-color: $--background-color-1 !important;
      }
-
      .nz-icon{
        color: $--background-color-1 !important;
      }
    }
  }
+  .nz-icon-override{
+    visibility: hidden;
+    font-size: 15px;
+    margin-left: 5px;
+    vertical-align: middle;
+  }
+  .legend-item:hover {
+    background-color: $--background-color-1;
+    cursor: pointer;
+    .nz-icon-override{
+      visibility: visible;
+    }
+  }

  // 表格类型
  .legend--table {
@@ -429,6 +440,9 @@
    .legend--table-row:not(:first-of-type):hover {
      background-color: $--background-color-1;
      cursor: pointer;
+      .nz-icon-override{
+        visibility: visible;
+      }
    }
    .legend--table-row:first-of-type {
      color:#33a2e5;
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -697,16 +697,33 @@ export default {
      if (this.isConnect !== 'none') {
        echarts.disconnect('timeSeriesGroup')
      }
-      const index = this.tooltip.clickIndex
-      getChart(this.chartId).dispatchAction({
-        type: 'legendInverseSelect'
+      this.legends.forEach((item, index) => {
+        if (index == this.tooltip.clickIndex) {
+          getChart(this.chartId).dispatchAction({
+            type: 'legendSelect',
+            name: item.name
+          })
+        } else {
+          getChart(this.chartId).dispatchAction({
+            type: 'legendUnSelect',
+            name: item.name
+          })
+        }
      })
-      getChart(this.chartId).dispatchAction({
-        type: 'legendSelect',
-        name: this.legends[index].name
-      })
-      this.isGrey = this.isGrey.map((g, i) => i !== index)
+      this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex)
      this.$refs.legend.isGrey = this.isGrey
+
+      // 点击后 处理Y轴的刻度边的
+      const chartInfo = this.chartInfo
+      const series = this.$lodash.cloneDeep(this.series)
+      const dataArg = series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
+      const option = this.renderYAxis(dataArg, chartInfo, 'legend')
+      getChart(this.chartId) && getChart(this.chartId).setOption({
+        yAxis: [
+          ...option.yAxis
+        ]
+      })
+
      if (this.isConnect !== 'none') {
        echarts.disconnect('timeSeriesGroup')
      }
@@ -721,6 +738,18 @@ export default {
      })
      this.isGrey = this.isGrey.map(() => false)
      this.$refs.legend.isGrey = this.isGrey
+
+      // 点击后 处理Y轴的刻度边的
+      const chartInfo = this.chartInfo
+      const series = this.$lodash.cloneDeep(this.series)
+      const dataArg = series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
+      const option = this.renderYAxis(dataArg, chartInfo, 'legend')
+      getChart(this.chartId) && getChart(this.chartId).setOption({
+        yAxis: [
+          ...option.yAxis
+        ]
+      })
+
      if (this.isConnect !== 'none') {
        echarts.disconnect('timeSeriesGroup')
      }
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -25,6 +25,7 @@
            <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
            <span v-else :style="{background: item.color}" class="legend-shape"></span>
            <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
+            <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
          </div>
          <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value))}}</div>
        </div>
@@ -43,6 +44,7 @@
            <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
            <span v-else :style="{background: item.color}" class="legend-shape"></span>
            <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
+            <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
          </div>
          <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value, 'right'))}}</div>
        </div>
@@ -65,6 +67,7 @@
        <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
        <span v-else :style="{background: item.color}" class="legend-shape"></span>
        <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
+        <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
      </div>
      <!-- 右y轴legend -->
      <div
@@ -81,6 +84,7 @@
        <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
        <span v-else :style="{background: item.color}" class="legend-shape"></span>
        <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
+        <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
      </div>
    </template>
  </div>
@@ -125,6 +129,11 @@ export default {
    }
  },
  methods: {
+    onCopy (txt) {
+      this.$copyText(txt).then(() => {
+        this.$message.success({ message: this.$t('overall.copySuccess') })
+      })
+    },
    clickLegend (legendName, index) {
      /* 点击legend
          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
@@ -269,13 +278,13 @@ export default {
          this.$emit('hoverLegendD3', legendName, index, type)
        }
      } else if (this.isTimeSeries) {
-        getChart(this.chartId).dispatchAction({
+        getChart(this.chartId) && getChart(this.chartId).dispatchAction({
          type: type,
          seriesIndex: index,
          name: legendName
        })
      } else {
-        getChart(this.chartId).dispatchAction({
+        getChart(this.chartId) && getChart(this.chartId).dispatchAction({
          type: type,
          name: legendName
        })
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -84,7 +84,6 @@ export default {
      this.isNoData = true
      originalDatas.forEach((originalData, expressionIndex) => {
        originalData.forEach((data, dataIndex) => {
-          console.log(data, 'data')
          if (colorIndex >= 20 && !this.showAllData) {
            colorIndex++
            return