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

<template>
  <div class="props-box">
    <!--删除按钮-->
    <!--<button id="edit-ep-del" type="button" class="nz-btn nz-btn-size-normal nz-btn-size-alien del-btn"-->
    <!--v-if="selection.pen" @click="delTopologyPen">-->
    <!--<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>-->
    <!--所有属性-->
    <el-tabs v-model="tab" type="card" v-if="selection.pen" @tab-click="tabClick">
      <el-tab-pane :label="$t('project.topology.data')" name="1">
        <el-form v-model="selection.pen.data" class="pens-data" label-position="top">
          <!--module-->
          <el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type" class="half-form-item">
            <el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')" popper-class="asset-dropdown" size="small"
                       @change="moduleIdChange" :popper-append-to-body="false">
              <el-option
                v-for="item in modules"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!--iconToolState-->
          <el-form-item :label="'Icon state'" class="half-form-item" prop="type" v-if="!selection.pen.type">
            <el-switch
              v-model="selection.pen.data.iconToolState"
              :active-value="true"
              :inactive-value="false"
              active-color="#ee9d3f"
            />
          </el-form-item>

          <!--metric-->
          <div class="right-box-sub-title" style="margin-bottom: 10px">
            <span>{{$t('alert.config.expr')}}</span>
            <span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;">
              <span class="create-square-box">
                <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
              </span>
            </span>
          </div>
          <el-row :key="index" class="element-item form-row-item" style=""
                  v-for="(item,index) in selection.pen.data.expressArr">
            <promql-input
              :expression-list="selection.pen.data.expressArr"
              :id="index"
              :index="index"
              :key="index"
              :plugins="['metric-selector', 'metric-input', 'remove']"
              :ref="'promql-'+index"
              :showRemove="false"
              :styleType="2"
              :metricOptionsParent="metricOptions"
              @change="expressionChange"
              @removeExpression="removeExpression"
            ></promql-input>
            <el-row>
              <template>
                <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 class="nz-icon nz-icon-info-normal" slot="reference" @mouseover="rz"
                       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="selection.pen.data.legends[index]"></el-input>
                </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)"></i>
          </span>
          </el-row>

          <!--tooltip-->
          <el-row class="form-row-title">
            {{$t('dashboard.panel.chartForm.tooltip')}}
            <el-form-item class="float-right" prop="type" style="height: 100%;">
              <el-switch
                v-model="selection.pen.data.tooltipShow"
                :active-value="true"
                :inactive-value="false"
                active-color="#ee9d3f"
              />
            </el-form-item>
          </el-row>

          <div class="tooltip-box">
            <!--title-->
            <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
              <el-input v-model="selection.pen.data.title" @change="changeTitle" class="input" size="small"></el-input>
            </el-form-item>
            <!--chart aggregation-->
            <el-form-item :label="$t('dashboard.panel.chartForm.aggregation')" class="half-form-item" prop="type">
              <el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
                         size="mini"
                         v-model="selection.pen.data.aggregation" value-key="chartType">
                <el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
                  <span class="panel-dropdown-label-txt">{{item.name}}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <!--chart unit-->
            <el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit"
                          v-show="selection.pen.data.type !='text'">
              <el-cascader :options="unitOptions"
                           :props="{ expandTrigger: 'hover',emitPath:false }"
                           :show-all-levels="false"
                           filterable
                           :placeholder="$t('el.select.placeholder')"
                           popper-class="dc-dropdown"
                           size="mini"
                           v-model="selection.pen.data.unit"
              >
              </el-cascader>
            </el-form-item>
            <!--displayChart-->
            <el-form-item :label="$t('dashboard.panel.chartForm.displayChart')" class="half-form-item" prop="type">
              <el-switch
                v-model="selection.pen.data.displayChart"
                :active-value="true"
                :inactive-value="false"
                active-color="#ee9d3f"
              />
            </el-form-item>
            <!--chart type-->
            <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
              <el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
                         size="mini"
                         v-model="selection.pen.data.type" value-key="chartType">
                <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>
          </div>
          <!--value mapping-->
          <el-row class="form-row-title">
            {{$t('dashboard.panel.chartForm.thresholds')}} <span
            style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">（0:Ok > … >2:Critical）</span>
          </el-row>
          <div style="width: 100%;margin-top: 10px">
            <div class="thresholds-box">
              <el-row class="thresholds-title">
                <el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
                  <span @click="changeValueMappingSort">
                    <i  :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i>
                    <i  :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i>
                  </span>
                </el-col>
                <el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
                <el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
                <el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
                <el-col class="thresholds-cell" :span="2"></el-col>
              </el-row>

              <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
                <el-col class="thresholds-cell" :span="4">
                  <span v-if="selection.pen.data.valueMappingSort==='desc'">
                     {{index===0?selection.pen.data.valueMapping.length-1:(item.level-1)}}
                  </span>
                  <span v-else>
                    {{item.level}}
                  </span>
                </el-col>
                <el-col class="thresholds-cell" :span="4">
                   <span v-if="item.level!==0">
                    <div style="display: inline-block">
                      <div @click="colorPickerClickTable('colorPickerBac'+item.level,item)"
                           class="color-show"
                           v-clickoutside="(e)=>{colorOut(item,e)}"
                           style="width: 32px"
                      >
                        <div :style="{background:item.color.fill,border:'2px solid '+item.color.line,'line-height':'18px'}" class="color-show-left">
                          <span :style="{color:item.color.text}" style="line-height: 18px;margin-left: 6px">
                              T
                          </span>
                        </div>
                      </div>
                      <div class="color-content" ref="color-content">
                        <el-color-picker
                          :ref="'colorPickerBac'+item.level"
                          @active-change="(val)=>colorChangeTable(item,val)"
                          popper-class="no-style-class"
                          v-model="item.showColor"
                        >
                        </el-color-picker>
                      </div>
                      <div
                        class="color-tab"
                        v-show="item.showColor">
                        <div :class="{'color-active':item.showType=='fill'}" @click="changeShowPicker(item ,'fill')">{{$t('project.topology.fill')}}</div>
                        <div :class="{'color-active':item.showType=='line'}" @click="changeShowPicker(item , 'line')">{{$t('project.topology.lines')}}</div>
                        <div :class="{'color-active':item.showType=='text'}" @click="changeShowPicker(item , 'text')">{{$t('project.topology.text')}}</div>
                      </div>
                    </div>
                  </span>
                  <span v-else>base</span>
                </el-col>
                <el-col class="thresholds-cell" :span="6" style="display: flex">
                  <el-input
                    v-if="item.level!==0"
                    v-model.number="item.value"
                    @change="valueMappingValueChange(item)"
                    size="small"
                  >
                    <template slot="prepend"> > </template>
                  </el-input>
                  <span v-else>base</span>
                </el-col>
                <el-col class="thresholds-cell" :span="8">
                  <!--线-->
                  <el-select
                    v-model="item.animateType"
                    size="small"
                    v-if="selection.pen&&selection.pen.type&&item.level!==0">
                    <el-option
                      v-for="(item,index) in lineAnimateOptions"
                      :value="item.id"
                      :key="index"
                      :label="item.name">
                    </el-option>
                  </el-select>
                  <!--点-->
                  <el-select
                    v-model="item.animateType"
                    size="small"
                    v-if="selection.pen&&!selection.pen.type&&item.level!==0">
                    <el-option
                      v-for="(item,index) in nodeAnimateOptions"
                      :value="item.id"
                      :key="index"
                      :label="item.name">
                    </el-option>
                  </el-select>
                  <!--默认-->
                  <span v-if="item.level===0">base</span>
                </el-col>
                <el-col class="thresholds-cell" :span="2" style="text-align: center">
                  <i v-if="item.level!==0" @click="valueMappingDel(index, item)"
                     class="nz-icon nz-icon-minus">
                  </i>
                </el-col>
              </el-row>
            </div>
          </div>
          <div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
            <i class="nz-icon nz-icon-plus"></i>
          </div>

          <!--link-->
          <el-row class="form-row-title">
            {{$t('project.topology.link')}}
          </el-row>
          <el-form-item :label="'URL'" class="full-form-item" prop="type">
            <el-input v-model="selection.pen.data.url" class="input" size="small"></el-input>
          </el-form-item>


        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('project.topology.style')" name="4">
        <el-collapse v-model="activeNames">
          <!--&lt;!&ndash;位置大小&ndash;&gt;-->
          <!--<el-collapse-item :label="$t('project.topology.positionAndSize')" name="3" v-if="selection.pen&&!selection.pen.type">-->
            <!--<div class="flex flex-warp">-->


            <!--</div>-->
          <!--</el-collapse-item>-->
          <!--样式-->
          <el-collapse-item :label="'Style'" name="4" v-if="selection.pen">
            <div class="flex flex-warp">
              <div class="props-pen-item">
                <div>{{$t('project.topology.circularBead')}}（0 - 1）</div>
                <div class="p10 pl0">
                  <el-input-number
                    @focus="inputFocus"
                    @blur="inputBlur"
                    :precision="2"
                    controls-position="right"
                    size="small"
                    :min="0"
                    :max="1"
                    :step="0.1"
                    name="x"
                    class="input"
                    v-model.number="selection.pen.borderRadius"
                    :readonly="readonly"
                    required
                    @change="onChange()"></el-input-number>
                </div>
              </div>

              <div class="props-pen-item">
                <div>{{$t('project.topology.rotate')}}（°）</div>
                <div class="p10 pl0">
                  <el-input-number
                    @focus="inputFocus"
                    @blur="inputBlur"
                    :precision="2"
                    controls-position="right"
                    size="small" name="x"
                    class="input"
                    v-model.number="selection.pen.rotate"
                    :readonly="readonly"
                    required
                    @change="onChange()"></el-input-number>
                </div>
              </div>

              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
                <div>{{$t('project.topology.bac')}}</div>
                <div class="p10 pl0">
                  <div class="color-show" @click="colorPickerClick('fillStyle')">
                    <div class="color-show-left" :style="{background:selection.pen.fillStyle}"></div>
                    <span class="color-text"> {{selection.pen.fillStyle}}</span>
                    <span class="color-arrows">
                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['fillStyle']&&!$refs['fillStyle'].showPicker"></i>
                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['fillStyle']&&$refs['fillStyle'].showPicker"></i>
                </span>
                  </div>
                  <div class="color-content" ref="color-content">
                    <el-color-picker
                      v-model="selection.pen.fillStyle"
                      ref="fillStyle"
                      @active-change="(val)=>colorChange(val,'fillStyle')"
                    >
                    </el-color-picker>
                  </div>
                </div>
              </div>

              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
                <div>{{$t('project.topology.gradient')}}</div>
                <div class="p10 pl0 gradient-to">
                  <el-color-picker
                    v-model="selection.pen.gradientToColor"
                    ref="gradientToColor"
                    @active-change="(val)=>colorChange(val,'gradientToColor')"
                    size="small"
                  >
                  </el-color-picker>
                  <el-select v-model="selection.pen.bkType" size="small"
                             :popper-append-to-body="false" @change="bkTypeChange">
                    <el-option v-for="(item,index) in bkTypeOption" :value="item.id" :key="index"
                               :label="item.name">
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="props-pen-item" v-if="selection.pen">
                <div>透明度（0 - 1）</div>
                <div class="p10 pl0">
                  <el-input-number
                    @focus="inputFocus"
                    @blur="inputBlur"
                    :precision="2"
                    name="globalAlpha"
                    class="input full"
                    v-model.Number="selection.pen.globalAlpha"
                    controls-position="right"
                    size="small"
                    :readonly="readonly"
                    @change="onChange()"
                    :step="0.1"
                    :min="0.01"
                    :max="1"></el-input-number>
                </div>
              </div>

              <div class="props-pen-item special-select">
                <div>{{$t('project.topology.lineDash')}}</div>
                <div class="p10 pl0">
                  <el-select v-model="selection.pen.dash" size="small" :popper-append-to-body="false"
                             @change="onChange">
                    <div slot="prefix">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" stroke="black" stroke-width="1">
                            <path
                              :d="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0)).d"
                              :stroke-dasharray="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0))['stroke-dasharray']">
                            </path>
                          </g>
                        </svg>
                      </div>
                    </div>
                    <el-option v-for="(item,index) in penDash" :value="index" :key="index">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':'black'" stroke-width="1">
                            <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                          </g>
                        </svg>
                      </div>
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                <div>{{$t('project.topology.lineType')}}</div>
                <div class="p10 pl0">
                  <el-select v-model="selection.pen.name" size="small" :popper-append-to-body="false"
                             @change="onClickName">
                    <div slot="prefix">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" stroke="black" stroke-width="1">
                            <path
                              :d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
                            >
                            </path>
                          </g>
                        </svg>
                      </div>
                    </div>
                    <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':'black'" stroke-width="1">
                            <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                          </g>
                        </svg>
                      </div>
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                <div>{{$t('project.topology.fromArrow')}}</div>
                <div class="p10 pl0">
                  <el-select v-model="selection.pen.fromArrow" size="small"
                             :popper-append-to-body="false" @change="onClickFromArrow">
                    <div slot="prefix">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
                             :key="index" v-if="selection.pen.fromArrow==item.name">
                            <path :d="item.d"></path>
                            <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
                                     :strokeWidth="item['stroke-width']"></polygon>
                            <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
                                    :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
                          </g>
                        </svg>
                      </div>
                    </div>
                    <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':'black'"
                             stroke-width="1">
                            <path :d="item.d"></path>
                            <polygon
                              v-if="item.points"
                              :points="item.points"
                              :fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                              :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
                              :strokeWidth="item['stroke-width']"
                            ></polygon>
                            <circle
                              v-if="item.cx"
                              :cx="item.cx"
                              :cy="item.cy"
                              :r="item.r"
                              :fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                              :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
                              :strokeWidth="item['stroke-width']"
                            ></circle>
                          </g>
                        </svg>
                      </div>
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                <div>{{$t('project.topology.toArrow')}}</div>
                <div class="p10 pl0">
                  <el-select v-model="selection.pen.toArrow" size="small"
                             :popper-append-to-body="false" @change="onClickToArrow">
                    <div slot="prefix">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
                             :key="index" v-if="selection.pen.toArrow==item.name">
                            <path :d="item.d"></path>
                            <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
                                     :strokeWidth="item['stroke-width']"></polygon>
                            <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
                                    :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
                          </g>
                        </svg>
                      </div>
                    </div>
                    <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
                      <div class="icon-item">
                        <svg>
                          <g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':'black'"
                             stroke-width="1">
                            <path :d="item.d"></path>
                            <polygon
                              v-if="item.points"
                              :points="item.points"
                              :fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                              :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
                              :strokeWidth="item['stroke-width']"
                            ></polygon>
                            <circle
                              v-if="item.cx"
                              :cx="item.cx"
                              :cy="item.cy"
                              :r="item.r"
                              :fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                              :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
                              :strokeWidth="item['stroke-width']"
                            ></circle>
                          </g>
                        </svg>
                      </div>
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="props-pen-item">
                <div>{{$t('project.topology.lineWidth')}}（px）</div>
                <div class="p10 pl0">
                  <el-input-number
                    @focus="inputFocus"
                    @blur="inputBlur"
                    :precision="2"
                    controls-position="right"
                    size="small"
                    name="x"
                    class="input"
                    v-model.number="selection.pen.data.lineWidth"
                    :readonly="readonly"
                    required
                    :min="selection.pen.type?1:(selection.pen.name==='rectangleImg' ||selection.pen.name==='myCube'?0:1)"
                    @change="onChange('lineWidth')"></el-input-number>
                </div>
              </div>

              <div class="props-pen-item">
                <div>{{$t('project.topology.lineColor')}}</div>
                <div class="p10 pl0">
                  <div class="color-show" @click="colorPickerClick('strokeStyle')">
                    <div class="color-show-left" :style="{background:selection.pen.strokeStyle}"></div>
                    <span class="color-text"> {{selection.pen.strokeStyle}}</span>
                    <span class="color-arrows">
                  <i class="nz-icon nz-icon-arrow-down"
                     v-if="$refs['strokeStyle']&&!$refs['strokeStyle'].showPicker"></i>
                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['strokeStyle']&&$refs['strokeStyle'].showPicker"></i>
                </span>
                  </div>
                  <div class="color-content" ref="color-content">
                    <el-color-picker
                      v-model="selection.pen.strokeStyle"
                      ref="strokeStyle"
                      @active-change="(val)=>colorChange(val,'strokeStyle')"
                    >
                    </el-color-picker>
                  </div>
                </div>
              </div>
              <div class="props-pen-item" v-if="selection.pen.type">
                <div>{{$t('project.topology.arrowColor')}}</div>
                <div class="p10 pl0">
                  <div class="color-show" @click="colorPickerClick('toArrowColor')">
                    <div class="color-show-left" :style="{background:selection.pen.toArrowColor}"></div>
                    <span class="color-text"> {{selection.pen.toArrowColor}}</span>
                    <span class="color-arrows">
                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['toArrowColor']&&!$refs['toArrowColor'].showPicker"></i>
                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['toArrowColor']&&$refs['toArrowColor'].showPicker"></i>
                </span>
                  </div>
                  <div class="color-content" ref="color-content">
                    <el-color-picker
                      v-model="selection.pen.toArrowColor"
                      ref="toArrowColor"
                      @active-change="(val)=>colorChange(val,'toArrowColor')"
                    >
                    </el-color-picker>
                  </div>
                </div>
              </div>

            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="project-content node-content">
          <div class="project-content-title">{{$t('project.topology.animation')}}
            <span class="float-right" style="margin-right: 10px">
              <el-switch
                v-model="selection.pen.data.animatePlay"
                :active-value="true"
                :inactive-value="false"
                active-color="#ee9d3f"
                @change="()=>{onAnimate()}">
              </el-switch>
            </span>
          </div>
          <div class="project-content-box" style="width: 100%">
            <!--节点动画-->
            <div class="project-content-item" v-if="!selection.pen.type">
              <label>{{$t('project.topology.animationType')}}</label>
              <div class="full pr10">
                <el-select
                  v-model="selection.pen.animateType"
                  size="small"
                  :popper-append-to-body="false"
                >
                  <el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index"
                             :label="item.name"></el-option>
                </el-select>
              </div>
            </div>
            <!--连线-->
            <div class="project-content-item half" v-if="selection.pen.type">
              <label>{{$t('project.topology.animationType')}}</label>
              <div class="full pr10">
                <el-select v-model="selection.pen.animateType" size="small"
                           :popper-append-to-body="false" @change="onAnimate">
                  <el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
                             :label="item.name"></el-option>
                </el-select>
              </div>
            </div>
            <div class="project-content-item half" v-if="selection.pen.type">
              <label>{{$t('project.topology.animationColor')}}</label>
              <div class="full pr10">
                <div class="color-show" @click="colorPickerClick('animateColor')">
                  <div class="color-show-left" :style="{background:selection.pen.animateColor}"></div>
                  <span class="color-text"> {{selection.pen.animateColor}}</span>
                  <span class="color-arrows">
                  <i class="nz-icon nz-icon-arrow-down"
                     v-if="$refs['animateColor']&&!$refs['animateColor'].showPicker"></i>
                  <i class="nz-icon nz-icon-arrow-up"
                     v-if="$refs['animateColor']&&$refs['animateColor'].showPicker"></i>
                </span>
                </div>
                <div class="color-content" ref="color-content">
                  <el-color-picker
                    v-model="selection.pen.animateColor"
                    ref="animateColor"
                    @active-change="(val)=>colorChange(val,'animateColor')"
                  >
                  </el-color-picker>
                </div>
              </div>
            </div>


          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 选中为空 -->
    <div v-if="!selection.pen && !selection.pens" style="height: 100%">
      <div class="project-title">
        Project
      </div>
      <div class="project-content">
        <div class="project-content-title">{{$t('project.topology.title')}}</div>

        <div class="project-content-box" style="width: 100%">

          <div class="project-content-item">
            <label>{{$t('project.topology.name')}}</label>
            <div class="full pr10">
              <el-input class="input" size="small" v-model="topologyData.data.name" :placeholder="$t('el.select.placeholder')"
                        @change="changeTopologyOpt"></el-input>
            </div>
          </div>

          <div class="project-content-item half">
            <label>{{$t('project.topology.fontSize')}}</label>
            <div class="full pr10 h32">
              <el-input-number
                @focus="inputFocus"
                @blur="inputBlur"
                :precision="2"
                controls-position="right"
                size="small"
                name="fontSize"
                class="input"
                v-model.number="topologyData.data.fontSize"
                :readonly="readonly"
                required
                :min="10"
                @change="changeTopologyOpt(topologyData.data.fontSize,'fontSize')"></el-input-number>
            </div>
          </div>

          <div class="project-content-item half">
            <label>{{$t('project.topology.fontColor')}}</label>
            <div class="full pr10 h32">
              <div class="color-show" @click="colorPickerClick('fontColor')">
                <div class="color-show-left" :style="{background:topologyData.data.fontColor}"></div>
                <span class="color-text"> {{topologyData.data.fontColor}}</span>
                <span class="color-arrows">
                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['fontColor']&&!$refs['fontColor'].showPicker"></i>
                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['fontColor']&&$refs['fontColor'].showPicker"></i>
                </span>
              </div>
              <div class="color-content" ref="color-content">
                <el-color-picker
                  v-model="topologyData.data.fontColor"
                  ref="fontColor"
                  @active-change="(val)=>changeTopologyOpt(val,'fontColor',true)"
                >
                </el-color-picker>
              </div>
            </div>
          </div>

          <div class="project-content-item half">
            <label>{{$t('project.topology.align')}}</label>
            <div class="full pr10 h32">
              <el-radio-group v-model="topologyData.data.align" size="small" @change="changeTopologyOpt">
                <el-radio-button label="left">left</el-radio-button>
                <el-radio-button label="center">center</el-radio-button>
                <el-radio-button label="right">right</el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div class="project-content-item half">
            <label>{{$t('project.topology.opacity')}}</label>
            <div class="full pr10 h32">
              <el-input-number
                @focus="inputFocus"
                @blur="inputBlur"
                :precision="2"
                controls-position="right"
                size="small"
                name="fontSize"
                class="input"
                v-model.number="topologyData.data.opacity"
                :readonly="readonly"
                required
                :step="0.2"
                :min="0"
                @change="changeTopologyOpt(topologyData.data.opacity,'opacity')"></el-input-number>
            </div>
          </div>
        </div>

        <div class="project-content-title">
          Appearance
          <!--{{$t('project.topology.name')}}-->
        </div>

        <div class="project-content-box" style="width: 100%">
          <div class="project-content-item half">
            <label>{{$t('project.topology.bac')}}</label>
            <div class="full pr10 h32">
              <div class="color-show" @click="colorPickerClick('bkColor')">
                <div class="color-show-left" :style="{background:topologyData.data.bkColor}"></div>
                <span class="color-text"> {{topologyData.data.bkColor}}</span>
                <span class="color-arrows">
                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['bkColor']&&!$refs['bkColor'].showPicker"></i>
                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['bkColor']&&$refs['bkColor'].showPicker"></i>
                </span>
              </div>
              <div class="color-content" ref="color-content">
                <el-color-picker
                  v-model="topologyData.data.bkColor"
                  ref="bkColor"
                  @active-change="(val)=>changeTopologyOpt(val,'bkColor',true)"
                >
                </el-color-picker>
              </div>
            </div>
          </div>

          <div class="project-content-item half">
            <label>{{$t('project.topology.bacImage')}}</label>
            <div class="full pr10 h32">
              <!--暂时是input 输入网址-->
              <el-input class="input" size="small" v-model="topologyData.data.bkImage"></el-input>
            </div>
          </div>

         <!-- <div class="project-content-item half">
            <label>{{$t('project.topology.rule')}}</label>
            <div class="full pr10 h32">
              <el-switch
                v-model="topologyData.data.rule"
                :active-value="true"
                :inactive-value="false"
                active-color="#ee9d3f"
                @change="changeTopologyOpt(topologyData.data.rule,'rule')">
              </el-switch>
            </div>
          </div>

          <div class="project-content-item half special-select">
            <label>{{$t('project.topology.defaultStartArrow')}}</label>
            <div class="full pr10 h32">
              <el-select v-model="topologyData.data.fromArrow" size="small"
                         :popper-append-to-body="false"
                         @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
                <div slot="prefix">
                  <div class="icon-item">
                    <svg>
                      <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
                         :key="index" v-if="topologyData.data.fromArrow==item.name">
                        <path :d="item.d"></path>
                        <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
                                 :strokeWidth="item['stroke-width']"></polygon>
                        <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
                                :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
                      </g>
                    </svg>
                  </div>
                </div>
                <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
                  <div class="icon-item">
                    <svg>
                      <g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
                         stroke-width="1">
                        <path :d="item.d"></path>
                        <polygon
                          v-if="item.points"
                          :points="item.points"
                          :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                          :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
                          :strokeWidth="item['stroke-width']"
                        ></polygon>
                        <circle
                          v-if="item.cx"
                          :cx="item.cx"
                          :cy="item.cy"
                          :r="item.r"
                          :fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                          :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
                          :strokeWidth="item['stroke-width']"
                        ></circle>
                      </g>
                    </svg>
                  </div>
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="project-content-item half special-select">
            <label>{{$t('project.topology.defaultEndArrow')}}</label>
            <div class="full pr10 h32">
              <el-select v-model="topologyData.data.toArrow" size="small"
                         :popper-append-to-body="false"
                         @change="changeTopologyOpt('toArrow')">
                <div slot="prefix">
                  <div class="icon-item">
                    <svg>
                      <g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
                         :key="index" v-if="topologyData.data.toArrow==item.name">
                        <path :d="item.d"></path>
                        <polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
                                 :strokeWidth="item['stroke-width']"></polygon>
                        <circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
                                :stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
                      </g>
                    </svg>
                  </div>
                </div>
                <el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
                  <div class="icon-item">
                    <svg>
                      <g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
                         stroke-width="1">
                        <path :d="item.d"></path>
                        <polygon
                          v-if="item.points"
                          :points="item.points"
                          :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                          :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
                          :strokeWidth="item['stroke-width']"
                        ></polygon>
                        <circle
                          v-if="item.cx"
                          :cx="item.cx"
                          :cy="item.cy"
                          :r="item.r"
                          :fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
                          :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
                          :strokeWidth="item['stroke-width']"
                        ></circle>
                      </g>
                    </svg>
                  </div>
                </el-option>
              </el-select>
            </div>
          </div>-->

        </div>

        <div class="project-content-title">Appearance</div>

        <div class="project-content-box" style="width: 100%">

          <div class="project-content-item half">
            <label>Project Info</label>
            <div class="full pr10 h32">
              <el-switch
                v-model="topologyData.data.projectInfo"
                :active-value="true"
                :inactive-value="false"
                active-color="#ee9d3f"
                @change="changeTopologyOpt(topologyData.data.projectInfo,'projectInfo')">
              </el-switch>
            </div>
          </div>

          <div class="project-content-item half">
            <label>Alert Info</label>
            <div class="full pr10 h32">
              <el-switch
                v-model="topologyData.data.alertInfo"
                :active-value="true"
                :inactive-value="false"
                active-color="#ee9d3f"
                @change="changeTopologyOpt(topologyData.data.alertInfo,'alertInfo')">
              </el-switch>
            </div>
          </div>

        </div>

        <div class="project-content-title">{{$t('project.topology.link')}}</div>

        <div class="project-content-box" style="width: 100%">

          <div class="project-content-item">
            <label>Url</label>
            <div class="full pr10">
              <el-input class="input" size="small" v-model="topologyData.data.url" :placeholder="$t('el.select.placeholder')"
                        @change="changeTopologyOpt"></el-input>
            </div>
          </div>

        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import {alignNodes,spaceBetween,layout} from '@topology/layout';
  import {getTopology} from "../../js/common";
  // import ChartMetric from "./chartMetric";
  import chartDataFormat from '../../../charts/chartDataFormat';
  import promqlInput from "../../../page/dashboard/explore/promqlInput";
  import {getUUID,resetZIndex} from "../../../common/js/common";

  var rz={
    methods:{
      rz(e){
        resetZIndex(e);
      }
    }
  };
  export default {
    //pen.type 0为node 1位line
    data(){
      return {
        expressions:[],
        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:"table",
            name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
          },
        ],
        aggregationList:[
          {
            id:"last",
            name:'last'
          },{
            id:"first",
            name:'first'
          },{
            id:"min",
            name:'min'
          },{
            id:"max",
            name:'max'
          },{
            id:"avg",
            name:'avg'
          },{
            id:"total",
            name:'total'
          }
        ],
        metricList:[], // metric列表
        metricCascaderList:[],//metric级联列表
        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
        metricOptions:[],
        unitOptions:chartDataFormat.unitOptions(),
        lineId:null,
        lineIsJson:false,
        lineData:'',
        penId:null,
        penIsJson:false,
        penData:'',
        tab:'1',
        drowdown:0,
        readonly:false,
        topologyData:{
          data:{
            name:'',
            bkColor:'#FFFFFF',
            bkImage:'',
            lineName:'curve',
            lineWidth:1,
            fromArrow:'',
            toArrow:'triangleSolid',
            projectInfo:true,
            alertInfo:true,
            url:'',
            fontSize:14,
            align:'left',
            fontColor:"#000000",
            opacity:1,
          }
        },
        pen:{
          dash:'',
          font:'',
          lineWidth:'',
          strokeStyle:'',
          textMaxLine:'',
          textOffsetX:'',
          textOffsetY:'',
          globalAlpha:'',
        },
        penNumber:'',
        nodesAlign:[//对齐方式
          {
            value:'left',
            desc:'左对齐'
          },{
            value:'right',
            desc:'右对齐'
          },{
            value:'top',
            desc:'顶部对齐'
          },{
            value:'bottom',
            desc:'底部对齐'
          },{
            value:'center',
            desc:'垂直居中'
          },{
            value:'middle',
            desc:'水平居中'
          }],
        layout:{//显示对应属性
          maxWidth:1000,
          nodeWidth:0,
          nodeHeight:0,
          maxCount:0,
          spaceWidth:30,
          spaceHeight:30
        },
        activeNames:['1','2','3','4','5'],
        show:{//显示对应属性
          pos:true,
          layout:true,
          looks:true,
        },
        data:{},
        bkTypeOption:[
          {
            id:0,
            name:'X'
          },
          {
            id:1,
            name:'→'
          },
          {
            id:2,
            name:'↑'
          }
        ],
        penDash:[
          {d:'M5 14 l85 0',"stroke-dasharray":""},
          {d:'M5 14 l85 0',"stroke-dasharray":"5,5"},
          {d:'M5 14 l85 0',"stroke-dasharray":"10,10"},
          {d:'M5 14 l85 0',"stroke-dasharray":"10,10,2,10"},
        ],
        penLineType:[
          {d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'},
          {d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
          {d:'M5 14 l85 0',"stroke-dasharray":"",name:'line'},
          {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
        ],
        penLineFromTOArrow:[
          {d:'M5 14 l85 0',"points":"",fill:'',stroke:"",'stroke-width':"",name:''},
          {d:'M5 14 l85 0',"points":"5 14,20 9,20 19",fill:'#000000',stroke:"",'stroke-width':"",name:'triangleSolid'},
          {
            d:'M5 14 l85 0',
            "points":"5 14,20 9,20 19",
            fill:'#ffffff',
            stroke:"#000000",
            'stroke-width':"1",
            name:'triangle'
          },
          {d:'M5 14 l85 0',fill:'#000000',stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
          {d:'M5 14 l85 0',fill:'#ffffff',stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
        ],
        lineAnimateOptions:[
          {id:1,name:this.$t("project.topology.flow")},
          {id:'beads',name:this.$t("project.topology.beads")},
          {id:'dot',name:this.$t("project.topology.dot")},
          {id:'comet',name:this.$t("project.topology.comet")},
        ],
        nodeAnimateOptions:[
          {
            id:'upDown',
            name:this.$t("project.topology.bounce")
          },
          {
            id:'leftRight',
            name:this.$t("project.topology.shakeX")
          },
          {
            id:'heart',
            name:this.$t("project.topology.heartBeat")
          },
          {
            id:'warning',
            name:this.$t("project.topology.flash")
          },
          {
            id:'show',
            name:this.$t("project.topology.swing")
          },
          {
            id:'fade',
            name:this.$t("project.topology.fade")
          }
        ],
      }
    },
    mixins:[rz],
    components:{
      promqlInput
    },
    computed:{},
    props:{
      selection:{
        type:Object,
        require:true
      },
      index:{
        type:Number,
        require:true,
      },
      modules:{}
    },
    watch:{
      selection:{
        handler(n){
          if(n){
          }
        },
        deep:true,
        immediate:true,
      },
      // 'topologyData.data':{
      //   handler(n){
      //     setTimeout(()=>{
      //       let dataOption=getTopology(this.index).data;
      //       Object.keys(this.topologyData.data).forEach((key)=>{
      //         dataOption[key]=this.topologyData.data[key];
      //       });
      //       getTopology(this.index).render();
      //     })
      //   },
      //   deep:true,
      //   immediate:false,
      // }
    },
    created(){
      let dataOption=getTopology(this.index).data;
      if(!dataOption.data){
        dataOption.data={}
      }
      Object.keys(this.topologyData.data).forEach((key)=>{
        if(key === 'projectInfo' || key === 'alertInfo' || key==='fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity'){
         this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]);
       } else {
         this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
       }
      });
    },
    mounted(){
      this.queryMetrics();
      // this.topologyData.data.grid= !!dataOption.grid;
      // this.topologyData.data.rule= !!dataOption.rule;
      // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
      // this.topologyData.data.alertInfo= !!dataOption.alertInfo;
    },
    updated(n,o){
      if(!this.selection.pen){//没选中node line返回
        return;
      }
      if(this.penId===this.selection.pen.id){
        return;
      }
      if(this.selection.pen.id){
        this.selection.expand=false;
        this.penId=this.selection.pen.id;
        let originData=this.selection.pen.data;
        this.penIsJson=this.isJson(originData);
        this.penData=this.penIsJson?
          JSON.stringify(originData,null,4):
          this.penData=originData;
      }
    },
    methods:{
      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);
            }
          }
        })
      },
      tabClick(n){
        if(this.selection.pen&&this.tab=='1'){

        }
      },
      moduleIdChange(n){
        this.selection.pen.data.moduleName=this.modules.find(item=>item.id===n).name;
        if(!this.selection.pen.data.title){
          this.selection.pen.data.title=this.selection.pen.data.moduleName
          this.selection.pen.text=this.selection.pen.data.title;
          this.onChange()
        }
      },
      changeTitle(val){
        this.selection.pen.text=val;
        this.onChange()
      },
      onChange(value){
        if(value==='lineWidth'){
          this.selection.pen.lineWidth=this.selection.pen.data.lineWidth;
        }
        this.$emit('change',this.selection.pen);
        // if(!this.selection.pen.type||this.selection.pens){
        //   this.$emit('change',this.selection.pen||this.selection.pens);
        // }else{// 线更新
        //   this.$emit('change');
        // }
      },
      changeExpand(){
        this.selection.expand= !this.selection.expand;
      },
      isJson(obj){
        return typeof (obj)=="object"&&Object.prototype.toString.call(obj).toLowerCase()=="[object object]"&& !obj.length;
      },

      //组件事件
      onNodesAlign(align){//对齐node
        alignNodes(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect,align);
        getTopology(this.index).updateProps();
      },
      onSpaceBetween(){
        spaceBetween(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect.width);
        getTopology(this.index).updateProps();
      },
      onLayout(){//改变布局
        layout(getTopology(this.index).activeLayer.pens,this.layout);
        getTopology(this.index).updateProps();
      },
      onClickDash(number){//改变线型
        this.pen.dash=number;
        this.drowdown=0;
        if(this.selection.pen){
          this.selection.pen.dash=number;
        }

        this.onChange();
      },
      onClickName(name){
        this.pen.name=name;
        this.drowdown=0;
        if(this.selection.pen){
          this.selection.pen.name=name;
        }
        this.onChange();
      },
      bkTypeChange(val){

        if(!this.selection.pen.gradientToColor&&val){
          this.selection.pen.gradientToColor='#bae7ff'
        }
        if(!this.selection.pen.gradientFromColor&&val){
          this.selection.pen.gradientFromColor='#c6ebb4'
          this.selection.pen.fillStyle='#c6ebb4'
        }
        this.onChange()
      },
      colorPickerClick(ref){
        this.$refs[ref].showPicker=true;
      },
      colorPickerClickTable(ref,row){
        row.showColor=row.color.fill;
        row.showType='fill';
        this.$nextTick(()=>{
          this.$refs[ref][0].showPicker=true;
        })

      },
      colorChange(val,name){//改变颜色
        if(name==='toArrowColor'){
          this.selection.pen.fromArrowColor=this.colorRGBtoHex(val);
          this.selection.pen.toArrowColor=this.colorRGBtoHex(val);
          this.selection.pen.data['fromArrowColor']=this.colorRGBtoHex(val);
          this.selection.pen.data['toArrowColor']=this.colorRGBtoHex(val);
        }else{
          this.selection.pen[name]=this.colorRGBtoHex(val);
        }
        if(name=='fillStyle'){
          this.selection.pen.gradientFromColor=this.selection.pen.fillStyle;
        }
        this.selection.pen.data[name]=this.colorRGBtoHex(val);
        this.onChange();
      },
      colorChangeTable(item,val){//改变颜色
        if(!item.showType){return};
        item.color[item.showType]=this.colorRGBtoHex(val);
      },
      changeShowPicker(item,type){
        this.$refs['colorPickerBac'  + item.level][0].showPicker=true;
        item.showType=type;
        item.showColor=item.color[type];
      },
      colorOut(obj,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
        }
        obj.showType='';
        obj.showColor=undefined;
      },
      changeTopologyOpt(val,key,isColor){
        //
        // getTopology(this.index).data[key]=val;
        // getTopology(this.index).render();
        if(isColor){
          this.topologyData.data[key]=this.colorRGBtoHex(val);
        }else{
          this.topologyData.data[key]=val;
        }
        Object.keys(this.topologyData.data).forEach((key1)=>{
          if(key1 === 'projectInfo' || key1 === 'alertInfo' || key1==='fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity'){
            getTopology(this.index).data.data[key1]=this.topologyData.data[key1];
          } else {
            getTopology(this.index).data[key1]=this.topologyData.data[key1];
          }
        });
        getTopology(this.index).render();
        this.$emit('changeProjectTitle')
      },
      colorRGBtoHex(color){//获取颜色16进制数
        if(!color){
          return ""
        };
        if(color.length<=7){return 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;
      },
      onClickToArrow(arrow){
        this.selection.pen.toArrow=arrow;
        this.drowdown=0;
        this.onChange();
      },
      onClickFromArrow(arrow){
        this.selection.pen.fromArrow=arrow;
        this.drowdown=0;
        this.onChange();
      },
      onAnimate(val){
        // this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
        // this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;
        this.onChange();
        // this.$emit('animate');
      },
      delTopologyPen(){
        let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
        this.$emit('del',delObj);
      },
      getMetricOptions(){
        return this.metricOptions;
      },
      addExpression(){
        this.selection.pen.data.expressArr.push('');
        this.selection.pen.data.legends.push('');
      },
      expressionChange(item){

      },
      removeExpression(index){
        if(this.selection.pen.data.expressArr.length>1){
          this.selection.pen.data.expressArr.splice(index,1);
          this.selection.pen.data.legends.splice(index,1);
          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({
            color:{
              line:'#000000',
              fill:'#ffffff',
              text:'#000000',
            },
            showColor:undefined,
            animateType:this.selection.pen.type?1:'upDown',
            value:0,
            level:1,
            showType:'fill',//bac text border
          });
          this.selection.pen.data.valueMapping.forEach((item,index)=>{
            if(index===0){
              return
            }
            item.level=this.selection.pen.data.valueMapping.length-index;
          })
        }else{
          this.selection.pen.data.valueMapping.push({
            color:{
              line:'#000000',
              fill:'#ffffff',
              text:'#000000',
            },
            showColor:undefined,
            animateType:this.selection.pen.type?1:'upDown',
            value:0,
            level:this.selection.pen.data.valueMapping.length,
            showType:'fill',//bac text border
          });
        }
      },
      valueMappingValueChange(index,row){

      },
      changeValueMappingSort(){
        if(this.selection.pen.data.valueMappingSort==='desc'){
          this.selection.pen.data.valueMappingSort='asc';
          let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
          let a=arr.splice(0,1);
          arr.reverse();
          arr.unshift(a[0]);
          this.selection.pen.data.valueMapping=arr;
        } else{
          this.selection.pen.data.valueMappingSort='desc';
          let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
          let a=arr.splice(0,1);
          arr.reverse();
          arr.unshift(a[0]);
          console.log(arr);
          this.selection.pen.data.valueMapping=arr;
          console.log('aaa')
        }
      },
      valueMappingDel(index,row){
        this.selection.pen.data.valueMapping.splice(index,1);
        this.selection.pen.data.valueMapping.forEach((item,index)=>{
          item.level=index
        });
      },
      inputFocus(e){
        e.path[2].children[0].setAttribute("tabindex","0");
        e.path[2].children[1].setAttribute("tabindex","1");
      },
      inputBlur(e){
      },
    }
  }
