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

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child  {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: white;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .common-float-left {
    float: left;
    display:inline-block;
  }

  .el-inner {
    width: 200px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 10px;
    border-color:red;
    /*outline: medium;*/
  }

  .element-bottom-border {
    padding-bottom: 5px;
    border-bottom: 1px solid #dfe7f2;
    margin-top: 15px;
  }
  /*metric样式--begin*/
  .element-item {
    padding: 20px 0;
    border-bottom: 1px dashed #dfe7f2;
    width: 100%;
  }
  .right-box-form .element-item.form-row-item{
    width: calc(100% - 120px);
    padding: 20px 20px 20px 0;
  }
  /*metric样式--end*/
  .label-center{
    vertical-align: middle;
    line-height: 34px;
  }

  .z-top {
    /*z-index: 2900;*/
  }
  .save-chart-box{
    z-index: 2900;
  }
  .mc{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;
  }
  /deep/ .el-color-picker{
    position: absolute;
  }
  .range /deep/ .el-color-picker{
   left: -17px;
  }
  .color-content{
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
    top: -280px;
    left: 140px;
  }
  .color-tab{
    position: absolute;
    top: -268px;
    left: -14px;
    height: 28px;
    border-radius: 5px 5px 0 0;
    width: 312px;
    border: 1px solid #EBEEF5;
    border-bottom: none;
    background-color: #FFF;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .color-tab div{
    text-align: center;
    flex: 1;
    color: #909399;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    background: #E4E7ED;
    cursor: pointer;
  }
  .color-tab div:first-child{
    border-right-color: #DCDFE6;
  }
  .color-tab div:hover{
    color: #409EFF;
  }
  .color-tab .color-active{
    color: #409EFF;
    background-color: #FFF;
  }
  .color{
    position: relative;
  }
  .color-show{
    border: 1px solid #E7EAED;
    border-radius: 4px;
    top: -2px;
    align-items: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
  }
  .color-show-left{
    width: 28px;
    height: 28px;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    line-height: 28px;
  }
  .color-arrows{
    color: #fff;
    font-weight: bold;
  }
  .color-arrows .nz-icon{
    font-size: 12px;
  }

</style>
<template key="chartBox">
  <div  class="mc">
    <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart" v-clickoutside="{obj:editChart,func:clickOutside}">
      <transition name="right-box">
        <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
      </transition>

      <!-- begin--顶部按钮-->
      <div class="right-box-top-btns right-box-form-delete">
        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" id="chart-box-delete" type="button" v-if="editChart.id">
          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
        </button>
      </div>
      <!-- end--顶部按钮-->

      <!-- begin--标题-->
      <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
      <!-- end--标题-->

      <!-- begin--表单-->
      <div class="right-box-form-box" ref="scrollbar">
        <el-form :model="editChart" :rules="rules" class="right-box-form  right-box-form-left" label-position="right" label-width="120px" ref="chartForm">
          <el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'dashboard' && showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model'">
            <!--<el-autocomplete
              :fetch-suggestions="panelSuggestion"
              @input="inputPanel"
              placeholder=""
              popper-class="chart-box-autocomplete no-style-class"
              size="small"
              v-if="!editChart.id"
              v-model.trim="editChart.panelName"
              value-key="name"
            >
            </el-autocomplete>-->
            <select-panel :filter-panel="filterPanel" :panel-lock="true" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel" ref="selectPanel"
                          v-if="!editChart.id">
              <template v-slot:header>
                <div class="panel-select-header">
                  <el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px; margin-right: 5px;" v-model="filterPanel" id="chart-box-panelname"></el-input>
                </div>
              </template>
              <template v-slot:trigger>
                <el-input placeholder="" readonly="readonly" size="small" v-model="panelName"></el-input>
              </template>
            </select-panel>
            <el-input :value="editChart.panelName" readonly="readonly" size="small" v-if="editChart.id"></el-input>

          </el-form-item>
          <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
            <el-input maxlength="64" show-word-limit size="small" v-model="editChart.title" id="chart-box-title"></el-input>
          </el-form-item>

          <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
          <div style="margin-bottom: 20px;width: 100%"></div>

          <!-- type unit start-->
          <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
            <el-select @change="chartTypeChange" class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.type" value-key="chartType" id="chart-box-type">
              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList">
                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text'">
            <el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected"  filterable id="chart-box-unit"
                         placeholder=""
                         popper-class="dc-dropdown"
                         size="mini"
                         style="width: 100%"
                         v-model="editChart.unit"
            >
            </el-cascader>
          </el-form-item>
          <!--type unit end-->

          <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
            <el-select class="right-box-row-with-btn"  placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
              <el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
                <span class="panel-dropdown-label-txt" > span-{{item}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="half-form-item"  prop="hight">
            <el-autocomplete
              id="chart-box-height"
              :fetch-suggestions="querySearch"
              @select="handleSelect"
              placeholder=""
              popper-class="popper-z-index no-style-class"
              size="mini"
              v-model="editChart.height">
              <template slot-scope="{ item }">
                <div class="name">{{ item }}</div>
              </template>
            </el-autocomplete>
            <span class="nz-input-append">px</span>
          </el-form-item>

          <el-form-item :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url" v-if="isUrl">
            <el-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url" id="chart-box-url"></el-input>
          </el-form-item>

          <el-form-item  :label='"Null value"' class="half-form-item" prop="nullType"  v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'">
            <el-select @change="$forceUpdate()"  class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.param.nullType" id="chart-box-nullType">
              <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in nullTypeList"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label='$t("dashboard.panel.chartForm.threshold")' class="half-form-item" prop="param.threshold"  v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
            <el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
          </el-form-item>

          <el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
            <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
          </el-form-item>

          <!--<el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">-->
          <!--<el-switch class="exporter-switch" v-model="editChart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>-->
          <!--</el-form-item>-->

          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'">
            <span>{{$t('alert.config.expr')}}</span>
            <span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="!isSingleStat">
            <span class="create-square-box">
              <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
            </span>
          </span>
          </div>
          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="editChart.type == 'text'">
            <span>{{$t('dashboard.panel.chartForm.content')}}</span>
          </div>
          <div class="right-box-sub-title" v-if="isAlert">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
          <div style="width: 100%" v-if="!isUrl"></div>

          <el-row class="element-item" style="width: calc(100% - 108px);margin-left: 108px" v-if="isAlert">
            <alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
          </el-row>
          <div id="chart-box-expression-box" style="margin-bottom: 20px">
            <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'">
              <promql-input
                :expression-list="expressions"
                :id="promqlKeys[index-1]"
                :index="index-1"
                :key="promqlKeys[index-1]"
                :plugins="['metric-selector', 'metric-input', 'remove']"
                :ref="'promql-'+(index-1)"
                :showRemove="false"
                :styleType="2"
                @change="expressionChange"
                @removeExpression="removeExpression"
              ></promql-input>
              <!--
                        <promql-input
                          :ref="'promql-'+(index-1)"
                          :id="promqlKeys[index-1]"
                          :key="promqlKeys[index-1]"
                          :expression-list="expressions"
                          :metric-options="metricOptions"
                          :metric-store="metricStore"
                          :index="index-1"
                          :styleType="2"
                          :plugins="['metric-selector', 'metric-input', 'remove']"
                          @change="expressionChange"
                          @removeExpression="removeExpression"
                          :showRemove="false"
                        ></promql-input>
              -->
              <el-row>
                <template v-if="editChart.type != 'singleStat'">
                  <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
                    {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                    <el-popover placement="top" trigger="hover" width="211">
                      <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>
                    </el-popover>
                  </el-col>
                  <el-col style="width: calc(100% - 120px);">
                    <el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
                  </el-col>
                </template>
                <template v-else>
                  <el-col class="required-marker" style="width: 120px; padding-right: 20px; text-align: right; color: #666">
                    <label >{{$t('dashboard.panel.chartForm.statistics')}}</label>&nbsp;
                  </el-col>
                  <el-col style="width: calc(100% - 120px);">
                    <el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="editChart.param.statistics" id="chart-box-panelname">
                      <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
                        <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                      </el-option>
                    </el-select>
                  </el-col>
                </template>
              </el-row>
              <span class="nz-icon-minus-medium nz-icon-minus-position">
            <i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i>
          </span>
            </el-row>
          </div>
        <!--value mapping start-->
        <div  class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
          <span>
            {{$t('dashboard.panel.chartForm.valMapping.name')}}
            <el-popover  placement="top" trigger="hover" width="275">
              <div style="white-space: pre-wrap;">{{$t('dashboard.panel.chartForm.valueMappingTip')}}</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>
            </el-popover>
          </span>
          <span  class="float-right"  @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
        </div>
        <div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
        <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
          <el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" text-color="#FA901C" size="small" class="val-mapping-type"  @change="valueMappingChange" id="chart-box-change-valuemapping">
            <el-radio-button label="value" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
            <el-radio-button label="range" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
              <el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other  half-form-item-other-two">
              <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text"></el-input>
              <!--颜色选择器 start-->
              <div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
                <div :style="{background:mapping.color.bac}" class="color-show-left">
                     <span :style="{color:mapping.color.text}" class="color-arrows">
                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
                    T
                </span>
                </div>
              </div>
              <div class="color-content" ref="color-content">
                <el-color-picker
                  :ref="'colorPickerBac'+index"
                  @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
                  popper-class="no-style-class"
                  v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
                >
                </el-color-picker>
                <!--<el-color-picker-->
                <!--v-model="mapping.color.text"-->
                <!--:ref="'colorPickerText'+index"-->
                <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
                <!--&gt;-->
                <!--</el-color-picker>-->
              </div>
              <div class="color-tab" v-show="showPicker[index].bac ||  showPicker[index].text">
                <div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
                <div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
              </div>
              <!--颜色选择器 end-->
              <span  @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
            </el-form-item>
          </template>
        </template>
        <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
            <div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
                <el-input size="mini" type="input" v-model="mapping.from"></el-input>
              </el-form-item>
              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.to')" prop="span" class="one-third-form-item-right" >
                <el-input size="mini" type="input" v-model="mapping.to"></el-input>
              </el-form-item>
            </div>
            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other-two range" prop="span">
              <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text" ></el-input>
              <!--颜色选择器 start-->
              <div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
                <div :style="{background:mapping.color.bac}" class="color-show-left">
                     <span :style="{color:mapping.color.text}" class="color-arrows">
                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
                    T
                </span>
                </div>
              </div>
              <div class="color-content" ref="color-content">
                <el-color-picker
                  :ref="'colorPickerBac'+index"
                  popper-class="no-style-class"
                  @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
                  v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
                >
                </el-color-picker>
                <!--<el-color-picker-->
                <!--v-model="mapping.color.text"-->
                <!--:ref="'colorPickerText'+index"-->
                <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
                <!--&gt;-->
                <!--</el-color-picker>-->
              </div>
              <div class="color-tab" v-show="showPicker[index].bac ||  showPicker[index].text">
                <div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
                <div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
              </div>
              <!--颜色选择器 end-->
              <span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus"  style="color: #EC7F66"></i></span>
            </el-form-item>
          </template>
        </template>

        <!--value mapping end-->
        <template v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
          <div  class="right-box-sub-title" >
            <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
          </div>
          <div style="margin-bottom: 20px; width: 100%" ></div>
          <div style="display: flex;">
            <span style="margin-left: 150px;"></span>
            <template v-for="item in sortedOptionKeys">
              <div style="flex: 1">
                <span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
                <el-switch
                  :id="'chart-box-legendValue-'+item.label"
                  v-model="editChart.param.legendValue[item.key]"
                  active-value="on"
                  inactive-value="off"
                  active-color="#ee9d3f"
                  @change="">
                </el-switch>
              </div>
            </template>
          </div>
        </template>
        <template v-if="editChart.type=='text'&&textShow">
          <rich-text-editor ref="richTextEditor" :edit-data="editChart.param.text"></rich-text-editor>
        </template>

        </el-form>
      </div>
    <!--底部按钮-->
    <div class="right-box-bottom-btns">
      <button v-cancel="{obj:editChart,func:esc}" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
        <span>{{$t('overall.cancel')}}</span>
      </button>
      <button @click="SyncSave" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-Sync" v-has:all="[`${from}_chart_toAdd`, `${from}_chart_sync`]" v-if="showPanel.type && showPanel.type == 'model'">
        <span>{{$t('overall.SyncSave')}}</span>
      </button>
      <button @click="preview" id="chart-box-preview" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-else>
        <span>{{$t('overall.preview')}}</span>
      </button>
      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="confirmAdd" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-save" v-has="`${from}_chart_toAdd`" >
        <span>{{$t('overall.save')}}</span>
      </button>
    </div>
    <!--preview -->
    <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
  </div>
  </div>
</template>

<script>
  import bus from '../../../libs/bus';
  import ChartMetric from "./chartMetric";
  import chartDataFormat from '../../charts/chartDataFormat';
  import chartPreview from '../../charts/chartPreview';
  import {getUUID, resetZIndex} from "../../common/js/common";
  import alertChartParam from "./alertChartParam";
  import promqlInput from "./explore/promqlInput";
  import {nzNumber} from "../../common/js/validate";
  import richTextEditor from "../../charts/richTextEditor";
  import selectPanel from "../../common/popBox/selectPanel";

  var rz = {
    methods: {
      rz(e) {
        resetZIndex(e);
      }
    }
  };
  export default {
    name: "chartBox",
    props: {
      boxClass: String,
      panelData: Array,
      showPanel: Object,
      chart: Object,
      from: {type: String}
    },
    mixins: [rz],
    data() {
      return {
        optionBtn:{
          save:false,
        },
        editChart: {},
        filterPanel: "",
        statisticsList: this.$CONSTANTS.statisticsList,

        promqlCount: 1,
        promqlKeys: [],
        elementIds: [],
        expressions: [],
        legends: [],
        statistics: "",
        isEdit:false,
        editInfo: {},
        isUrl:false,
        isSingleStat:false,
        isAlert:false,
        rules: {
          panelName: [
            {required: true,  message: this.$t('validate.required'),  trigger: 'change'}
          ],
          title: [
            {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
          ],
          url: [
            {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
          ],
          'param.threshold':[
            {validator:nzNumber,trigger: 'blur'}
          ]
        },
        chartTypeList: [
          {
            id:"line",
            name:this.$t("dashboard.panel.chartForm.typeVal.line.label")
          },
          {
            id:'stackArea',
            name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
          },
          {
            id:"bar",
            name:this.$t("dashboard.panel.chartForm.typeVal.bar.label")
          },
          {
            id:'singleStat',
            name:this.$t("dashboard.panel.chartForm.typeVal.singleStat.label")
          },
          {
            id:"table",
            name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
          },
          {
            id:'alertList',
            name:this.$t("dashboard.panel.chartForm.typeVal.alertList.label")
          },
          {
            id:'text',
            name:this.$t("dashboard.panel.chartForm.typeVal.text.label")
          },
          {
            id:'url',
            name:this.$t("dashboard.panel.chartForm.typeVal.url.label")
          },

        ],
        elements: [1], // 指标部分 tarNum
        elementTarget: [], // 本地保存数据
        alertParams:{},
        spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        nullTypeList:[{
          label:'connected',
          value:'connected'
        },{
          label:'null',
          value:'null'
        },{
          label:'zero',
          value:'zero'
        }],
        // 是否为编辑已有信息
        isedit: false,
        //productId: 0,//不需要这个参数，可以删除
        isInputPanel:false,
        panelId: 0,
        panelName: '',
        selectFirstPanel: false,
        metricList: [], // metric列表
        metricCascaderList:[],//metric级联列表
        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
        deleteIndex: '', // 要删除的指标模块
        subCount: 0, // subSave保存data到bus计数器
        panel: {
          id: '',
          name: ''
        },
        heightSuggestions:['300','400','500','600'],
        unitOptions:chartDataFormat.unitOptions(),
        sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
        textShow:false,
        metricOptions: [],
        showPicker:[],
        //metricStore: []
      }
    },
    components:{
      'chart-metric':ChartMetric,
      'chart-preview':chartPreview,
      'alert-chart-param':alertChartParam,
      'promql-input': promqlInput,
      'rich-text-editor':richTextEditor,
      selectPanel,
    },
    mounted() {
      this.$nextTick(() => {
        this.initElements();

      });

      setTimeout(()=>{
        this.textShow=true;
      },300)
    },
    methods: {
      clickOutside() {
        this.esc(false);
      },
      selectPanel(panel) {
        this.panelName = panel.name;
        this.panelId = panel.id;
      },
      toAddPanel() {
        this.$refs.panelBox2.show(true);
        this.panel = {
          id: '',
          name: ''
        };
        this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.createPanelTitle"));
      },
      panelReload(panelName) { //刷新panel下拉框
        if (panelName) {
          this.panelName = panelName;
        }
        this.$emit("reloadOnlyPanel");
      },
      deletePanel(panel) {
        this.$confirm(this.$t("tip.confirmDelete"), {
          confirmButtonText: this.$t("tip.yes"),
          cancelButtonText: this.$t("tip.no"),
          type: 'warning'
        }).then(() => {
          this.$delete("panel?ids=" + panel.id).then(response => {
            if (response.code === 200) {
              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
              if (this.panelId == panel.id) {
                this.selectFirstPanel = true;
                this.$emit('reload', true);
              } else {
                this.$emit('reload');
              }
            } else {
              this.$message.error(response.msg);
            }
          })
        });
      },
      editPanel(panel) {
        this.$refs.panelBox2.show(true);
        this.panel = Object.assign({}, panel);
        this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.editPanelTitle"));
      },
      setUnit(unit) {
        this.$set(this.editChart,'unit',Number.parseInt(unit))
      },
      expressionChange: function () {

      },
      addExpression() {
        this.expressions.push('');
        this.legends.push('');
        this.promqlKeys.push(getUUID());
        this.elementIds.push("");
        this.promqlCount++;
      },
      removeExpression(index) {
        if (this.promqlCount > 1) {
          this.expressions.splice(index, 1);
          this.legends.splice(index, 1);
          this.promqlKeys.splice(index, 1);
          this.elementIds.splice(index, 1);
          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) {
            if (this.editChart.id) {//修改
              this.$put('panel/'+this.editChart.id+'/charts').then(response => {
                if (response.code === 200) {
                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
                  this.esc(true);
                } else {
                  this.$message.error(response.msg);
                }
              });
            } else {//新增
              this.$post('panel/charts', this.editChart).then(response => {
                if (response.code === 200) {
                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
                  this.esc(true);
                } else {
                  this.$message.error(response.msg);
                }
              });
            }
          } else {
            console.error('error submit!!');
            return false;
          }
        });
      },
      del() {
          this.$emit('delete-chart',this.editChart)
      },
      //----------------------------------

      /*关闭弹框*/
      esc(refresh) {
        this.$emit("close", refresh);
      },

      /*metric部分相关方法--begin*/
      // 增加指标,tarNum
      addTarget() {
        this.elements.push(1);
      },
      // 删除指标,第一步, 新方法
      deleteTarget(index) {
        //alert('box第一步，循环所有的metric，为什么要循环？？');
        this.deleteIndex = index;
        // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
        this.$refs.chartTag.forEach((item) => {
          // 子组件保存内容到bus
          item.subSave();
        });
      },
      // subSave保存成功后回调,第二步
      subOk() {
        // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
        //alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
        this.subCount += 1;
        if (this.subCount === this.elements.length) {
          this.subCount = 0;
          // 保存完成,进行删除操作
          //('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
          this.elements.splice(this.deleteIndex, 1);
          this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
          bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);

          this.$nextTick(() => {
            this.$refs.chartTag.forEach((item, index) => {
              item.setSubdata(index); // 将数据从bus重新赋值
            });
          });
        }
      },
      // 格式化tag为字符串表达式
      /*
      tagsToString(metric,arr) {
        let str = metric;
        let sepStr = '';
        arr.forEach((item, index) => {
          if (index === 0) {
            str +="{"
            if(item.value.length===1){
              str +=  `${item.name}='${item.value.join('|')}'`;
              sepStr = ',';
            }else if(item.value.length>1){
              str +=  `${item.name}=~'${item.value.join('|')}'`;
              sepStr = ',';
            }
          } else {
            if(item.value.length===1){
              str += sepStr+`${item.name}='${item.value.join('|')}'`;
              sepStr = ',';
            }else if(item.value.length>1){
              str += sepStr+`${item.name}=~'${item.value.join('|')}'`;
              sepStr = ',';
            }
          }
        });
        if(str.indexOf('{')>-1){
          str +="}";
        }
        if(str.endsWith('{}')){
          str = str.substring(0,str.indexOf('{'));
        }
        return str;
      },
       */
      autocompleteExist(string) {
        let result = false;
        for (let i = 0; i < this.panelData.length; i++) {
          if (this.panelData[i].name.toLowerCase() == string.toLowerCase()) {
            result = this.panelData[i].id;
            break;
          }
        }
        return result;
      },
      // 新建图表
      addCharts(params) {
        //先处理panel
        /*let panelPromise=new Promise(resolve => {
          if (this.panelId) {
            panelId = this.panelId;
            panel=this.panelData.find(p => p.id === this.panelId);
            resolve()
          } else if (this.showPanel && this.showPanel.type != "dashboard" && this.showPanel.type != 'explore'&& this.showPanel.type != 'endpointQuery') {
            panelId = this.panelData[0].id;
            panel = this.panelData[0]
            resolve()
          } else {
            panelId = this.autocompleteExist(this.editChart.panelName);
            if (!panelId) {
              this.$post('panel', {name: this.editChart.panelName}).then(response => {
                if (response.code === 200) {
                  this.$emit("reloadOnlyPanel");
                  panel = response.data.panel
                  panelId=panel.id;

                  resolve()
                } else {
                  if(response.msg){
                    this.$message.error(response.msg);
                  }else {
                    this.$message.error(response);
                  }
                }
              });
            }
          }
        });*/

        //panelPromise.then(()=>{
          if (this.panelId) {
            this.$post('panel/' + this.panelId + '/charts', params ? params : this.editChart).then(response => {
              if (response.code === 200) {
                this.esc();
                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
                this.$refs.chartForm.resetFields();//清空表单
                this.$emit('on-create-success', 'create', response.data, params, {id: this.panelId, name: this.panelName});
              } else {
                if (response.msg) {
                  this.$message.error(response.msg);
                } else {
                  this.$message.error(response);
                }
              }
              this.prevent_opt.save=false
            });
          }
        //})
      },
      // 更新图表
      updateCharts(params) {
        let panelId=this.panelId?this.panelId:this.chart.panelId;
        this.$put('panel/' + panelId + '/charts', params ? params : this.editChart).then(response2 => {
          if (response2.code === 200) {
            this.esc();
            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
            // this.$refs.chartForm.resetFields();//清空表单
            this.$emit('on-create-success', 'update', response2.data, params);
          } else {
            if(response2.msg){
              this.$message.error(response2.msg);
            }else {
              this.$message.error(response2);
            }
          }
          this.prevent_opt.save=false
        });
      },
      // 获取每个tag组件内部校验后数据,点击生成图表时触发
      getTarget(target,pointer,optType) {
        this.elementTarget.push(target);
        if (this.elementTarget.length === this.elements.length) {
          this.$refs.chartForm.validate((valid) => {
            const params = {
              // productId: this.productId,
              //panelId: this.panelId,
              title: this.editChart.title,//this.editChart
              span: this.editChart.span,
              height: this.editChart.height,
              type: this.editChart.type,
              unit:this.editChart.unit,
              param:{

              },
              sync: this.editChart.sync
            };
            if(this.editChart.type === 'singleStat'){
              // params.param.statistics=this.statistics;
            } else {
              delete params.param.statistics;
            }
            if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
              params.param.threshold=this.editChart.param.threshold;
              params.param.nullType=this.editChart.param.nullType;
            } else {
              delete params.param.threshold;
            }
            //生成指标数组
            const elements = [];
            this.elementTarget.forEach((elem,index) => {
              if(elem.type==='normal'){
                const metricStr = bus.tagsToString(elem.metric,elem.selectedTagList);
                elements.push({
                  //id:index+1,
                  //metric: elem.metric,//指标名称
                  expression: metricStr,//指标对应Label及Value组成的表达式字符串
                  type:elem.type,//指标类型
                  legend:elem.legend,//配置的legend
                });
              }else if(elem.type==='expert'){
                elements.push({
                  //id:index+1,
                  //metric: elem.metric,//指标名称
                  expression: elem.expression,//指标对应Label及Value组成的表达式字符串
                  type:elem.type,//指标类型
                  legend:elem.legend,//配置的legend
                });
              }
            });
            params.elements = elements;
            if (valid) {
              if(optType==='preview') {
                if (this.isedit) {
                  params.id = this.editChart.id;
                }
                this.$refs.chartsPreview.show(params);
              }else{
                if (this.isedit) {
                  params.id = this.editChart.id;
                  this.updateCharts(params);
                } else {
                  this.addCharts(params);
                }
              }
            }
          });
        }
      },
      getAlertParam:function(param,opType){
        this.$refs.chartForm.validate((valid) => {
          const params = {
            title: this.editChart.title,//this.editChart
            span: this.editChart.span,
            height: this.editChart.height,
            type: this.editChart.type,
            unit:this.editChart.unit,
            param:param,
            sync: this.editChart.sync,
          };
          if (valid) {
            if(opType==='preview') {
              if (this.isedit) {
                params.id = this.editChart.id;
              }
              this.$refs.chartsPreview.show(params);
            }else{
              if (this.isedit) {
                params.id = this.editChart.id;
                this.updateCharts(params);
              } else {
                this.addCharts(params);
              }
            }
          }
        })
      },
      SyncSave(){
        this.editChart.sync=1;
        this.confirmAdd();
      },
      confirmAdd() {
        this.prevent_opt.save=true
        this.elementTarget = []; // 初始化清空参数
        if(this.editChart.type!=='url'&&this.editChart.type != 'text'){
          /*if(this.editChart.type == 'alertList'){
            this.$refs.alertParamBox.saveParam();
          }else{
            this.$refs.chartTag.forEach((item, index) => {//循环指标列表
              // 触发每个tag组件内部进行校验
              item.saveTarget(index);
            });
          }*/
          if(this.editChart.type == 'alertList'){
            this.$refs.alertParamBox.saveParam();
            return ;
          }
          if(this.editChart.type == 'singleStat'){
            // this.$set(this.editChart.param, "statistics", this.statistics);
          } else {
            delete this.editChart.param.statistics;
          }
          if (this.expressions[0]) {
            this.editChart.elements = [];
            this.expressions.forEach((expr, i) => {
              this.editChart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
            });
          }
          if (this.editChart.id) {
            this.updateCharts();
          } else {
            this.addCharts();
          }
        }else {
          if(this.editChart.type == 'url'){
            this.$refs.chartForm.validate((valid) => {
              const params = {
                title: this.editChart.title,//this.editChart
                span: this.editChart.span,
                height: this.editChart.height,
                type: this.editChart.type,
                unit:this.editChart.unit,
                param:{
                  url:this.editChart.param.url,
                },
                sync: this.editChart.sync
              };

              if (valid) {
                params.elements = [];
                if (this.isedit) {
                  params.id = this.editChart.id;
                  this.updateCharts(params);
                } else {
                  this.addCharts(params);
                }
              }
            });
          }else{
            this.$refs.chartForm.validate((valid) => {
              let text=this.$refs.richTextEditor.getContent();
              if(!text){
                valid=false;
              }
              const params = {
                title: this.editChart.title,//this.editChart
                span: this.editChart.span,
                height: this.editChart.height,
                type: this.editChart.type,
                param:{
                  text:text
                },
                sync: this.editChart.sync
              };

              if (valid) {
                params.elements = [];
                if (this.isedit) {
                  params.id = this.editChart.id;
                  this.updateCharts(params);
                } else {
                  this.addCharts(params);
                }
              }
            });
          }
        }
      },
      // 获取metric列表
      getSuggestMetric() {
        //this.$get('/prom/api/v1/label/__name__/values').then(response => {
        this.$get('/module?pageSize=-1').then(response => {
          if (response.code === 200) {
            this.metricList = response.data.list;
            const cascaderMap = new Map();
            this.metricList.forEach((item,index) => {
              let projectName = item.project.name;
              let moduleName = item.name;
              const childOption = {
                value: moduleName,
                label: moduleName,
                children:[],
              };
              if(cascaderMap.has(projectName)){
                cascaderMap.get(projectName).push(childOption);
              }else {
                let childArr = [];
                childArr.push(childOption);
                cascaderMap.set(projectName,childArr);
              }

              //缓存全局数据
              const moduleItem = {
                name:moduleName,
                metricMap:new Map()
              };
              if(this.metricAllData.has(projectName)){
                let moduleGroup = this.metricAllData.get(projectName);
                this.metricAllData.get(projectName).push(moduleItem);
              }else {
                let moduleList = [];
                moduleList.push(moduleItem);
                this.metricAllData.set(projectName,moduleList);
              }
            });
            let metricCascaderArr = [];
            cascaderMap.forEach(function(value,index){
              const option = {
                value: index+"_par",
                label: index,
                children:value,
              };
              metricCascaderArr.push(option);
            });

            this.metricCascaderList = metricCascaderArr;
          }else {
            this.metricList = [];
            this.metricCascaderList = [];
          }
        })
      },
      // 创建打开
      createData(panelId, elementInfo) {
        if (panelId == -1) {
          let p = this.panelData[0];
          this.editChart.panelName = p.name;
        } else {
          this.panelId = panelId;
        }
        if (elementInfo) {
          if (elementInfo.elements.length > 1) {

            this.$nextTick(() => {
              this.elements = [];
              elementInfo.elements.forEach((item, index) => {
                this.elements.push(index);
              });
              let dSet = this.$refs.chartTag;
              this.$nextTick(() => {
                dSet.forEach((item, index) => {
                  item.setMdata(elementInfo.elements[index]);
                });
              });
            });

          } else {
            this.$nextTick(() => {
              this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
            });
          }
        }
        this.isedit = false;
        this.initInfo(); // 初始化图表信息
        //this.editChartModal = true;//????控制弹出框显示和隐藏的，不需要了
        this.initOpen(); // 获取metric, productId数据
      },
      setIsUrl(){
        this.isUrl = true;
        this.isSingleStat = false;
        this.isAlert = false;
      },
      setIsSingleStat(){
        this.isUrl = false;
        this.isSingleStat = true;
        this.isAlert=false;
      },
      setIsAlertList(){
        this.isAlert = true;
        this.isUrl = false;
        this.isSingleStat = false;
      },
      setIsOtherChart(){
        this.isSingleStat = false;
        this.isUrl = false;
        this.isAlert=false;
      },
      // 编辑chart时使用, set_tdata
      editData(data, panelId) {
        if (!panelId) {
          this.panelId = 0;
        } else {
          this.panelId = panelId;
          let temp = this.panelData.filter((item) => {
            return item.id == panelId;
          });
        }
        this.isedit = true;
        this.editInfo = data;
        // 图表信息获取
        this.editChart.id = data.id;
        this.editChart.title = data.title;
        this.editChart.span = data.span;
        this.editChart.height = data.height+'';
        this.editChart.type = data.type;
        this.editChart.unit=data.unit;
        this.editChart.elements = data.elements;
        if(this.editChart.type==='url'){
          this.editChart.param.url = data.param.url;
          this.setIsUrl();
          //this.elements = [1];
        }else if(this.editChart.type==='alertList'){
          this.editChart.param = data.param;
          this.setIsAlertList();
          this.$nextTick(()=>{
            this.$refs.alertParamBox.setData(data)
          })
          //this.elements=[1];
        }else if(this.editChart.type==='singleStat'){
          this.setIsSingleStat();
        }else{
          if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='singleStat')&&data.param){
            this.editChart.param.threshold=data.param.threshold;
            this.editChart.param.statistics = this.statistics = data.param.statistics;
          }else{
            this.editChart.param.threshold='';
          }
          if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea')&&data.param){
            this.editChart.param.nullType=data.param.nullType;
          }
          this.setIsOtherChart();
          //this.getSuggestMetric();//获得指标列表
          // 指标
          /*this.elements = [];
          bus.chartAddInfo.metricTarget = [];
          data.elements.forEach((item, index) => {
            this.elements.push(index);
          });
          this.$nextTick(() => {
            if(this.editChart.type==='alertList'){
              this.setIsAlertList();
              this.$nextTick(()=>{
                this.$refs.alertParamBox.setData(data);
              })
            }else{
              const cSet = this.$refs.chartTag;
              // 派发charttag数据
              cSet.forEach((item, index) => {
                item.setMdata(data.elements[index]);
              });
            }
          });*/
        }
      },

      // 初始化信息
      initInfo() {
        this.editChart.title = '';
        this.editChart.type = 'line';
        this.editChart.span = 12;
        this.editChart.height = 400+'';
        this.editChart.unit=2;
        let param = {};
        param.last=0;
        param.url='';
        param.threshold='';
        param.valueMapping={type:'text',mapping:[{value:'',text:'',color:{bac:'#fff',text:'#000'}}]};
        param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'};
        param.nullType='connected';
        this.$set(this.editChart, "param", param);
        this.elements = [1];
        this.elementTarget = [];
        bus.chartAddInfo.metricTarget = [];
        this.setIsOtherChart();
      },
      // 创建时打开,用于清空chart-tag数据
      initOpen() {
        //bus.$emit('clear_history');
        /*  项目不需要produce
        if (this.$route.params.productId) {
          this.productId = parseInt(this.$route.params.productId, 10);
        }
        */
        //this.getSuggestMetric();
      },

      /*metric部分相关方法--end*/
      querySearch(queryString, cb) {
        let suggestions = this.heightSuggestions;
        let results=queryString&&(suggestions.includes(queryString)||suggestions.filter(this.createFilter(queryString)).length>0)?suggestions:[];
        cb(results);
      },
      createFilter(queryString) {
        return (suggestion) => {
          return (suggestion.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect:function(item){
        this.editChart.height=item;
      },
      unitSelected:function(value){
        //this.editChart.unit=value[value.length-1];
      },
      chartTypeChange(){
        let chartType = this.editChart.type;
        this.editChart.param.url='';
        if(chartType==='url'){
          this.setIsUrl();
          /*if(this.$refs.chartTag){
            this.$refs.chartTag.forEach((item, index) => {
              item.setNotSingleStat();
            });
          }*/
        }else if(chartType === 'alertList'){
          this.setIsAlertList();
        }else if(chartType === 'singleStat'){
          this.setIsSingleStat();
          this.resetElements();
          this.statistics='',
          this.editChart.param={
            statistics:'',
            valueMapping:{
              type:'value',
              mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
            }
          }
          this.showPicker=[{bac:false,text:false}];
        }else {
          this.setIsOtherChart();
          if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
            this.editChart.param={nullType:'connected',threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
          }else if(chartType == 'table'){
            this.$set(this.editChart.param,'last',0)
            this.editChart.param={
              statistics:'',
              nullType:'connected',
              valueMapping:{
                type:'value',
                mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
              }
            }
            this.showPicker=[{bac:false,text:false}];
          }
          /*if(this.$refs.chartTag){
            this.$refs.chartTag.forEach((item, index) => {
              item.setNotSingleStat();
            });
          }*/
        }
      },
      resetElements() {
        this.promqlKeys = [""];
        this.expressions = [""];
        this.legends = [];
        this.elementIds = [];
      },
      inputPanel:function(){
        this.isInputPanel=true;
      },
      /*panel搜索建议*/
      panelSuggestion(queryString, callback) {
       if(!this.isInputPanel){
         callback(JSON.parse(JSON.stringify(this.panelData)));
       }else{
         let data = [];
         if (!queryString) {
           data = this.panelData;
         } else {
           for (let i = 0; i < this.panelData.length; i++) {
             if (this.panelData[i].name.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
               data.push(this.panelData[i]);
             }
           }
         }
         callback(data);
       }
      },

      //preview -start
      //预览图表
      preview(){
        //验证图表数据是否合法？？，合法了再显示预览窗口
        this.elementTarget = []; // 初始化清空参数
        this.alertParams={};
        if(this.editChart.type!=='url'&&this.editChart.type!=='text'){
          if(this.editChart.type == 'alertList'){
            this.$refs.alertParamBox.saveParam('preview');
          }else{
            /*this.$refs.chartTag.forEach((item, index) => {//循环指标列表
              // 触发每个tag组件内部进行校验
              item.saveTarget(index,'preview');
            });*/
            this.$refs.chartForm.validate((valid) => {
              const params = {
                // productId: this.productId,
                //panelId: this.panelId,
                title: this.editChart.title,//this.editChart
                span: this.editChart.span,
                height: this.editChart.height,
                type: this.editChart.type,
                unit:this.editChart.unit,
                param:{

                },
                sync: this.editChart.sync
              };
              if(this.editChart.type === 'singleStat'){
                // params.param.statistics=this.statistics;
                params.param.valueMapping=this.editChart.param.valueMapping;
              } else {
                delete params.param.statistics;
              }
              if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='table'){
                params.param.threshold=this.editChart.param.threshold;
                if(this.editChart.type==='table'){
                  delete params.param.threshold;
                  params.param.valueMapping=this.editChart.param.valueMapping;
                }
                params.param.nullType=this.editChart.param.nullType;
                params.param.legendValue=this.editChart.param.legendValue;
                params.param.last=this.editChart.param.last;
              } else {
                delete params.param.threshold;
                delete params.param.nullType;
              }
              //生成指标数组
              const elements = [];
              this.expressions.forEach((expr, index) => {
                elements.push({
                  expression: expr,
                  type: 'expert',
                  legend: this.legends[index],
                });
              });
              params.elements = elements;
              if (valid) {
                this.$refs.chartsPreview.show(params);
              }
            });
          }
        }else if(this.editChart.type=='url'){
          this.$refs.chartForm.validate((valid) => {
            const params = {
              title: this.editChart.title,//this.editChart
              span: this.editChart.span,
              height: this.editChart.height,
              type: this.editChart.type,
              unit:this.editChart.unit,
              param:{
                url:this.editChart.param.url,
              }
            };

            if (valid) {
              if (this.isedit) {
                params.id = this.editChart.id;
              }
              this.$refs.chartsPreview.show(params);
            }
          });
        }else{
          this.$refs.chartForm.validate((valid) => {
            let text=this.$refs.richTextEditor.getContent();
            if(!text){
              valid=false;
            }
            const params = {
              title: this.editChart.title,//this.editChart
              span: this.editChart.span,
              height: this.editChart.height,
              type: this.editChart.type,
              unit:this.editChart.unit,
              param:{
                text:text
              }
            };

            if (valid) {
              if (this.isedit) {
                params.id = this.editChart.id;
              }
              this.$refs.chartsPreview.show(params);
            }
          });
        }
      },
      //preview--end
      initElements() {
        if (!this.editChart.elements || this.editChart.elements.length == 0) {
          this.editChart.elements = [{expression: "", legend: "", type: "expert", id: ""}];
        }
        this.editChart.elements.forEach(element => {
          if(element&&element!=''){
            this.promqlKeys.push(getUUID());
            this.expressions.push(element.expression);
            this.legends.push(element.legend);
            this.elementIds.push(element.id);
          }
        });
        this.promqlCount=this.editChart.elements.length;
        this.$nextTick(() => {
          this.expressions.forEach((ex, index) => {
            if (ex) {
              this.$refs[`promql-${index}`][0].metricChange(ex);
            }
          });
        });
      },
      valueMappingChange:function(value){
        if(this.editChart.param.valueMapping.type == 'value'){
          this.editChart.param.valueMapping.mapping =[{text:'',value:'',color:{bac:'#fff',text:'#000'}}];
          this.showPicker=[{bac:false,text:false}]
        }else{
          this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}}];
          this.showPicker=[{bac:false,text:false}]
        }
      },
      addMapping:function(){
        if(this.editChart.param.valueMapping.type == 'value'){
          this.editChart.param.valueMapping.mapping .push({text:'',value:'',color:{bac:'#fff',text:'#000'}});
          this.showPicker.push({bac:false,text:false})
        }else{
          this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}});
          this.showPicker.push({bac:false,text:false})
        }
      },
      colorPickerClick(index){
        if(this.showPicker[index].bac|| this.showPicker[index].text){//再次点击关闭
          this.showPicker[index].bac=false;
          this.showPicker[index].text=false;
          return
        }
        this.showPicker[index].bac=true;
        this.$refs['colorPickerBac'+ index][0].showPicker=true;
      },
      changeShowPicker(index,atr){
        this.$refs['colorPickerBac'  + index][0].showPicker=true;
        this.showPicker[index].bac=false;
        this.showPicker[index].text=false;
        this.showPicker[index][atr]=true;
        // atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
      },
      colorChange(mapping,flag,val){
        if(flag){
          mapping.color['bac']=this.colorRGBtoHex(val)
        }else{
          mapping.color['text']=this.colorRGBtoHex(val)
        }
      },
      colorRGBtoHex(color) {
        let rgb = color.split(',');
        let r = parseInt(rgb[0].split('(')[1]);
        let g = parseInt(rgb[1]);
        let b = parseInt(rgb[2].split(')')[0]);
        let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        return hex;
      },
      colorOut(index,e){
        let flag=false;
        e.path.forEach((item)=>{
          if(item.className==='el-color-dropdown el-color-picker__panel' || item.className==='color-tab'){
            flag=true
          }
        })
        if(flag){
          return
        }
        if(this.showPicker[index]){
          this.showPicker[index].bac=false;
          this.showPicker[index].text=false;
        }
      },
      delMapping:function(index){
        this.editChart.param.valueMapping.mapping.splice(index,1)
      },
      queryMetrics() {
        this.metricOptions = [];
        this.$get('prom/api/v1/label/__name__/values').then(response=>{
          if(response.status == 'success'){
            let metrics=response.data.sort();
            let metricMap=new Map();
            metrics.forEach((item)=>{
              let key='';
              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
                key=item.split('_')[0];
              }else if(/^_\w*/.test(item)){
                key='      ';
              }else{
                key=item;
              }
              if(metricMap.get(key)){
                let values=metricMap.get(key);
                values.push({label:item,value:item});
              }else{
                let values=[{label:item,value:item}];
                metricMap.set(key,values);
              }
              //this.metricStore.push({label:item,value:item,insertText:item})
            });
            for(let key of metricMap.keys()){
              let option={
                label:key,
                value:key,
              };
              if(metricMap.get(key) && metricMap.get(key).length>1){
                option.children=metricMap.get(key);
              }
              this.metricOptions.push(option);
            }
          }
        })
      },
      getMetricOptions() {
        return this.metricOptions;
      }
    },
    created() {
      this.getSuggestMetric();
      this.queryMetrics();
    },
    watch: {
      chart: {
        deep: true,
        immediate: true,
        handler(n) {
          if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
            n.param.valueMapping.mapping.forEach(item=>{
              this.showPicker.push({bac:false,text:false})
              if(!item.color){
                item.color={bac:'#fff',text:'#000'};
              }
            })
          }

          if(n.title){
            this.isEdit=true;
          }
          this.editChart = JSON.parse(JSON.stringify(n));
          if(!n.param.nullType){
            this.editChart.param.nullType='connected';
          }
          if (n.type === 'url') {
            this.setIsUrl();
          } else if(n.type === 'alertList'){
            this.setIsAlertList();
          } else if(n.type === 'singleStat'){
            if(n.param&&!n.param.valueMapping){
              this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]});
              this.showPicker.push({bac:false,text:false});
            }
            this.setIsSingleStat();
          } else if(n.type  === 'table'){
            n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
            if(n.param&&!n.param.valueMapping){
              this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]});
              this.showPicker.push({bac:false,text:false});
            }
          }else {
            this.setIsOtherChart();
            n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})
          }
          this.$set(this.editChart, "panelName", this.showPanel.name);
          if (this.showPanel.id) {
            this.panelId = this.showPanel.id;
          }
          if (n.id) {
            this.editData(this.editChart, this.showPanel.id);
          } else {
            this.createData(this.showPanel.id);
          }
        }
      },
    },
    beforeDestroy() {
      if(this.$refs.chartTag){
        this.$refs.chartTag.forEach((item, index) => {//循环指标列表
          item.clearSelectedTagList();
        });
      }
      this.isUrl = false;
    },
  }
</script>
<style>
  .popper-z-index{
    z-index: 99999999 !important;
  }
  .right-box-add-chart .el-autocomplete {
    width: 100%;
  }
  .chart-box-autocomplete {
    z-index: 3000 !important;
  }
  .val-mapping-type .no-fill span{
    background-color: unset !important;
  }
  .el-color-picker__panel{
    border-radius: 0 0 5px 5px;
  }
  .el-color-dropdown{
    z-index: 2200!important;
  }
</style>