NEZ-1072 feat: 主题切换
This commit is contained in:
chenjinsong
@@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<div class="props-box" :loading="loading">
|
||||
<!--删除按钮-->
|
||||
<!--<button id="edit-ep-del" type="button" class="nz-btn nz-btn-size-normal nz-btn-size-alien del-btn"-->
|
||||
<!--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>-->
|
||||
<!--</button>-->
|
||||
<!--所有属性-->
|
||||
<el-tabs v-model="tab" type="card" v-if="selection.pen" @tab-click="tabClick">
|
||||
<el-tab-pane :label="$t('project.topology.data')" name="1">
|
||||
@@ -24,25 +18,16 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--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"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<!--value mapping-->
|
||||
<el-row class="form-row-title">
|
||||
{{ $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 > … >{{
|
||||
<span v-if="selection.pen.data.valueMappingSort !=='desc'" class="title__label"
|
||||
>（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">（{{
|
||||
<span v-if="selection.pen.data.valueMappingSort ==='desc'" class="title__label"
|
||||
>（{{
|
||||
selection.pen.data.valueMapping.length
|
||||
}}:Critical > … >0:Ok）</span>
|
||||
<el-form-item class="float-right" prop="type" style="height: 100%;">
|
||||
@@ -276,14 +261,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- <!–link–>-->
|
||||
<!-- <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>-->
|
||||
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('project.topology.style')" name="4">
|
||||
@@ -439,8 +416,7 @@
|
||||
<div>{{ $t('project.topology.gradient') }}</div>
|
||||
<div class="p10 pl0 gradient-to">
|
||||
<el-select :popper-append-to-body="true" v-model="selection.pen.gradientType" size="small"
|
||||
class="color-before-select" popper-class="color-before-select"
|
||||
style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" @change="bkTypeChange">
|
||||
class="color-before-select" popper-class="color-before-select" @change="bkTypeChange">
|
||||
<div slot="prefix">
|
||||
<i
|
||||
:class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i>
|
||||
@@ -1883,624 +1859,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.props-box /deep/ .el-tabs--card > .el-tabs__header {
|
||||
background: #EEEEEE;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.props-box /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
|
||||
box-sizing: content-box;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
/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;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.project-content-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.half.project-content-item {
|
||||
width: calc(50% - 15px);
|
||||
height: 64px;
|
||||
|
||||
label {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.project-content-item {
|
||||
padding-left: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.h32 {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-content.node-content {
|
||||
overflow-y: unset;
|
||||
height: auto;
|
||||
|
||||
/deep/ .el-select-dropdown__wrap {
|
||||
max-height: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
.pens-data {
|
||||
/deep/ .el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.half-form-item {
|
||||
width: calc(50% - 5px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.half-form-item--end {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.full-form-item {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-row-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #F6F6F6;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
|
||||
/deep/ .el-form-item__content {
|
||||
height: 100%;
|
||||
line-height: 32px;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-form-item__content {
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-form-item__label {
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.element-item {
|
||||
padding: 10px 10px 10px 0;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.right-box-form .element-item.form-row-item {
|
||||
width: calc(100% - 120px);
|
||||
padding: 20px 20px 20px 0;
|
||||
}
|
||||
|
||||
.form-row-item .nz-icon-minus-position .nz-icon-minus-medium {
|
||||
background: rgba(236, 127, 102, 0.1);
|
||||
padding: 2px 6px;
|
||||
color: #EC7F66;
|
||||
}
|
||||
|
||||
.form-row-item .nz-icon-minus-position {
|
||||
right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-box {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.props-box {
|
||||
/deep/ .el-tabs.el-tabs--card {
|
||||
height: 100%;
|
||||
|
||||
.el-tabs__content {
|
||||
height: calc(100% - 55px) !important;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-collapse {
|
||||
background: #fff;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/deep/ .el-collapse-item__header {
|
||||
padding: 0 10px;
|
||||
background-color: #eeeeee;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
/deep/ .el-collapse-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/deep/ .el-collapse-item__wrap {
|
||||
padding: 0 10px;
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/deep/ .el-collapse-item__content {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
|
||||
visibility: hidden;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/deep/ .el-input-number:focus {
|
||||
.el-input-number__decrease, .el-input-number__increase {
|
||||
visibility: visible;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-input-number:focus-within {
|
||||
.el-input-number__decrease, .el-input-number__increase {
|
||||
visibility: visible;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
/deep/ .el-input-group__prepend {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.is-arrow-active {
|
||||
color: #FA901C;
|
||||
}
|
||||
|
||||
.nz-icon.nz-icon-arrow-up1 {
|
||||
margin-right: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value-mapping-add {
|
||||
background: #FA901C30;
|
||||
margin-bottom: 10px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #FA901C;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.p10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
padding-bottom: 20px;
|
||||
|
||||
.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%;
|
||||
|
||||
.p10 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gradient-to {
|
||||
/deep/ .el-select.el-select--small {
|
||||
vertical-align: top;
|
||||
width: calc(100% - 42px);
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-to-color {
|
||||
display: inline-block;
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
padding-left: 25%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.color-content {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 66px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
width: 98px !important;
|
||||
}
|
||||
|
||||
/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;
|
||||
}
|
||||
/deep/ .el-collapse-item__arrow.el-icon-arrow-right{
|
||||
display: inline-block !important;
|
||||
}
|
||||
/deep/ .el-select--mini {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user