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

fix: chartDiagram 细节微调

Browse Source
This commit is contained in:
zhangyu
2023-06-09 17:35:11 +08:00
parent 5b0a9a7492
commit afb91ec928
5 changed files with 83 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
View File

@@ -19,7 +19,7 @@
.meta2d-project{
height: calc(100% - 78px);
border: 1px solid;
border-color: $--border-color-light;
border-color: $--border-color-light !important;
}
.meta2d-chart {
//border: 1px solid;

1
nezha-fronted/src/components/chart/chart/chartDiagram.vue
View File

@@ -28,6 +28,7 @@ export default {
},
data () {
return {
isChart: true,
isPreview: {
show: false,
topoData: {},

6
nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
View File

@@ -426,6 +426,12 @@ export default {
obj.name = 'rectangle'
obj.image = ''
}
if (key === 'paddingTop') {
obj.paddingTop = pen.paddingTop
obj.paddingBottom = pen.paddingBottom
obj.paddingLeft = pen.paddingLeft
obj.paddingRight = pen.paddingRight
}
getTopology(this.meta2dId).setValue(obj) // 更新pen
if (key === 'lineAnimateType') {
if (!pen[key]) {

104
nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
View File

@@ -124,6 +124,25 @@
@change="change('height')"></el-input-number>
</div>
</div>
<div class="form-row-item">
<div class="form-row-key">
<div>{{ $t('project.topology.padding') }}</div>
</div>
<div class="form-row-value">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:step="1"
:precision="2"
controls-position="right"
size="small"
name="globalAlpha"
class="input"
v-model.number="pen.paddingTop"
required
@change="change('paddingTop')"></el-input-number>
</div>
</div>
<div class="form-row-item">
<div class="form-row-key">
{{$t('project.topology.lockRatio')}}
@@ -808,7 +827,8 @@
<el-row class="el-form">
<draggable
v-model="pen.data.valueMapping"
@end="change"
@start="start"
@end="end"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-valueMapping-class',
@@ -945,30 +965,6 @@
@change="change('valueMapping', index)"
></el-input>
</div>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item">
<div>
<div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>
</div>
<div :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
<!-- <el-dropdown trigger="click" slot="prefix" placement="top-start">-->
<!-- <div class="el-dropdown-link">-->
<!-- <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>-->
<!-- <div v-else class="mapping-iconSelect" :title="$t('tip.add')">-->
<!-- <i class="nz-icon nz-icon-create-square"></i>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-dropdown-menu slot="dropdown" class="mapping-iconPop">-->
<!-- <ul class="mapping-iconList">-->
<!-- <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">-->
<!-- <i :class="subItem.value"></i>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
</el-input>
</div>
<nezhaColor
:color-val="item.color"
:single="false"
@@ -976,6 +972,36 @@
@colorChange="(val,key)=>{valueMappingColorChange(val, key, index)}"
/>
</el-row>
<!-- <el-row v-show="item.show" :key="2" class="thresholds-item">-->
<!-- <div>-->
<!-- <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>-->
<!-- </div>-->
<!-- <div :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">-->
<!-- <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">-->
<!-- &lt;!&ndash; <el-dropdown trigger="click" slot="prefix" placement="top-start">&ndash;&gt;-->
<!-- &lt;!&ndash; <div class="el-dropdown-link">&ndash;&gt;-->
<!-- &lt;!&ndash; <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>&ndash;&gt;-->
<!-- &lt;!&ndash; <div v-else class="mapping-iconSelect" :title="$t('tip.add')">&ndash;&gt;-->
<!-- &lt;!&ndash; <i class="nz-icon nz-icon-create-square"></i>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- &lt;!&ndash; <el-dropdown-menu slot="dropdown" class="mapping-iconPop">&ndash;&gt;-->
<!-- &lt;!&ndash; <ul class="mapping-iconList">&ndash;&gt;-->
<!-- &lt;!&ndash; <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">&ndash;&gt;-->
<!-- &lt;!&ndash; <i :class="subItem.value"></i>&ndash;&gt;-->
<!-- &lt;!&ndash; </li>&ndash;&gt;-->
<!-- &lt;!&ndash; </ul>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-dropdown-menu>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-dropdown>&ndash;&gt;-->
<!-- </el-input>-->
<!-- </div>-->
<!-- <nezhaColor-->
<!-- :color-val="item.color"-->
<!-- :single="false"-->
<!-- :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'},{name:'border',value:item.color.icon,key:'icon'}]"-->
<!-- @colorChange="(val,key)=>{valueMappingColorChange(val, key, index)}"-->
<!-- />-->
<!-- </el-row>-->
</transition-group>
</div>
</draggable>
@@ -1041,12 +1067,12 @@
{{$t('project.topology.legends')}}
</div>
<div class="form-row-value" style="margin-bottom: 10px;display: flex;justify-content: space-between" v-for="(legend, index) in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
<div style="display: inline-block;width: calc(20% - 10px)">
<div style="display: inline-block;width: calc(30% - 10px)">
<el-select v-model="legend.parent" size="small" style="width: 100%" clearable @change="legendParentChange(legend)">
<el-option class="text-ellipsis" v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name' :title='item.name' style="width: 60px"></el-option>
<el-option class="text-ellipsis" v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name' :title='item.name' style="width: 300px"></el-option>
</el-select>
</div>
<div style="display: inline-block;width: calc(40% - 10px)">
<div style="display: inline-block;width: calc(30% - 10px)">
<el-select v-model="legend.legend" size="small" style="width: 100%" clearable>
<el-option class="text-ellipsis" v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name' :title='item.name' style="width: 170px"></el-option>
</el-select>
@@ -1226,6 +1252,13 @@ export default {
mounted () {
},
methods: {
start () {
document.body.classList.add('isDrag')
},
end () {
this.change()
document.body.classList.remove('isDrag')
},
change (key) {
if (key === 'lineDash') {
const val = this.pen.borderType
@@ -1246,6 +1279,11 @@ export default {
if (key === 'lineAnimateType') {
this.pen.autoPlay = false
}
if (key === 'paddingTop') {
this.pen.paddingBottom = this.pen.paddingTop
this.pen.paddingLeft = this.pen.paddingTop
this.pen.paddingRight = this.pen.paddingTop
}
this.$emit('change', key)
this.$forceUpdate()
},
@@ -1296,8 +1334,14 @@ export default {
this.elements[key] = !this.elements[key]
},
inputFocus (e) {
e.path[2].children[0].setAttribute('tabindex', '-10')
e.path[2].children[1].setAttribute('tabindex', '-11')
const decrease = document.getElementsByClassName('el-input-number__decrease')
decrease.forEach(item => {
item.setAttribute('tabindex', '-10')
})
const increase = document.getElementsByClassName('el-input-number__increase')
increase.forEach(item => {
item.setAttribute('tabindex', '-11')
})
},
inputBlur (e) {
},

2
nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
View File

@@ -505,7 +505,7 @@ export default {
if (flag) {
setTimeout(() => {
this.$refs.rightBoxChartEdit.$refs.header.editMeta2d()
}, 200)
}, 500)
}
if (data) {
this.chartConfig.param.topo = data