fix： chart diagRam 细节 微调
This commit is contained in:
zhangyu
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
<div class="mt-10 rich-text-container" v-cloak v-show="firstShow" >
|
||||
<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>
|
||||
<!--全屏-->
|
||||
@@ -59,7 +59,7 @@
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@@ -320,8 +320,8 @@ import {
|
||||
imageTemp,
|
||||
myShape,
|
||||
myAnchors,
|
||||
myIconRect,
|
||||
myTextRect,
|
||||
myIconRect2,
|
||||
myTextRect2,
|
||||
onChangeAnimate,
|
||||
onChangeAnimateLine,
|
||||
myCubec,
|
||||
@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
|
||||
import bus from '../../../libs/bus'
|
||||
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)
|
||||
|
||||
const canvasOptions = {
|
||||
@@ -506,6 +506,7 @@ export default {
|
||||
|
||||
},
|
||||
topoData: {},
|
||||
chartInfo: {},
|
||||
fromChartBox: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@@ -636,8 +637,11 @@ export default {
|
||||
})
|
||||
getTopology(this.topologyIndex).resize()
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
if (this.fromChartBox || this.fromChart) {
|
||||
if (this.fromChartBox || this.fromChart) { // 是否来自panel 和 chartBox
|
||||
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
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -50,121 +50,123 @@
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<!--metric-->
|
||||
<el-row :key="index" class="element-item form-row-item" style=""
|
||||
v-for="(item,index) in selection.pen.data.expressArr">
|
||||
<promql-input
|
||||
:expression-list="selection.pen.data.expressArr"
|
||||
:id="index"
|
||||
:index="index"
|
||||
:key="index"
|
||||
:plugins="['metric-selector', 'metric-input', 'remove']"
|
||||
:ref="'promql-'+'-1'"
|
||||
:showRemove="false"
|
||||
:styleType="2"
|
||||
:metricOptionsParent="metricOptions"
|
||||
@change="expressionChange"
|
||||
:from-father-data="true"
|
||||
></promql-input>
|
||||
<el-row style="margin-top: 10px">
|
||||
<template>
|
||||
<!--chart aggregation-->
|
||||
<el-col class="legend-title">
|
||||
{{$t('dashboard.panel.chartForm.aggregation')}}
|
||||
</el-col>
|
||||
<el-col style="width: calc(100% - 120px)">
|
||||
<el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
|
||||
size="mini"
|
||||
style="width: 100%"
|
||||
v-model="selection.pen.data.aggregation" value-key="chartType">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
|
||||
<span class="panel-dropdown-label-txt">{{item.name}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</template>
|
||||
<div v-show="selection.pen.data.valueMappingShow">
|
||||
<el-row :key="index" class="element-item form-row-item" style=""
|
||||
v-for="(item,index) in selection.pen.data.expressArr">
|
||||
<promql-input
|
||||
:expression-list="selection.pen.data.expressArr"
|
||||
:id="index"
|
||||
:index="index"
|
||||
:key="index"
|
||||
:plugins="['metric-selector', 'metric-input', 'remove']"
|
||||
:ref="'promql-'+'-1'"
|
||||
:showRemove="false"
|
||||
:styleType="2"
|
||||
:metricOptionsParent="metricOptions"
|
||||
@change="expressionChange"
|
||||
:from-father-data="true"
|
||||
></promql-input>
|
||||
<el-row style="margin-top: 10px">
|
||||
<template>
|
||||
<!--chart aggregation-->
|
||||
<el-col class="legend-title">
|
||||
{{$t('dashboard.panel.chartForm.aggregation')}}
|
||||
</el-col>
|
||||
<el-col style="width: calc(100% - 120px)">
|
||||
<el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
|
||||
size="mini"
|
||||
style="width: 100%"
|
||||
v-model="selection.pen.data.aggregation" value-key="chartType">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
|
||||
<span class="panel-dropdown-label-txt">{{item.name}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<div style="width: 100%;margin-top: 10px;box-sizing: border-box;padding-left: 10px">
|
||||
<div class="thresholds-box">
|
||||
<el-row class="thresholds-title">
|
||||
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
|
||||
<span @click="changeValueMappingSort">
|
||||
<div style="width: 100%;margin-top: 10px;box-sizing: border-box;padding-left: 10px">
|
||||
<div class="thresholds-box">
|
||||
<el-row class="thresholds-title">
|
||||
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
|
||||
<span @click="changeValueMappingSort">
|
||||
<i :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i>
|
||||
<i :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i>
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
|
||||
<el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
|
||||
<el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
|
||||
<el-col class="thresholds-cell" :span="2"></el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
|
||||
<el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
|
||||
<el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
|
||||
<el-col class="thresholds-cell" :span="2"></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
|
||||
<el-col class="thresholds-cell" :span="4">
|
||||
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
|
||||
<el-col class="thresholds-cell" :span="4">
|
||||
<span v-if="selection.pen.data.valueMappingSort==='desc'">
|
||||
{{index===0?selection.pen.data.valueMapping.length-1:(item.level-1)}}
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-else>
|
||||
{{item.level}}
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="4">
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="4">
|
||||
<span v-if="item.level!==0">
|
||||
<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"/>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="6" style="display: flex">
|
||||
<el-input
|
||||
v-if="item.level!==0"
|
||||
v-model.number="item.value"
|
||||
@change="valueMappingValueChange(item)"
|
||||
size="small"
|
||||
>
|
||||
<template slot="prepend"> > </template>
|
||||
</el-input>
|
||||
<span v-else>base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="8">
|
||||
<!--线-->
|
||||
<el-select
|
||||
v-model="item.animateType"
|
||||
size="small"
|
||||
v-if="selection.pen&&selection.pen.type&&item.level!==0">
|
||||
<el-option
|
||||
v-for="(item,index) in lineAnimateOptions"
|
||||
:value="item.id"
|
||||
:key="index"
|
||||
:label="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!--点-->
|
||||
<el-select
|
||||
v-model="item.animateType"
|
||||
size="small"
|
||||
v-if="selection.pen&&!selection.pen.type&&item.level!==0">
|
||||
<el-option
|
||||
v-for="(item,index) in nodeAnimateOptions"
|
||||
:value="item.id"
|
||||
:key="index"
|
||||
:label="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!--默认-->
|
||||
<span v-if="item.level===0">base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="2" style="text-align: center">
|
||||
<i v-if="item.level!==0" @click="valueMappingDel(index, item)"
|
||||
class="nz-icon nz-icon-minus">
|
||||
</i>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span v-else>base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="6" style="display: flex">
|
||||
<el-input
|
||||
v-if="item.level!==0"
|
||||
v-model.number="item.value"
|
||||
@change="valueMappingValueChange(item)"
|
||||
size="small"
|
||||
>
|
||||
<template slot="prepend"> > </template>
|
||||
</el-input>
|
||||
<span v-else>base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="8">
|
||||
<!--线-->
|
||||
<el-select
|
||||
v-model="item.animateType"
|
||||
size="small"
|
||||
v-if="selection.pen&&selection.pen.type&&item.level!==0">
|
||||
<el-option
|
||||
v-for="(item,index) in lineAnimateOptions"
|
||||
:value="item.id"
|
||||
:key="index"
|
||||
:label="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!--点-->
|
||||
<el-select
|
||||
v-model="item.animateType"
|
||||
size="small"
|
||||
v-if="selection.pen&&!selection.pen.type&&item.level!==0">
|
||||
<el-option
|
||||
v-for="(item,index) in nodeAnimateOptions"
|
||||
:value="item.id"
|
||||
:key="index"
|
||||
:label="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!--默认-->
|
||||
<span v-if="item.level===0">base</span>
|
||||
</el-col>
|
||||
<el-col class="thresholds-cell" :span="2" style="text-align: center">
|
||||
<i v-if="item.level!==0" @click="valueMappingDel(index, item)"
|
||||
class="nz-icon nz-icon-minus">
|
||||
</i>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
|
||||
<i class="nz-icon nz-icon-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
|
||||
<i class="nz-icon nz-icon-plus"></i>
|
||||
</div>
|
||||
|
||||
<!--tooltip-->
|
||||
@@ -180,7 +182,7 @@
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
|
||||
<div class="tooltip-box">
|
||||
<div class="tooltip-box" v-show="selection.pen.data.tooltipShow">
|
||||
<!--title-->
|
||||
<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>
|
||||
|
||||
@@ -247,6 +247,19 @@ export function myTextRect (node) {
|
||||
)
|
||||
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
|
||||
}
|
||||
/* 自定义图片组件 */
|
||||
|
||||
/* 自定义立方体 */
|
||||
|
||||
Reference in New Issue
Block a user