gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix： chart diagRam 细节 微调

Browse Source
This commit is contained in:
zhangyu
2021-07-02 10:22:00 +08:00
parent 2751ed49e9
commit 7c63f466f9
4 changed files with 125 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/charts/diagram-chart.vue
View File

@@ -41,7 +41,7 @@
</div> </div>
<div class="mt-10 rich-text-container" v-cloak v-show="firstShow" > <div class="mt-10 rich-text-container" v-cloak v-show="firstShow" >
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="text-content" > <div :id="'chartContainer'+chartIndex" ref="chartContainer" class="text-content" >
<diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram"/> <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram" :chartInfo="chartData"/>
</div> </div>
</div> </div>
<!--全屏--> <!--全屏-->
@@ -59,7 +59,7 @@
<loading :ref="'localLoadingScreen'+chartIndex"></loading> <loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog> </el-dialog>
</div> </div>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true"></span> <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true" :chartInfo="chartData"></span>
</div> </div>
</div> </div>
</template> </template>

12
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -320,8 +320,8 @@ import {
imageTemp, imageTemp,
myShape, myShape,
myAnchors, myAnchors,
myIconRect, myIconRect2,
myTextRect, myTextRect2,
onChangeAnimate, onChangeAnimate,
onChangeAnimateLine, onChangeAnimateLine,
myCubec, myCubec,
@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
import bus from '../../../libs/bus' import bus from '../../../libs/bus'
import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu' import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
// 注册到画布 // 注册到画布
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect) registerNode('rectangleImg', myShape, myAnchors, myIconRect2, null)
registerNode('myCube', myCubec, myCubeAnchors, null, null) registerNode('myCube', myCubec, myCubeAnchors, null, null)
const canvasOptions = { const canvasOptions = {
@@ -506,6 +506,7 @@ export default {
}, },
topoData: {}, topoData: {},
chartInfo: {},
fromChartBox: { fromChartBox: {
type: Boolean, type: Boolean,
default: false default: false
@@ -636,8 +637,11 @@ export default {
}) })
getTopology(this.topologyIndex).resize() getTopology(this.topologyIndex).resize()
getTopology(this.topologyIndex).centerView() getTopology(this.topologyIndex).centerView()
if (this.fromChartBox || this.fromChart) { if (this.fromChartBox || this.fromChart) { // 是否来自panel 和 chartBox
getTopology(this.topologyIndex).fitView(20) getTopology(this.topologyIndex).fitView(20)
if (this.chartInfo && this.chartInfo.param && this.chartInfo.param.lock) { // 判断节点 以及画布 是否可以拖动
getTopology(this.topologyIndex).lock(2)
}
} }
this.penToolTipScale = getTopology(this.topologyIndex).data.scale this.penToolTipScale = getTopology(this.topologyIndex).data.scale
setTimeout(() => { setTimeout(() => {

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

@@ -50,121 +50,123 @@
</el-form-item> </el-form-item>
</el-row> </el-row>
<!--metric--> <!--metric-->
<el-row :key="index" class="element-item form-row-item" style="" <div v-show="selection.pen.data.valueMappingShow">
v-for="(item,index) in selection.pen.data.expressArr"> <el-row :key="index" class="element-item form-row-item" style=""
<promql-input v-for="(item,index) in selection.pen.data.expressArr">
:expression-list="selection.pen.data.expressArr" <promql-input
:id="index" :expression-list="selection.pen.data.expressArr"
:index="index" :id="index"
:key="index" :index="index"
:plugins="['metric-selector', 'metric-input', 'remove']" :key="index"
:ref="'promql-'+'-1'" :plugins="['metric-selector', 'metric-input', 'remove']"
:showRemove="false" :ref="'promql-'+'-1'"
:styleType="2" :showRemove="false"
:metricOptionsParent="metricOptions" :styleType="2"
@change="expressionChange" :metricOptionsParent="metricOptions"
:from-father-data="true" @change="expressionChange"
></promql-input> :from-father-data="true"
<el-row style="margin-top: 10px"> ></promql-input>
<template> <el-row style="margin-top: 10px">
<!--chart aggregation--> <template>
<el-col class="legend-title"> <!--chart aggregation-->
{{$t('dashboard.panel.chartForm.aggregation')}}&nbsp; <el-col class="legend-title">
</el-col> {{$t('dashboard.panel.chartForm.aggregation')}}&nbsp;
<el-col style="width: calc(100% - 120px)"> </el-col>
<el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small" <el-col style="width: calc(100% - 120px)">
size="mini" <el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
style="width: 100%" size="mini"
v-model="selection.pen.data.aggregation" value-key="chartType"> style="width: 100%"
<el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList"> v-model="selection.pen.data.aggregation" value-key="chartType">
<span class="panel-dropdown-label-txt">{{item.name}}</span> <el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
</el-option> <span class="panel-dropdown-label-txt">{{item.name}}</span>
</el-select> </el-option>
</el-col> </el-select>
</template> </el-col>
</template>
</el-row>
</el-row> </el-row>
</el-row> <div style="width: 100%;margin-top: 10px;box-sizing: border-box;padding-left: 10px">
<div style="width: 100%;margin-top: 10px;box-sizing: border-box;padding-left: 10px"> <div class="thresholds-box">
<div class="thresholds-box"> <el-row class="thresholds-title">
<el-row class="thresholds-title"> <el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}} <span @click="changeValueMappingSort">
<span @click="changeValueMappingSort">
<i :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i> <i :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i>
<i :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i> <i :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i>
</span> </span>
</el-col> </el-col>
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col> <el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
<el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col> <el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
<el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col> <el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
<el-col class="thresholds-cell" :span="2"></el-col> <el-col class="thresholds-cell" :span="2"></el-col>
</el-row> </el-row>
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index"> <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
<el-col class="thresholds-cell" :span="4"> <el-col class="thresholds-cell" :span="4">
<span v-if="selection.pen.data.valueMappingSort==='desc'"> <span v-if="selection.pen.data.valueMappingSort==='desc'">
{{index===0?selection.pen.data.valueMapping.length-1:(item.level-1)}} {{index===0?selection.pen.data.valueMapping.length-1:(item.level-1)}}
</span> </span>
<span v-else> <span v-else>
{{item.level}} {{item.level}}
</span> </span>
</el-col> </el-col>
<el-col class="thresholds-cell" :span="4"> <el-col class="thresholds-cell" :span="4">
<span v-if="item.level!==0"> <span v-if="item.level!==0">
<div style="display: inline-block"> <div style="display: inline-block">
<nezhaColor :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}" :single="false" :color-val="item.color" :presetColors="predefineColors"/> <nezhaColor :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}" :single="false" :color-val="item.color" :presetColors="predefineColors"/>
</div> </div>
</span> </span>
<span v-else>base</span> <span v-else>base</span>
</el-col> </el-col>
<el-col class="thresholds-cell" :span="6" style="display: flex"> <el-col class="thresholds-cell" :span="6" style="display: flex">
<el-input <el-input
v-if="item.level!==0" v-if="item.level!==0"
v-model.number="item.value" v-model.number="item.value"
@change="valueMappingValueChange(item)" @change="valueMappingValueChange(item)"
size="small" size="small"
> >
<template slot="prepend"> > </template> <template slot="prepend"> > </template>
</el-input> </el-input>
<span v-else>base</span> <span v-else>base</span>
</el-col> </el-col>
<el-col class="thresholds-cell" :span="8"> <el-col class="thresholds-cell" :span="8">
<!--线--> <!--线-->
<el-select <el-select
v-model="item.animateType" v-model="item.animateType"
size="small" size="small"
v-if="selection.pen&&selection.pen.type&&item.level!==0"> v-if="selection.pen&&selection.pen.type&&item.level!==0">
<el-option <el-option
v-for="(item,index) in lineAnimateOptions" v-for="(item,index) in lineAnimateOptions"
:value="item.id" :value="item.id"
:key="index" :key="index"
:label="item.name"> :label="item.name">
</el-option> </el-option>
</el-select> </el-select>
<!--点--> <!--点-->
<el-select <el-select
v-model="item.animateType" v-model="item.animateType"
size="small" size="small"
v-if="selection.pen&&!selection.pen.type&&item.level!==0"> v-if="selection.pen&&!selection.pen.type&&item.level!==0">
<el-option <el-option
v-for="(item,index) in nodeAnimateOptions" v-for="(item,index) in nodeAnimateOptions"
:value="item.id" :value="item.id"
:key="index" :key="index"
:label="item.name"> :label="item.name">
</el-option> </el-option>
</el-select> </el-select>
<!--默认--> <!--默认-->
<span v-if="item.level===0">base</span> <span v-if="item.level===0">base</span>
</el-col> </el-col>
<el-col class="thresholds-cell" :span="2" style="text-align: center"> <el-col class="thresholds-cell" :span="2" style="text-align: center">
<i v-if="item.level!==0" @click="valueMappingDel(index, item)" <i v-if="item.level!==0" @click="valueMappingDel(index, item)"
class="nz-icon nz-icon-minus"> class="nz-icon nz-icon-minus">
</i> </i>
</el-col> </el-col>
</el-row> </el-row>
</div>
</div>
<div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
<i class="nz-icon nz-icon-plus"></i>
</div> </div>
</div>
<div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
<i class="nz-icon nz-icon-plus"></i>
</div> </div>
<!--tooltip--> <!--tooltip-->
@@ -180,7 +182,7 @@
</el-form-item> </el-form-item>
</el-row> </el-row>
<div class="tooltip-box"> <div class="tooltip-box" v-show="selection.pen.data.tooltipShow">
<!--title--> <!--title-->
<el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type"> <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
<el-input v-model="selection.pen.data.chartTitle" @change="changeTitle" class="input" size="small"></el-input> <el-input v-model="selection.pen.data.chartTitle" @change="changeTitle" class="input" size="small"></el-input>

13
nezha-fronted/src/components/common/project/L5/services/canvas.js
View File

@@ -247,6 +247,19 @@ export function myTextRect (node) {
) )
node.fullTextRect = node.rect node.fullTextRect = node.rect
} }
export function myIconRect2 (node) {
node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - (node.paddingTop + node.paddingBottom))
node.fullIconRect = node.rect
}
export function myTextRect2 (node) {
node.textRect = new Rect(
node.rect.x + node.paddingLeft,
node.rect.y + node.rect.height - 20 - node.paddingBottom,
0,
0
)
node.fullTextRect = node.rect
}
/* 自定义图片组件 */ /* 自定义图片组件 */
/* 自定义立方体 */ /* 自定义立方体 */