</script>
<style scoped>
  .props-box label {
    line-height: 32px;
    width: 100px;
    font-size: 14px;
    text-align: right;
  }

  .props-box .iconLabel {
    line-height: 32px;
    width: 24px;
    font-size: 14px;
    text-align: center;
  }

  .props-box /deep/ .el-tabs--card > .el-tabs__header {
    background: #EEEEEE;
    border: none;
  }

  .props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background: #FFFFFF;
    font-family: Roboto-Bold;
    font-size: 14px;
    color: #FA901C;
    font-weight: 700;
    border-bottom-color: #FFF;
    border-top: 3px solid #FA901C;
  }

  .props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
    box-sizing: content-box;
    height: 31px;
    line-height: 31px;
  }
</style>
<style>
  .can-clear.el-color-dropdown .el-color-dropdown__link-btn {
    display: inline-block !important;
    margin-right: 5px;
  }
  .no-style-class.el-color-picker__panel{
    border-radius: 0 0 5px 5px;
    border-top: none;
  }
</style>
<style lang="scss" scoped>
  .project-title {
    background: #eeeeee;
    height: 36px;
    line-height: 36px;
    border-radius: 0;
    padding-left: 10px;
  }

  .project-content {
    margin: 10px;
    height: calc(100% - 50px);
    overflow-y: auto;

    .project-content-title {
      background: #F6F6F6;
      padding-left: 10px;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      height: 32px;
      line-height: 31px;
      margin-bottom: 5px;
    }

    .project-content-box {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    .half.project-content-item {
      width: calc(50% - 15px);
      height: 64px;
      label{
        width: auto;
      }
    }

    .project-content-item {
      padding-left: 10px;
      display: inline-block;
      position: relative;
      width: 100%;

      label {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .h32 {
        height: 32px;
      }
    }
  }

  .project-content.node-content {
    overflow-y: unset;
    height: auto;

    /deep/ .el-select-dropdown__wrap {
      max-height: 190px;
    }
  }

  .pens-data {
    /deep/ .el-form-item {
      margin-bottom: 10px;
    }

    .half-form-item {
      width: calc(50% - 20px);
      display: inline-block;
      padding: 0 8px;
    }

    .full-form-item {
      width: calc(100% - 10px);
      display: inline-block;
      padding: 0 8px;
    }

    .form-row-title {
      height: 32px;
      line-height: 32px;
      background: #F6F6F6;
      padding: 0 10px;

      /deep/ .el-form-item__content {
        height: 100%;
        line-height: 32px;

        > div {
          width: 100%;
        }
      }
    }

    /deep/ .el-form-item__content {
      > div {
        width: 100%;
      }
    }

    /deep/ .el-form-item__label {
      line-height: 0;
      padding: 0;
    }

    .element-item {
      padding: 10px 10px 10px 0;
      border: 1px dashed #dfe7f2;
      width: calc(100% - 60px);
      margin-bottom: 10px;
      margin-left: 10px;
    }

    .right-box-form .element-item.form-row-item {
      width: calc(100% - 120px);
      padding: 20px 20px 20px 0;
    }

    .form-row-item .nz-icon-minus-position {
      position: absolute;
      top: 50%;
      right: -55px;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background: rgba(236, 127, 102, 0.1);
      border-radius: 4px;
      padding: 0 5px;

      .nz-icon-minus {
        color: #EC7F66;
      }
    }

    .tooltip-box {
      padding-left: 10px;
      width: calc(100% - 10px);
    }
  }

  .props-box {
    /deep/ .el-tabs.el-tabs--card {
      height: 100%;

      .el-tabs__content {
        height: calc(100% - 55px) !important;
        overflow-y: auto;
        padding: 0 10px;
      }
    }

    /deep/ .el-collapse {
      background: #f6f6f6;
      border: none;
      font-size: 14px;
    }

    /deep/ .el-collapse-item__header {
      padding: 0 10px;
      background-color: #F9F9F9;
      height: 32px;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      line-height: 14px;
    }

    /deep/ .el-collapse-item__wrap {
      padding: 0 10px;
      background-color: #ffffff;
      border: none;
    }

    /deep/ .el-collapse-item__content {
      padding: 12px 0px;
    }


    /deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
      visibility: hidden;
      outline: none;
    }

    /deep/ .el-input-number:focus-within {
      /deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
        visibility: visible;
        outline: none;
      }
    }
  }

  .thresholds-box{
    background: #FFFFFF;
    border-top: 1px solid #E7EAED;
    border-left: 1px solid #E7EAED;
    border-radius: 2px;
    font-size: 12px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
    .thresholds-title{
      font-size: 12px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
    }
    .thresholds-cell{
      border-bottom: 1px solid #E7EAED;
      border-right: 1px solid #E7EAED;
      padding: 5px 5px;
      height: 42px;
      line-height: 32px;
      /deep/  .el-input-group__prepend{
        padding: 0 10px;
      }
      .is-arrow-active{
        color: #FA901C;
      }
      .nz-icon.nz-icon-arrow-up1{
        margin-right: -15px;
      }
    }
  }
  .value-mapping-add{
    background: #FA901C30;
    margin-bottom: 10px;
    height: 24px;
    line-height: 24px;
    color:  #FA901C;
  }
  .mb10 {
    margin-bottom: 10px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .p10 {
    padding: 10px;
  }

  .pl0 {
    padding-left: 0;
  }

  .special-select .el-select.el-select--small {
    width: 100%;
  }

  .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
    border: 1px solid #DCDFE6;
    height: 28px;
  }

  .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
    display: none;
  }

  .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
    height: 28px;
    line-height: 28px;
    color: #899FB7;
    width: 100%;
  }

  .special-select /deep/ .el-input__prefix > div {
    width: 100%;
    height: 100%;
  }

  .props-box {
    position: relative;
    width: 100%;
    height: calc(100% - 20px);
    padding-bottom: 20px;

    .iconfont {
      cursor: pointer;
    }

    .iconfontSize16 {
      font-size: 16px;
      margin-right: 5px;
    }

    .flex {
      display: flex;

      .full {
        flex: 1;
      }
    }

    .flex-warp {
      flex-wrap: wrap;
    }

    .props-pen-item {
      width: 50%;

      .p10 {
        position: relative;
      }

      .gradient-to {
        /deep/ .el-select.el-select--small {
          vertical-align: top;
          width: calc(100% - 42px);
          margin-left: 5px;
        }
      }
    }

    .icon-item {
      width: 75%;
      height: 100%;
      padding-left: 25%;
    }

    .icon-item svg {
      width: 100%;
      height: 100%;
    }

    .del-btn {
      position: absolute;
      top: 0;
      right: 0;
      border: none;
      cursor: pointer;
      z-index: 2;
    }

    .del-btn:hover {
      background: #D8D7D7 !important;
    }

    .bottom {
      font-size: 14px;
      position: absolute;
      bottom: 10px;
      left: 10px;
    }

    /deep/ .el-input-number--small {
      width: auto;
    }
  }

  .color-content {
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
    top: 15px;
    left: 66px;
  }
  .thresholds-cell .color-content{
    top: 32px;
    left: 137px;
  }
  .color-tab{
    position: absolute;
    top: 43px;
    left: 0;
    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);
    z-index: 1;
  }
  .color-tab div{
    text-align: center;
    flex: 1;
    color: #909399;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    background: #E4E7ED;
    cursor: pointer;
    border-top: 2px solid transparent;
  }
  /*.color-tab div:first-child{*/
    /*border-right-color: #DCDFE6;*/
  /*}*/
  .color-tab div:hover{
    color: #409EFF;
  }
  .color-tab .color-active{
    background-color: #FFF;
    font-size: 14px;
    color: #FA901C;
    font-weight: 700;
    border-color:  #FA901C;;
  }

  .color {
    position: relative;
  }

  .color-show {
    border: 1px solid #E7EAED;
    border-radius: 5px;
    display: flex;
    align-items: center;
    width: calc(100% - 32px);
    height: 30px;
  }

  .color-show .color-text {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
  }

  .color-show-left {
    width: 18px;
    height: 18px;
    border: 1px solid #E7EAED;
    border-radius: 5px;
    margin: 0 5px;
  }

  .color-arrows {
    color: #C0C4CC;
    position: absolute;
    right: 42px;
  }

  .color-arrows .nz-icon {
    font-size: 12px;
  }
</style>