1749 lines
71 KiB
Vue
1749 lines
71 KiB
Vue
<template>
|
||
<div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
|
||
<transition v-if="from !== 'chartTemp'" name="right-box">
|
||
<panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>
|
||
</transition>
|
||
|
||
<div class="right-box__header">
|
||
<div class="header__title" v-if="from !== 'chartTemp'">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
|
||
<div class="header__title" v-if="from === 'chartTemp'">{{editChart.id ? $t("dashboard.panel.editChartTempTitle") : $t("dashboard.panel.createChartTempTitle")}}</div>
|
||
<div class="header__operation">
|
||
<span v-cancel="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close"></i></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right-box__container">
|
||
<div class="container__form">
|
||
<el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
|
||
<el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="title">
|
||
<el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="showPanel.type !== fromRoute.project && showPanel.type !== fromRoute.asset && showPanel.type !== fromRoute.endpoint && showPanel.type !== fromRoute.model && from!=='chartTemp'" :label="$t('dashboard.panel.title')" prop="panelName">
|
||
<select-panel ref="selectPanel" :disabled="showPanel.type === 'dashboard'" :filter-panel="filterPanel" :chart-box="true" :panel-lock="true" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel">
|
||
<template v-slot:header>
|
||
<div class="panel-select-header">
|
||
<el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>
|
||
</div>
|
||
</template>
|
||
<template v-slot:trigger>
|
||
<el-input placeholder="" readonly="readonly" size="small" v-model="panelName" :disabled="showPanel.type==='dashboard'"></el-input>
|
||
</template>
|
||
</select-panel>
|
||
</el-form-item>
|
||
|
||
<div class="form-items--half-width-group">
|
||
<!-- type -->
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
|
||
<el-select id="chart-box-type" v-model="editChart.type" :disabled="editChart.type==='group'&&editChart.children&&editChart.children.length" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType" @change="chartTypeChange">
|
||
<el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && editChart.isGroup" :label="item.name" :value="item.id">
|
||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!--group-->
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group">
|
||
<el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
|
||
<el-option v-for="item in groupArr" :key="item.id" :label="item.name" :value="item.id">
|
||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- varType -->
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'chartTemp'">
|
||
<el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
|
||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
|
||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- remark -->
|
||
<el-form-item :label="$t('overall.remark')">
|
||
<el-input maxlength="256" show-word-limit v-model="editChart.remark" :autosize="{ minRows: 1, maxRows: 6}" type="textarea"/>
|
||
</el-form-item>
|
||
|
||
<div class="form__sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
|
||
<div class="form-items--half-width-group">
|
||
<!--width-->
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
|
||
<el-select id="chart-box-span" v-model="editChart.span" :disabled="editChart.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
|
||
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
|
||
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!--height-->
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width" prop="height">
|
||
<!-- <el-autocomplete
|
||
id="chart-box-height"
|
||
v-model="editChart.height"
|
||
:disabled="editChart.type === 'group'"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder=""
|
||
popper-class="popper-z-index prevent-clickoutside"
|
||
size="small"
|
||
@select="handleSelect">
|
||
<template slot-scope="{ item }">
|
||
<div class="name">{{ item }}</div>
|
||
</template>
|
||
<template slot="append">px</template>
|
||
</el-autocomplete>-->
|
||
|
||
<!-- 由px改为span -->
|
||
<el-select id="chart-box-height" v-model="editChart.height" :disabled="editChart.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
|
||
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
|
||
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- unit -->
|
||
<el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'&& editChart.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
|
||
<el-cascader id="chart-box-unit" v-model="editChart.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
|
||
placeholder=""
|
||
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
|
||
size="small"
|
||
style="width: 100%"
|
||
@change="unitSelected"
|
||
>
|
||
</el-cascader>
|
||
</el-form-item>
|
||
<!--Align-->
|
||
<!--<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.align')" class="form-item--half-width" prop="unit">
|
||
<el-select id="chart-box-statistics" v-model="editChart.param.align" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
|
||
<el-option v-for="item in alignList" :key="item.value" :label="item.label" :value="item.value">
|
||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>-->
|
||
<!--lock-->
|
||
<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="lock">
|
||
<el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
|
||
<el-option v-for="item in lockList" :key="item.value" :label="$t(item.label)" :value="item.value">
|
||
<span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item class="form-item--half-width" v-if="editChart.type =='url' && isUrl" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
|
||
<el-input id="chart-box-url" v-model="editChart.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
|
||
</el-form-item>
|
||
<!--Default collapse-->
|
||
<el-form-item class="form-item--half-width" v-if="editChart.type == 'group'" :label='$t("dashboard.panel.chartForm.collapse")' prop="param.collapse">
|
||
<el-switch id="chart-box-collapse"
|
||
v-model="editChart.param.collapse"
|
||
:active-value="true"
|
||
:inactive-value="false"
|
||
active-color="#ee9d3f"
|
||
@change="defaultCollapse"
|
||
size="small"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="editChart.type === 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'" :label='"Null value"' class="form-item--half-width" prop="nullType">
|
||
<el-select id="chart-box-nullType" v-model="editChart.param.nullType" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
|
||
<el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
|
||
<el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
|
||
<el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
|
||
<span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.limit")' prop="param.limit">
|
||
<el-select v-model="editChart.param.limit" popper-class="right-box-select-top" size="small">
|
||
<el-option v-for="option in limitOptions" :key="option" :value="option"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.time")' prop="param.time">
|
||
<el-switch id="chart-box-time"
|
||
v-model="editChart.param.time"
|
||
:active-value="true"
|
||
:inactive-value="false"
|
||
size="small"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.descending")' prop="param.descending">
|
||
<el-switch id="chart-box-descending"
|
||
v-model="editChart.param.descending"
|
||
:active-value="true"
|
||
:inactive-value="false"
|
||
size="small"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.wrapLines")' prop="param.wrapLines">
|
||
<el-switch id="chart-box-wrapLines"
|
||
v-model="editChart.param.wrapLines"
|
||
:active-value="true"
|
||
:inactive-value="false"
|
||
size="small"></el-switch>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<div v-if="editChart.type ==='diagram'" class="form__sub-title">
|
||
<span>{{$t('dashboard.panel.chartForm.content')}}</span>
|
||
<span style="cursor: pointer"><i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></span>
|
||
</div>
|
||
<!--topoData-->
|
||
<el-form-item v-if="editChart.type ==='diagram'" >
|
||
<div class="topology-box">
|
||
<div class="topology-mc"></div>
|
||
<diagram :topoData="editChart.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' class="form-item--half-width" prop="param.threshold">
|
||
<el-input id="chart-box-threshold" v-model="editChart.param.threshold" size="small" type="input"></el-input>
|
||
</el-form-item>
|
||
|
||
<div v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group' && editChart.type != 'diagram'" class="form__sub-title">
|
||
<span>{{$t('alert.config.exprBox')}}</span>
|
||
<span v-if="!isSingleStat" @click="addExpression">
|
||
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
|
||
</span>
|
||
</div>
|
||
<div v-if="editChart.type == 'text'" class="form__sub-title">
|
||
<span>{{$t('dashboard.panel.chartForm.content')}}</span>
|
||
</div>
|
||
<div v-if="isAlert" class="form__sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
|
||
|
||
<el-row class="element-item element-item__padding" v-if="isAlert">
|
||
<alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
|
||
</el-row>
|
||
<div 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'&& editChart.type != 'group' && editChart.type != 'diagram'">
|
||
<promql-input
|
||
:from-father-data="true"
|
||
:metricOptionsParent="metricOptions"
|
||
:expression-list="expressions"
|
||
:id="promqlKeys[index-1]"
|
||
:index="index-1"
|
||
:required = 'true'
|
||
:type="promqlType"
|
||
:key="promqlKeys[index-1]"
|
||
:plugins="['metric-selector', 'metric-input', 'remove']"
|
||
:ref="'promql-'+(index-1)"
|
||
:showRemove="false"
|
||
:styleType="2"
|
||
@change="expressionChange"
|
||
@removeExpression="removeExpression"
|
||
></promql-input>
|
||
<el-row style="margin-top: 18px">
|
||
<el-col class="legend-title">
|
||
<span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}} </span>
|
||
<el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
|
||
<div :style="{'word-break':language!=='cn'?'keep-all':'break-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% - 160px);">
|
||
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="nz-icon-minus-position">
|
||
<span class="nz-icon-minus-medium">
|
||
<i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
|
||
</span>
|
||
<span v-if="!isSingleStat" class="nz-icon-copy">
|
||
<i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
|
||
</span>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
<!--value mapping start-->
|
||
<div v-if="editChart.type == 'singleStat'||editChart.type == 'table'" class="form__sub-title">
|
||
<span>
|
||
{{$t('dashboard.panel.chartForm.valMapping.name')}}
|
||
<el-popover placement="top" trigger="hover" width="275" popper-class="prevent-clickoutside">
|
||
<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 class="nz-icon nz-icon-create-square" style="font-size: 16px; cursor: pointer;"></i></span>
|
||
</div>
|
||
<div v-if="editChart.type == 'singleStat'||editChart.type == 'table'" style="margin-bottom: 20px; width: 100%"></div>
|
||
<el-form-item v-if="editChart.type == 'singleStat'||editChart.type == 'table'" :label="$t('dashboard.panel.chartForm.type')" prop="span">
|
||
<el-radio-group id="chart-box-change-valuemapping" v-model="editChart.param.valueMapping.type" class="val-mapping-type" fill="#FA901C" size="small" text-color="#FA901C" @change="valueMappingChange">
|
||
<el-radio-button border class="no-fill" label="value">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
|
||
<el-radio-button border class="no-fill" label="range">{{$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">
|
||
<div v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
|
||
<el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other form-item--half-width-other-two" prop="span">
|
||
<el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input>
|
||
<!--颜色选择器 start-->
|
||
<div class="color-show">
|
||
<nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac', value:showPicker[index].bac, key:'bac'},{name:'text', value:showPicker[index].text, key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
|
||
</div>
|
||
<!--颜色选择器 end-->
|
||
<span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
|
||
<div v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
|
||
<div class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" class="one-third-form-item-left" prop="span" >
|
||
<el-input v-model="mapping.from" size="small" type="input"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.to')" class="one-third-form-item-right" prop="span" >
|
||
<el-input v-model="mapping.to" size="small" type="input"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
|
||
<el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input" ></el-input>
|
||
<!--颜色选择器 start-->
|
||
<div class="color-show">
|
||
<nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
|
||
</div>
|
||
<!--颜色选择器 end-->
|
||
<span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
|
||
<!--value mapping end-->
|
||
<template v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
|
||
<div class="form__sub-title" >
|
||
<span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
|
||
</div>
|
||
<div style="display: flex; margin-bottom: 20px">
|
||
<span style="margin-left: 15px;"></span>
|
||
<template v-for="(item, index) in sortedOptionKeys">
|
||
<div :key="index" 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"
|
||
>
|
||
</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>
|
||
<!--底部按钮-->
|
||
<div class="right-box__footer">
|
||
<button id="chart-box-esc" v-cancel="{obj:editChart,func:esc}" class="footer__btn footer__btn--light">
|
||
<span>{{$t('overall.cancel')}}</span>
|
||
</button>
|
||
<button v-if="showPanel.type && showPanel.type == 'model'" id="chart-box-Sync" v-has="'main_edit'" class="footer__btn" @click="SyncSave">
|
||
<span>{{$t('overall.SyncSave')}}</span>
|
||
</button>
|
||
<button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn" @click="preview" >
|
||
<span>{{$t('overall.preview')}}</span>
|
||
</button>
|
||
<button id="chart-box-save" v-has="'main_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="confirmAdd" >
|
||
<span>{{$t('overall.save')}}</span>
|
||
</button>
|
||
</div>
|
||
<!--preview -->
|
||
<chart-preview :panelId="panelId" ref="chartsPreview" :fromEndpoint="fromEndpoint"></chart-preview>
|
||
<!--topplogy-->
|
||
<diagram :topoData="editChart.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import bus from '../../../libs/bus'
|
||
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'
|
||
import nezhaColor from '../../common/nezhaColor'
|
||
import i18n from '../../common/i18n'
|
||
import { fromRoute } from '@/components/common/js/constants'
|
||
import diagram from '@/components/common/ChartDiagram/diagram'
|
||
import editRigthBox from '../../common/mixin/editRigthBox'
|
||
import promqlInputMixin from '@/components/common/mixin/promqlInput'
|
||
const rz = {
|
||
methods: {
|
||
rz (e) {
|
||
resetZIndex(e)
|
||
}
|
||
}
|
||
}
|
||
export default {
|
||
name: 'chartBox',
|
||
props: {
|
||
boxClass: String,
|
||
panelData: Array,
|
||
showPanel: Object,
|
||
chart: Object,
|
||
from: { type: String },
|
||
fromEndpoint: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
mixins: [rz, editRigthBox, promqlInputMixin],
|
||
data () {
|
||
return {
|
||
fromRoute,
|
||
language: 3,
|
||
optionBtn: {
|
||
save: false
|
||
},
|
||
editChart: {
|
||
name: '',
|
||
remark: ''
|
||
},
|
||
filterPanel: '',
|
||
statisticsList: this.$CONSTANTS.statisticsList,
|
||
alignList: this.$CONSTANTS.alignList,
|
||
lockList: this.$CONSTANTS.lockList,
|
||
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' }
|
||
],
|
||
name: [
|
||
{ 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' }
|
||
],
|
||
'param.statistics': [
|
||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||
]
|
||
},
|
||
groupArr: [],
|
||
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: 'pie',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
|
||
},
|
||
{
|
||
id: 'table',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
|
||
},
|
||
{
|
||
id: 'alertList',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
|
||
},
|
||
{
|
||
id: 'logs',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.logs.label')
|
||
},
|
||
{
|
||
id: 'text',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
|
||
},
|
||
{
|
||
id: 'url',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
|
||
},
|
||
{
|
||
id: 'diagram',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
|
||
},
|
||
{
|
||
id: 'group',
|
||
name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
|
||
}
|
||
|
||
],
|
||
elements: [1], // 指标部分 tarNum
|
||
elementTarget: [], // 本地保存数据
|
||
alertParams: {},
|
||
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||
limitOptions: [100, 200, 500, 1000, 2000],
|
||
nullTypeList: [{
|
||
label: 'connected',
|
||
value: 'connected'
|
||
}, {
|
||
label: 'null',
|
||
value: 'null'
|
||
}, {
|
||
label: 'zero',
|
||
value: 'zero'
|
||
}],
|
||
// 是否为编辑已有信息
|
||
iseditChart: 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,
|
||
showPicker: [],
|
||
varTypeArr: [
|
||
{ name: 'Asset', id: 1 },
|
||
{ name: 'Endpoint', id: 2 }
|
||
],
|
||
topologyDialog: false,
|
||
promqlType: 'metric',
|
||
chartSwitch: false
|
||
// metricStore: []
|
||
}
|
||
},
|
||
components: {
|
||
'chart-preview': chartPreview,
|
||
'alert-chart-param': alertChartParam,
|
||
'promql-input': promqlInput,
|
||
'rich-text-editor': richTextEditor,
|
||
selectPanel,
|
||
nezhaColor,
|
||
diagram
|
||
},
|
||
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
|
||
this.editChart.groupId = ''
|
||
this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
this.groupArr = []
|
||
response.data.list.forEach((item, index) => {
|
||
if (item.type === 'group') {
|
||
this.groupArr.push({ id: item.id, name: item.name })
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
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('visual/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 () {
|
||
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] })
|
||
})
|
||
} else {
|
||
this.editChart.elements = []
|
||
}
|
||
},
|
||
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)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
copyExpression (index) {
|
||
this.expressions.push(this.expressions[index])
|
||
this.legends.push(this.legends[index])
|
||
this.promqlKeys.push(getUUID())
|
||
this.elementIds.push('')
|
||
this.promqlCount++
|
||
this.$nextTick(() => {
|
||
this.expressions.forEach((ex, index) => {
|
||
if (ex) {
|
||
this.$refs[`promql-${index}`][0].metricChange(ex)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
defaultCollapse (val) {
|
||
this.chartSwitch = val
|
||
},
|
||
save () {
|
||
this.$refs.chartForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.editChart.id) { // 修改
|
||
this.editChart.param.collapse = this.chartSwitch
|
||
this.$put('visual/panel/chart', 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 { // 新增
|
||
this.$post('visual/panel/chart', 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.from === 'chartTemp') {
|
||
if (this.from === 'chartTemp') {
|
||
this.panelId = 0
|
||
}
|
||
const chartParams = params || this.editChart
|
||
chartParams.panelId = this.panelId
|
||
if (!chartParams.groupId) {
|
||
chartParams.groupId = 0
|
||
}
|
||
delete chartParams.panel
|
||
delete chartParams.children
|
||
if (chartParams.elements) {
|
||
chartParams.elements.forEach(item => {
|
||
delete item.id
|
||
})
|
||
}
|
||
this.$post('visual/panel/chart', chartParams).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
// this.$refs.chartForm.resetFields()// 清空表单
|
||
this.$emit('on-create-success', 'create', response.data, chartParams, { id: this.panelId, name: this.panelName })
|
||
this.esc(true)
|
||
} 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
|
||
if (this.from === 'chartTemp') {
|
||
panelId = 0
|
||
}
|
||
const chartParams = params || this.editChart
|
||
chartParams.panelId = panelId
|
||
if (!chartParams.groupId) {
|
||
chartParams.groupId = 0
|
||
}
|
||
delete chartParams.panel
|
||
delete chartParams.children
|
||
this.$put('visual/panel/chart', chartParams).then(response2 => {
|
||
if (response2.code === 200) {
|
||
this.esc(true)
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
// this.$refs.chartForm.resetFields();//清空表单
|
||
this.$emit('on-create-success', 'update', response2.data, chartParams)
|
||
} 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,
|
||
name: this.editChart.name, // this.editChart
|
||
span: this.editChart.span,
|
||
height: this.editChart.height,
|
||
type: this.editChart.type,
|
||
unit: this.editChart.unit,
|
||
param: {
|
||
|
||
},
|
||
sync: this.editChart.sync,
|
||
groupId: this.editChart.groupId,
|
||
varType: this.editChart.varType
|
||
}
|
||
if (this.editChart.type === 'singleStat' || this.editChart.type === 'pie' || this.editChart.type === 'bar') {
|
||
// 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.iseditChart) {
|
||
params.id = this.editChart.id
|
||
}
|
||
this.$refs.chartsPreview.show(params)
|
||
} else {
|
||
if (this.iseditChart) {
|
||
params.id = this.editChart.id
|
||
this.updateCharts(params)
|
||
} else {
|
||
this.addCharts(params)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getAlertParam: function (param, opType) {
|
||
this.$refs.chartForm.validate((valid) => {
|
||
const params = {
|
||
name: this.editChart.name, // this.editChart
|
||
span: this.editChart.span,
|
||
height: this.editChart.height,
|
||
type: this.editChart.type,
|
||
unit: this.editChart.unit,
|
||
param: param,
|
||
sync: this.editChart.sync,
|
||
remark: this.editChart.remark,
|
||
groupId: this.editChart.groupId,
|
||
varType: this.editChart.varType
|
||
}
|
||
if (valid) {
|
||
if (opType === 'preview') {
|
||
if (this.iseditChart) {
|
||
params.id = this.editChart.id
|
||
}
|
||
this.$refs.chartsPreview.show(params)
|
||
} else {
|
||
if (this.iseditChart) {
|
||
params.id = this.editChart.id
|
||
this.updateCharts(params)
|
||
} else {
|
||
this.addCharts(params)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
SyncSave () {
|
||
this.editChart.sync = 1
|
||
this.confirmAdd()
|
||
},
|
||
confirmAdd () {
|
||
this.$refs.chartForm.validate((valid) => {
|
||
if (valid) {
|
||
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.editChart.type == 'pie' || this.editChart.type == 'table' || this.editChart.type == 'bar') {
|
||
// 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] })
|
||
})
|
||
} else {
|
||
this.editChart.elements = []
|
||
}
|
||
if (this.editChart.id) {
|
||
this.updateCharts()
|
||
} else {
|
||
this.addCharts()
|
||
}
|
||
} else {
|
||
if (this.editChart.type == 'url') {
|
||
this.$refs.chartForm.validate((valid) => {
|
||
const params = {
|
||
name: this.editChart.name, // 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,
|
||
remark: this.editChart.remark,
|
||
groupId: this.editChart.groupId,
|
||
varType: this.editChart.varType
|
||
}
|
||
|
||
if (valid) {
|
||
params.elements = []
|
||
if (this.iseditChart) {
|
||
params.id = this.editChart.id
|
||
this.updateCharts(params)
|
||
} else {
|
||
this.addCharts(params)
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
this.$refs.chartForm.validate((valid) => {
|
||
const text = this.$refs.richTextEditor.getContent()
|
||
if (!text) {
|
||
valid = false
|
||
}
|
||
const params = {
|
||
name: this.editChart.name, // this.editChart
|
||
span: this.editChart.span,
|
||
height: this.editChart.height,
|
||
type: this.editChart.type,
|
||
param: {
|
||
text: text
|
||
},
|
||
sync: this.editChart.sync,
|
||
remark: this.editChart.remark,
|
||
groupId: this.editChart.groupId,
|
||
varType: this.editChart.varType
|
||
}
|
||
|
||
if (valid) {
|
||
params.elements = []
|
||
if (this.iseditChart) {
|
||
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('monitor/module?pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
this.metricList = response.data.list
|
||
const cascaderMap = new Map()
|
||
this.metricList.forEach((item, index) => {
|
||
const projectName = item.project.name
|
||
const moduleName = item.name
|
||
const childOption = {
|
||
value: moduleName,
|
||
label: moduleName,
|
||
children: []
|
||
}
|
||
if (cascaderMap.has(projectName)) {
|
||
cascaderMap.get(projectName).push(childOption)
|
||
} else {
|
||
const childArr = []
|
||
childArr.push(childOption)
|
||
cascaderMap.set(projectName, childArr)
|
||
}
|
||
|
||
// 缓存全局数据
|
||
const moduleItem = {
|
||
name: moduleName,
|
||
metricMap: new Map()
|
||
}
|
||
if (this.metricAllData.has(projectName)) {
|
||
this.metricAllData.get(projectName).push(moduleItem)
|
||
} else {
|
||
const moduleList = []
|
||
moduleList.push(moduleItem)
|
||
this.metricAllData.set(projectName, moduleList)
|
||
}
|
||
})
|
||
const 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, unit) {
|
||
if (panelId == -1) {
|
||
const 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)
|
||
})
|
||
const 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.iseditChart = false
|
||
this.initInfo(unit) // 初始化图表信息
|
||
// 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
|
||
},
|
||
setIsGroup () {
|
||
this.isSingleStat = false
|
||
this.isUrl = false
|
||
this.isAlert = false
|
||
},
|
||
// 编辑chart时使用, set_tdata
|
||
editData (data, panelId) {
|
||
if (!panelId) {
|
||
this.panelId = 0
|
||
} else {
|
||
this.panelId = panelId
|
||
}
|
||
if (data.id) {
|
||
this.iseditChart = true
|
||
}
|
||
this.editInfo = data
|
||
// 图表信息获取
|
||
this.editChart.id = data.id
|
||
this.editChart.name = data.name
|
||
this.editChart.span = data.span
|
||
this.editChart.height = data.height
|
||
this.editChart.type = data.type
|
||
this.editChart.unit = data.unit
|
||
this.editChart.remark = data.remark
|
||
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 === 'table') {
|
||
this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
|
||
this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
|
||
} 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 === 'group') {
|
||
this.setIsGroup()
|
||
} 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
|
||
if (this.editChart.type === 'bar') {
|
||
this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
|
||
this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
|
||
}
|
||
} 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 (unit) {
|
||
this.editChart.name = ''
|
||
this.editChart.type = 'line'
|
||
this.editChart.span = 12
|
||
this.editChart.height = 4
|
||
this.editChart.unit = unit || 2
|
||
this.editChart.remark = ''
|
||
this.editChart.groupId = this.editChart.groupId || ''
|
||
const 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 = 'null'
|
||
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) {
|
||
const suggestions = this.heightSuggestions
|
||
const 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 () {
|
||
const chartType = this.editChart.type
|
||
// this.editChart.param.url = ''
|
||
this.editChart.height = 4
|
||
this.promqlType = 'metric'
|
||
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' || chartType === 'pie') {
|
||
if (chartType == 'singleStat') {
|
||
this.setIsSingleStat()
|
||
this.resetElements()
|
||
}
|
||
this.editChart.param = {
|
||
statistics: 'last',
|
||
valueMapping: {
|
||
type: 'value',
|
||
mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
|
||
}
|
||
}
|
||
this.showPicker = [{ bac: false, text: false }]
|
||
} else if (chartType === 'group') {
|
||
this.editChart.span = 12
|
||
this.editChart.height = 6
|
||
this.setIsGroup()
|
||
} else if (chartType === 'diagram') {
|
||
this.editChart.param = {
|
||
lock: 0,
|
||
align: 'center',
|
||
topo: {}
|
||
}
|
||
} else {
|
||
this.setIsOtherChart()
|
||
if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') {
|
||
this.editChart.param = { nullType: 'null', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } }
|
||
if (chartType === 'bar') {
|
||
this.editChart.param = { statistics: 'last', nullType: 'null', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } }
|
||
this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
|
||
this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
|
||
}
|
||
} else if (chartType == 'table') {
|
||
this.$set(this.editChart.param, 'last', 0)
|
||
this.editChart.param = {
|
||
statistics: 'last',
|
||
nullType: 'null',
|
||
valueMapping: {
|
||
type: 'value',
|
||
mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
|
||
}
|
||
}
|
||
this.showPicker = [{ bac: false, text: false }]
|
||
this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
|
||
this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
|
||
} else if (chartType == 'logs') {
|
||
this.promqlType = 'log'
|
||
this.editChart.param = {
|
||
time: true,
|
||
descending: true,
|
||
wrapLines: true,
|
||
limit: 100
|
||
}
|
||
}
|
||
/* if(this.$refs.chartTag){
|
||
this.$refs.chartTag.forEach((item, index) => {
|
||
item.setNotSingleStat();
|
||
});
|
||
} */
|
||
}
|
||
},
|
||
resetElements () {
|
||
this.promqlKeys = ['']
|
||
this.expressions = ['']
|
||
this.legends = []
|
||
this.elementIds = []
|
||
},
|
||
|
||
// 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) => {
|
||
let params = {
|
||
// productId: this.productId,
|
||
// panelId: this.panelId,
|
||
name: this.editChart.name, // this.editChart
|
||
span: this.editChart.span,
|
||
height: this.editChart.height,
|
||
type: this.editChart.type,
|
||
unit: this.editChart.unit,
|
||
param: this.editChart.param,
|
||
sync: this.editChart.sync,
|
||
remark: this.editChart.remark,
|
||
groupId: this.editChart.groupId,
|
||
varType: this.editChart.varType
|
||
}
|
||
params = JSON.parse(JSON.stringify(params))
|
||
if (this.editChart.type === 'singleStat' || this.editChart.type === 'table') {
|
||
// params.param.statistics=this.statistics;
|
||
params.param.valueMapping = this.editChart.param.valueMapping
|
||
}
|
||
if (this.editChart.type != 'singleStat' && this.editChart.type != 'pie' && this.editChart.type != 'table') {
|
||
delete params.param.statistics
|
||
}
|
||
if (this.editChart.type === 'bar' && this.editChart.param.statistics && this.editChart.param.statistics !== 'null') {
|
||
params.param.statistics = this.editChart.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
|
||
} 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 = {
|
||
name: this.editChart.name, // this.editChart
|
||
span: this.editChart.span,
|
||
height: this.editChart.height,
|
||
type: this.editChart.type,
|
||
unit: this.editChart.unit,
|
||
param: {
|
||
url: this.editChart.param.url
|
||
},
|
||
remark: this.editChart.remark,
|
||
groupId: this.editChart.groupId,
|
||
varType: this.editChart.varType
|
||
}
|
||
|
||
if (valid) {
|
||
if (this.iseditChart) {
|
||
params.id = this.editChart.id
|
||
}
|
||
this.$refs.chartsPreview.show(params)
|
||
}
|
||
})
|
||
} else {
|
||
this.$refs.chartForm.validate((valid) => {
|
||
const text = this.$refs.richTextEditor.getContent()
|
||
if (!text) {
|
||
valid = false
|
||
}
|
||
const params = {
|
||
name: this.editChart.name, // this.editChart
|
||
span: this.editChart.span,
|
||
height: this.editChart.height,
|
||
type: this.editChart.type,
|
||
unit: this.editChart.unit,
|
||
param: {
|
||
text: text
|
||
},
|
||
remark: this.editChart.remark,
|
||
groupId: this.editChart.groupId,
|
||
varType: this.editChart.varType
|
||
}
|
||
|
||
if (valid) {
|
||
if (this.iseditChart) {
|
||
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, key, val) {
|
||
mapping.color[key] = val
|
||
},
|
||
colorRGBtoHex (color) {
|
||
const rgb = color.split(',')
|
||
const r = parseInt(rgb[0].split('(')[1])
|
||
const g = parseInt(rgb[1])
|
||
const b = parseInt(rgb[2].split(')')[0])
|
||
const 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)
|
||
},
|
||
topologyDialogChange (flag, data) {
|
||
this.topologyDialog = flag
|
||
if (data) {
|
||
this.editChart.param.topo = data
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
this.getSuggestMetric()
|
||
},
|
||
watch: {
|
||
chart: {
|
||
deep: true,
|
||
immediate: true,
|
||
handler (n) {
|
||
this.isEdit = true
|
||
if (n.id) {
|
||
if (!n.param.state && n.param.state != Number) {
|
||
n.param.state = '1'
|
||
}
|
||
if (n.param.severity && n.param.severity != Number) {
|
||
n.param.severity = 1
|
||
}
|
||
}
|
||
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.name) {
|
||
this.isEdit = true
|
||
}
|
||
|
||
this.editChart = JSON.parse(JSON.stringify(n))
|
||
if (this.editChart.panelId === 0 && !this.editChart.varType) {
|
||
this.editChart.varType = 1
|
||
}
|
||
|
||
this.panelName = this.editChart.panelName
|
||
this.panelId = this.editChart.panelId
|
||
this.editChart.name = this.editChart.name || ''
|
||
if (!n.groupId || n.groupId == -1) {
|
||
this.editChart.groupId = ''
|
||
}
|
||
if (typeof (this.editChart.param) === 'string') {
|
||
this.editChart.param = JSON.parse(this.editChart.param)
|
||
}
|
||
if (!n.param.nullType) {
|
||
this.editChart.param.nullType = 'null'
|
||
}
|
||
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 if (n.type === 'group') {
|
||
this.setIsGroup()
|
||
} else {
|
||
this.setIsOtherChart()
|
||
n.param && !n.param.legendValue && this.$set(this.editChart.param, 'legendValue', { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' })
|
||
}
|
||
if (n.type === 'logs') {
|
||
this.promqlType = 'log'
|
||
}
|
||
this.$set(this.editChart, 'panelName', this.showPanel.name)
|
||
if (this.showPanel.id || this.from === 'chartTemp') {
|
||
this.panelId = this.showPanel.id
|
||
}
|
||
this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
this.groupArr = []
|
||
response.data.list.forEach((item, index) => {
|
||
if (item.type === 'group') {
|
||
this.groupArr.push({ id: item.id, name: item.name })
|
||
}
|
||
})
|
||
}
|
||
})
|
||
if (n.id || n.name) {
|
||
this.editData(this.editChart, this.showPanel.id)
|
||
} else {
|
||
this.createData(this.showPanel.id, '', n.unit)
|
||
}
|
||
if (this.editChart.param && !this.editChart.param.statistics) {
|
||
this.editChart.param.statistics = 'null'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
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>
|