feat：添加valueMapping 以及处理数据
This commit is contained in:
zhangyu
@@ -41,7 +41,8 @@
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-row :key="index" class="element-item form-row-item" style="" v-for="(item,index) in selection.pen.data.expressArr">
|
||||
<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"
|
||||
@@ -61,7 +62,8 @@
|
||||
{{$t('dashboard.panel.chartForm.legend')}}
|
||||
<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>
|
||||
<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);">
|
||||
@@ -94,7 +96,8 @@
|
||||
</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="" popper-class="chart-box-dropdown-small" size="mini"
|
||||
<el-select class="right-box-row-with-btn" 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>
|
||||
@@ -126,7 +129,8 @@
|
||||
</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="" popper-class="chart-box-dropdown-small" size="mini"
|
||||
<el-select class="right-box-row-with-btn" 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>
|
||||
@@ -136,50 +140,106 @@
|
||||
</div>
|
||||
<!--value mapping-->
|
||||
<el-row class="form-row-title">
|
||||
{{'Thresholds'}} <span style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">（0:Ok > … >2:Critical）</span>
|
||||
{{'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">Level</el-col>
|
||||
<el-col class="thresholds-cell" :span="4">Color</el-col>
|
||||
<el-col class="thresholds-cell" :span="4">Value</el-col>
|
||||
<el-col class="thresholds-cell" :span="8">Animation</el-col>
|
||||
<el-col class="thresholds-cell" :span="4"></el-col>
|
||||
</el-row>
|
||||
<div style="width: 100%">
|
||||
<el-table v-model="selection.pen.data.valueMapping">
|
||||
<el-table-column
|
||||
prop="level"
|
||||
:label="'level'"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="color"
|
||||
:label="'color'"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="value"
|
||||
:label="'value'"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.value" @change="valueMappingValueChange(scope.$index, scope.row)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="animation"
|
||||
:label="'animation'"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
<template slot="header" slot-scope="scope">
|
||||
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="valueMappingDel(scope.$index, scope.row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
|
||||
<el-col class="thresholds-cell" :span="4"> {{item.level}}</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-if="item.showColor">
|
||||
<div :class="{'color-active':item.showType=='fill'}" @click="changeShowPicker(item ,'fill')">Fill</div>
|
||||
<div :class="{'color-active':item.showType=='line'}" @click="changeShowPicker(item , 'line')">Line</div>
|
||||
<div :class="{'color-active':item.showType=='text'}" @click="changeShowPicker(item , 'text')">Text</div>
|
||||
</div>
|
||||
</div>
|
||||
<span> > </span>
|
||||
</span>
|
||||
<span v-else>base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="4">
|
||||
<el-input
|
||||
v-if="item.level!==0"
|
||||
v-model="item.value"
|
||||
@change="valueMappingValueChange(item)"
|
||||
size="small"
|
||||
/>
|
||||
<span v-else>base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="8">
|
||||
<!--线-->
|
||||
<el-select
|
||||
v-model="item.animateType"
|
||||
placeholder="请选择"
|
||||
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"
|
||||
placeholder="请选择"
|
||||
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="4">
|
||||
<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">
|
||||
<i class="nz-icon nz-icon-plus"></i>
|
||||
</div>
|
||||
<div @click="valueMappingAdd()">add</div>
|
||||
|
||||
<!--link-->
|
||||
<el-row class="form-row-title">
|
||||
@@ -392,6 +452,67 @@
|
||||
<!--样式-->
|
||||
<el-collapse-item title="样式" name="4" v-if="selection.pen">
|
||||
<div class="flex flex-warp">
|
||||
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
|
||||
<div>背景颜色</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>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" placeholder="请选择" 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>线条样式</div>
|
||||
<div class="p10 pl0">
|
||||
@@ -576,7 +697,8 @@
|
||||
<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-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>
|
||||
@@ -612,125 +734,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="props-pen-item" v-if="selection.pen && !selection.pen.bkType&&!selection.pen.type">
|
||||
<div>背景颜色</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">
|
||||
<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>
|
||||
</el-collapse-item>
|
||||
<!--动画-->
|
||||
<el-collapse-item title="动画" name="5" v-if="selection.pen&&selection.pen.type">
|
||||
<div class="flex flex-warp">
|
||||
<div class="props-pen-item">
|
||||
<div>动画类型</div>
|
||||
<div class="p10 pl0">
|
||||
<el-select v-model="selection.pen.animateType" placeholder="请选择" 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="props-pen-item">
|
||||
<div>圆点大小（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.animateDotSize"
|
||||
:readonly="readonly"
|
||||
required
|
||||
@change="onChange()"
|
||||
:min="0"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="props-pen-item">
|
||||
<div>线条颜色</div>
|
||||
<div class="p10 pl0">
|
||||
<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 class="props-pen-item">-->
|
||||
<!--<div>快慢</div>-->
|
||||
<!--<div class="p10 pl0">-->
|
||||
<!--<el-slider v-model="selection.pen.animateSpan" :min="1" :max="5"></el-slider>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div class="props-pen-item">-->
|
||||
<!--<div>是否播放 </div>-->
|
||||
<!--<div class="p10 pl0">-->
|
||||
<!--<el-button @click="selection.pen.animateStart=1;onAnimate()" size="mini">-->
|
||||
<!--播放-->
|
||||
<!--</el-button>-->
|
||||
<!--<el-button @click="selection.pen.animateStart=0;onAnimate()" size="mini">-->
|
||||
<!--暂停-->
|
||||
<!--</el-button>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div class="project-content node-content">
|
||||
@@ -746,6 +750,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="project-content-box" style="width: 100%">
|
||||
<!--节点动画-->
|
||||
<div class="project-content-item" v-if="!selection.pen.type">
|
||||
<label>Type：</label>
|
||||
<div class="full pr10">
|
||||
@@ -753,11 +758,48 @@
|
||||
v-model="selection.pen.animateType"
|
||||
size="small"
|
||||
:popper-append-to-body="false"
|
||||
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
|
||||
<el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index" :label="item.name"></el-option>
|
||||
>
|
||||
<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>Type：</label>
|
||||
<div class="full pr10">
|
||||
<el-select v-model="selection.pen.animateType" placeholder="请选择" 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>Type：</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>
|
||||
@@ -775,7 +817,8 @@
|
||||
<div class="project-content-item">
|
||||
<label>Name：</label>
|
||||
<div class="full pr10">
|
||||
<el-input class="input" size="small" v-model="topologyData.data.name" placeholder="请输入名称" @change="changeTopologyOpt"></el-input>
|
||||
<el-input class="input" size="small" v-model="topologyData.data.name" placeholder="请输入名称"
|
||||
@change="changeTopologyOpt"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -975,7 +1018,8 @@
|
||||
<div class="project-content-item half special-select">
|
||||
<label>默认结束箭头：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small" :popper-append-to-body="false"
|
||||
<el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small"
|
||||
:popper-append-to-body="false"
|
||||
@change="changeTopologyOpt('toArrow')">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
@@ -994,7 +1038,8 @@
|
||||
<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">
|
||||
<g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
|
||||
stroke-width="1">
|
||||
<path :d="item.d"></path>
|
||||
<polygon
|
||||
v-if="item.points"
|
||||
@@ -1061,7 +1106,8 @@
|
||||
<div class="project-content-item">
|
||||
<label>Url</label>
|
||||
<div class="full pr10">
|
||||
<el-input class="input" size="small" v-model="topologyData.data.url" placeholder="请输入名称" @change="changeTopologyOpt"></el-input>
|
||||
<el-input class="input" size="small" v-model="topologyData.data.url" placeholder="请输入名称"
|
||||
@change="changeTopologyOpt"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1080,6 +1126,7 @@
|
||||
import chartDataFormat from '../../../charts/chartDataFormat';
|
||||
import promqlInput from "../../../page/dashboard/explore/promqlInput";
|
||||
import {getUUID,resetZIndex} from "../../../common/js/common";
|
||||
|
||||
var rz={
|
||||
methods:{
|
||||
rz(e){
|
||||
@@ -1127,11 +1174,8 @@
|
||||
id:"avg",
|
||||
name:'avg'
|
||||
},{
|
||||
id:"count",
|
||||
name:'count'
|
||||
},{
|
||||
id:"sum",
|
||||
name:'sum'
|
||||
id:"total",
|
||||
name:'total'
|
||||
}
|
||||
],
|
||||
metricList:[], // metric列表
|
||||
@@ -1213,6 +1257,20 @@
|
||||
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"},
|
||||
@@ -1455,6 +1513,30 @@
|
||||
}
|
||||
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';
|
||||
console.log(row);
|
||||
console.log(this.$refs[ref]);
|
||||
this.$nextTick(()=>{
|
||||
this.$refs[ref][0].showPicker=true;
|
||||
})
|
||||
|
||||
},
|
||||
colorChange(val,name){//改变颜色
|
||||
if(name==='arrowColor'){
|
||||
this.selection.pen.fromArrowColor=this.colorRGBtoHex(val);
|
||||
@@ -1464,11 +1546,36 @@
|
||||
}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
|
||||
}
|
||||
})
|
||||
console.log(obj,flag);
|
||||
if(flag){
|
||||
return
|
||||
}
|
||||
obj.showType='';
|
||||
obj.showColor=undefined;
|
||||
},
|
||||
changeTopologyOpt(val,key,isColor){
|
||||
//
|
||||
// getTopology(this.index).data[key]=val;
|
||||
@@ -1487,8 +1594,8 @@
|
||||
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]);
|
||||
@@ -1542,12 +1649,15 @@
|
||||
valueMappingAdd(){
|
||||
this.selection.pen.data.valueMapping.push({
|
||||
color:{
|
||||
border:'#000',
|
||||
bac:'#fff',
|
||||
text:'#000',
|
||||
line:'#000000',
|
||||
fill:'#ffffff',
|
||||
text:'#000000',
|
||||
},
|
||||
animation:'upDown',
|
||||
showColor:undefined,
|
||||
animateType:this.selection.pen.type?1:'upDown',
|
||||
value:'',
|
||||
level:this.selection.pen.data.valueMapping.length,
|
||||
showType:'fill',//bac text border
|
||||
});
|
||||
},
|
||||
valueMappingValueChange(index,row){
|
||||
@@ -1557,15 +1667,11 @@
|
||||
console.log(index,row)
|
||||
},
|
||||
inputFocus(e){
|
||||
// console.log(e);
|
||||
// console.log(e.path[2]);
|
||||
// e.path[2].classList.add('el-input-number-show-button');
|
||||
console.log(e.path[2].children[0],e.path[2].children[1]);
|
||||
e.path[2].children[0].setAttribute("tabindex","0");
|
||||
e.path[2].children[1].setAttribute("tabindex","1");
|
||||
},
|
||||
inputBlur(e){
|
||||
// console.log(e);
|
||||
},
|
||||
colorPickerClick(ref){
|
||||
this.$refs[ref].showPicker=true;
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1584,10 +1690,12 @@
|
||||
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;
|
||||
@@ -1597,6 +1705,7 @@
|
||||
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;
|
||||
}
|
||||
@@ -1606,6 +1715,10 @@
|
||||
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 {
|
||||
@@ -1615,10 +1728,12 @@
|
||||
border-radius: 10px 0 0 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.project-content {
|
||||
margin: 10px;
|
||||
height: calc(100% - 50px);
|
||||
overflow-y: auto;
|
||||
|
||||
.project-content-title {
|
||||
background: #F6F6F6;
|
||||
padding-left: 10px;
|
||||
@@ -1630,20 +1745,24 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.project-content-item {
|
||||
padding-left: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
@@ -1651,51 +1770,62 @@
|
||||
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--label-top .el-form-item__label{
|
||||
|
||||
/deep/ .el-form-item__label {
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1707,10 +1837,12 @@
|
||||
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%;
|
||||
@@ -1720,10 +1852,12 @@
|
||||
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);
|
||||
@@ -1740,11 +1874,13 @@
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-collapse {
|
||||
background: #f6f6f6;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/deep/ .el-collapse-item__header {
|
||||
padding: 0 10px;
|
||||
background-color: #F9F9F9;
|
||||
@@ -1767,16 +1903,42 @@
|
||||
}
|
||||
|
||||
|
||||
/*/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase{*/
|
||||
/*visibility: hidden;*/
|
||||
/*}*/
|
||||
/*/deep/ .el-input-number-show-button{*/
|
||||
/*/deep/ .el-input-number__decrease,/deep/ .el-input-number__increase{*/
|
||||
/*visibility: visible;*/
|
||||
/*}*/
|
||||
/*}*/
|
||||
/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;
|
||||
}
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
@@ -1793,6 +1955,7 @@
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.special-select .el-select.el-select--small {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1823,6 +1986,7 @@
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
padding-bottom: 20px;
|
||||
|
||||
.iconfont {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1846,9 +2010,18 @@
|
||||
|
||||
.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 {
|
||||
@@ -1886,17 +2059,61 @@
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.color-content {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
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;
|
||||
@@ -1905,6 +2122,7 @@
|
||||
width: calc(100% - 32px);
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.color-show .color-text {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
@@ -1912,6 +2130,7 @@
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.color-show-left {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@@ -1919,11 +2138,13 @@
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.color-arrows {
|
||||
color: #C0C4CC;
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
}
|
||||
|
||||
.color-arrows .nz-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -18,25 +18,25 @@ export const Tools=[
|
||||
{
|
||||
group:'基本形状',
|
||||
children:[
|
||||
{
|
||||
name:'rectangleImg',
|
||||
icon:'icon-rect',
|
||||
data:{
|
||||
text:'rect',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
paddingLeft:10,
|
||||
paddingRight:10,
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
name:'rectangleImg',
|
||||
icon: '\ue680',
|
||||
iconFamily: 'nz-icon',
|
||||
iconColor: ''
|
||||
}
|
||||
},
|
||||
// {
|
||||
// name:'rectangleImg',
|
||||
// icon:'icon-rect',
|
||||
// data:{
|
||||
// text:'rect',
|
||||
// rect:{
|
||||
// width:100,
|
||||
// height:100
|
||||
// },
|
||||
// paddingLeft:10,
|
||||
// paddingRight:10,
|
||||
// paddingTop:10,
|
||||
// paddingBottom:10,
|
||||
// name:'rectangleImg',
|
||||
// icon: '\ue680',
|
||||
// iconFamily: 'nz-icon',
|
||||
// iconColor: ''
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: 'rectangle',
|
||||
icon: 'icon-cube',
|
||||
@@ -165,45 +165,11 @@ export const Tools=[
|
||||
name:'pentagram'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'image',
|
||||
icon:'icon-image',
|
||||
data:{
|
||||
text:'Nezha',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
name:'image',
|
||||
image:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg'
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
group: '自定义图片',
|
||||
children: [
|
||||
{
|
||||
name: 'rectangle',
|
||||
icon: 'icon-image',
|
||||
data: {
|
||||
text: 'Nezha',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
name: 'rectangle',
|
||||
image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg',
|
||||
imageRatio:true,
|
||||
"imageAlign":"center",
|
||||
iconRect:{
|
||||
"width":80,
|
||||
"height":80,
|
||||
},
|
||||
"fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
|
||||
}
|
||||
},
|
||||
],
|
||||
group: '自定义组件',
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div style="width: 400px;height: 400px;">
|
||||
<span class="temp-dom"></span>
|
||||
<line-chart-block v-if="true"
|
||||
:key="'inner' + 0"
|
||||
<line-chart-block v-if="chartData.type !== 'table'"
|
||||
:key="'inner' + chartData.id"
|
||||
:from="'project'"
|
||||
:ref="'editChart' + 0"
|
||||
:temp-dom="tempDom"
|
||||
@@ -13,6 +13,16 @@
|
||||
:chart-data="chartData">
|
||||
|
||||
</line-chart-block>
|
||||
<!--<chart-table v-if="chartData.type === 'table'"-->
|
||||
<!--:ref="'editChart'+0"-->
|
||||
<!--:key="'inner' + 0"-->
|
||||
<!--:from="'project'"-->
|
||||
<!--:ref="'editChart' + 0"-->
|
||||
<!--:is-lock="true"-->
|
||||
<!--:panel-id="-1"-->
|
||||
<!--:chart-data="chartData"-->
|
||||
<!--:chart-index="0"></chart-table>-->
|
||||
<>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -88,10 +98,12 @@
|
||||
valueMapping:{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},
|
||||
};
|
||||
chartData.span=12;
|
||||
this.chartData=chartData;
|
||||
console.log(chartData);
|
||||
setTimeout(()=>{
|
||||
this.getChartData(chartData,0);
|
||||
});
|
||||
this.chartData=chartData
|
||||
|
||||
},
|
||||
// 获取一个图表具体数据,图表信息，图表位置index
|
||||
getChartData(chartInfo, pos, filterType) {
|
||||
@@ -130,21 +142,9 @@
|
||||
}
|
||||
|
||||
let step = bus.getStep(startTime, endTime);
|
||||
setTimeout(()=>{
|
||||
this.$nextTick(() => {
|
||||
// const axiosArr = chartItem.elements.map((ele) => {
|
||||
// const filterItem = ele;
|
||||
// let query = encodeURIComponent(filterItem.expression);
|
||||
// if((chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'||chartInfo.type==='table')&&chartInfo.param){//如果是这三个 默认给connected
|
||||
// chartInfo.param.nullType=chartInfo.param.nullType||'connected';
|
||||
// query+='&nullType='+chartInfo.param.nullType;
|
||||
// }
|
||||
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
|
||||
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
// }
|
||||
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
// });
|
||||
// 一个图表的所有element单独获取数据
|
||||
axios.all(chartInfo.res).then((res) => {
|
||||
let res=chartItem.res;
|
||||
console.log(res);
|
||||
if (res.length > 0) {
|
||||
let series = [];
|
||||
@@ -174,6 +174,7 @@
|
||||
}
|
||||
} else {
|
||||
response.data.result.forEach((queryItem, resIndex) => {
|
||||
console.log(queryItem, resIndex);
|
||||
let seriesItem = {
|
||||
theData: {
|
||||
name: '',
|
||||
@@ -310,7 +311,7 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log(this.$refs['editChart' + chartItem.id],chartItem.id);
|
||||
if (this.$refs['editChart' + chartItem.id]) {
|
||||
let chartData = {
|
||||
chartItem: chartItem,
|
||||
@@ -339,6 +340,8 @@
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
||||
} else {
|
||||
console.log(123123123123123123,chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
||||
}
|
||||
@@ -382,13 +385,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
this.$message.error(error.toString());
|
||||
console.error(error)
|
||||
}
|
||||
});
|
||||
});
|
||||
},100)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -9,10 +9,12 @@
|
||||
<!--工具栏-->
|
||||
<span class="project-topology-tool">
|
||||
<el-dropdown trigger="click" size="small" placement="bottom-start">
|
||||
<span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i class="nz-icon nz-icon-arrow-down"></i></span>
|
||||
<span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
|
||||
class="nz-icon nz-icon-arrow-down"></i></span>
|
||||
<el-dropdown-menu slot="dropdown" @click="dropdownClick">
|
||||
<div style="height: 450px">
|
||||
<el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto" class="project-topology-add-node">
|
||||
<el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
|
||||
class="project-topology-add-node">
|
||||
<!--<div class="drag-header">——</div>-->
|
||||
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index">
|
||||
<el-collapse-item :title="item.group" :name="item.group">
|
||||
@@ -53,7 +55,8 @@
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<div class="flex middle special-select mb10" style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
|
||||
<div class="flex middle special-select mb10"
|
||||
style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
|
||||
<div class="full pr10">
|
||||
<el-select v-model="lineName" placeholder="请选择" size="small"
|
||||
:popper-append-to-body="false"
|
||||
@@ -425,41 +428,44 @@
|
||||
this.getTopologyData().then((data)=>{
|
||||
this.openTopologyData(data).then(()=>{
|
||||
//获取对应的值 给节点 连线添加对应动画
|
||||
console.log(data);
|
||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
||||
this.chartGetData=[];
|
||||
let axiosArr=[];
|
||||
let promiseArr=[];
|
||||
let self=this;
|
||||
let pensPromise=(pen, arr,index)=>{
|
||||
return new Promise(function(resolve, reject) {
|
||||
Promise.all(arr).then((res)=>{
|
||||
self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
|
||||
self.setAnimation(pen,self.chartGetData[index].res);
|
||||
resolve()
|
||||
});
|
||||
});
|
||||
};
|
||||
let endTime=this.filterTime[1];
|
||||
let startTime=this.filterTime[0];
|
||||
let step=bus.getStep(startTime,endTime);
|
||||
data.pens&&data.pens.forEach(item=>{
|
||||
console.log(item.id);
|
||||
data.pens&&data.pens.forEach((item,index)=>{
|
||||
this.chartGetData.push({id:item.id,res:[]});
|
||||
let arr=item.data.expressArr.map((ele)=>{
|
||||
let query=encodeURIComponent(ele);
|
||||
if(!query){
|
||||
return new Promise(resolve=>{
|
||||
resolve({data:"",status:'no query'});
|
||||
})
|
||||
}
|
||||
query+='&nullType='+'connected';
|
||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
|
||||
});
|
||||
axiosArr.push({item,arr});
|
||||
promiseArr.push(pensPromise(item,arr,index))
|
||||
});
|
||||
|
||||
axios.all(axiosArr).then(all=>{
|
||||
all.forEach((obj,index)=>{
|
||||
this.chartGetData[index].res=obj.arr;
|
||||
if(obj.item.type===0){// 判断valueMapping 给相应的状态
|
||||
// obj.item.animateType='warning';
|
||||
if(obj.item.animateType){
|
||||
onChangeAnimate(obj.item,obj.item.animateType)
|
||||
}
|
||||
}else if(obj.item.type===1){// 判断valueMapping 给相应的状态
|
||||
// onChangeAnimateLine(obj.item,'beads')
|
||||
}
|
||||
})
|
||||
}).then(()=>{
|
||||
Promise.all(promiseArr).then((res)=>{
|
||||
getTopology(this.topologyIndex).open(data);
|
||||
getTopology(this.topologyIndex).lock(1);
|
||||
});
|
||||
|
||||
|
||||
this.getNodesArr();
|
||||
})
|
||||
});
|
||||
@@ -469,41 +475,44 @@
|
||||
this.getTopologyData().then((data)=>{
|
||||
this.openTopologyData(data).then(()=>{
|
||||
//获取对应的值 给节点 连线添加对应动画
|
||||
console.log(data);
|
||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
||||
this.chartGetData=[];
|
||||
let axiosArr=[];
|
||||
let promiseArr=[];
|
||||
let self=this;
|
||||
let pensPromise=(pen, arr,index)=>{
|
||||
return new Promise(function(resolve, reject) {
|
||||
Promise.all(arr).then((res)=>{
|
||||
self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
|
||||
self.setAnimation(pen,self.chartGetData[index].res);
|
||||
resolve()
|
||||
});
|
||||
});
|
||||
};
|
||||
let endTime=this.filterTime[1];
|
||||
let startTime=this.filterTime[0];
|
||||
let step=bus.getStep(startTime,endTime);
|
||||
data.pens&&data.pens.forEach(item=>{
|
||||
console.log(item.id);
|
||||
data.pens&&data.pens.forEach((item,index)=>{
|
||||
this.chartGetData.push({id:item.id,res:[]});
|
||||
let arr=item.data.expressArr.map((ele)=>{
|
||||
let query=encodeURIComponent(ele);
|
||||
if(!query){
|
||||
return new Promise(resolve=>{
|
||||
resolve({data:"",status:'no query'});
|
||||
})
|
||||
}
|
||||
query+='&nullType='+'connected';
|
||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
|
||||
});
|
||||
axiosArr.push({item,arr});
|
||||
promiseArr.push(pensPromise(item,arr,index))
|
||||
});
|
||||
|
||||
axios.all(axiosArr).then(all=>{
|
||||
all.forEach((obj,index)=>{
|
||||
this.chartGetData[index].res=obj.arr;
|
||||
if(obj.item.type===0){// 判断valueMapping 给相应的状态
|
||||
// obj.item.animateType='warning';
|
||||
if(obj.item.animateType){
|
||||
onChangeAnimate(obj.item,obj.item.animateType)
|
||||
}
|
||||
}else if(obj.item.type===1){// 判断valueMapping 给相应的状态
|
||||
// onChangeAnimateLine(obj.item,'beads')
|
||||
}
|
||||
})
|
||||
}).then(()=>{
|
||||
Promise.all(promiseArr).then((res)=>{
|
||||
getTopology(this.topologyIndex).open(data);
|
||||
getTopology(this.topologyIndex).lock(1);
|
||||
});
|
||||
|
||||
|
||||
this.getNodesArr();
|
||||
})
|
||||
});
|
||||
@@ -527,12 +536,165 @@
|
||||
getTopologyData(){
|
||||
return new Promise(resolve=>{
|
||||
let data=localStorage.getItem('data');
|
||||
data=data?JSON.parse(data):{bkColor:'#FFFFFF',gridSize:10,gridColor:'#ededed',lineWidth:1,ruleColor:"#4e4e4e"};
|
||||
data=data?JSON.parse(data):{
|
||||
bkColor:'#FFFFFF',
|
||||
gridSize:10,
|
||||
gridColor:'#ededed',
|
||||
lineWidth:1,
|
||||
ruleColor:"#4e4e4e"
|
||||
};
|
||||
this.saveData={...data};
|
||||
resolve(data);
|
||||
});
|
||||
},
|
||||
//赋值动画
|
||||
setAnimation(pen,res){// 根据所有res的状态 赋值动画
|
||||
let maxLevel=0;
|
||||
if(res.length>0){
|
||||
res.forEach((response,innerPos)=>{
|
||||
if(response.status!=='success'){
|
||||
return
|
||||
}
|
||||
if (response.data.result) {
|
||||
response.data.result.forEach((queryItem, resIndex) => {
|
||||
queryItem.showValue=9;
|
||||
pen.data.valueMapping.forEach((item,index)=>{
|
||||
if(item.value==='base'){return}
|
||||
if( queryItem.showValue >item.value){
|
||||
queryItem.level=item.level;
|
||||
if(maxLevel<item.level){
|
||||
maxLevel=item.level
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
console.log(maxLevel)
|
||||
|
||||
if(maxLevel!==0){
|
||||
if(pen.type===0){// 判断valueMapping 给相应的状态
|
||||
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
|
||||
onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
|
||||
pen.font.color=selLevel.color.text;
|
||||
}else if(pen.type===1){// 判断valueMapping 给相应的状态
|
||||
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
|
||||
|
||||
pen.animateColor=selLevel.color.fill;
|
||||
pen.strokeStyle=selLevel.color.line;
|
||||
pen.animateType=selLevel.animateType;
|
||||
onChangeAnimateLine(pen,pen.animateType);
|
||||
pen.font.color=selLevel.color.text;
|
||||
}
|
||||
} else {
|
||||
if(pen.type===0&&pen.animatePlay){// 判断valueMapping 给相应的状态
|
||||
onChangeAnimate(pen,pen.animateType);
|
||||
}else if(pen.type===1&&pen.animatePlay){// 判断valueMapping 给相应的状态
|
||||
onChangeAnimateLine(pen,pen.animateType);
|
||||
}
|
||||
}
|
||||
},
|
||||
computeData(res,type,pen){//处理别名 以及 根据type显示对应的值
|
||||
if(res.length>0){
|
||||
res.forEach((response,innerPos)=>{
|
||||
if(response.status!=='success'){
|
||||
return
|
||||
}
|
||||
|
||||
if (response.data.result) {
|
||||
response.data.result.forEach((queryItem, resIndex) => {
|
||||
// 图表中每条线的名字,后半部分
|
||||
let host = '';//up,
|
||||
if (queryItem.metric.__name__) {
|
||||
host = `${queryItem.metric.__name__}{`;//up,
|
||||
}
|
||||
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
|
||||
// 设置时间-数据格式对
|
||||
let tempArr = [];
|
||||
let dpsArr = [];
|
||||
tempArr = queryItem.values;
|
||||
dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
|
||||
dpsArr = dpsArr.map(item => {
|
||||
return [item[0], [item[1][0], Number(item[1][1])]]
|
||||
});
|
||||
// 判断是否有数据, && tagsArr.length > 0
|
||||
if (dpsArr.length) {
|
||||
tagsArr.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${queryItem.metric[tag]}",`;
|
||||
}
|
||||
});
|
||||
if (host.endsWith(',')) {
|
||||
host = host.substr(0, host.length - 1);
|
||||
}
|
||||
if (queryItem.metric.__name__) {
|
||||
host += "}";
|
||||
}
|
||||
if (!host || host === '') {
|
||||
host = pen.data.expressArr[innerPos];
|
||||
}
|
||||
//处理legend别名
|
||||
let alias = this.dealLegendAlias(host, pen.data.legends[innerPos]);
|
||||
if (!alias || alias === '') {
|
||||
alias = host;
|
||||
}
|
||||
queryItem.legend={name: host+"-"+pen.data.legends[innerPos]+"-" + resIndex, alias: alias};
|
||||
queryItem.showValue=this.getMetricTypeValue(queryItem,type);
|
||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
return res
|
||||
},
|
||||
dealLegendAlias:function(legend,expression){
|
||||
if(/\{\{.+\}\}/.test(expression)){
|
||||
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
|
||||
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
|
||||
let reg=new RegExp(label+'=".+?"');
|
||||
let value=null;
|
||||
if(reg.test(legend)){
|
||||
let find=legend.match(reg)[0];
|
||||
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
|
||||
}
|
||||
return value?value:label;
|
||||
});
|
||||
return labelValue
|
||||
}else{
|
||||
return expression;
|
||||
}
|
||||
},
|
||||
getMetricTypeValue(queryItem,type){
|
||||
let copy='';
|
||||
copy=JSON.parse(JSON.stringify(queryItem.values));
|
||||
switch (type) {
|
||||
case 'min':
|
||||
let min =copy.sort((x,y)=>{return parseFloat(x[1]) - parseFloat(y[1])})[0][1];
|
||||
return min;
|
||||
case 'max':
|
||||
let max =copy.sort((x,y)=>{return parseFloat(y[1]) - parseFloat(x[1])})[0][1];
|
||||
return max;
|
||||
case 'avg':
|
||||
copy = copy.map(t=>parseFloat(t[1]));
|
||||
let sum = eval(copy.join('+'));
|
||||
let avg = sum / copy.length;
|
||||
return avg;
|
||||
case 'last':
|
||||
let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1];
|
||||
return last;
|
||||
case 'first':
|
||||
let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length][1];
|
||||
return first;
|
||||
case 'total':
|
||||
copy = copy.map(t=>parseFloat(t[1]));
|
||||
let total = eval(copy.join('+'));
|
||||
return total;
|
||||
}
|
||||
},
|
||||
//获取module
|
||||
getModule(){
|
||||
this.projectInfo.loading=true;
|
||||
@@ -658,13 +820,14 @@
|
||||
},
|
||||
|
||||
onMessage(event,data){
|
||||
console.log('onMessage',event,data);
|
||||
console.log(getTopology(this.topologyIndex))
|
||||
// console.log('onMessage',event,data);
|
||||
// console.log(getTopology(this.topologyIndex))
|
||||
if(getTopology(this.topologyIndex)){
|
||||
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
||||
if(this.$refs.topTool){
|
||||
this.$refs.topTool.redoFlag=false
|
||||
};
|
||||
}
|
||||
;
|
||||
}
|
||||
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
|
||||
if(data.type===0&& !data.data){
|
||||
@@ -679,7 +842,17 @@
|
||||
lineWidth:this.nodeDefaultWidth(data.name),
|
||||
iconToolState:true,
|
||||
//chart 配置项
|
||||
valueMapping:[],
|
||||
valueMapping:[{
|
||||
color:{
|
||||
line:'#000000',
|
||||
fill:'#ffffff',
|
||||
text:'#000000',
|
||||
},
|
||||
value:'base',
|
||||
animateType:'base',
|
||||
level:0,
|
||||
base:true,
|
||||
}],
|
||||
expressArr:[],
|
||||
legends:[],
|
||||
tooltipShow:true,
|
||||
@@ -703,7 +876,17 @@
|
||||
toArrowColor:data.toArrowColor,
|
||||
lineWidth:1,
|
||||
//chart 配置项
|
||||
valueMapping:[],
|
||||
valueMapping:[{
|
||||
color:{
|
||||
border:'#000000',
|
||||
bac:'#ffffff',
|
||||
text:'#000000',
|
||||
},
|
||||
value:'base',
|
||||
animateType:'base',
|
||||
level:0,
|
||||
base:true,
|
||||
}],
|
||||
expressArr:[],
|
||||
legends:[],
|
||||
tooltipShow:true,
|
||||
@@ -721,11 +904,6 @@
|
||||
data.lineWidth=data.data.lineWidth;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// if(event==='addNode'&&data.name==='rectangleImg'){
|
||||
// data.lineWidth=0;
|
||||
// }
|
||||
switch(event){
|
||||
case 'moveInNode':
|
||||
case 'moveInLine':
|
||||
@@ -734,7 +912,6 @@
|
||||
this.timer3=null
|
||||
}
|
||||
this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
|
||||
console.log(this.chartData);
|
||||
this.tooltipPosition.show=true;
|
||||
break;
|
||||
case 'moveOutNode':
|
||||
@@ -1102,6 +1279,7 @@
|
||||
item.fillStyle=item.data.fillStyle;
|
||||
item.strokeStyle=item.data.strokeStyle;
|
||||
item.animatePlay=item.data.animatePlay;
|
||||
item.font.color="#000000";
|
||||
}else if(item.type===1){
|
||||
item.animateColor=item.data.animateColor;
|
||||
item.strokeStyle=item.data.strokeStyle;
|
||||
@@ -1109,6 +1287,7 @@
|
||||
item.fromArrowColor=item.data.fromArrowColor;
|
||||
item.toArrowColor=item.data.toArrowColor;
|
||||
item.animatePlay=item.data.animatePlay;
|
||||
item.font.color="#000000";
|
||||
}
|
||||
})
|
||||
let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
|
||||
@@ -1236,16 +1415,19 @@
|
||||
background-color: #ffffff;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-collapse-item__header.is-active {
|
||||
background: #F6F6F6;
|
||||
ont-family: Roboto-Bold;
|
||||
font-size: 14px;
|
||||
color: #FA901C;
|
||||
font-weight: 700;
|
||||
|
||||
el-collapse-item__arrow {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
padding: 0 10px;
|
||||
background-color: #ffffff;
|
||||
@@ -1267,6 +1449,7 @@
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding: 12px;
|
||||
display: inline-block;
|
||||
@@ -1328,19 +1511,23 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons:hover {
|
||||
.delIcon {
|
||||
/*display: inline-block;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
line-height: 30px;
|
||||
|
||||
.el-icon-plus {
|
||||
font-size: 12px;
|
||||
color: #FA901C;
|
||||
margin: 0 8px 0 15px;
|
||||
}
|
||||
|
||||
.el-upload--picture-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -1350,13 +1537,16 @@
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-upload--picture-card:hover, .el-upload:focus {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader:active el-upload--picture-card {
|
||||
color: #DB8B8B;
|
||||
}
|
||||
|
||||
.avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
|
||||
color: #DB8B8B;
|
||||
}
|
||||
@@ -1512,6 +1702,7 @@
|
||||
display: inline-flex;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.el-dropdown-title {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DEDEDE;
|
||||
@@ -1520,10 +1711,12 @@
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
line-height: 28px;
|
||||
|
||||
.icon-cube {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -1585,6 +1778,7 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.special-select svg {
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
@@ -1593,12 +1787,15 @@
|
||||
.special-select .el-select.el-select--small {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.special-select /deep/ .el-select-dropdown {
|
||||
width: 75px !important;
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user