gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
This repository has been archived on 2025-09-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
a602c60303dc5be5646055f0463ea32ee98668f3
nezha-nezha-fronted/nezha-fronted/src/components/common/project/L5/CanvasProps.vue

2499 lines
87 KiB
Vue
Raw Normal View History

feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<template>
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
<div class="props-box" :loading="loading">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<!--删除按钮-->
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<!--<button id="edit-ep-del" type="button" class="nz-btn nz-btn-size-normal nz-btn-size-alien del-btn"-->
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<!--v-if="selection.pen" @click="delTopologyPen">-->
<!--<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
<!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<!--</button>-->
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<!--所有属性-->
<el-tabs v-model="tab" type="card" v-if="selection.pen" @tab-click="tabClick">
feat：处理 project topo 国际化
2021-02-05 15:40:16 +08:00
<el-tab-pane :label="$t('project.topology.data')" name="1">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<el-form v-model="selection.pen.data" class="pens-data" label-position="top">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<!--module-->
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<el-form-item v-if="!selection.pen.type&&!fromDiagram" class="sub-box half-form-item" label="Module"
prop="moduleId">
<el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')"
:popper-append-to-body="false" popper-class="asset-dropdown" size="small"
@change="moduleIdChange">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<el-option
v-for="item in modules"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
<!--iconToolState-->
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<!-- <el-form-item :label="'Icon state'" class="half-form-item" prop="type" v-if="!selection.pen.type">-->
<!-- <el-switch-->
<!-- v-model="selection.pen.data.iconToolState"-->
<!-- :active-value="true"-->
<!-- :inactive-value="false"-->
<!-- active-color="#ee9d3f"-->
<!-- />-->
<!-- </el-form-item>-->
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
<!--value mapping-->
<el-row class="form-row-title">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
{{ $t('dashboard.panel.chartForm.thresholds') }}
<span v-if="selection.pen.data.valueMappingSort !=='desc'"
style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">（0:Ok > … >{{
selection.pen.data.valueMapping.length
}}:Critical）</span>
<span v-if="selection.pen.data.valueMappingSort ==='desc'"
style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">（{{
selection.pen.data.valueMapping.length
}}:Critical > … >0:Ok）</span>
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
<el-form-item class="float-right" prop="type" style="height: 100%;">
<el-switch
v-model="selection.pen.data.valueMappingShow"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
/>
</el-form-item>
</el-row>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<!--metric-->
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<transition name="el-zoom-in-top">
<div v-show="selection.pen.data.valueMappingShow">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<el-row v-for="(item,index) in selection.pen.data.expressArr" :key="index" class="element-item form-row-item"
style="">
<promql-input
:id="index"
:key="index"
:ref="'promql-'+'-1'"
:expression-list="selection.pen.data.expressArr"
:from-father-data="true"
:index="index"
:metricOptionsParent="metricOptions"
:plugins="['metric-selector', 'metric-input', 'remove']"
:showRemove="false"
:styleType="2"
@change="expressionChange"
></promql-input>
<el-row style="margin-top: 10px">
<template>
<!--chart aggregation-->
<el-col class="legend-title">
{{ $t('dashboard.panel.chartForm.aggregation') }}&nbsp;
</el-col>
<el-col style="width: calc(100% - 120px)">
<el-select v-model="selection.pen.data.aggregation" :placeholder="$t('el.select.placeholder')"
:popper-append-to-body="false" class="right-box-row-with-btn"
popper-class="chart-box-dropdown-small"
size="mini"
style="width: 100%" value-key="chartType">
<el-option v-for="item in aggregationList" :key="item.id" :label="item.name" :value="item.name">
<span class="panel-dropdown-label-txt">{{ item.name }}</span>
</el-option>
</el-select>
</el-col>
</template>
fix： chart diagRam 细节 微调
2021-07-02 10:22:00 +08:00
</el-row>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
</el-row>
<div style="width: 100%;margin: 10px 0; box-sizing: border-box; padding: 0 10px;">
<div class="thresholds-box">
<el-row class="thresholds-title">
<el-col :span="4" class="thresholds-cell">{{ $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>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
</span>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
</el-col>
<el-col :span="4" class="thresholds-cell">{{ $t('project.topology.color') }}</el-col>
<el-col :span="6" class="thresholds-cell">{{ $t('project.topology.value') }}</el-col>
<el-col :span="8" class="thresholds-cell">{{ $t('project.topology.animation') }}</el-col>
<el-col :span="2" class="thresholds-cell"></el-col>
</el-row>
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
<el-col :span="4" class="thresholds-cell">
<span v-if="selection.pen.data.valueMappingSort==='desc'">
{{ index === 0 ? selection.pen.data.valueMapping.length - 1 : (item.level - 1) }}
</span>
<span v-else>
{{ item.level }}
</span>
</el-col>
<el-col :span="4" class="thresholds-cell">
<span v-if="item.level!==0">
<div style="display: inline-block">
<nezhaColor
:color-val="item.color"
:presetColors="predefineColors" :single="false"
: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)}"/>
</div>
</span>
<span v-else>base</span>
</el-col>
<el-col :span="6" class="thresholds-cell" style="display: flex">
<el-input
v-if="item.level!==0"
v-model.number="item.value"
size="small"
@change="valueMappingValueChange(item)"
>
<template slot="prepend"> ></template>
</el-input>
<span v-else>base</span>
</el-col>
<el-col :span="8" class="thresholds-cell">
<!--线-->
<el-select v-if="selection.pen&&selection.pen.type&&item.level!==0"
v-model="item.animateType"
:popper-append-to-body="false"
size="small">
<el-option
v-for="(item,index) in lineAnimateOptions"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<!--点-->
<el-select v-if="selection.pen&&!selection.pen.type&&item.level!==0"
v-model="item.animateType"
:popper-append-to-body="false"
size="small">
<el-option
v-for="(item,index) in nodeAnimateOptions"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<!--默认-->
<span v-if="item.level===0">base</span>
</el-col>
<el-col :span="2" class="thresholds-cell" style="text-align: center">
<i v-if="item.level!==0" class="nz-icon nz-icon-minus"
@click="valueMappingDel(index, item)">
</i>
</el-col>
</el-row>
</div>
</div>
<div class="value-mapping-add" style="text-align: center;margin: 0 10px;" @click="valueMappingAdd()">
<i class="nz-icon nz-icon-plus"></i>
fix： chart diagRam 细节 微调
2021-07-02 10:22:00 +08:00
</div>
</div>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</transition>
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
<!--tooltip-->
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<el-row class="form-row-title" :style="{'margin-top': '10px'}">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
{{ $t('dashboard.panel.chartForm.tooltip') }}
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
<el-form-item class="float-right" prop="type" style="height: 100%;">
<el-switch
v-model="selection.pen.data.tooltipShow"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
/>
</el-form-item>
</el-row>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<transition name="el-zoom-in-top">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div v-show="selection.pen.data.tooltipShow" class="tooltip-box sub-box">
<!--title-->
<el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
<el-input v-model="selection.pen.data.chartTitle" class="input" size="small"></el-input>
</el-form-item>
<!--remark-->
<el-form-item :label="$t('overall.remark')" class="full-form-item" prop="remark">
<el-input v-model="selection.pen.data.remark" :autosize="{ minRows: 2, maxRows: 6}" maxlength="256"
show-word-limit type="textarea"/>
</el-form-item>
<!--chart unit-->
<el-form-item v-show="selection.pen.data.type !='text'" :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item"
prop="unit">
<el-cascader v-model="selection.pen.data.unit"
:options="unitOptions"
:placeholder="$t('el.select.placeholder')"
:props="{ expandTrigger: 'hover',emitPath:false }"
:show-all-levels="false"
filterable
popper-class="dc-dropdown"
size="mini"
>
</el-cascader>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item half-form-item--end"
prop="type">
<el-select v-model="selection.pen.data.type" :placeholder="$t('el.select.placeholder')"
:popper-append-to-body="false" class="right-box-row-with-btn"
popper-class="chart-box-dropdown-small"
size="mini" value-key="chartType">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt">{{ item.name }}</span>
</el-option>
</el-select>
</el-form-item>
<!--value mapping-->
<el-row v-for="(item,index) in selection.pen.data.expressAllArr" :key="index"
class="element-item form-row-item"
style="width: 100%; border: 1px dashed rgba(0,0,0,0.15); border-radius: 2px; padding-right: 60px;">
<promql-input
:id="index"
:key="index"
:ref="'promql-'+index"
:expression-list="selection.pen.data.expressAllArr"
:from-father-data="true"
:index="index"
:metricOptionsParent="metricOptions"
:plugins="['metric-selector', 'metric-input', 'remove']"
:showRemove="false"
:styleType="2"
@change="expressionChange"
@removeExpression="removeExpression"
></promql-input>
<el-row style="margin-top: 10px">
<template>
<el-col class="legend-title">
{{ $t('dashboard.panel.chartForm.legend') }}&nbsp;
<el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{ $t('dashboard.panel.chartForm.legendTip') }}</div>
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"
@mouseover="rz"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-input v-model="selection.pen.data.legendsAll[index]" size="small" type="text"></el-input>
</el-col>
</template>
</el-row>
<div class="nz-icon-minus-position" style="box-sizing: border-box; padding: 10px;">
<span class="nz-icon-minus-medium">
<i class="nz-icon nz-icon-minus" @click="removeExpression(index)"></i>
</span>
<span class="nz-icon-copy">
<i class="nz-icon nz-icon-override" @click="copyExpression(index)"></i>
</span>
</div>
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
</el-row>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div class="value-mapping-add" style="text-align: center" @click="addExpression()">
<i class="nz-icon nz-icon-plus"></i>
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
</div>
</div>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</transition>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<!-- &lt;!&ndash;link&ndash;&gt;-->
<!-- <el-row class="form-row-title">-->
<!-- {{$t('project.topology.link')}}-->
<!-- </el-row>-->
<!-- <el-form-item :label="'URL'" class="full-form-item" prop="type">-->
<!-- <el-input v-model="selection.pen.data.url" class="input" size="small"></el-input>-->
<!-- </el-form-item>-->
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</el-form>
</el-tab-pane>
feat：处理 project topo 国际化
2021-02-05 15:40:16 +08:00
<el-tab-pane :label="$t('project.topology.style')" name="4">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<el-collapse v-model="activeNames">
feat：样式调整
2021-02-09 17:12:42 +08:00
<!--&lt;!&ndash;位置大小&ndash;&gt;-->
<!--<el-collapse-item :label="$t('project.topology.positionAndSize')" name="3" v-if="selection.pen&&!selection.pen.type">-->
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
<!--<div class="flex flex-warp">-->
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
<!--</div>-->
feat：样式调整
2021-02-09 17:12:42 +08:00
<!--</el-collapse-item>-->
<!--样式-->
fix：修改 下拉框被遮盖的问题
2021-02-23 10:20:35 +08:00
<el-collapse-item :title="'Style'" name="4" v-if="selection.pen">
feat：样式调整
2021-02-09 17:12:42 +08:00
<div class="flex flex-warp">
fix:修改右滑弹窗显示问题 以及termail创建不成功的问题
2021-05-11 19:17:46 +08:00
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>X</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.rect.x"
:readonly="readonly"
required
@change="onChange()"
>
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>Y</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.rect.y"
:readonly="readonly"
required
@change="onChange()">
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.width') }}</div>
fix:修改右滑弹窗显示问题 以及termail创建不成功的问题
2021-05-11 19:17:46 +08:00
<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.rect.width"
:readonly="readonly"
required
@change="onChange()"
:min="0">
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.height') }}</div>
fix:修改右滑弹窗显示问题 以及termail创建不成功的问题
2021-05-11 19:17:46 +08:00
<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.rect.height"
:readonly="readonly"
required
@change="onChange()"
:min="0">
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.circularBead') }}（0 - 1）</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="2"
controls-position="right"
size="small"
:min="0"
:max="1"
:step="0.1"
name="x"
class="input"
v-model.number="selection.pen.borderRadius"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
fix:修改右滑弹窗显示问题 以及termail创建不成功的问题
2021-05-11 19:17:46 +08:00
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.rotate') }}（°）</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="2"
controls-position="right"
size="small" name="x"
class="input"
v-model.number="selection.pen.rotate"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
fix： 添加新的图标
2021-07-08 11:41:18 +08:00
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.bac') }}</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<nezhaColor :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
@colorChange="colorChange"/>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
</div>
</div>
fix： 添加新的图标
2021-07-08 11:41:18 +08:00
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&selection.pen.iconFamily">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.iconColor') }}</div>
fix： 添加新的图标
2021-07-08 11:41:18 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<nezhaColor :value-arr="[{name:'iconColor',value:selection.pen.iconColor}]"
@colorChange="colorChange"/>
fix： 添加新的图标
2021-07-08 11:41:18 +08:00
</div>
</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.gradient') }}</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<div class="p10 pl0 gradient-to">
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
<el-select :popper-append-to-body="false" v-model="selection.pen.gradientType" size="small"
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
class="color-before-select" popper-class="color-before-select"
style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" @change="bkTypeChange">
style：修改topo渐变 下拉为图标
2021-03-04 09:24:33 +08:00
<div slot="prefix">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<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>
style：修改topo渐变 下拉为图标
2021-03-04 09:24:33 +08:00
</div>
<el-option v-for="(item,index) in bkTypeOption" :value="item.id" :key="index">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<i :class="['nz-icon',item.label,item.fontSize]"></i>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
</el-option>
feat：修改topology设置渐变的逻辑
2021-02-26 14:49:32 +08:00
<!--el-input__inner-->
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
</el-select>
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
<div class="gradient-to-color">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<nezhaColor :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]"
@colorChange="colorChange"/>
feat：修改topology设置渐变的逻辑
2021-02-26 14:49:32 +08:00
</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
</div>
</div>
<div class="props-pen-item" v-if="selection.pen">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.transparency') }}（0 - 1）</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<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>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="props-pen-item special-select">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.lineDash') }}</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
<el-select :popper-append-to-body="false" v-model="selection.pen.dash" size="small"
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
@change="onChange">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<path
:d="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0)).d"
:stroke-dasharray="penDash.find((item,i)=>i==(selection.pen.dash?selection.pen.dash:0))['stroke-dasharray']">
</path>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penDash" :value="index" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.dash==index)?'#ee9d3f':'black'" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.lineType') }}</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
<el-select :popper-append-to-body="false" v-model="selection.pen.name" size="small"
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
@change="onClickName">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<path
:d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
>
</path>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':'black'" stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.fromArrow') }}</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
<el-select :popper-append-to-body="false" v-model="selection.pen.fromArrow" size="small"
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
@change="onClickFromArrow">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="selection.pen.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(selection.pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(selection.pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.toArrow') }}</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
<el-select :popper-append-to-body="false" v-model="selection.pen.toArrow" size="small"
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
@change="onClickToArrow">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="selection.pen.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(selection.pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(selection.pen.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="props-pen-item">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.lineWidth') }}（px）</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="2"
controls-position="right"
size="small"
name="x"
class="input"
v-model.number="selection.pen.data.lineWidth"
:readonly="readonly"
required
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
:min="selection.pen.type?1:(selection.pen.name==='rectangleImg2' || selection.pen.name==='rectangleImg' || selection.pen.name==='myCube' ?0:1)"
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
@change="onChange('lineWidth')"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="props-pen-item">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.lineColor') }}</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<nezhaColor :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
@colorChange="colorChange"/>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
<div class="props-pen-item" v-if="selection.pen&&selection.pen.type">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.arrowColor') }}</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<nezhaColor :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]"
@colorChange="colorChange"/>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
</div>
</el-collapse-item>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<el-collapse-item :title="'Font'" name="5" v-if="selection.pen&&!selection.pen.type">
<div class="flex flex-warp">
<div class="props-pen-item" style="width: 100%">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.textContent') }}</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<el-input v-model="selection.pen.data.title" class="input" size="small"
@change="changeTitle"></el-input>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
</div>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div class="props-pen-item">
<div>{{ $t('project.topology.fontSize') }}</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="0"
controls-position="right"
size="small" name="x"
class="input"
v-model.number="selection.pen.font.fontSize"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
</div>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="props-pen-item">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.fontColor') }}</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<nezhaColor :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
@colorChange="colorChange"/>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="props-pen-item">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.textAlign') }}</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="false"
class="right-box-row-with-btn" popper-class="chart-box-dropdown-small"
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
size="mini"
v-model="selection.pen.font.textAlign" value-key="chartType" @change="onChange">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textAlignOptions">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<span class="panel-dropdown-label-txt">{{ item.name }}</span>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
</el-option>
</el-select>
</div>
</div>
<div class="props-pen-item">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.textBaseline') }}</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="p10 pl0">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="false"
class="right-box-row-with-btn" popper-class="chart-box-dropdown-small"
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
size="mini"
NEZ-843 fix：asset，endpoint chart 导入模板接口错误
2021-07-19 17:04:46 +08:00
v-model="selection.pen.font.textBaseline" value-key="chartType" @change="onChange">
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textBaselineOptions">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<span class="panel-dropdown-label-txt">{{ item.name }}</span>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
</el-option>
</el-select>
</div>
</div>
<div class="props-pen-item">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.textOffsetX') }}</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="0"
controls-position="right"
size="small" name="x"
class="input"
v-model.number="selection.pen.textOffsetX"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
</div>
</div>
<div class="props-pen-item">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<div>{{ $t('project.topology.textOffsetY') }}</div>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="0"
controls-position="right"
size="small" name="x"
class="input"
v-model.number="selection.pen.textOffsetY"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</el-tab-pane>
</el-tabs>
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
<!--选中多个-->
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div v-else-if="selection.pens" class="">
<el-collapse v-model="activeNames">
<!--对齐方式-->
style： 补充国际化
2021-07-19 14:04:40 +08:00
<el-collapse-item :title="$t('project.topology.align')" name="1" v-if="selection.pens">
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">
<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
@click="onNodesAlign(item.value)"></i>
</label>
</el-collapse-item>
<!--排版-->
style： 补充国际化
2021-07-19 14:04:40 +08:00
<el-collapse-item :title="$t('project.topology.composing')" name="2" v-if="selection.pens">
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div class="mt10">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<!-- <div class="flex middle mb10">-->
<!-- <label>{{$t('project.topology.maxWidth')}}：</label>-->
<!-- <div class="full pr10">-->
<!-- <el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"-->
<!-- v-model.number="layout.maxWidth" ></el-input-number>-->
<!-- </div>-->
<!-- </div>-->
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div class="flex middle mb10">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<label>{{ $t('project.topology.maxCount') }}：</label>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div class="full pr10">
fix； 修改拓扑图框选的排版选项
2021-07-14 13:50:51 +08:00
<el-input-number :precision="0" type="number" controls-position="right" class="input" size="small"
v-model.number="layout.maxCount"
title=""></el-input-number>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</div>
</div>
<div class="flex middle mb10">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<label>{{ $t('project.topology.nodeWidth') }}：</label>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div class="full pr10">
fix：补充国际化
2021-07-09 11:46:49 +08:00
<el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
fix； 修改拓扑图框选的排版选项
2021-07-14 13:50:51 +08:00
v-model.number="layout.nodeWidth" title=""></el-input-number>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</div>
</div>
<div class="flex middle mb10">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<label>{{ $t('project.topology.nodeHeight') }}：</label>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div class="full pr10">
fix：补充国际化
2021-07-09 11:46:49 +08:00
<el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
fix； 修改拓扑图框选的排版选项
2021-07-14 13:50:51 +08:00
v-model.number="layout.nodeHeight" title=""></el-input-number>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</div>
</div>
<div class="flex middle mb10">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<label>{{ $t('project.topology.spaceWidth') }}：</label>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div class="full pr10">
fix：补充国际化
2021-07-09 11:46:49 +08:00
<el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
fix； 修改拓扑图框选的排版选项
2021-07-14 13:50:51 +08:00
v-model.number="layout.spaceWidth" title=""></el-input-number>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</div>
</div>
<div class="flex middle mb10">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<label>{{ $t('project.topology.spaceHeight') }}：</label>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
<div class="full pr10">
fix：补充国际化
2021-07-09 11:46:49 +08:00
<el-input-number :precision="0" controls-position="right" type="number" class="input" size="small"
fix； 修改拓扑图框选的排版选项
2021-07-14 13:50:51 +08:00
v-model.number="layout.spaceHeight" title=""></el-input-number>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</div>
</div>
<div class="flex middle">
<label></label>
<div class="full pr10">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<button class="button primary nz-btn nz-btn-size-mini-new nz-btn-style-light-new" @click="onLayout">
{{ $t('project.topology.onLayout') }}
</button>
NEZ-805 fix ：diagram 图表bug
2021-07-05 16:40:19 +08:00
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<!-- 选中为空 -->
fix：修改从当前连线更换到其他连线 颜色选择器颜色不对的问题
2021-03-29 10:42:54 +08:00
<div v-else style="height: 100%">
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-title">
Project
</div>
<div class="project-content">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<!-- <div class="project-content-title">{{$t('project.topology.title')}}</div>-->
<!-- <div class="project-content-box" style="width: 100%">-->
<!-- <div class="project-content-item">-->
<!-- <label>{{$t('project.topology.name')}}</label>-->
<!-- <div class="full pr10">-->
<!-- <el-input class="input" size="small" v-model="topologyData.data.name" :placeholder="$t('el.select.placeholder')"-->
<!-- @change="changeTopologyOpt"></el-input>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.fontSize')}}</label>-->
<!-- <div class="full pr10 h32">-->
<!-- <el-input-number-->
<!-- @focus="inputFocus"-->
<!-- @blur="inputBlur"-->
<!-- :precision="2"-->
<!-- controls-position="right"-->
<!-- size="small"-->
<!-- name="fontSize"-->
<!-- class="input"-->
<!-- v-model.number="topologyData.data.fontSize"-->
<!-- :readonly="readonly"-->
<!-- required-->
<!-- :min="10"-->
<!-- @change="changeTopologyOpt(topologyData.data.fontSize,'fontSize')"></el-input-number>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.fontColor')}}</label>-->
<!-- <div class="full pr10 h32">-->
<!-- <nezhaColor :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
<!-- changeTopologyOpt(val,key,true)-->
<!-- }"/>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.align')}}</label>-->
<!-- <div class="full pr10 h32">-->
<!-- <el-radio-group v-model="topologyData.data.align" size="small" @change="changeTopologyOpt">-->
<!-- <el-radio-button label="left">left</el-radio-button>-->
<!-- <el-radio-button label="center">center</el-radio-button>-->
<!-- <el-radio-button label="right">right</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.opacity')}}</label>-->
<!-- <div class="full pr10 h32">-->
<!-- <el-input-number-->
<!-- @focus="inputFocus"-->
<!-- @blur="inputBlur"-->
<!-- :precision="2"-->
<!-- controls-position="right"-->
<!-- size="small"-->
<!-- name="fontSize"-->
<!-- class="input"-->
<!-- v-model.number="topologyData.data.opacity"-->
<!-- :readonly="readonly"-->
<!-- required-->
<!-- :step="0.2"-->
<!-- :min="0"-->
<!-- @change="changeTopologyOpt(topologyData.data.opacity,'opacity')"></el-input-number>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="project-content-title">-->
<!-- Appearance-->
<!-- &lt;!&ndash;{{$t('project.topology.name')}}&ndash;&gt;-->
<!-- </div>-->
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
fix：修改根据valuemapping判断时 动画给不上的问题 ，修改 再次点击同一节点的tab切换问题 feat：添加projec Title的显示
2021-02-08 17:42:48 +08:00
<div class="project-content-box" style="width: 100%">
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-item half">
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<label>{{ $t('project.topology.bac') }}</label>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="full pr10 h32">
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
<nezhaColor :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
changeTopologyOpt(val,key,true)
}"/>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<!-- <div class="project-content-item half">-->
<!-- <label>{{$t('project.topology.bacImage')}}</label>-->
<!-- <div class="full pr10 h32">-->
<!-- &lt;!&ndash;暂时是input 输入网址&ndash;&gt;-->
<!-- <el-input class="input" size="small" v-model="topologyData.data.bkImage" @change="changeTopologyOpt"></el-input>-->
<!-- </div>-->
<!-- </div>-->
fix：修改根据valuemapping判断时 动画给不上的问题 ，修改 再次点击同一节点的tab切换问题 feat：添加projec Title的显示
2021-02-08 17:42:48 +08:00
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
<!-- <div class="project-content-item half">
<label>{{$t('project.topology.rule')}}</label>
<div class="full pr10 h32">
<el-switch
v-model="topologyData.data.rule"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.rule,'rule')">
</el-switch>
</div>
</div>
<div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultStartArrow')}}</label>
<div class="full pr10 h32">
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
<el-select :popper-append-to-body='false' v-model="topologyData.data.fromArrow" size="small"
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultEndArrow')}}</label>
<div class="full pr10 h32">
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
<el-select :popper-append-to-body='false' v-model="topologyData.data.toArrow" size="small"
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
@change="changeTopologyOpt('toArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>-->
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
<!-- <div class="project-content-title">Appearance</div>-->
<!-- <div class="project-content-box" style="width: 100%">-->
<!-- <div class="project-content-item half">-->
<!-- <label>Project Info</label>-->
<!-- <div class="full pr10 h32">-->
<!-- <el-switch-->
<!-- v-model="topologyData.data.projectInfo"-->
<!-- :active-value="true"-->
<!-- :inactive-value="false"-->
<!-- active-color="#ee9d3f"-->
<!-- @change="changeTopologyOpt(topologyData.data.projectInfo,'projectInfo')">-->
<!-- </el-switch>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="project-content-item half">-->
<!-- <label>Alert Info</label>-->
<!-- <div class="full pr10 h32">-->
<!-- <el-switch-->
<!-- v-model="topologyData.data.alertInfo"-->
<!-- :active-value="true"-->
<!-- :inactive-value="false"-->
<!-- active-color="#ee9d3f"-->
<!-- @change="changeTopologyOpt(topologyData.data.alertInfo,'alertInfo')">-->
<!-- </el-switch>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="project-content-title">{{$t('project.topology.link')}}</div>-->
<!-- <div class="project-content-box" style="width: 100%">-->
<!-- <div class="project-content-item">-->
<!-- <label>Url</label>-->
<!-- <div class="full pr10">-->
<!-- <el-input class="input" size="small" v-model="topologyData.data.url" :placeholder="$t('el.select.placeholder')"-->
<!-- @change="changeTopologyOpt"></el-input>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
</div>
</template>
<script>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
import {alignNodes, spaceBetween, layout} from '@topology/layout'
import {getTopology, resetZIndex} from '../../js/common'
feat: 引入eslint
2021-03-19 18:52:19 +08:00
import chartDataFormat from '../../../charts/chartDataFormat'
import promqlInput from '../../../page/dashboard/explore/promqlInput'
import nezhaColor from '../../nezhaColor'
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
const rz = {
methods: {
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
rz(e) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
resetZIndex(e)
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}
}
export default {
// pen.type 0为node 1位line
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
data() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
return {
expressions: [],
chartTypeList: [
{
id: 'line',
name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
feat: 引入eslint
2021-03-19 18:52:19 +08:00
{
id: 'stackArea',
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
fix：修改topologo 折线图显示的问题
2021-06-03 14:30:58 +08:00
// {
// id: 'bar',
// name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
// },
NEZ-784 NEZ-770 ：endpoint 名字拼接后过长从中间截取一部分 ，以及新增 Diagram 图表类型
2021-07-01 19:15:08 +08:00
// {
// id: 'table',
// name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
// }
feat: 引入eslint
2021-03-19 18:52:19 +08:00
],
aggregationList: [
{
id: 'last',
name: 'last'
}, {
id: 'first',
name: 'first'
}, {
id: 'min',
name: 'min'
}, {
id: 'max',
name: 'max'
}, {
id: 'avg',
name: 'avg'
}, {
id: 'total',
name: 'total'
}
],
metricList: [], // metric列表
metricCascaderList: [], // metric级联列表
metricAllData: new Map(), // 存放所有的project-module-metric-labelValue，避免重复加载
metricOptions: [],
unitOptions: chartDataFormat.unitOptions(),
lineId: null,
lineIsJson: false,
lineData: '',
penId: null,
penIsJson: false,
penData: '',
tab: '1',
drowdown: 0,
readonly: false,
topologyData: {
data: {
name: '',
bkColor: '#FFFFFF',
bkImage: '',
lineName: 'curve',
lineWidth: 1,
fromArrow: '',
toArrow: 'triangleSolid',
projectInfo: true,
alertInfo: true,
url: '',
fontSize: 14,
align: 'left',
fontColor: '#000000',
opacity: 1
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
feat: 引入eslint
2021-03-19 18:52:19 +08:00
pen: {
dash: '',
font: '',
lineWidth: '',
strokeStyle: '',
textMaxLine: '',
textOffsetX: '',
textOffsetY: '',
globalAlpha: ''
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
feat: 引入eslint
2021-03-19 18:52:19 +08:00
penNumber: '',
nodesAlign: [// 对齐方式
{
value: 'left',
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
desc: this.$t('project.topology.left')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}, {
value: 'right',
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
desc: this.$t('project.topology.right')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}, {
value: 'top',
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
desc: this.$t('project.topology.topOffsetY')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}, {
value: 'bottom',
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
desc: this.$t('project.topology.bottomOffsetY')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}, {
value: 'center',
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
desc: this.$t('project.topology.center')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}, {
value: 'middle',
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
desc: this.$t('project.topology.middleOffsetY')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}],
layout: { // 显示对应属性
fix； 修改拓扑图框选的排版选项
2021-07-14 13:50:51 +08:00
maxWidth: undefined,
feat: 引入eslint
2021-03-19 18:52:19 +08:00
nodeWidth: 0,
nodeHeight: 0,
maxCount: 0,
spaceWidth: 30,
spaceHeight: 30
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
feat: 引入eslint
2021-03-19 18:52:19 +08:00
activeNames: ['1', '2', '3', '4', '5'],
show: { // 显示对应属性
pos: true,
layout: true,
looks: true
},
data: {},
bkTypeOption: [
{
id: 0,
name: 'X',
label: 'nz-icon-close',
fontSize: 'font12 v-sub'
},
{
id: 2,
name: '↑',
label: 'nz-icon-arrow-up1',
fontSize: 'font20'
},
{
id: 4,
name: '↓',
label: 'nz-icon-arrow-down2',
fontSize: 'font20'
},
{
id: 1,
name: '→',
label: 'nz-icon-arrow-right1',
fontSize: 'font12 v-sub'
},
{
id: 3,
name: '←',
label: 'nz-icon-arrow-left1',
fontSize: 'font12 v-sub'
feat：替换颜色选择器 删除页面console
2021-03-17 15:49:47 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
],
penDash: [
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
{d: 'M5 14 l85 0', 'stroke-dasharray': ''},
{d: 'M5 14 l85 0', 'stroke-dasharray': '5,5'},
{d: 'M5 14 l85 0', 'stroke-dasharray': '10,10'},
{d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10'}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
],
penLineType: [
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
{d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve'},
{d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline'},
{d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line'}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
],
penLineFromTOArrow: [
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
{d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: ''},
{
d: 'M5 14 l85 0',
points: '5 14,20 9,20 19',
fill: '#000000',
stroke: '',
'stroke-width': '',
name: 'triangleSolid'
},
feat: 引入eslint
2021-03-19 18:52:19 +08:00
{
d: 'M5 14 l85 0',
points: '5 14,20 9,20 19',
fill: '#ffffff',
stroke: '#000000',
'stroke-width': '1',
name: 'triangle'
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
{
d: 'M5 14 l85 0',
fill: '#000000',
stroke: '',
'stroke-width': '',
cx: '10',
cy: '14',
r: '5',
name: 'circleSolid'
},
{
d: 'M5 14 l85 0',
fill: '#ffffff',
stroke: '#000000',
'stroke-width': '1',
cx: '10',
cy: '14',
r: '5',
name: 'circle'
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
],
lineAnimateOptions: [
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
{id: 1, name: this.$t('project.topology.flow')},
{id: 'beads', name: this.$t('project.topology.beads')},
{id: 'dot', name: this.$t('project.topology.dot')},
{id: 'comet', name: this.$t('project.topology.comet')},
{id: 'custom', name: this.$t('project.topology.none')}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
],
nodeAnimateOptions: [
{
id: 'upDown',
name: this.$t('project.topology.bounce')
},
{
id: 'leftRight',
name: this.$t('project.topology.shakeX')
},
{
id: 'heart',
name: this.$t('project.topology.heartBeat')
},
{
id: 'warning',
name: this.$t('project.topology.flash')
},
{
id: 'show',
name: this.$t('project.topology.swing')
},
{
id: 'fade',
name: this.$t('project.topology.fade')
fix:修改右滑弹窗显示问题 以及termail创建不成功的问题
2021-05-11 19:17:46 +08:00
},
{
id: '',
name: this.$t('project.topology.none')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}
],
predefineColors: [
'#19730E', '#37872D', '#73BF69',
'#CC9D00', '#E0B400', '#FADE2A',
'#AD0317', '#C4162A', '#F2495C',
'#1250B0', '#1F60C4', '#5794F2',
'#E55400', '#FA6400', '#FF9830',
'#7C2EA3', '#8F3BB8', '#B877D9'
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
],
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
loading: false,
textAlignOptions: [
{
id: 'left',
name: this.$t('project.topology.left')
},
{
id: 'center',
name: this.$t('project.topology.center')
},
{
id: 'right',
name: this.$t('project.topology.right')
}
],
textBaselineOptions: [
{
id: 'top',
name: this.$t('project.topology.topOffsetY')
},
{
id: 'middle',
name: this.$t('project.topology.middleOffsetY')
},
{
id: 'bottom',
name: this.$t('project.topology.bottomOffsetY')
}
]
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}
},
mixins: [rz],
components: {
promqlInput,
nezhaColor
},
computed: {},
props: {
selection: {
type: Object,
require: true
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
},
feat: 引入eslint
2021-03-19 18:52:19 +08:00
index: {
type: Number,
require: true
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
modules: {},
feat：chart 添加topolog图
2021-06-29 14:10:41 +08:00
imgArr: {},
fromDiagram: {
type: Boolean,
default: false
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
},
watch: {
// 'topologyData.data':{
// handler(n){
// setTimeout(()=>{
// let dataOption=getTopology(this.index).data;
// Object.keys(this.topologyData.data).forEach((key)=>{
// dataOption[key]=this.topologyData.data[key];
// });
// getTopology(this.index).render();
// })
// },
// deep:true,
// immediate:false,
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
// },
selection: {
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
handler() {
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
// this.loading = false
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length === 0)) {
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
this.selection.pen.data.expressAllArr = ['']
this.selection.pen.data.legendsAll = ['']
}
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
},
deep: true,
immediate: true
},
feat：chart 添加topolog图
2021-06-29 14:10:41 +08:00
fromDiagram: {
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
handler() {
feat：chart 添加topolog图
2021-06-29 14:10:41 +08:00
if (this.selection.pen && this.selection.pen.data) {
// eslint-disable-next-line vue/no-mutating-props
this.selection.pen.data.iconToolState = false
}
},
deep: true,
immediate: true
},
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
imgArr: {
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
handler() {
Nez-706 ： feat： topo上传图片 支持删除
2021-06-02 15:02:08 +08:00
// this.loading = false
},
deep: true,
immediate: true
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
created() {
feat：chart 添加topolog图
2021-06-29 14:10:41 +08:00
const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (!dataOption.data) {
dataOption.data = {}
}
Object.keys(this.topologyData.data).forEach((key) => {
if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity') {
this.topologyData.data[key] = (JSON.stringify(dataOption.data[key]) ? dataOption.data[key] : this.topologyData.data[key])
} else {
this.topologyData.data[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.topologyData.data[key])
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
})
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
mounted() {
fix：修复拖动节点 频繁调用接口的问题
2021-04-28 19:26:49 +08:00
// this.queryMetrics()
feat: 引入eslint
2021-03-19 18:52:19 +08:00
// this.topologyData.data.grid= !!dataOption.grid;
// this.topologyData.data.rule= !!dataOption.rule;
// this.topologyData.data.projectInfo= !!dataOption.projectInfo;
// this.topologyData.data.alertInfo= !!dataOption.alertInfo;
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
updated(n, o) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (!this.selection.pen) { // 没选中node line返回
return
}
if (this.penId === this.selection.pen.id) {
return
}
if (this.selection.pen.id) {
this.selection.expand = false
this.penId = this.selection.pen.id
const originData = this.selection.pen.data
this.penIsJson = this.isJson(originData)
this.penData = this.penIsJson
? JSON.stringify(originData, null, 4)
: this.penData = originData
}
},
methods: {
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
queryMetrics() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.metricOptions = []
this.$get('prom/api/v1/label/__name__/values').then(response => {
if (response.status == 'success') {
const metrics = response.data.sort()
const metricMap = new Map()
metrics.forEach((item) => {
let key = ''
if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
key = item.split('_')[0]
} else if (/^_\w*/.test(item)) {
key = ' '
} else {
key = item
}
if (metricMap.get(key)) {
const values = metricMap.get(key)
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
values.push({label: item, value: item})
feat: 引入eslint
2021-03-19 18:52:19 +08:00
} else {
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
const values = [{label: item, value: item}]
feat: 引入eslint
2021-03-19 18:52:19 +08:00
metricMap.set(key, values)
}
// this.metricStore.push({label:item,value:item,insertText:item})
})
for (const key of metricMap.keys()) {
const option = {
label: key,
value: key
}
if (metricMap.get(key) && metricMap.get(key).length > 1) {
option.children = metricMap.get(key)
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.metricOptions.push(option)
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
})
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
tabClick(n) {
},
moduleIdChange(n) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.selection.pen.data.moduleName = this.modules.find(item => item.id === n).name
if (!this.selection.pen.data.title) {
this.selection.pen.data.title = this.selection.pen.data.moduleName
this.selection.pen.text = this.selection.pen.data.title
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
this.onChange()
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.$emit('notModuleIDArrChange', this.selection.pen.id)
}
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
changeTitle(val) {
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
if (!val) {
this.selection.pen.text = this.selection.pen.data.moduleName || ''
this.selection.pen.data.title = this.selection.pen.data.moduleName || ''
} else {
this.selection.pen.text = val
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onChange(value) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (value === 'lineWidth') {
this.selection.pen.lineWidth = this.selection.pen.data.lineWidth
}
this.$emit('change', this.selection.pen)
// if(!this.selection.pen.type||this.selection.pens){
// this.$emit('change',this.selection.pen||this.selection.pens);
// }else{// 线更新
// this.$emit('change');
// }
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
changeExpand() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.selection.expand = !this.selection.expand
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
isJson(obj) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
return typeof (obj) === 'object' && Object.prototype.toString.call(obj).toLowerCase() == '[object object]' && !obj.length
},
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
// 组件事件
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onNodesAlign(align) { // 对齐node
feat: 引入eslint
2021-03-19 18:52:19 +08:00
alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
getTopology(this.index).updateProps()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onSpaceBetween() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
getTopology(this.index).updateProps()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onLayout() { // 改变布局
feat: 引入eslint
2021-03-19 18:52:19 +08:00
layout(getTopology(this.index).activeLayer.pens, this.layout)
getTopology(this.index).updateProps()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onClickDash(number) { // 改变线型
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.pen.dash = number
this.drowdown = 0
if (this.selection.pen) {
this.selection.pen.dash = number
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onClickName(name) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.pen.name = name
fix：修改topology图编辑缩放时 缩放显示没有相应变化的bug
2021-03-29 15:50:52 +08:00
// this.pen.calcControlPoints()
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.drowdown = 0
if (this.selection.pen) {
this.selection.pen.name = name
}
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
bkTypeChange(val) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.selection.pen.data.gradientType = val
this.$forceUpdate()
if (val === 0) {
this.selection.pen.bkType = 0
}
feat：修改topology设置渐变的逻辑
2021-02-26 14:49:32 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (val === 1 || val === 3) {
this.selection.pen.bkType = 1
this.selection.pen.gradientAngle = 0
}
if (val === 2 || val === 4) {
this.selection.pen.bkType = 1
this.selection.pen.gradientAngle = 90
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (val === 1 || val === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
}
if (val === 3 || val === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
}
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
colorPickerClick(ref) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.$refs[ref].showPicker = true
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
colorPickerClickTable(ref, row) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
row.showColor = row.color.fill
row.showType = 'fill'
this.$nextTick(() => {
this.$refs[ref][0].showPicker = true
})
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
colorChange(val, name) { // 改变颜色
feat: 引入eslint
2021-03-19 18:52:19 +08:00
const bktype = this.selection.pen.data.gradientType
if (name === 'toArrowColor') {
this.selection.pen.fromArrowColor = this.colorRGBtoHex(val)
this.selection.pen.toArrowColor = this.colorRGBtoHex(val)
this.selection.pen.data.fromArrowColor = this.colorRGBtoHex(val)
this.selection.pen.data.toArrowColor = this.colorRGBtoHex(val)
this.selection.pen.data.arrowColor = this.colorRGBtoHex(val)
} else {
this.selection.pen[name] = this.colorRGBtoHex(val)
}
if (name === 'gradientColor') {
this.selection.pen.data.gradientColor = this.colorRGBtoHex(val)
if (bktype === 1 || bktype === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (bktype === 3 || bktype === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (name === 'fillStyle') {
if (bktype === 1 || bktype === 2) {
this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (bktype === 3 || bktype === 4) {
this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
feat：修改topology设置渐变的逻辑
2021-02-26 14:49:32 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}
NEZ-839 feat:diagram 图表支持 font 配置 & tooltip 增加 description 配置项及展示
2021-07-19 10:32:03 +08:00
if (name === 'fontColor') {
this.selection.pen.font.color = this.colorRGBtoHex(val)
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.selection.pen.data[name] = this.colorRGBtoHex(val)
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
colorChangeTable(item, val, key) { // 改变颜色
feat: 引入eslint
2021-03-19 18:52:19 +08:00
item.color[key] = this.colorRGBtoHex(val)
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
changeShowPicker(item, type) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.$refs['colorPickerBac' + item.level][0].showPicker = true
item.showType = type
item.showColor = item.color[type]
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
colorOut(obj, e) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
let flag = false
e.path.forEach((item) => {
if (item.className === 'el-color-dropdown el-color-picker__panel' || item.className === 'color-tab') {
flag = true
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
})
if (flag) {
return
}
obj.showType = ''
obj.showColor = undefined
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
changeTopologyOpt(val, key, isColor) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
//
// getTopology(this.index).data[key]=val;
// getTopology(this.index).render();
if (isColor) {
this.topologyData.data[key] = this.colorRGBtoHex(val)
} else {
this.topologyData.data[key] = val
}
Object.keys(this.topologyData.data).forEach((key1) => {
if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity') {
getTopology(this.index).data.data[key1] = this.topologyData.data[key1]
} else {
getTopology(this.index).data[key1] = this.topologyData.data[key1]
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
})
getTopology(this.index).render()
this.$emit('changeProjectTitle')
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
colorRGBtoHex(color) { // 获取颜色16进制数
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (!color) {
return ''
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
;
if (color.length <= 7) {
return color
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
const rgb = color.split(',')
const r = parseInt(rgb[0].split('(')[1])
const g = parseInt(rgb[1])
const b = parseInt(rgb[2].split(')')[0])
const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
return hex
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onClickToArrow(arrow) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.selection.pen.toArrow = arrow
this.drowdown = 0
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onClickFromArrow(arrow) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.selection.pen.fromArrow = arrow
this.drowdown = 0
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
changeAnimatePlay(val, type) {
fix:修改右滑弹窗显示问题 以及termail创建不成功的问题
2021-05-11 19:17:46 +08:00
if (type === 'node') {
if (val === 'custom') {
this.selection.pen.data.animatePlay = false
} else {
this.selection.pen.data.animatePlay = true
}
} else if (type === 'line') {
if (val === 'custom') {
this.selection.pen.data.animatePlay = false
} else {
this.selection.pen.data.animatePlay = true
}
}
this.onChange()
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
onAnimate(val) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
// this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
// this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;
this.onChange()
// this.$emit('animate');
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
delTopologyPen() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
this.$emit('del', delObj)
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
getMetricOptions() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
return this.metricOptions
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
addExpression() {
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
this.selection.pen.data.expressAllArr.push('')
this.selection.pen.data.legendsAll.push('')
feat: 引入eslint
2021-03-19 18:52:19 +08:00
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
expressionChange(item) {
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
removeExpression(index) {
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
if (this.selection.pen.data.expressAllArr.length > 1) {
this.selection.pen.data.expressAllArr.splice(index, 1)
this.selection.pen.data.legendsAll.splice(index, 1)
feat: chart-box增加复制expression功能
2021-03-11 19:59:47 +08:00
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.$refs[`promql-${index}`][0].metricChange(ex)
feta：添加正序倒序
2021-02-09 16:27:22 +08:00
}
})
feat: 引入eslint
2021-03-19 18:52:19 +08:00
})
}
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
copyExpression(index) {
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
this.selection.pen.data.expressAllArr.push(this.selection.pen.data.expressAllArr[index])
this.selection.pen.data.legendsAll.push(this.selection.pen.data.legendsAll[index])
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex)
}
})
})
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
valueMappingAdd() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (this.selection.pen.data.valueMappingSort === 'desc') {
this.selection.pen.data.valueMapping.push({
color: {
line: '#000000',
fill: '#ffffff',
text: '#000000'
},
showColor: undefined,
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
animateType: this.selection.pen.type ? 1 : '',
feat: 引入eslint
2021-03-19 18:52:19 +08:00
value: 0,
level: 1,
showType: 'fill'// bac text border
})
this.selection.pen.data.valueMapping.forEach((item, index) => {
if (index === 0) {
return
}
item.level = this.selection.pen.data.valueMapping.length - index
})
} else {
this.selection.pen.data.valueMapping.push({
color: {
line: '#000000',
fill: '#ffffff',
text: '#000000'
},
showColor: undefined,
fix： chart Diagram bug 修改
2021-07-08 15:03:25 +08:00
animateType: this.selection.pen.type ? 1 : '',
feat: 引入eslint
2021-03-19 18:52:19 +08:00
value: 0,
level: this.selection.pen.data.valueMapping.length,
showType: 'fill'// bac text border
})
}
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
valueMappingValueChange(index, row) {
fix：修改根据valuemapping判断时 动画给不上的问题 ，修改 再次点击同一节点的tab切换问题 feat：添加projec Title的显示
2021-02-08 17:42:48 +08:00
feat: 引入eslint
2021-03-19 18:52:19 +08:00
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
changeValueMappingSort() {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
if (this.selection.pen.data.valueMappingSort === 'desc') {
this.selection.pen.data.valueMappingSort = 'asc'
const arr = JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping))
const a = arr.splice(0, 1)
arr.reverse()
arr.unshift(a[0])
this.selection.pen.data.valueMapping = arr
} else {
this.selection.pen.data.valueMappingSort = 'desc'
const arr = JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping))
const a = arr.splice(0, 1)
arr.reverse()
arr.unshift(a[0])
this.selection.pen.data.valueMapping = arr
}
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
valueMappingDel(index, row) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
this.selection.pen.data.valueMapping.splice(index, 1)
this.selection.pen.data.valueMapping.forEach((item, index) => {
item.level = index
})
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
inputFocus(e) {
feat: 引入eslint
2021-03-19 18:52:19 +08:00
e.path[2].children[0].setAttribute('tabindex', '0')
e.path[2].children[1].setAttribute('tabindex', '1')
},
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
inputBlur(e) {
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
}
feat: 引入eslint
2021-03-19 18:52:19 +08:00
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</script>
<style scoped>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.props-box label {
line-height: 32px;
width: 100px;
font-size: 14px;
text-align: right;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.props-box .iconLabel {
line-height: 32px;
width: 24px;
font-size: 14px;
text-align: center;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.props-box /deep/ .el-tabs--card > .el-tabs__header {
background: #EEEEEE;
border: none;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
background: #FFFFFF;
font-family: Roboto-Bold;
font-size: 14px;
color: #FA901C;
font-weight: 700;
border-bottom-color: #FFF;
border-top: 3px solid #FA901C;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
box-sizing: content-box;
height: 31px;
line-height: 31px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</style>
<style>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.can-clear.el-color-dropdown .el-color-dropdown__link-btn {
display: inline-block !important;
margin-right: 5px;
}
.no-style-class.el-color-picker__panel {
border-radius: 0 0 5px 5px;
border-top: none;
}
.icon-item {
width: 75%;
height: 100%;
padding-left: 25%;
}
.icon-item svg {
width: 180px;
height: 100%;
}
.el-color-predefine__color-selector:nth-child(10n+1) {
margin-left: 8px;
}
.el-color-predefine__color-selector {
margin: 0 0 8px 8px;
width: 22px;
height: 22px;
}
.color-before-select .el-input__inner {
background: rgb(245, 247, 250);
}
.color-before-select .el-input__prefix {
left: 1px;
/*color: #333;*/
width: 30px;
height: 29px;
top: 1px;
}
.color-before-select .el-select-dropdown__item {
text-align: center;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</style>
<style lang="scss" scoped>
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .metric-selector-input-box {
width: calc(100% - 120px) !important;
}
/deep/ .query-row .input-box {
margin: 0;
}
.legend-title {
width: 100px;
margin-right: 10px;
text-align: left;
padding-left: 0px;
margin-left: 10px;
height: 32px;
line-height: 32px;
font-size: 14px;
color: #606266;
}
.project-title {
background: #eeeeee;
height: 36px;
line-height: 36px;
border-radius: 0;
padding-left: 10px;
}
.project-content {
margin: 10px;
height: calc(100% - 50px);
overflow-y: auto;
.project-content-title {
background: #F6F6F6;
padding-left: 10px;
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
font-size: 14px;
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
color: #333333;
letter-spacing: 0;
font-weight: 400;
height: 32px;
line-height: 31px;
margin-bottom: 5px;
style：修改metric的输入框的样式
2021-03-18 17:03:29 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.project-content-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.half.project-content-item {
width: calc(50% - 15px);
height: 64px;
label {
width: auto;
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.project-content-item {
padding-left: 10px;
display: inline-block;
position: relative;
width: 100%;
label {
font-family: PingFangSC-Regular;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
font-size: 14px;
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
color: #666666;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
letter-spacing: 0;
font-weight: 400;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.h32 {
height: 32px;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.project-content.node-content {
overflow-y: unset;
height: auto;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-select-dropdown__wrap {
max-height: 190px;
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.pens-data {
/deep/ .el-form-item {
margin-bottom: 10px;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.half-form-item {
width: calc(50% - 5px);
display: inline-block;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.half-form-item--end {
margin-left: 5px;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.full-form-item {
width: 100%;
display: inline-block;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.form-row-title {
height: 32px;
line-height: 32px;
background: #F6F6F6;
font-size: 14px;
padding: 0 10px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-form-item__content {
height: 100%;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
line-height: 32px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
> div {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: 100%;
}
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-form-item__content {
> div {
NEZ-770 feat：chart类型添加
2021-07-01 15:56:24 +08:00
width: 100%;
style：project topo 样式调整
2021-05-06 13:33:07 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-form-item__label {
line-height: 0;
padding: 0;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.element-item {
padding: 10px 10px 10px 0;
width: 100%;
margin-bottom: 10px;
margin-top: 10px;
}
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.right-box-form .element-item.form-row-item {
width: calc(100% - 120px);
padding: 20px 20px 20px 0;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.form-row-item .nz-icon-minus-position .nz-icon-minus-medium {
background: rgba(236, 127, 102, 0.1);
padding: 2px 6px;
color: #EC7F66;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.form-row-item .nz-icon-minus-position {
right: 6px;
}
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.sub-box {
padding: 0 10px;
}
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.props-box {
/deep/ .el-tabs.el-tabs--card {
height: 100%;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.el-tabs__content {
height: calc(100% - 55px) !important;
overflow-y: auto;
padding: 0 10px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-collapse {
background: #fff;
border: none;
font-size: 14px;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-collapse-item__header {
padding: 0 10px;
background-color: #eeeeee;
height: 32px;
font-size: 14px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
color: #333333;
letter-spacing: 0;
font-weight: 400;
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
line-height: 14px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-collapse-item {
feat：样式微调
2021-02-04 18:35:53 +08:00
margin-bottom: 10px;
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-collapse-item__wrap {
padding: 0 10px;
background-color: #ffffff;
border: none;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-collapse-item__content {
padding: 10px 0 0 0;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
visibility: hidden;
outline: none;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-input-number:focus {
.el-input-number__decrease, .el-input-number__increase {
visibility: visible;
outline: none;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-input-number:focus-within {
.el-input-number__decrease, .el-input-number__increase {
visibility: visible;
outline: none;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.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;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.thresholds-cell {
border-bottom: 1px solid #E7EAED;
border-right: 1px solid #E7EAED;
padding: 5px 5px;
height: 42px;
line-height: 32px;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-input-group__prepend {
padding: 0 10px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.is-arrow-active {
color: #FA901C;
}
.nz-icon.nz-icon-arrow-up1 {
margin-right: -15px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.value-mapping-add {
background: #FA901C30;
margin-bottom: 10px;
height: 24px;
line-height: 24px;
color: #FA901C;
box-sizing: border-box;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.mb10 {
margin-bottom: 10px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.mt10 {
margin-top: 10px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.p10 {
padding: 10px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.pl0 {
padding-left: 0;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.special-select .el-select.el-select--small {
width: 100%;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.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;
height: 28px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
display: none;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
height: 28px;
line-height: 28px;
color: #899FB7;
width: 100%;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.special-select /deep/ .el-input__prefix > div {
width: 100%;
height: 100%;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.props-box {
position: relative;
width: 100%;
height: calc(100% - 20px);
padding-bottom: 20px;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.iconfont {
cursor: pointer;
}
.iconfontSize16 {
font-size: 16px;
margin-right: 5px;
}
.flex {
display: flex;
.full {
flex: 1;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.flex-warp {
flex-wrap: wrap;
}
.props-pen-item {
width: 50%;
.p10 {
position: relative;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.gradient-to {
/deep/ .el-select.el-select--small {
vertical-align: top;
width: calc(100% - 42px);
margin-left: 5px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.gradient-to-color {
display: inline-block;
width: calc(100% - 70px);
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.icon-item {
width: 75%;
height: 100%;
padding-left: 25%;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.icon-item svg {
width: 100%;
height: 100%;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.del-btn {
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
position: absolute;
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
top: 0;
right: 0;
border: none;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
cursor: pointer;
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
z-index: 2;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.del-btn:hover {
background: #D8D7D7 !important;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.bottom {
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
font-size: 14px;
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
position: absolute;
bottom: 10px;
left: 10px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/deep/ .el-input-number--small {
width: auto;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
}
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.color-content {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: 15px;
left: 66px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.thresholds-cell .color-content {
top: 32px;
left: 137px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.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;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
.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;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
NEZ-850 perf: topo/diagram样式调整
2021-07-19 18:06:55 +08:00
/*.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 {
position: relative;
}
.color-show {
border: 1px solid #E7EAED;
border-radius: 5px;
display: flex;
align-items: center;
width: 100%;
height: 30px;
}
.color-show .color-text {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
.color-show-left {
width: 18px;
height: 18px;
border: 1px solid #E7EAED;
border-radius: 5px;
margin: 0 5px;
}
.color-arrows {
color: #C0C4CC;
position: absolute;
right: 12px;
}
.color-arrows .nz-icon {
font-size: 12px;
}
.v-sub {
vertical-align: sub;
}
.font12 {
font-size: 12px;
}
.font20 {
font-size: 20px;
}
/deep/ .metric-selector-title {
margin-left: 10px;
}
/deep/ .query-row .input-box {
margin-right: 0 !important;
}
/deep/ .el-cascader-node {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/deep/ .nz-cascade-temp {
box-sizing: border-box;
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/deep/ .metric-selector-title {
background: #fff !important;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</style>
Reference in New Issue Copy Permalink