fix: chart Diagram bug 修改

This commit is contained in:
zhangyu
2021-07-08 15:03:25 +08:00
parent 8425a50466
commit db9d021eb5
3 changed files with 19 additions and 19 deletions

View File

@@ -9,7 +9,7 @@
<div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block"> <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
<!--工具栏--> <!--工具栏-->
<span v-if="!isPreview" class="project-topology-tool"> <span v-if="!isPreview" class="project-topology-tool">
<el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'"> <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'" class="no-style-class">
<span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
class="nz-icon nz-icon-arrow-down"></i></span> class="nz-icon nz-icon-arrow-down"></i></span>
<el-dropdown-menu slot="dropdown" @click="dropdownClick"> <el-dropdown-menu slot="dropdown" @click="dropdownClick">

View File

@@ -4,7 +4,7 @@ import i18n from '../i18n'
import bus from '@/libs/bus' import bus from '@/libs/bus'
import moment from 'moment-timezone' import moment from 'moment-timezone'
/* 弹窗点击外部后关闭 */ /* 弹窗点击外部后关闭 */
const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'topology-dialog', 'el-dropdown-menu', 'el-select-dropdown'] // clickoutside排除的class(白名单) no-style-class没有任何样式的class const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'el-dropdown-menu', 'el-select-dropdown'] // clickoutside排除的class(白名单) no-style-class没有任何样式的class
export const clickoutside = { export const clickoutside = {
// 初始化指令 // 初始化指令
bind (el, binding, vnode) { bind (el, binding, vnode) {

View File

@@ -12,7 +12,7 @@
<el-form v-model="selection.pen.data" class="pens-data" label-position="top"> <el-form v-model="selection.pen.data" class="pens-data" label-position="top">
<!--module--> <!--module-->
<el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type&&!fromDiagram" class="half-form-item"> <el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type&&!fromDiagram" class="half-form-item">
<el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')" popper-class="asset-dropdown" size="small" <el-select :popper-append-to-body="false" v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')" popper-class="asset-dropdown" size="small"
@change="moduleIdChange" > @change="moduleIdChange" >
<el-option <el-option
v-for="item in modules" v-for="item in modules"
@@ -74,7 +74,7 @@
{{$t('dashboard.panel.chartForm.aggregation')}}&nbsp; {{$t('dashboard.panel.chartForm.aggregation')}}&nbsp;
</el-col> </el-col>
<el-col style="width: calc(100% - 120px)"> <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" <el-select :popper-append-to-body="false" class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
size="mini" size="mini"
style="width: 100%" style="width: 100%"
v-model="selection.pen.data.aggregation" value-key="chartType"> v-model="selection.pen.data.aggregation" value-key="chartType">
@@ -131,7 +131,7 @@
</el-col> </el-col>
<el-col class="thresholds-cell" :span="8"> <el-col class="thresholds-cell" :span="8">
<!--线--> <!--线-->
<el-select <el-select :popper-append-to-body="false"
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">
@@ -143,7 +143,7 @@
</el-option> </el-option>
</el-select> </el-select>
<!----> <!---->
<el-select <el-select :popper-append-to-body="false"
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">
@@ -203,7 +203,7 @@
</el-cascader> </el-cascader>
</el-form-item> </el-form-item>
<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="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small" <el-select :popper-append-to-body="false" class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
size="mini" 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">
@@ -418,7 +418,7 @@
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type"> <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>{{$t('project.topology.gradient')}}</div> <div>{{$t('project.topology.gradient')}}</div>
<div class="p10 pl0 gradient-to"> <div class="p10 pl0 gradient-to">
<el-select v-model="selection.pen.gradientType" size="small" <el-select :popper-append-to-body="false" v-model="selection.pen.gradientType" size="small"
@change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select" popper-class="color-before-select"> @change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select" popper-class="color-before-select">
<div slot="prefix"> <div slot="prefix">
<i :class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i> <i :class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i>
@@ -458,7 +458,7 @@
<div class="props-pen-item special-select"> <div class="props-pen-item special-select">
<div>{{$t('project.topology.lineDash')}}</div> <div>{{$t('project.topology.lineDash')}}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select v-model="selection.pen.dash" size="small" <el-select :popper-append-to-body="false" v-model="selection.pen.dash" size="small"
@change="onChange"> @change="onChange">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -488,7 +488,7 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{$t('project.topology.lineType')}}</div> <div>{{$t('project.topology.lineType')}}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select v-model="selection.pen.name" size="small" <el-select :popper-append-to-body="false" v-model="selection.pen.name" size="small"
@change="onClickName"> @change="onClickName">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -518,7 +518,7 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{$t('project.topology.fromArrow')}}</div> <div>{{$t('project.topology.fromArrow')}}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select v-model="selection.pen.fromArrow" size="small" <el-select :popper-append-to-body="false" v-model="selection.pen.fromArrow" size="small"
@change="onClickFromArrow"> @change="onClickFromArrow">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -567,7 +567,7 @@
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type"> <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
<div>{{$t('project.topology.toArrow')}}</div> <div>{{$t('project.topology.toArrow')}}</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-select v-model="selection.pen.toArrow" size="small" <el-select :popper-append-to-body="false" v-model="selection.pen.toArrow" size="small"
@change="onClickToArrow"> @change="onClickToArrow">
<div slot="prefix"> <div slot="prefix">
<div class="icon-item"> <div class="icon-item">
@@ -647,7 +647,7 @@
<!-- <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">--> <!-- <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">-->
<!-- <div>{{$t('project.topology.img')}}</div>--> <!-- <div>{{$t('project.topology.img')}}</div>-->
<!-- <div class="p10 pl0">--> <!-- <div class="p10 pl0">-->
<!-- <el-select>--> <!-- <el-select :popper-append-to-body= 'false'>-->
<!-- <el-option-group--> <!-- <el-option-group-->
<!-- v-for="group in imgArr"--> <!-- v-for="group in imgArr"-->
<!-- :key="group.label"--> <!-- :key="group.label"-->
@@ -683,7 +683,7 @@
<div class="project-content-item" v-if="!selection.pen.type"> <div class="project-content-item" v-if="!selection.pen.type">
<label>{{$t('project.topology.animationType')}}</label> <label>{{$t('project.topology.animationType')}}</label>
<div class="full pr10"> <div class="full pr10">
<el-select <el-select :popper-append-to-body="false"
v-model="selection.pen.animateType" v-model="selection.pen.animateType"
size="small" size="small"
@change="(val)=>{changeAnimatePlay(val,'node')}" @change="(val)=>{changeAnimatePlay(val,'node')}"
@@ -697,7 +697,7 @@
<div class="project-content-item half" v-if="selection.pen.type"> <div class="project-content-item half" v-if="selection.pen.type">
<label>{{$t('project.topology.animationType')}}</label> <label>{{$t('project.topology.animationType')}}</label>
<div class="full pr10"> <div class="full pr10">
<el-select v-model="selection.pen.animateType" size="small" <el-select :popper-append-to-body="false" v-model="selection.pen.animateType" size="small"
@change="(val)=>{changeAnimatePlay(val,'line')}" @change="(val)=>{changeAnimatePlay(val,'line')}"
> >
<el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index" <el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
@@ -899,7 +899,7 @@
<div class="project-content-item half special-select"> <div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultStartArrow')}}</label> <label>{{$t('project.topology.defaultStartArrow')}}</label>
<div class="full pr10 h32"> <div class="full pr10 h32">
<el-select v-model="topologyData.data.fromArrow" size="small" <el-select :popper-append-to-body='false' v-model="topologyData.data.fromArrow" size="small"
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')"> @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
<div slot="prefix"> <div slot="prefix">
@@ -949,7 +949,7 @@
<div class="project-content-item half special-select"> <div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultEndArrow')}}</label> <label>{{$t('project.topology.defaultEndArrow')}}</label>
<div class="full pr10 h32"> <div class="full pr10 h32">
<el-select v-model="topologyData.data.toArrow" size="small" <el-select :popper-append-to-body='false' v-model="topologyData.data.toArrow" size="small"
@change="changeTopologyOpt('toArrow')"> @change="changeTopologyOpt('toArrow')">
<div slot="prefix"> <div slot="prefix">
@@ -1697,7 +1697,7 @@ export default {
text: '#000000' text: '#000000'
}, },
showColor: undefined, showColor: undefined,
animateType: this.selection.pen.type ? 1 : 'upDown', animateType: this.selection.pen.type ? 1 : '',
value: 0, value: 0,
level: 1, level: 1,
showType: 'fill'// bac text border showType: 'fill'// bac text border
@@ -1716,7 +1716,7 @@ export default {
text: '#000000' text: '#000000'
}, },
showColor: undefined, showColor: undefined,
animateType: this.selection.pen.type ? 1 : 'upDown', animateType: this.selection.pen.type ? 1 : '',
value: 0, value: 0,
level: this.selection.pen.data.valueMapping.length, level: this.selection.pen.data.valueMapping.length,
showType: 'fill'// bac text border showType: 'fill'// bac text border