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
b5643f35014c0f28c5967235239de333ed979408
nezha-nezha-fronted/nezha-fronted/src/components/common/project/L5/CanvasProps.vue

2152 lines
75 KiB
Vue
Raw Normal View History

feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<template>
<div class="props-box">
<!--删除按钮-->
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">
<el-tab-pane label="数据" 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-->
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type" class="half-form-item">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<el-select v-model="selection.pen.data.moduleId" placeholder="" popper-class="asset-dropdown" size="small"
@change="moduleIdChange" :popper-append-to-body="false">
<el-option
v-for="item in modules"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<!--iconToolState-->
<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"
/>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</el-form-item>
<!--metric-->
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="right-box-sub-title" style="margin-bottom: 10px">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<span>{{$t('alert.config.expr')}}</span>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<span class="create-square-box">
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
</span>
</span>
</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<el-row :key="index" class="element-item form-row-item" style=""
v-for="(item,index) in selection.pen.data.expressArr">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<promql-input
:expression-list="selection.pen.data.expressArr"
:id="index"
:index="index"
:key="index"
:plugins="['metric-selector', 'metric-input', 'remove']"
:ref="'promql-'+index"
:showRemove="false"
:styleType="2"
:metricOptionsParent="metricOptions"
@change="expressionChange"
@removeExpression="removeExpression"
></promql-input>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$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>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<i class="nz-icon nz-icon-info-normal" slot="reference" @mouseover="rz"
style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-input size="small" type="text" v-model="selection.pen.data.legends[index]"></el-input>
</el-col>
</template>
</el-row>
<span class="nz-icon-minus-medium nz-icon-minus-position">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<i class="nz-icon nz-icon-minus" @click="removeExpression(index)"></i>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</span>
</el-row>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<!--tooltip-->
<el-row class="form-row-title">
{{$t('dashboard.panel.chartForm.tooltip')}}
<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>
<div class="tooltip-box">
<!--title-->
<el-form-item :label="'Title'" class="full-form-item" prop="type">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<el-input v-model="selection.pen.data.title" @change="changeTitle" class="input" size="small"></el-input>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
</el-form-item>
<!--chart aggregation-->
<el-form-item :label="$t('dashboard.panel.chartForm.aggregation')" class="half-form-item" prop="type">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<el-select class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small"
size="mini"
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
v-model="selection.pen.data.aggregation" value-key="chartType">
<el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
<span class="panel-dropdown-label-txt">{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!--chart unit-->
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit"
v-show="selection.pen.data.type !='text'">
<el-cascader :options="unitOptions"
:props="{ expandTrigger: 'hover',emitPath:false }"
:show-all-levels="false"
filterable
placeholder=""
popper-class="dc-dropdown"
size="mini"
v-model="selection.pen.data.unit"
>
</el-cascader>
</el-form-item>
<!--displayChart-->
<el-form-item :label="$t('dashboard.panel.chartForm.displayChart')" class="half-form-item" prop="type">
<el-switch
v-model="selection.pen.data.displayChart"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
/>
</el-form-item>
<!--chart type-->
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<el-select class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small"
size="mini"
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
v-model="selection.pen.data.type" value-key="chartType">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList">
<span class="panel-dropdown-label-txt">{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<!--value mapping-->
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<el-row class="form-row-title">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
{{'Thresholds'}} <span
style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">（0:Ok > … >2:Critical）</span>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
</el-row>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<div style="width: 100%;margin-top: 10px">
<div class="thresholds-box">
<el-row class="thresholds-title">
<el-col class="thresholds-cell" :span="4">Level</el-col>
<el-col class="thresholds-cell" :span="4">Color</el-col>
<el-col class="thresholds-cell" :span="4">Value</el-col>
<el-col class="thresholds-cell" :span="8">Animation</el-col>
<el-col class="thresholds-cell" :span="4"></el-col>
</el-row>
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
<el-col class="thresholds-cell" :span="4"> {{item.level}}</el-col>
<el-col class="thresholds-cell" :span="4">
<span v-if="item.level!==0">
<div style="display: inline-block">
<div @click="colorPickerClickTable('colorPickerBac'+item.level,item)"
class="color-show"
v-clickoutside="(e)=>{colorOut(item,e)}"
style="width: 32px"
>
<div :style="{background:item.color.fill,border:'2px solid '+item.color.line,'line-height':'18px'}" class="color-show-left">
<span :style="{color:item.color.text}" style="line-height: 18px;margin-left: 6px">
T
</span>
</div>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
:ref="'colorPickerBac'+item.level"
@active-change="(val)=>colorChangeTable(item,val)"
popper-class="no-style-class"
v-model="item.showColor"
>
</el-color-picker>
</div>
<div
class="color-tab"
v-if="item.showColor">
<div :class="{'color-active':item.showType=='fill'}" @click="changeShowPicker(item ,'fill')">Fill</div>
<div :class="{'color-active':item.showType=='line'}" @click="changeShowPicker(item , 'line')">Line</div>
<div :class="{'color-active':item.showType=='text'}" @click="changeShowPicker(item , 'text')">Text</div>
</div>
</div>
<span> > </span>
</span>
<span v-else>base</span>
</el-col>
<el-col class="thresholds-cell" :span="4">
<el-input
v-if="item.level!==0"
v-model="item.value"
@change="valueMappingValueChange(item)"
size="small"
/>
<span v-else>base</span>
</el-col>
<el-col class="thresholds-cell" :span="8">
<!--线-->
<el-select
v-model="item.animateType"
placeholder="请选择"
size="small"
v-if="selection.pen&&selection.pen.type&&item.level!==0">
<el-option
v-for="(item,index) in lineAnimateOptions"
:value="item.id"
:key="index"
:label="item.name">
</el-option>
</el-select>
<!--点-->
<el-select
v-model="item.animateType"
placeholder="请选择"
size="small"
v-if="selection.pen&&!selection.pen.type&&item.level!==0">
<el-option
v-for="(item,index) in nodeAnimateOptions"
:value="item.id"
:key="index"
:label="item.name">
</el-option>
</el-select>
<!--默认-->
<span v-if="item.level===0">base</span>
</el-col>
<el-col class="thresholds-cell" :span="4">
<i v-if="item.level!==0" @click="valueMappingDel(index, item)"
class="nz-icon nz-icon-minus">
</i>
</el-col>
</el-row>
</div>
</div>
<div @click="valueMappingAdd()" style="text-align: center">
<i class="nz-icon nz-icon-plus"></i>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
</div>
<!--link-->
<el-row class="form-row-title">
{{'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：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</el-form>
</el-tab-pane>
<el-tab-pane label="属性" name="4">
<el-collapse v-model="activeNames">
<!--位置大小-->
<el-collapse-item title="位置和大小" name="3" v-if="selection.pen&&!selection.pen.type">
<div class="flex flex-warp">
<div class="props-pen-item">
<div>X（px）</div>
<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.rect.x"
:readonly="readonly"
required
@change="onChange()"
></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
<div class="props-pen-item">
<div>Y（px）</div>
<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.rect.y"
:readonly="readonly"
required
@change="onChange()"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
<div class="props-pen-item">
<div>宽（px）</div>
<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.rect.width"
:readonly="readonly"
required
@change="onChange()"
:min="0"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
<div class="props-pen-item">
<div>高（px）</div>
<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.rect.height"
:readonly="readonly"
required
@change="onChange()"
:min="0"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
<div class="props-pen-item">
<div title="百分比%对应的小数值">圆角（0 - 1）</div>
<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>
<div class="props-pen-item">
<div>旋转（°）</div>
<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>
<div class="props-pen-item">
<div>内边距 上（px）</div>
<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.paddingTop"
:readonly="readonly"
required
@change="onChange()"
:min="0"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
<div class="props-pen-item">
<div>内边距 下（px）</div>
<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.paddingBottom"
:readonly="readonly"
required
@change="onChange()"
:min="0"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
<div class="props-pen-item">
<div>内边距 左（px）</div>
<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.paddingLeft"
:readonly="readonly"
required
@change="onChange()"
:min="0"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
<div class="props-pen-item">
<div>内边距 右（px）</div>
<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.paddingRight"
:readonly="readonly"
required
@change="onChange()"
:min="0"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
</div>
</el-collapse-item>
<!--样式-->
<el-collapse-item title="样式" name="4" v-if="selection.pen">
<div class="flex flex-warp">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>背景颜色</div>
<div class="p10 pl0">
<div class="color-show" @click="colorPickerClick('fillStyle')">
<div class="color-show-left" :style="{background:selection.pen.fillStyle}"></div>
<span class="color-text"> {{selection.pen.fillStyle}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['fillStyle']&&!$refs['fillStyle'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['fillStyle']&&$refs['fillStyle'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.fillStyle"
ref="fillStyle"
@active-change="(val)=>colorChange(val,'fillStyle')"
>
</el-color-picker>
</div>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>Gradient</div>
<div class="p10 pl0 gradient-to">
<el-color-picker
v-model="selection.pen.gradientToColor"
ref="gradientToColor"
@active-change="(val)=>colorChange(val,'gradientToColor')"
size="small"
>
</el-color-picker>
<el-select v-model="selection.pen.bkType" placeholder="请选择" size="small"
:popper-append-to-body="false" @change="bkTypeChange">
<el-option v-for="(item,index) in bkTypeOption" :value="item.id" :key="index"
:label="item.name">
</el-option>
</el-select>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen">
<div>透明度（0 - 1）</div>
<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">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div>线条样式</div>
<div class="p10 pl0">
<el-select v-model="selection.pen.dash" placeholder="请选择" size="small" :popper-append-to-body="false"
@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">
<div>连线类型</div>
<div class="p10 pl0">
<el-select v-model="selection.pen.name" placeholder="请选择" size="small" :popper-append-to-body="false"
@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">
<div>起点箭头</div>
<div class="p10 pl0">
<el-select v-model="selection.pen.fromArrow" placeholder="请选择" size="small"
:popper-append-to-body="false" @change="onClickFromArrow">
<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">
<div>终点箭头</div>
<div class="p10 pl0">
<el-select v-model="selection.pen.toArrow" placeholder="请选择" size="small"
:popper-append-to-body="false" @change="onClickToArrow">
<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">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div>线条宽度（px）</div>
<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
:min="selection.pen.type?1:(selection.pen.name==='rectangleImg' ||selection.pen.name==='myCube'?0:1)"
@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">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div>线条颜色</div>
<div class="p10 pl0">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="color-show" @click="colorPickerClick('strokeStyle')">
<div class="color-show-left" :style="{background:selection.pen.strokeStyle}"></div>
<span class="color-text"> {{selection.pen.strokeStyle}}</span>
<span class="color-arrows">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<i class="nz-icon nz-icon-arrow-down"
v-if="$refs['strokeStyle']&&!$refs['strokeStyle'].showPicker"></i>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['strokeStyle']&&$refs['strokeStyle'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.strokeStyle"
ref="strokeStyle"
@active-change="(val)=>colorChange(val,'strokeStyle')"
>
</el-color-picker>
</div>
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" v-if="selection.pen.type">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
<div>箭头颜色</div>
<div class="p10 pl0">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="color-show" @click="colorPickerClick('arrowColor')">
<div class="color-show-left" :style="{background:selection.pen.arrowColor}"></div>
<span class="color-text"> {{selection.pen.arrowColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['arrowColor']&&!$refs['arrowColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['arrowColor']&&$refs['arrowColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.arrowColor"
ref="arrowColor"
@active-change="(val)=>colorChange(val,'arrowColor')"
>
</el-color-picker>
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="project-content node-content">
<div class="project-content-title">Animation
<span class="float-right" style="margin-right: 10px">
<el-switch
v-model="selection.pen.animatePlay"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="()=>{onAnimate()}">
</el-switch>
</span>
</div>
<div class="project-content-box" style="width: 100%">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<!--节点动画-->
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="project-content-item" v-if="!selection.pen.type">
<label>Type：</label>
<div class="full pr10">
<el-select
v-model="selection.pen.animateType"
size="small"
:popper-append-to-body="false"
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
>
<el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index"
:label="item.name"></el-option>
</el-select>
</div>
</div>
<!--连线-->
<div class="project-content-item half" v-if="selection.pen.type">
<label>Type：</label>
<div class="full pr10">
<el-select v-model="selection.pen.animateType" placeholder="请选择" size="small"
:popper-append-to-body="false" @change="onAnimate">
<el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
:label="item.name"></el-option>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
</el-select>
</div>
</div>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<div class="project-content-item half" v-if="selection.pen.type">
<label>Type：</label>
<div class="full pr10">
<div class="color-show" @click="colorPickerClick('animateColor')">
<div class="color-show-left" :style="{background:selection.pen.animateColor}"></div>
<span class="color-text"> {{selection.pen.animateColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down"
v-if="$refs['animateColor']&&!$refs['animateColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up"
v-if="$refs['animateColor']&&$refs['animateColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.animateColor"
ref="animateColor"
@active-change="(val)=>colorChange(val,'animateColor')"
>
</el-color-picker>
</div>
</div>
</div>
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</el-tab-pane>
</el-tabs>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<!-- 选中为空 -->
<div v-if="!selection.pen && !selection.pens">
<div class="project-title">
Project
</div>
<div class="project-content">
<div class="project-content-title">Title</div>
<div class="project-content-box" style="width: 100%">
<div class="project-content-item">
<label>Name：</label>
<div class="full pr10">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<el-input class="input" size="small" v-model="topologyData.data.name" placeholder="请输入名称"
@change="changeTopologyOpt"></el-input>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
</div>
<div class="project-content-title">Appearance</div>
<div class="project-content-box" style="width: 100%">
<div class="project-content-item half">
<label>Backgroud：</label>
<div class="full pr10 h32">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="color-show" @click="colorPickerClick('bkColor')">
<div class="color-show-left" :style="{background:topologyData.data.bkColor}"></div>
<span class="color-text"> {{topologyData.data.bkColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['bkColor']&&!$refs['bkColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['bkColor']&&$refs['bkColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="topologyData.data.bkColor"
ref="bkColor"
@active-change="(val)=>changeTopologyOpt(val,'bkColor',true)"
>
</el-color-picker>
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
<div class="project-content-item half">
<label>Image：</label>
<div class="full pr10 h32">
<!--暂时是input 输入网址-->
<el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
<div class="project-content-item half">
<label>默认线宽：</label>
<div class="full pr10 h32">
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="topologyData.data.lineWidth"
required
:min="1"
@change="changeTopologyOpt(topologyData.data.lineWidth,'lineWidth')">
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
<div class="project-content-item half">
<label>背景网格：</label>
<div class="full pr10 h32">
<el-switch
v-model="topologyData.data.grid"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.grid,'grid')">
</el-switch>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
<div class="project-content-item half">
<label>网格大小：</label>
<div class="full pr10 h32">
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="topologyData.data.gridSize"
:readonly="readonly"
required
@change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-item half">
<label>网格颜色：</label>
<div class="full pr10 h32">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="color-show" @click="colorPickerClick('gridColor')">
<div class="color-show-left" :style="{background:topologyData.data.gridColor}"></div>
<span class="color-text"> {{topologyData.data.gridColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['gridColor']&&!$refs['gridColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['gridColor']&&$refs['gridColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="topologyData.data.gridColor"
ref="gridColor"
@active-change="(val)=>changeTopologyOpt(val,'gridColor',true)"
>
</el-color-picker>
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-item half">
<label>标尺：</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>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-item half">
<label>标尺颜色：</label>
<div class="full pr10 h32">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<div class="color-show" @click="colorPickerClick('ruleColor')">
<div class="color-show-left" :style="{background:topologyData.data.ruleColor}"></div>
<span class="color-text"> {{topologyData.data.ruleColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['ruleColor']&&!$refs['ruleColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['ruleColor']&&$refs['ruleColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="topologyData.data.ruleColor"
ref="ruleColor"
@active-change="(val)=>changeTopologyOpt(val,'ruleColor',true)"
>
</el-color-picker>
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-item half special-select">
<label>默认开始箭头：</label>
<div class="full pr10 h32">
<el-select v-model="topologyData.data.fromArrow" placeholder="请选择" size="small"
:popper-append-to-body="false"
@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>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<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>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-item half special-select">
<label>默认结束箭头：</label>
<div class="full pr10 h32">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small"
:popper-append-to-body="false"
feat：修改样式 50%
2021-02-02 10:30:45 +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>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<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>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-title">Appearance</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-box" style="width: 100%">
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<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>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<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>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="project-content-title">Link</div>
<div class="project-content-box" style="width: 100%">
<div class="project-content-item">
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
<label>Url</label>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
<div class="full pr10">
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
<el-input class="input" size="small" v-model="topologyData.data.url" placeholder="请输入名称"
@change="changeTopologyOpt"></el-input>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
</div>
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</div>
</div>
</div>
</div>
</template>
<script>
import {alignNodes,spaceBetween,layout} from '@topology/layout';
import {getTopology} from "../../js/common";
// import ChartMetric from "./chartMetric";
import chartDataFormat from '../../../charts/chartDataFormat';
import promqlInput from "../../../page/dashboard/explore/promqlInput";
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
import {getUUID,resetZIndex} from "../../../common/js/common";
var rz={
methods:{
rz(e){
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
resetZIndex(e);
}
}
};
export default {
//pen.type 0为node 1位line
data(){
return {
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
expressions:[],
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
chartTypeList:[
{
id:"line",
name:this.$t("dashboard.panel.chartForm.typeVal.line.label")
},
{
id:'stackArea',
name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
},
{
id:"bar",
name:this.$t("dashboard.panel.chartForm.typeVal.bar.label")
},
{
id:"table",
name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
},
],
aggregationList:[
{
id:"last",
name:'last'
},{
id:"first",
name:'first'
},{
id:"min",
name:'min'
},{
id:"max",
name:'max'
},{
id:"avg",
name:'avg'
},{
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
id:"total",
name:'total'
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
],
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
metricList:[], // metric列表
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
metricCascaderList:[],//metric级联列表
metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
metricOptions:[],
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
unitOptions:chartDataFormat.unitOptions(),
lineId:null,
lineIsJson:false,
lineData:'',
penId:null,
penIsJson:false,
penData:'',
tab:'1',
drowdown:0,
readonly:false,
topologyData:{
data:{
name:'',
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
bkColor:'#FFFFFF',
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
bkImage:'',
grid:false,
gridSize:'',
gridColor:undefined,
rule:false,
ruleColor:undefined,
lineName:'curve',
lineWidth:1,
fromArrow:'',
toArrow:'triangleSolid',
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
projectInfo:true,
alertInfo:true,
url:'',
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
},
pen:{
dash:'',
font:'',
lineWidth:'',
strokeStyle:'',
textMaxLine:'',
textOffsetX:'',
textOffsetY:'',
globalAlpha:'',
},
penNumber:'',
nodesAlign:[//对齐方式
{
value:'left',
desc:'左对齐'
},{
value:'right',
desc:'右对齐'
},{
value:'top',
desc:'顶部对齐'
},{
value:'bottom',
desc:'底部对齐'
},{
value:'center',
desc:'垂直居中'
},{
value:'middle',
desc:'水平居中'
}],
layout:{//显示对应属性
maxWidth:1000,
nodeWidth:0,
nodeHeight:0,
maxCount:0,
spaceWidth:30,
spaceHeight:30
},
activeNames:['1','2','3','4','5'],
show:{//显示对应属性
pos:true,
layout:true,
looks:true,
},
data:{},
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
bkTypeOption:[
{
id:0,
name:'X'
},
{
id:1,
name:'→'
},
{
id:2,
name:'↑'
}
],
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
penDash:[
{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"},
],
penLineType:[
{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'},
{d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
],
penLineFromTOArrow:[
{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'},
{
d:'M5 14 l85 0',
"points":"5 14,20 9,20 19",
fill:'#ffffff',
stroke:"#000000",
'stroke-width':"1",
name:'triangle'
},
{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'},
],
lineAnimateOptions:[
{id:1,name:'水流'},
{id:'beads',name:'水珠流动'},
{id:'dot',name:'圆点'},
{id:'comet',name:'彗星'},
],
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
nodeAnimateOptions:[
{
id:'upDown',
name:'上下跳动'
},
{
id:'leftRight',
name:'左右跳动'
},
{
id:'heart',
name:'心跳'
},
{
id:'success',
name:'成功'
},
{
id:'warning',
name:'警告'
},
{
id:'error',
name:'错误'
},
{
id:'show',
name:'炫耀'
},
],
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
},
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
mixins:[rz],
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
components:{
promqlInput
},
computed:{},
props:{
selection:{
type:Object,
require:true
},
index:{
type:Number,
require:true,
},
modules:{}
},
watch:{
selection:{
handler(n){
if(n){
this.drowdown=0;
}
},
deep:true,
immediate:true,
},
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
// '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,
// }
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
created(){
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
let dataOption=getTopology(this.index).data;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
console.log(dataOption);
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
Object.keys(this.topologyData.data).forEach((key)=>{
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
console.log()
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：修改样式 50%
2021-02-02 10:30:45 +08:00
},
mounted(){
this.queryMetrics();
// this.topologyData.data.grid= !!dataOption.grid;
// this.topologyData.data.rule= !!dataOption.rule;
// this.topologyData.data.projectInfo= !!dataOption.projectInfo;
// this.topologyData.data.alertInfo= !!dataOption.alertInfo;
console.log(this.topologyData);
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
updated(){
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;
let originData=this.selection.pen.data;
this.penIsJson=this.isJson(originData);
this.penData=this.penIsJson?
JSON.stringify(originData,null,4):
this.penData=originData;
}
},
methods:{
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
queryMetrics(){
this.metricOptions=[];
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
this.$get('prom/api/v1/label/__name__/values').then(response=>{
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
if(response.status=='success'){
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
let metrics=response.data.sort();
let 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)){
let values=metricMap.get(key);
values.push({label:item,value:item});
}else{
let values=[{label:item,value:item}];
metricMap.set(key,values);
}
//this.metricStore.push({label:item,value:item,insertText:item})
});
for(let key of metricMap.keys()){
let option={
label:key,
value:key,
};
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
if(metricMap.get(key)&&metricMap.get(key).length>1){
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
option.children=metricMap.get(key);
}
this.metricOptions.push(option);
}
}
})
},
tabClick(n){
console.log(n);
if(this.selection.pen&&this.tab=='1'){
}
},
moduleIdChange(n){
this.selection.pen.data.moduleName=this.modules.find(item=>item.id===n).name;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
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;
this.onChange()
}
},
changeTitle(val){
this.selection.pen.text=val;
this.onChange()
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
onChange(value){
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
console.log(value,this.selection.pen.lineWidth)
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
if(value==='lineWidth'){
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
this.selection.pen.lineWidth=this.selection.pen.data.lineWidth;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
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');
// }
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
changeExpand(){
this.selection.expand= !this.selection.expand;
},
isJson(obj){
return typeof (obj)=="object"&&Object.prototype.toString.call(obj).toLowerCase()=="[object object]"&& !obj.length;
},
//组件事件
onNodesAlign(align){//对齐node
alignNodes(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect,align);
getTopology(this.index).updateProps();
},
onSpaceBetween(){
spaceBetween(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect.width);
getTopology(this.index).updateProps();
},
onLayout(){//改变布局
layout(getTopology(this.index).activeLayer.pens,this.layout);
getTopology(this.index).updateProps();
},
onClickDash(number){//改变线型
this.pen.dash=number;
this.drowdown=0;
if(this.selection.pen){
this.selection.pen.dash=number;
}
this.onChange();
},
onClickName(name){
this.pen.name=name;
this.drowdown=0;
if(this.selection.pen){
this.selection.pen.name=name;
}
this.onChange();
},
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
bkTypeChange(val){
if(!this.selection.pen.gradientToColor&&val){
this.selection.pen.gradientToColor='#bae7ff'
}
if(!this.selection.pen.gradientFromColor&&val){
this.selection.pen.gradientFromColor='#c6ebb4'
this.selection.pen.fillStyle='#c6ebb4'
}
this.onChange()
},
colorPickerClick(ref){
this.$refs[ref].showPicker=true;
},
colorPickerClickTable(ref,row){
row.showColor=row.color.fill;
row.showType='fill';
console.log(row);
console.log(this.$refs[ref]);
this.$nextTick(()=>{
this.$refs[ref][0].showPicker=true;
})
},
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
colorChange(val,name){//改变颜色
if(name==='arrowColor'){
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);
}else{
this.selection.pen[name]=this.colorRGBtoHex(val);
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
if(name=='fillStyle'){
this.selection.pen.gradientFromColor=this.selection.pen.fillStyle;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
this.selection.pen.data[name]=this.colorRGBtoHex(val);
this.onChange();
},
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
colorChangeTable(item,val){//改变颜色
if(!item.showType){return};
item.color[item.showType]=this.colorRGBtoHex(val);
},
changeShowPicker(item,type){
this.$refs['colorPickerBac' + item.level][0].showPicker=true;
item.showType=type;
item.showColor=item.color[type];
},
colorOut(obj,e){
let flag=false;
e.path.forEach((item)=>{
if(item.className==='el-color-dropdown el-color-picker__panel' || item.className==='color-tab'){
flag=true
}
})
console.log(obj,flag);
if(flag){
return
}
obj.showType='';
obj.showColor=undefined;
},
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
changeTopologyOpt(val,key,isColor){
//
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
// getTopology(this.index).data[key]=val;
// getTopology(this.index).render();
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
if(isColor){
this.topologyData.data[key]=this.colorRGBtoHex(val);
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}else{
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
this.topologyData.data[key]=val;
}
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
Object.keys(this.topologyData.data).forEach((key1)=>{
getTopology(this.index).data[key1]=this.topologyData.data[key1];
});
// console.log(dataOption[key]);
getTopology(this.index).render();
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
},
colorRGBtoHex(color){//获取颜色16进制数
if(!color){
return ""
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
};
if(color.length<=7){return color}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
let rgb=color.split(',');
let r=parseInt(rgb[0].split('(')[1]);
let g=parseInt(rgb[1]);
let b=parseInt(rgb[2].split(')')[0]);
let hex="#"+((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);
return hex;
},
onClickToArrow(arrow){
this.selection.pen.toArrow=arrow;
this.drowdown=0;
this.onChange();
},
onClickFromArrow(arrow){
this.selection.pen.fromArrow=arrow;
this.drowdown=0;
this.onChange();
},
onAnimate(val){
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');
},
delTopologyPen(){
let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
this.$emit('del',delObj);
},
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
getMetricOptions(){
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
return this.metricOptions;
},
addExpression(){
this.selection.pen.data.expressArr.push('');
this.selection.pen.data.legends.push('');
},
expressionChange(item){
},
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
removeExpression(index){
if(this.selection.pen.data.expressArr.length>1){
this.selection.pen.data.expressArr.splice(index,1);
this.selection.pen.data.legends.splice(index,1);
this.$nextTick(()=>{
this.expressions.forEach((ex,index)=>{
if(ex){
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
this.$refs[`promql-${index}`][0].metricChange(ex);
}
});
});
}
},
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
valueMappingAdd(){
this.selection.pen.data.valueMapping.push({
color:{
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
line:'#000000',
fill:'#ffffff',
text:'#000000',
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
},
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
showColor:undefined,
animateType:this.selection.pen.type?1:'upDown',
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
value:'',
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
level:this.selection.pen.data.valueMapping.length,
showType:'fill',//bac text border
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
});
},
valueMappingValueChange(index,row){
console.log(index,row)
},
valueMappingDel(index,row){
console.log(index,row)
},
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
inputFocus(e){
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
console.log(e.path[2].children[0],e.path[2].children[1]);
e.path[2].children[0].setAttribute("tabindex","0");
e.path[2].children[1].setAttribute("tabindex","1");
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
},
inputBlur(e){
},
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
}
</script>
<style scoped>
.props-box label {
line-height: 32px;
width: 100px;
font-size: 14px;
text-align: right;
}
.props-box .iconLabel {
line-height: 32px;
width: 24px;
font-size: 14px;
text-align: center;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.props-box /deep/ .el-tabs--card > .el-tabs__header {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
background: #EEEEEE;
border: none;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
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
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
box-sizing: content-box;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</style>
<style>
.can-clear.el-color-dropdown .el-color-dropdown__link-btn {
display: inline-block !important;
margin-right: 5px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.no-style-class.el-color-picker__panel{
border-radius: 0 0 5px 5px;
border-top: none;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</style>
<style lang="scss" scoped>
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.project-title {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
background: #eeeeee;
height: 36px;
line-height: 36px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
border-radius: 10px 0 0 0;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
padding-left: 10px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.project-content {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
margin: 10px;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
height: calc(100% - 50px);
overflow-y: auto;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.project-content-title {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
background: #F6F6F6;
padding-left: 10px;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
height: 32px;
line-height: 31px;
margin-bottom: 5px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.project-content-box {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.half.project-content-item {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
width: calc(50% - 15px);
height: 64px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.project-content-item {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
padding-left: 10px;
display: inline-block;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
position: relative;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
width: 100%;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
label {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
letter-spacing: 0;
font-weight: 400;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.h32 {
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
height: 32px;
}
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.project-content.node-content {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
overflow-y: unset;
height: auto;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
/deep/ .el-select-dropdown__wrap {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
max-height: 190px;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.pens-data {
/deep/ .el-form-item {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
margin-bottom: 10px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.half-form-item {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: calc(50% - 20px);
display: inline-block;
padding: 0 8px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.full-form-item {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: calc(100% - 10px);
display: inline-block;
padding: 0 8px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.form-row-title {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
height: 32px;
line-height: 32px;
background: #F6F6F6;
padding: 0 10px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
/deep/ .el-form-item__content {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
height: 100%;
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%;
}
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
/deep/ .el-form-item__content {
> div {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: 100%;
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
/deep/ .el-form-item__label {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
line-height: 0;
padding: 0;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
.element-item {
padding: 10px 10px 10px 0;
border: 1px dashed #dfe7f2;
width: calc(100% - 60px);
margin-bottom: 10px;
margin-left: 10px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.right-box-form .element-item.form-row-item {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: calc(100% - 120px);
padding: 20px 20px 20px 0;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
.form-row-item .nz-icon-minus-position {
position: absolute;
top: 50%;
right: -55px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
background: rgba(236, 127, 102, 0.1);
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
border-radius: 4px;
padding: 0 5px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.nz-icon-minus {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
color: #EC7F66;
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.tooltip-box {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
padding-left: 10px;
width: calc(100% - 10px);
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.props-box {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
/deep/ .el-tabs.el-tabs--card {
height: 100%;
.el-tabs__content {
height: calc(100% - 55px) !important;
overflow-y: auto;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
padding: 0 10px;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
}
/deep/ .el-collapse {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
background: #f6f6f6;
border: none;
font-size: 14px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
/deep/ .el-collapse-item__header {
padding: 0 10px;
background-color: #F9F9F9;
height: 32px;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
line-height: 14px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
/deep/ .el-collapse-item__wrap {
padding: 0 10px;
background-color: #ffffff;
border: none;
}
/deep/ .el-collapse-item__content {
padding: 12px 0px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
visibility: hidden;
outline: none;
}
/deep/ .el-input-number:focus-within {
/deep/ .el-input-number__decrease, /deep/ .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
.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;
}
.thresholds-cell{
border-bottom: 1px solid #E7EAED;
border-right: 1px solid #E7EAED;
padding: 5px 5px;
height: 42px;
line-height: 32px;
}
}
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
.mb10 {
margin-bottom: 10px;
}
.mt10 {
margin-top: 10px;
}
.p10 {
padding: 10px;
}
.pl0 {
padding-left: 0;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
.special-select .el-select.el-select--small {
width: 100%;
}
.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;
}
.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
display: none;
}
.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
height: 28px;
line-height: 28px;
color: #899FB7;
width: 100%;
}
.special-select /deep/ .el-input__prefix > div {
width: 100%;
height: 100%;
}
.props-box {
position: relative;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: 100%;
feat：修改样式 50%
2021-02-02 10:30:45 +08:00
height: calc(100% - 20px);
padding-bottom: 20px;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
.iconfont {
cursor: pointer;
}
.iconfontSize16 {
font-size: 16px;
margin-right: 5px;
}
.flex {
display: flex;
.full {
flex: 1;
}
}
.flex-warp {
flex-wrap: wrap;
}
.props-pen-item {
width: 50%;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.p10 {
position: relative;
}
.gradient-to {
/deep/ .el-select.el-select--small {
vertical-align: top;
width: calc(100% - 42px);
margin-left: 5px;
}
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
.icon-item {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: 75%;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
height: 100%;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
padding-left: 25%;
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
}
.icon-item svg {
width: 100%;
height: 100%;
}
.del-btn {
position: absolute;
top: 0;
right: 0;
border: none;
cursor: pointer;
z-index: 2;
}
.del-btn:hover {
background: #D8D7D7 !important;
}
.bottom {
font-size: 14px;
position: absolute;
bottom: 10px;
left: 10px;
}
/deep/ .el-input-number--small {
width: auto;
}
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.color-content {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
height: 0;
width: 0;
overflow: hidden;
position: absolute;
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
top: 15px;
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
left: 66px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.thresholds-cell .color-content{
top: 32px;
left: 137px;
}
.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;
}
.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;
}
/*.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 {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
position: relative;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.color-show {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
border: 1px solid #E7EAED;
border-radius: 5px;
display: flex;
align-items: center;
width: calc(100% - 32px);
height: 30px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.color-show .color-text {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.color-show-left {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
width: 18px;
height: 18px;
border: 1px solid #E7EAED;
border-radius: 5px;
margin: 0 5px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.color-arrows {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
color: #C0C4CC;
position: absolute;
right: 42px;
}
feat：添加valueMapping 以及处理数据
2021-02-04 11:09:33 +08:00
.color-arrows .nz-icon {
feat ：样式调整 （90%）
2021-02-02 19:24:21 +08:00
font-size: 12px;
}
feat：project overview重构 初版样式未调整
2021-01-29 19:09:21 +08:00
</style>
Reference in New Issue Copy Permalink