feat: chart-box增加复制expression功能

nezha-fronted/src/assets/stylus/main.scss

@@ -2373,15 +2373,26 @@ li{
 }
 .right-box-form  .nz-icon-minus-medium{
   padding: 2px 6px;
-  background: rgba(236,127,102,.1);
+  background-color: rgba(236,127,102,.1);
   border-radius: 2px;
   cursor: pointer;
 }
-.right-box-form .form-row-item .nz-icon-minus-position{
+.nz-icon-copy {
+  padding: 2px 6px;
+  color: $global-text-color-active;
+  background-color: #FDF5E9;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.nz-icon-minus-position{
+  display: inline-flex;
+  flex-direction: column;
   position: absolute;
+  right: -40px;
   top: 50%;
-  right: -55px;
+  transform: translateY(-50%);
-  transform: translate(-50%,-50%);
+  height: 70px;
+  justify-content: space-around;
 }
 .right-box-form>.el-form-item.half-form-item-other{
   display: inline-block;

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -71,9 +71,14 @@
                 </el-col>
               </template>
             </el-row>
-            <span class="nz-icon-minus-medium nz-icon-minus-position">
+            <div class="nz-icon-minus-position">
-            <i class="nz-icon nz-icon-minus" @click="removeExpression(index)"></i>
+              <span class="nz-icon-minus-medium">
-          </span>
+                <i @click="removeExpression(index)" class="nz-icon nz-icon-minus"></i>
+              </span>
+              <span class="nz-icon-copy">
+                <i @click="copyExpression(index)" class="nz-icon nz-icon-override"></i>
+              </span>
+            </div>
           </el-row>
 
           <!--tooltip-->
@@ -1564,6 +1569,17 @@
           });
         }
       },
+      copyExpression(index) {
+        this.selection.pen.data.expressArr.push(this.selection.pen.data.expressArr[index]);
+        this.selection.pen.data.legends.push(this.selection.pen.data.legends[index]);
+        this.$nextTick(() => {
+          this.expressions.forEach((ex, index) => {
+            if (ex) {
+              this.$refs[`promql-${index}`][0].metricChange(ex);
+            }
+          });
+        });
+      },
       valueMappingAdd(){
         if(this.selection.pen.data.valueMappingSort==='desc'){
           this.selection.pen.data.valueMapping.push({
@@ -1835,8 +1851,12 @@
       width: calc(100% - 120px);
       padding: 20px 20px 20px 0;
     }
-
+    .form-row-item .nz-icon-minus-position .nz-icon-minus-medium {
-    .form-row-item .nz-icon-minus-position {
+      background: rgba(236, 127, 102, 0.1);
+      padding: 2px 6px;
+      color: #EC7F66;
+    }
+    /*.form-row-item .nz-icon-minus-position {
       position: absolute;
       top: 50%;
       right: -55px;
@@ -1849,7 +1869,7 @@
       .nz-icon-minus {
         color: #EC7F66;
       }
-    }
+    }*/
 
     .tooltip-box {
       padding-left: 10px;

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -323,20 +323,25 @@
                         ></promql-input>
               -->
               <el-row>
-                  <el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
+                <el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
-                    {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
-                    <el-popover placement="top" trigger="hover" width="211">
+                  <el-popover placement="top" trigger="hover" width="211">
-                      <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
+                    <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
-                      <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                    <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
-                    </el-popover>
+                  </el-popover>
-                  </el-col>
+                </el-col>
-                  <el-col style="width: calc(100% - 120px);">
+                <el-col style="width: calc(100% - 120px);">
-                    <el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
+                  <el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
-                  </el-col>
+                </el-col>
               </el-row>
-              <span class="nz-icon-minus-medium nz-icon-minus-position">
+              <div class="nz-icon-minus-position">
-            <i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i>
+                <span class="nz-icon-minus-medium">
-          </span>
+                  <i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
+                </span>
+                <span class="nz-icon-copy" v-if="!isSingleStat">
+                  <i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
+                </span>
+              </div>
             </el-row>
           </div>
         <!--value mapping start-->
@@ -739,6 +744,20 @@
           });
         }
       },
+      copyExpression(index) {
+        this.expressions.push(this.expressions[index]);
+        this.legends.push(this.legends[index]);
+        this.promqlKeys.push(getUUID());
+        this.elementIds.push("");
+        this.promqlCount++;
+        this.$nextTick(() => {
+          this.expressions.forEach((ex, index) => {
+            if (ex) {
+              this.$refs[`promql-${index}`][0].metricChange(ex);
+            }
+          });
+        });
+      },
       save() {
         this.$refs['chartForm'].validate((valid) => {
           if (valid) {