feat：添加valueMapping 以及处理数据
This commit is contained in:
zhangyu
@@ -41,7 +41,8 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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
|
<promql-input
|
||||||
:expression-list="selection.pen.data.expressArr"
|
:expression-list="selection.pen.data.expressArr"
|
||||||
:id="index"
|
:id="index"
|
||||||
@@ -61,7 +62,8 @@
|
|||||||
{{$t('dashboard.panel.chartForm.legend')}}
|
{{$t('dashboard.panel.chartForm.legend')}}
|
||||||
<el-popover placement="top" trigger="hover" width="211">
|
<el-popover placement="top" trigger="hover" width="211">
|
||||||
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
|
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
|
||||||
<i 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-popover>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col style="width: calc(100% - 120px);">
|
<el-col style="width: calc(100% - 120px);">
|
||||||
@@ -94,7 +96,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!--chart aggregation-->
|
<!--chart aggregation-->
|
||||||
<el-form-item :label="$t('dashboard.panel.chartForm.aggregation')" class="half-form-item" prop="type">
|
<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">
|
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">
|
<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>
|
<span class="panel-dropdown-label-txt">{{item.name}}</span>
|
||||||
@@ -126,7 +129,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!--chart type-->
|
<!--chart type-->
|
||||||
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="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">
|
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">
|
<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>
|
<span class="panel-dropdown-label-txt">{{item.name}}</span>
|
||||||
@@ -136,50 +140,106 @@
|
|||||||
</div>
|
</div>
|
||||||
<!--value mapping-->
|
<!--value mapping-->
|
||||||
<el-row class="form-row-title">
|
<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>
|
</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>
|
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
|
||||||
<template slot-scope="scope">
|
<el-col class="thresholds-cell" :span="4"> {{item.level}}</el-col>
|
||||||
<el-button
|
<el-col class="thresholds-cell" :span="4">
|
||||||
size="mini"
|
<span v-if="item.level!==0">
|
||||||
type="danger"
|
<div style="display: inline-block">
|
||||||
@click="valueMappingDel(scope.$index, scope.row)">Delete</el-button>
|
<div @click="colorPickerClickTable('colorPickerBac'+item.level,item)"
|
||||||
</template>
|
class="color-show"
|
||||||
</el-table-column>
|
v-clickoutside="(e)=>{colorOut(item,e)}"
|
||||||
</el-table>
|
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>
|
||||||
<div @click="valueMappingAdd()">add</div>
|
|
||||||
|
|
||||||
<!--link-->
|
<!--link-->
|
||||||
<el-row class="form-row-title">
|
<el-row class="form-row-title">
|
||||||
@@ -392,6 +452,67 @@
|
|||||||
<!--样式-->
|
<!--样式-->
|
||||||
<el-collapse-item title="样式" name="4" v-if="selection.pen">
|
<el-collapse-item title="样式" name="4" v-if="selection.pen">
|
||||||
<div class="flex flex-warp">
|
<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 class="props-pen-item special-select">
|
||||||
<div>线条样式</div>
|
<div>线条样式</div>
|
||||||
<div class="p10 pl0">
|
<div class="p10 pl0">
|
||||||
@@ -576,7 +697,8 @@
|
|||||||
<div class="color-show-left" :style="{background:selection.pen.strokeStyle}"></div>
|
<div class="color-show-left" :style="{background:selection.pen.strokeStyle}"></div>
|
||||||
<span class="color-text"> {{selection.pen.strokeStyle}}</span>
|
<span class="color-text"> {{selection.pen.strokeStyle}}</span>
|
||||||
<span class="color-arrows">
|
<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>
|
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['strokeStyle']&&$refs['strokeStyle'].showPicker"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -612,125 +734,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<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-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
<div class="project-content node-content">
|
<div class="project-content node-content">
|
||||||
@@ -746,6 +750,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-content-box" style="width: 100%">
|
<div class="project-content-box" style="width: 100%">
|
||||||
|
<!--节点动画-->
|
||||||
<div class="project-content-item" v-if="!selection.pen.type">
|
<div class="project-content-item" v-if="!selection.pen.type">
|
||||||
<label>Type：</label>
|
<label>Type：</label>
|
||||||
<div class="full pr10">
|
<div class="full pr10">
|
||||||
@@ -753,11 +758,48 @@
|
|||||||
v-model="selection.pen.animateType"
|
v-model="selection.pen.animateType"
|
||||||
size="small"
|
size="small"
|
||||||
:popper-append-to-body="false"
|
: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>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
@@ -775,7 +817,8 @@
|
|||||||
<div class="project-content-item">
|
<div class="project-content-item">
|
||||||
<label>Name：</label>
|
<label>Name：</label>
|
||||||
<div class="full pr10">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -975,7 +1018,8 @@
|
|||||||
<div class="project-content-item half special-select">
|
<div class="project-content-item half special-select">
|
||||||
<label>默认结束箭头：</label>
|
<label>默认结束箭头：</label>
|
||||||
<div class="full pr10 h32">
|
<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')">
|
@change="changeTopologyOpt('toArrow')">
|
||||||
<div slot="prefix">
|
<div slot="prefix">
|
||||||
<div class="icon-item">
|
<div class="icon-item">
|
||||||
@@ -994,7 +1038,8 @@
|
|||||||
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
|
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
|
||||||
<div class="icon-item">
|
<div class="icon-item">
|
||||||
<svg>
|
<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>
|
<path :d="item.d"></path>
|
||||||
<polygon
|
<polygon
|
||||||
v-if="item.points"
|
v-if="item.points"
|
||||||
@@ -1061,7 +1106,8 @@
|
|||||||
<div class="project-content-item">
|
<div class="project-content-item">
|
||||||
<label>Url</label>
|
<label>Url</label>
|
||||||
<div class="full pr10">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1080,6 +1126,7 @@
|
|||||||
import chartDataFormat from '../../../charts/chartDataFormat';
|
import chartDataFormat from '../../../charts/chartDataFormat';
|
||||||
import promqlInput from "../../../page/dashboard/explore/promqlInput";
|
import promqlInput from "../../../page/dashboard/explore/promqlInput";
|
||||||
import {getUUID,resetZIndex} from "../../../common/js/common";
|
import {getUUID,resetZIndex} from "../../../common/js/common";
|
||||||
|
|
||||||
var rz={
|
var rz={
|
||||||
methods:{
|
methods:{
|
||||||
rz(e){
|
rz(e){
|
||||||
@@ -1127,11 +1174,8 @@
|
|||||||
id:"avg",
|
id:"avg",
|
||||||
name:'avg'
|
name:'avg'
|
||||||
},{
|
},{
|
||||||
id:"count",
|
id:"total",
|
||||||
name:'count'
|
name:'total'
|
||||||
},{
|
|
||||||
id:"sum",
|
|
||||||
name:'sum'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
metricList:[], // metric列表
|
metricList:[], // metric列表
|
||||||
@@ -1213,6 +1257,20 @@
|
|||||||
looks:true,
|
looks:true,
|
||||||
},
|
},
|
||||||
data:{},
|
data:{},
|
||||||
|
bkTypeOption:[
|
||||||
|
{
|
||||||
|
id:0,
|
||||||
|
name:'X'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
name:'→'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:2,
|
||||||
|
name:'↑'
|
||||||
|
}
|
||||||
|
],
|
||||||
penDash:[
|
penDash:[
|
||||||
{d:'M5 14 l85 0',"stroke-dasharray":""},
|
{d:'M5 14 l85 0',"stroke-dasharray":""},
|
||||||
{d:'M5 14 l85 0',"stroke-dasharray":"5,5"},
|
{d:'M5 14 l85 0',"stroke-dasharray":"5,5"},
|
||||||
@@ -1455,6 +1513,30 @@
|
|||||||
}
|
}
|
||||||
this.onChange();
|
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){//改变颜色
|
colorChange(val,name){//改变颜色
|
||||||
if(name==='arrowColor'){
|
if(name==='arrowColor'){
|
||||||
this.selection.pen.fromArrowColor=this.colorRGBtoHex(val);
|
this.selection.pen.fromArrowColor=this.colorRGBtoHex(val);
|
||||||
@@ -1464,11 +1546,36 @@
|
|||||||
}else{
|
}else{
|
||||||
this.selection.pen[name]=this.colorRGBtoHex(val);
|
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.selection.pen.data[name]=this.colorRGBtoHex(val);
|
||||||
|
|
||||||
|
|
||||||
this.onChange();
|
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){
|
changeTopologyOpt(val,key,isColor){
|
||||||
//
|
//
|
||||||
// getTopology(this.index).data[key]=val;
|
// getTopology(this.index).data[key]=val;
|
||||||
@@ -1487,8 +1594,8 @@
|
|||||||
colorRGBtoHex(color){//获取颜色16进制数
|
colorRGBtoHex(color){//获取颜色16进制数
|
||||||
if(!color){
|
if(!color){
|
||||||
return ""
|
return ""
|
||||||
}
|
};
|
||||||
;
|
if(color.length<=7){return color}
|
||||||
let rgb=color.split(',');
|
let rgb=color.split(',');
|
||||||
let r=parseInt(rgb[0].split('(')[1]);
|
let r=parseInt(rgb[0].split('(')[1]);
|
||||||
let g=parseInt(rgb[1]);
|
let g=parseInt(rgb[1]);
|
||||||
@@ -1542,12 +1649,15 @@
|
|||||||
valueMappingAdd(){
|
valueMappingAdd(){
|
||||||
this.selection.pen.data.valueMapping.push({
|
this.selection.pen.data.valueMapping.push({
|
||||||
color:{
|
color:{
|
||||||
border:'#000',
|
line:'#000000',
|
||||||
bac:'#fff',
|
fill:'#ffffff',
|
||||||
text:'#000',
|
text:'#000000',
|
||||||
},
|
},
|
||||||
animation:'upDown',
|
showColor:undefined,
|
||||||
|
animateType:this.selection.pen.type?1:'upDown',
|
||||||
value:'',
|
value:'',
|
||||||
|
level:this.selection.pen.data.valueMapping.length,
|
||||||
|
showType:'fill',//bac text border
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
valueMappingValueChange(index,row){
|
valueMappingValueChange(index,row){
|
||||||
@@ -1557,15 +1667,11 @@
|
|||||||
console.log(index,row)
|
console.log(index,row)
|
||||||
},
|
},
|
||||||
inputFocus(e){
|
inputFocus(e){
|
||||||
// console.log(e);
|
console.log(e.path[2].children[0],e.path[2].children[1]);
|
||||||
// console.log(e.path[2]);
|
e.path[2].children[0].setAttribute("tabindex","0");
|
||||||
// e.path[2].classList.add('el-input-number-show-button');
|
e.path[2].children[1].setAttribute("tabindex","1");
|
||||||
},
|
},
|
||||||
inputBlur(e){
|
inputBlur(e){
|
||||||
// console.log(e);
|
|
||||||
},
|
|
||||||
colorPickerClick(ref){
|
|
||||||
this.$refs[ref].showPicker=true;
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1584,10 +1690,12 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.props-box /deep/ .el-tabs--card > .el-tabs__header {
|
.props-box /deep/ .el-tabs--card > .el-tabs__header {
|
||||||
background: #EEEEEE;
|
background: #EEEEEE;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
font-family: Roboto-Bold;
|
font-family: Roboto-Bold;
|
||||||
@@ -1597,6 +1705,7 @@
|
|||||||
border-bottom-color: #FFF;
|
border-bottom-color: #FFF;
|
||||||
border-top: 3px solid #FA901C;
|
border-top: 3px solid #FA901C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
|
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
@@ -1606,6 +1715,10 @@
|
|||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
.no-style-class.el-color-picker__panel{
|
||||||
|
border-radius: 0 0 5px 5px;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.project-title {
|
.project-title {
|
||||||
@@ -1615,10 +1728,12 @@
|
|||||||
border-radius: 10px 0 0 0;
|
border-radius: 10px 0 0 0;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-content {
|
.project-content {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.project-content-title {
|
.project-content-title {
|
||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
@@ -1630,20 +1745,24 @@
|
|||||||
line-height: 31px;
|
line-height: 31px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-content-box {
|
.project-content-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.half.project-content-item {
|
.half.project-content-item {
|
||||||
width: calc(50% - 15px);
|
width: calc(50% - 15px);
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-content-item {
|
.project-content-item {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -1651,51 +1770,62 @@
|
|||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h32 {
|
.h32 {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-content.node-content {
|
.project-content.node-content {
|
||||||
overflow-y: unset;
|
overflow-y: unset;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
/deep/ .el-select-dropdown__wrap {
|
/deep/ .el-select-dropdown__wrap {
|
||||||
max-height: 190px;
|
max-height: 190px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pens-data {
|
.pens-data {
|
||||||
/deep/ .el-form-item {
|
/deep/ .el-form-item {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.half-form-item {
|
.half-form-item {
|
||||||
width: calc(50% - 20px);
|
width: calc(50% - 20px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-form-item {
|
.full-form-item {
|
||||||
width: calc(100% - 10px);
|
width: calc(100% - 10px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row-title {
|
.form-row-title {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
|
||||||
/deep/ .el-form-item__content {
|
/deep/ .el-form-item__content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .el-form-item__content {
|
/deep/ .el-form-item__content {
|
||||||
> div {
|
> div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/deep/.el-form--label-top .el-form-item__label{
|
|
||||||
|
/deep/ .el-form-item__label {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@@ -1707,10 +1837,12 @@
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-box-form .element-item.form-row-item {
|
.right-box-form .element-item.form-row-item {
|
||||||
width: calc(100% - 120px);
|
width: calc(100% - 120px);
|
||||||
padding: 20px 20px 20px 0;
|
padding: 20px 20px 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row-item .nz-icon-minus-position {
|
.form-row-item .nz-icon-minus-position {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -1720,10 +1852,12 @@
|
|||||||
background: rgba(236, 127, 102, 0.1);
|
background: rgba(236, 127, 102, 0.1);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
|
|
||||||
.nz-icon-minus {
|
.nz-icon-minus {
|
||||||
color: #EC7F66;
|
color: #EC7F66;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-box {
|
.tooltip-box {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
width: calc(100% - 10px);
|
width: calc(100% - 10px);
|
||||||
@@ -1740,11 +1874,13 @@
|
|||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .el-collapse {
|
/deep/ .el-collapse {
|
||||||
background: #f6f6f6;
|
background: #f6f6f6;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .el-collapse-item__header {
|
/deep/ .el-collapse-item__header {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
background-color: #F9F9F9;
|
background-color: #F9F9F9;
|
||||||
@@ -1767,16 +1903,42 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase{*/
|
/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
|
||||||
/*visibility: hidden;*/
|
visibility: hidden;
|
||||||
/*}*/
|
outline: none;
|
||||||
/*/deep/ .el-input-number-show-button{*/
|
|
||||||
/*/deep/ .el-input-number__decrease,/deep/ .el-input-number__increase{*/
|
|
||||||
/*visibility: visible;*/
|
|
||||||
/*}*/
|
|
||||||
/*}*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/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 {
|
.mb10 {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@@ -1793,6 +1955,7 @@
|
|||||||
.pl0 {
|
.pl0 {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.special-select .el-select.el-select--small {
|
.special-select .el-select.el-select--small {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -1823,6 +1986,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 20px);
|
height: calc(100% - 20px);
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -1846,9 +2010,18 @@
|
|||||||
|
|
||||||
.props-pen-item {
|
.props-pen-item {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
.p10 {
|
.p10 {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gradient-to {
|
||||||
|
/deep/ .el-select.el-select--small {
|
||||||
|
vertical-align: top;
|
||||||
|
width: calc(100% - 42px);
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-item {
|
.icon-item {
|
||||||
@@ -1886,17 +2059,61 @@
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-content {
|
.color-content {
|
||||||
height: 0;
|
height: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 32px;
|
top: 15px;
|
||||||
left: 66px;
|
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 {
|
.color {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-show {
|
.color-show {
|
||||||
border: 1px solid #E7EAED;
|
border: 1px solid #E7EAED;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@@ -1905,6 +2122,7 @@
|
|||||||
width: calc(100% - 32px);
|
width: calc(100% - 32px);
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-show .color-text {
|
.color-show .color-text {
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -1912,6 +2130,7 @@
|
|||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-show-left {
|
.color-show-left {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
@@ -1919,11 +2138,13 @@
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-arrows {
|
.color-arrows {
|
||||||
color: #C0C4CC;
|
color: #C0C4CC;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 42px;
|
right: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-arrows .nz-icon {
|
.color-arrows .nz-icon {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,25 +18,25 @@ export const Tools=[
|
|||||||
{
|
{
|
||||||
group:'基本形状',
|
group:'基本形状',
|
||||||
children:[
|
children:[
|
||||||
{
|
// {
|
||||||
name:'rectangleImg',
|
// name:'rectangleImg',
|
||||||
icon:'icon-rect',
|
// icon:'icon-rect',
|
||||||
data:{
|
// data:{
|
||||||
text:'rect',
|
// text:'rect',
|
||||||
rect:{
|
// rect:{
|
||||||
width:100,
|
// width:100,
|
||||||
height:100
|
// height:100
|
||||||
},
|
// },
|
||||||
paddingLeft:10,
|
// paddingLeft:10,
|
||||||
paddingRight:10,
|
// paddingRight:10,
|
||||||
paddingTop:10,
|
// paddingTop:10,
|
||||||
paddingBottom:10,
|
// paddingBottom:10,
|
||||||
name:'rectangleImg',
|
// name:'rectangleImg',
|
||||||
icon: '\ue680',
|
// icon: '\ue680',
|
||||||
iconFamily: 'nz-icon',
|
// iconFamily: 'nz-icon',
|
||||||
iconColor: ''
|
// iconColor: ''
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
name: 'rectangle',
|
name: 'rectangle',
|
||||||
icon: 'icon-cube',
|
icon: 'icon-cube',
|
||||||
@@ -165,45 +165,11 @@ export const Tools=[
|
|||||||
name:'pentagram'
|
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: '自定义图片',
|
group: '自定义组件',
|
||||||
children: [
|
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}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 400px;height: 400px;">
|
<div style="width: 400px;height: 400px;">
|
||||||
<span class="temp-dom"></span>
|
<span class="temp-dom"></span>
|
||||||
<line-chart-block v-if="true"
|
<line-chart-block v-if="chartData.type !== 'table'"
|
||||||
:key="'inner' + 0"
|
:key="'inner' + chartData.id"
|
||||||
:from="'project'"
|
:from="'project'"
|
||||||
:ref="'editChart' + 0"
|
:ref="'editChart' + 0"
|
||||||
:temp-dom="tempDom"
|
:temp-dom="tempDom"
|
||||||
@@ -13,6 +13,16 @@
|
|||||||
:chart-data="chartData">
|
:chart-data="chartData">
|
||||||
|
|
||||||
</line-chart-block>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -88,10 +98,12 @@
|
|||||||
valueMapping:{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},
|
valueMapping:{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},
|
||||||
};
|
};
|
||||||
chartData.span=12;
|
chartData.span=12;
|
||||||
|
this.chartData=chartData;
|
||||||
|
console.log(chartData);
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
this.getChartData(chartData,0);
|
this.getChartData(chartData,0);
|
||||||
});
|
});
|
||||||
this.chartData=chartData
|
|
||||||
},
|
},
|
||||||
// 获取一个图表具体数据,图表信息，图表位置index
|
// 获取一个图表具体数据,图表信息，图表位置index
|
||||||
getChartData(chartInfo, pos, filterType) {
|
getChartData(chartInfo, pos, filterType) {
|
||||||
@@ -130,21 +142,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let step = bus.getStep(startTime, endTime);
|
let step = bus.getStep(startTime, endTime);
|
||||||
|
setTimeout(()=>{
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
// const axiosArr = chartItem.elements.map((ele) => {
|
let res=chartItem.res;
|
||||||
// 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) => {
|
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.length > 0) {
|
if (res.length > 0) {
|
||||||
let series = [];
|
let series = [];
|
||||||
@@ -174,6 +174,7 @@
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
response.data.result.forEach((queryItem, resIndex) => {
|
response.data.result.forEach((queryItem, resIndex) => {
|
||||||
|
console.log(queryItem, resIndex);
|
||||||
let seriesItem = {
|
let seriesItem = {
|
||||||
theData: {
|
theData: {
|
||||||
name: '',
|
name: '',
|
||||||
@@ -310,7 +311,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
console.log(this.$refs['editChart' + chartItem.id],chartItem.id);
|
||||||
if (this.$refs['editChart' + chartItem.id]) {
|
if (this.$refs['editChart' + chartItem.id]) {
|
||||||
let chartData = {
|
let chartData = {
|
||||||
chartItem: chartItem,
|
chartItem: chartItem,
|
||||||
@@ -339,6 +340,8 @@
|
|||||||
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
||||||
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
||||||
} else {
|
} else {
|
||||||
|
console.log(123123123123123123,chartItem, series,
|
||||||
|
this.filter.panelId, this.filter, legend, '', errorMsg);
|
||||||
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
||||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
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">
|
<span class="project-topology-tool">
|
||||||
<el-dropdown trigger="click" size="small" placement="bottom-start">
|
<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">
|
<el-dropdown-menu slot="dropdown" @click="dropdownClick">
|
||||||
<div style="height: 450px">
|
<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>-->
|
<!--<div class="drag-header">——</div>-->
|
||||||
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index">
|
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index">
|
||||||
<el-collapse-item :title="item.group" :name="item.group">
|
<el-collapse-item :title="item.group" :name="item.group">
|
||||||
@@ -53,7 +55,8 @@
|
|||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</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">
|
<div class="full pr10">
|
||||||
<el-select v-model="lineName" placeholder="请选择" size="small"
|
<el-select v-model="lineName" placeholder="请选择" size="small"
|
||||||
:popper-append-to-body="false"
|
:popper-append-to-body="false"
|
||||||
@@ -425,41 +428,44 @@
|
|||||||
this.getTopologyData().then((data)=>{
|
this.getTopologyData().then((data)=>{
|
||||||
this.openTopologyData(data).then(()=>{
|
this.openTopologyData(data).then(()=>{
|
||||||
//获取对应的值 给节点 连线添加对应动画
|
//获取对应的值 给节点 连线添加对应动画
|
||||||
console.log(data);
|
|
||||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
this.lineName=data.lineName?data.lineName:this.lineName;
|
||||||
this.chartGetData=[];
|
this.chartGetData=[];
|
||||||
let axiosArr=[];
|
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 endTime=this.filterTime[1];
|
||||||
let startTime=this.filterTime[0];
|
let startTime=this.filterTime[0];
|
||||||
let step=bus.getStep(startTime,endTime);
|
let step=bus.getStep(startTime,endTime);
|
||||||
data.pens&&data.pens.forEach(item=>{
|
data.pens&&data.pens.forEach((item,index)=>{
|
||||||
console.log(item.id);
|
|
||||||
this.chartGetData.push({id:item.id,res:[]});
|
this.chartGetData.push({id:item.id,res:[]});
|
||||||
let arr=item.data.expressArr.map((ele)=>{
|
let arr=item.data.expressArr.map((ele)=>{
|
||||||
let query=encodeURIComponent(ele);
|
let query=encodeURIComponent(ele);
|
||||||
|
if(!query){
|
||||||
|
return new Promise(resolve=>{
|
||||||
|
resolve({data:"",status:'no query'});
|
||||||
|
})
|
||||||
|
}
|
||||||
query+='&nullType='+'connected';
|
query+='&nullType='+'connected';
|
||||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&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);
|
||||||
});
|
});
|
||||||
axiosArr.push({item,arr});
|
axiosArr.push({item,arr});
|
||||||
|
promiseArr.push(pensPromise(item,arr,index))
|
||||||
});
|
});
|
||||||
|
Promise.all(promiseArr).then((res)=>{
|
||||||
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(()=>{
|
|
||||||
getTopology(this.topologyIndex).open(data);
|
getTopology(this.topologyIndex).open(data);
|
||||||
getTopology(this.topologyIndex).lock(1);
|
getTopology(this.topologyIndex).lock(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
this.getNodesArr();
|
this.getNodesArr();
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
@@ -469,41 +475,44 @@
|
|||||||
this.getTopologyData().then((data)=>{
|
this.getTopologyData().then((data)=>{
|
||||||
this.openTopologyData(data).then(()=>{
|
this.openTopologyData(data).then(()=>{
|
||||||
//获取对应的值 给节点 连线添加对应动画
|
//获取对应的值 给节点 连线添加对应动画
|
||||||
console.log(data);
|
|
||||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
this.lineName=data.lineName?data.lineName:this.lineName;
|
||||||
this.chartGetData=[];
|
this.chartGetData=[];
|
||||||
let axiosArr=[];
|
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 endTime=this.filterTime[1];
|
||||||
let startTime=this.filterTime[0];
|
let startTime=this.filterTime[0];
|
||||||
let step=bus.getStep(startTime,endTime);
|
let step=bus.getStep(startTime,endTime);
|
||||||
data.pens&&data.pens.forEach(item=>{
|
data.pens&&data.pens.forEach((item,index)=>{
|
||||||
console.log(item.id);
|
|
||||||
this.chartGetData.push({id:item.id,res:[]});
|
this.chartGetData.push({id:item.id,res:[]});
|
||||||
let arr=item.data.expressArr.map((ele)=>{
|
let arr=item.data.expressArr.map((ele)=>{
|
||||||
let query=encodeURIComponent(ele);
|
let query=encodeURIComponent(ele);
|
||||||
|
if(!query){
|
||||||
|
return new Promise(resolve=>{
|
||||||
|
resolve({data:"",status:'no query'});
|
||||||
|
})
|
||||||
|
}
|
||||||
query+='&nullType='+'connected';
|
query+='&nullType='+'connected';
|
||||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&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);
|
||||||
});
|
});
|
||||||
axiosArr.push({item,arr});
|
axiosArr.push({item,arr});
|
||||||
|
promiseArr.push(pensPromise(item,arr,index))
|
||||||
});
|
});
|
||||||
|
Promise.all(promiseArr).then((res)=>{
|
||||||
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(()=>{
|
|
||||||
getTopology(this.topologyIndex).open(data);
|
getTopology(this.topologyIndex).open(data);
|
||||||
getTopology(this.topologyIndex).lock(1);
|
getTopology(this.topologyIndex).lock(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
this.getNodesArr();
|
this.getNodesArr();
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
@@ -527,12 +536,165 @@
|
|||||||
getTopologyData(){
|
getTopologyData(){
|
||||||
return new Promise(resolve=>{
|
return new Promise(resolve=>{
|
||||||
let data=localStorage.getItem('data');
|
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};
|
this.saveData={...data};
|
||||||
resolve(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
|
//获取module
|
||||||
getModule(){
|
getModule(){
|
||||||
this.projectInfo.loading=true;
|
this.projectInfo.loading=true;
|
||||||
@@ -658,13 +820,14 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMessage(event,data){
|
onMessage(event,data){
|
||||||
console.log('onMessage',event,data);
|
// console.log('onMessage',event,data);
|
||||||
console.log(getTopology(this.topologyIndex))
|
// console.log(getTopology(this.topologyIndex))
|
||||||
if(getTopology(this.topologyIndex)){
|
if(getTopology(this.topologyIndex)){
|
||||||
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
||||||
if(this.$refs.topTool){
|
if(this.$refs.topTool){
|
||||||
this.$refs.topTool.redoFlag=false
|
this.$refs.topTool.redoFlag=false
|
||||||
};
|
}
|
||||||
|
;
|
||||||
}
|
}
|
||||||
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
|
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
|
||||||
if(data.type===0&& !data.data){
|
if(data.type===0&& !data.data){
|
||||||
@@ -679,7 +842,17 @@
|
|||||||
lineWidth:this.nodeDefaultWidth(data.name),
|
lineWidth:this.nodeDefaultWidth(data.name),
|
||||||
iconToolState:true,
|
iconToolState:true,
|
||||||
//chart 配置项
|
//chart 配置项
|
||||||
valueMapping:[],
|
valueMapping:[{
|
||||||
|
color:{
|
||||||
|
line:'#000000',
|
||||||
|
fill:'#ffffff',
|
||||||
|
text:'#000000',
|
||||||
|
},
|
||||||
|
value:'base',
|
||||||
|
animateType:'base',
|
||||||
|
level:0,
|
||||||
|
base:true,
|
||||||
|
}],
|
||||||
expressArr:[],
|
expressArr:[],
|
||||||
legends:[],
|
legends:[],
|
||||||
tooltipShow:true,
|
tooltipShow:true,
|
||||||
@@ -703,7 +876,17 @@
|
|||||||
toArrowColor:data.toArrowColor,
|
toArrowColor:data.toArrowColor,
|
||||||
lineWidth:1,
|
lineWidth:1,
|
||||||
//chart 配置项
|
//chart 配置项
|
||||||
valueMapping:[],
|
valueMapping:[{
|
||||||
|
color:{
|
||||||
|
border:'#000000',
|
||||||
|
bac:'#ffffff',
|
||||||
|
text:'#000000',
|
||||||
|
},
|
||||||
|
value:'base',
|
||||||
|
animateType:'base',
|
||||||
|
level:0,
|
||||||
|
base:true,
|
||||||
|
}],
|
||||||
expressArr:[],
|
expressArr:[],
|
||||||
legends:[],
|
legends:[],
|
||||||
tooltipShow:true,
|
tooltipShow:true,
|
||||||
@@ -721,11 +904,6 @@
|
|||||||
data.lineWidth=data.data.lineWidth;
|
data.lineWidth=data.data.lineWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// if(event==='addNode'&&data.name==='rectangleImg'){
|
|
||||||
// data.lineWidth=0;
|
|
||||||
// }
|
|
||||||
switch(event){
|
switch(event){
|
||||||
case 'moveInNode':
|
case 'moveInNode':
|
||||||
case 'moveInLine':
|
case 'moveInLine':
|
||||||
@@ -734,7 +912,6 @@
|
|||||||
this.timer3=null
|
this.timer3=null
|
||||||
}
|
}
|
||||||
this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
|
this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
|
||||||
console.log(this.chartData);
|
|
||||||
this.tooltipPosition.show=true;
|
this.tooltipPosition.show=true;
|
||||||
break;
|
break;
|
||||||
case 'moveOutNode':
|
case 'moveOutNode':
|
||||||
@@ -1102,6 +1279,7 @@
|
|||||||
item.fillStyle=item.data.fillStyle;
|
item.fillStyle=item.data.fillStyle;
|
||||||
item.strokeStyle=item.data.strokeStyle;
|
item.strokeStyle=item.data.strokeStyle;
|
||||||
item.animatePlay=item.data.animatePlay;
|
item.animatePlay=item.data.animatePlay;
|
||||||
|
item.font.color="#000000";
|
||||||
}else if(item.type===1){
|
}else if(item.type===1){
|
||||||
item.animateColor=item.data.animateColor;
|
item.animateColor=item.data.animateColor;
|
||||||
item.strokeStyle=item.data.strokeStyle;
|
item.strokeStyle=item.data.strokeStyle;
|
||||||
@@ -1109,6 +1287,7 @@
|
|||||||
item.fromArrowColor=item.data.fromArrowColor;
|
item.fromArrowColor=item.data.fromArrowColor;
|
||||||
item.toArrowColor=item.data.toArrowColor;
|
item.toArrowColor=item.data.toArrowColor;
|
||||||
item.animatePlay=item.data.animatePlay;
|
item.animatePlay=item.data.animatePlay;
|
||||||
|
item.font.color="#000000";
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
|
let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
|
||||||
@@ -1236,16 +1415,19 @@
|
|||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-collapse-item__header.is-active {
|
.el-collapse-item__header.is-active {
|
||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
ont-family: Roboto-Bold;
|
ont-family: Roboto-Bold;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #FA901C;
|
color: #FA901C;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
el-collapse-item__arrow {
|
el-collapse-item__arrow {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-collapse-item__wrap {
|
.el-collapse-item__wrap {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
@@ -1267,6 +1449,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -1328,19 +1511,23 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons:hover {
|
.buttons:hover {
|
||||||
.delIcon {
|
.delIcon {
|
||||||
/*display: inline-block;*/
|
/*display: inline-block;*/
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader {
|
.avatar-uploader {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
|
|
||||||
.el-icon-plus {
|
.el-icon-plus {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #FA901C;
|
color: #FA901C;
|
||||||
margin: 0 8px 0 15px;
|
margin: 0 8px 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload--picture-card {
|
.el-upload--picture-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -1350,13 +1537,16 @@
|
|||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload--picture-card:hover, .el-upload:focus {
|
.el-upload--picture-card:hover, .el-upload:focus {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader:active el-upload--picture-card {
|
.avatar-uploader:active el-upload--picture-card {
|
||||||
color: #DB8B8B;
|
color: #DB8B8B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
|
.avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
|
||||||
color: #DB8B8B;
|
color: #DB8B8B;
|
||||||
}
|
}
|
||||||
@@ -1512,6 +1702,7 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dropdown-title {
|
.el-dropdown-title {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border: 1px solid #DEDEDE;
|
border: 1px solid #DEDEDE;
|
||||||
@@ -1520,10 +1711,12 @@
|
|||||||
height: 28px;
|
height: 28px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
|
|
||||||
.icon-cube {
|
.icon-cube {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-box {
|
.project-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -1585,6 +1778,7 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.special-select svg {
|
.special-select svg {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
@@ -1593,12 +1787,15 @@
|
|||||||
.special-select .el-select.el-select--small {
|
.special-select .el-select.el-select--small {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.special-select /deep/ .el-select-dropdown {
|
.special-select /deep/ .el-select-dropdown {
|
||||||
width: 75px !important;
|
width: 75px !important;
|
||||||
|
|
||||||
.el-select-dropdown__item {
|
.el-select-dropdown__item {
|
||||||
padding: 0 0 0 10px;
|
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 {
|
.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;
|
border: 1px solid #DCDFE6;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
|
|||||||
Reference in New Issue
Block a user