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

perf: 调整chart弹框样式

Browse Source
This commit is contained in:
chenjinsong
2020-01-20 21:25:55 +08:00
parent f7619c96ea
commit 8ce3dae06c
4 changed files with 108 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -502,12 +502,12 @@ li{
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right-580 {
from {right: -630px}
from {right: -580px}
to {right: 0px}
}
@keyframes slide-out-to-right-580 {
from {right: 0px}
to {right: -630px}
to {right: -580px}
}
@keyframes slide-in-from-right-840 {
from {right: -870px}
@@ -644,6 +644,11 @@ li{
font-size: 14px;
color: $box-title-color;
}
.right-box-sub-title {
font-size: 14px;
color: $box-title-color;
padding-bottom: 5px;
}
.pop-title {
line-height: 25px;
text-align: left;

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

@@ -1,5 +1,5 @@
<template key="panelBox">
<transition name="right-box">
<transition name="right-box-580">
<div class="right-box right-box-panel z-top" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">

24
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -35,11 +35,11 @@
.element-bottom-border {
padding-bottom: 5px;
border-bottom: 1px solid #dfe7f2;
margin-top:-25px;
margin-top: 15px;
}
/*metric样式--begin*/
.element-item {
padding-bottom: 20px;
padding: 20px 0;
border-bottom: 1px dashed #dfe7f2;
}
/*metric样式--end*/
@@ -114,9 +114,8 @@
</el-col>
</el-row>
<el-row class="element-bottom-border" >
<div >{{$t('dashboard.panel.chartForm.metric')}}</div>
</el-row>
<div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
<div class="line-100"></div>
<el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
@@ -131,18 +130,9 @@
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
</button>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
&nbsp;
</el-col>
</el-row>
<button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
<span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
</button>
</el-form>
</el-scrollbar>

197
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -22,25 +22,42 @@
.nz-btn-style-higher{
line-height: 22px;
}
.li-list-part {
width: 90%;
height: 130px;
border: 1px solid #cfcfcf;
overflow-y: auto;
.symbol-area {
position: relative;
height: 135px;
}
.symbol-equal {
position: absolute;
bottom: 0;
left: 13px;
color: #c0c4cc;
font-size: 24px;
}
.symbol-delete {
padding-left: 8px;
cursor: pointer;
}
.symbol-delete i {
color: #c0c4cc;
}
.li-list-part-label-val-list {
width: 100%;
height: 145px;
border: 1px solid #cfcfcf;
overflow-y: auto;
margin-top: 20px;/*21*/
border: 0px;
}
.no-list-style{
list-style: none;
.li-list-part {
height: 170px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 8px 12px;
color: #666;
}
.li-list-part-label-val-list {
height: 170px;
border: 1px solid #dcdfe6;
margin-top: 33px;
border-radius: 4px;
padding: 0px 0 10px 15px;
}
.li-cursor{
cursor: pointer;
padding: 3px 0;
font-size: 14px;
}
.activeColor {
background-color: #409EFF;
@@ -48,14 +65,15 @@
.metric-title-label{
margin-bottom:8px;
}
.metric-title-position{
margin-bottom:-5px;
margin-bottom: 2px;
}
.metric-title-row-position{
margin-top:-10px;
}
.star-red{
color:#ff1818;
color:#f56c6c;
}
.full-width{
width:100%;
@@ -64,6 +82,17 @@
margin-top:1px;
}
</style>
<style>
.li-list-part-label-val-list .metric-title-position .el-form-item__label {
font-size: 14px;
height: 10px;
color: #666;
line-height: 14px;
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
}
</style>
<template>
<el-form :model="elementInfo" ref="elementInfo" >
<el-row >
@@ -72,108 +101,68 @@
</el-col>
<el-col span="8">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> -->
<div class="nz-tab-item-box" v-show="tableShow == 1">
<div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
<div class="nz-tab-item-box">
<div @click="clickTabelShow(1,'normal')" class="nz-tab-style" :class="{'nz-tab-style-light' : tableShow == 1}">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</button> -->
<div @click="" class="nz-tab-style nz-tab-style-light-right">
<div @click="clickTabelShow(2,'expert')" class="nz-tab-style nz-tab-style-light-right" :class="{'nz-tab-style-light' : tableShow == 2}">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
<!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.expert')}}</span>
</button> -->
</div>
<div class="nz-tab-item-box " v-show="tableShow == 2">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 1"> -->
<div @click="" class="nz-tab-style">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
<!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</button>
<button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.expert')}}</span>
</button> -->
</div>
</el-col>
</el-row>
<el-row v-if="tableShow == 2">
<el-col span="22" class="mt1">
<el-form-item prop="expression" :rules="{ required: true, message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-input size="mini" class="full-width" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
</el-form-item>
</el-col>
<el-col span="2">
&nbsp;&nbsp;<button type="button" v-if="countTotal > 1" @click="deleteTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
</el-col>
</el-row>
<el-row v-if="tableShow == 1">
<el-col span="22" >
<el-form-item :label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<!--
<el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
<el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
:value="item.metric">{{item.metric}}</el-option>
</el-select>
-->
<el-cascader ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small"
v-model="elementInfo.metric"
:options="metricCascaderList"
:props="{ expandTrigger: 'hover' }"
@change="selectMetric"></el-cascader>
<span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
</el-form-item>
</el-col>
<el-col span="2">
&nbsp;&nbsp;<button type="button" v-if="countTotal > 1" @click="deleteTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
</el-col>
</el-row>
<template v-if="tableShow == 2">
<el-form-item class="right-box-form-content" prop="expression" :rules="{ required: true, message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-input size="mini" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" ref="metricExpression" type="textarea" rows="3" maxlength="512" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
<div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1" style="vertical-align: top">
<i class="el-icon-minus"></i>
</div>
</el-form-item>
</template>
<template v-if="tableShow == 1">
<el-form-item class="right-box-form-content" :label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-cascader ref="metricSelect" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" filterable placeholder="" popper-class="" size="small"
v-model="elementInfo.metric"
:options="metricCascaderList"
:props="{ expandTrigger: 'hover' }"
@change="selectMetric"></el-cascader>
<span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
<div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1">
<i class="el-icon-minus"></i>
</div>
</el-form-item>
</template>
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="12">
<div class="metric-title-label">{{elementInfo.metric}}</div>
<el-col span="8">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part">
<ul class="no-list-style">
<li class="li-cursor" v-if="!item.isSelect"
v-for="(item,index) in elementInfo.tagList"
@click="getLidata(index,item)"
:key="index">
<div>
<span >{{ item.name }}</span>
<el-scrollbar style="height: 100%">
<div class="li-cursor" v-if="!item.isSelect"
v-for="(item,index) in elementInfo.tagList"
@click="getLidata(index,item)"
:key="index">
{{item.name}}
</div>
</li>
</ul>
</el-scrollbar>
</div>
</el-col>
<el-col span="12">
<el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col span="14">
<div class="li-list-part-label-val-list" >
<el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row class="metric-title-row-position" >
<!--多选列表 -->
<el-col span="20" >
<el-select v-model="item.value" ref="tagSelect" size="small"
placeholder=""
collapse-tags
filterable
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
</el-col>
<el-col span="4" >
&nbsp;&nbsp;<button type="button" @click="deleteMetricLabel(item,index)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
</el-col>
</el-row>
</el-form-item>
<el-scrollbar style="height: 100%">
<el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder=""
collapse-tags
filterable
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
</el-form-item>
</el-scrollbar>
</div>
</el-col>
</el-row>