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

perf: dashboard-metrics样式调整

Browse Source
This commit is contained in:
chenjinsong
2020-01-21 15:34:01 +08:00
parent 25a8f6b958
commit 8ae08254d9
8 changed files with 76 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/index.html
View File

@@ -4,6 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>nezha-fronted</title> <title>nezha-fronted</title>
<style> <style>
* { * {

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

@@ -126,12 +126,9 @@ li{
} }
.nz-btn-metric-bottom{ .nz-btn-metric-bottom{
position: fixed; position: fixed;
right:37%; left:calc(50% + 128px);
top:95%; bottom: 22px;
margin-bottom:30px; transform: translateX(-50%);
}
.nz-btn-metricset-left{
margin: 0 20px 30px 780px;
} }
.nz-btn-metric-bottom-left{ .nz-btn-metric-bottom-left{
margin-right:30px; margin-right:30px;
@@ -717,10 +714,7 @@ li{
height: calc(100% - 132px); height: calc(100% - 132px);
width: 100%; width: 100%;
} }
.right-box-form-box .el-scrollbar__wrap { .el-scrollbar__wrap {
overflow-x: hidden !important;
}
.pop-box .el-scrollbar__wrap {
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.right-box-form { .right-box-form {

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

@@ -88,6 +88,8 @@
height: 10px; height: 10px;
color: #666; color: #666;
line-height: 14px; line-height: 14px;
text-align: left;
width: 100px;
} }
.li-list-part-label-val-list .el-select--mini { .li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px); width: calc(100% - 45px);
@@ -135,6 +137,7 @@
v-model="elementInfo.metric" v-model="elementInfo.metric"
:options="metricCascaderList" :options="metricCascaderList"
:props="{ expandTrigger: 'hover' }" :props="{ expandTrigger: 'hover' }"
:show-all-levels="false"
@change="selectMetric"></el-cascader> @change="selectMetric"></el-cascader>
<span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span> <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
<div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1"> <div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1">

65
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -45,15 +45,12 @@
width:90%; width:90%;
} }
.li-list-part-label-val-list { .li-list-part-label-val-list {
height: 250px; height: 218px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
margin-top: 33px; margin-top: 44px;
border-radius: 4px; border-radius: 4px;
padding: 0px 5px 10px 5px;
box-sizing:border-box; box-sizing:border-box;
width:90%; padding: 15px 0 10px 15px;
margin-left:-20px;
} }
.no-list-style{ .no-list-style{
@@ -61,12 +58,14 @@
} }
.li-cursor{ .li-cursor{
cursor: pointer; cursor: pointer;
padding: 3px 0;
font-size: 14px;
} }
.activeColor { .activeColor {
background-color: #409EFF; background-color: #409EFF;
} }
.metric-title-label{ .metric-title-label{
margin-bottom:8px; margin-bottom: 20px;
} }
.metric-title-position{ .metric-title-position{
margin-bottom:-5px; margin-bottom:-5px;
@@ -85,12 +84,12 @@
} }
.symbol-area { .symbol-area {
position: relative; position: relative;
height: 135px; height: 166px;
} }
.symbol-equal { .symbol-equal {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 18px; left: 5px;
color: #c0c4cc; color: #c0c4cc;
font-size: 24px; font-size: 24px;
} }
@@ -139,11 +138,28 @@
margin:0 auto; margin:0 auto;
} }
.nz-tab-style-left{
margin-left:130px;
}
</style> </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;
text-align: left;
width: 100px;
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
}
.nz-tab-chart-item-box{
padding:0;
display: inline-block;
}
.nz-tab-chart-style-left{
margin-left:40px;
}
</style>
<template> <template>
<el-form :model="elementInfo" ref="elementInfo" > <el-form :model="elementInfo" ref="elementInfo" >
<el-row > <el-row >
@@ -151,10 +167,10 @@
<!-- <span class="star-red">*</span>&nbsp; --> <!-- <span class="star-red">*</span>&nbsp; -->
{{$t('dashboard.panel.chartForm.metric')}} {{$t('dashboard.panel.chartForm.metric')}}
</el-col> </el-col>
<el-col span="8"> <el-col span="8" style="text-align: right;">
<div class="nz-tab-item-box" v-show="tableShow == 1"> <div class="nz-tab-item-box" v-show="tableShow == 1">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> --> <!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> -->
<div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-left"> <div @click="" class="nz-tab-style nz-tab-style-light">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</div> </div>
<div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light-right "> <div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light-right ">
@@ -169,7 +185,7 @@
</div> </div>
<div @click="clickTabelShow(1,'expert')" class="nz-tab-item-box" v-show="tableShow == 2"> <div @click="clickTabelShow(1,'expert')" class="nz-tab-item-box" v-show="tableShow == 2">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 1"> --> <!-- <div class="nz-btn-group float-left" v-show="tableShow == 1"> -->
<div class="nz-tab-style nz-tab-style-left"> <div class="nz-tab-style">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</div> </div>
@@ -186,17 +202,14 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="tableShow == 2"> <el-row v-if="tableShow == 2">
<el-col span="22" class="mt1"> <el-col span="24" 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-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" @input="changeExpression" 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-input size="mini" @input="changeExpression" 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-form-item>
</el-col> </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>
<el-row v-if="tableShow == 1"> <el-row v-if="tableShow == 1">
<el-col span="22" > <el-col span="24" >
<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-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-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
@@ -208,17 +221,15 @@
v-model="elementInfo.metric" v-model="elementInfo.metric"
:options="metricCascaderList" :options="metricCascaderList"
:props="{ expandTrigger: 'hover' }" :props="{ expandTrigger: 'hover' }"
:show-all-levels="false"
@change="selectMetric"></el-cascader> @change="selectMetric"></el-cascader>
<span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span> <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
</el-form-item> </el-form-item>
</el-col> </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>
<!--create chart组件显示框 --> <!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"--> <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="8"> <el-col span="9" style="margin-bottom: 20px;">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div> <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part"> <div class="li-list-part">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
@@ -232,7 +243,7 @@
</div> </div>
</el-col> </el-col>
<el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col> <el-col span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col span="14"> <el-col span="14">
<div class="li-list-part-label-val-list" > <div class="li-list-part-label-val-list" >

5
nezha-fronted/src/components/page/dashboard/metricPreview.scss
View File

@@ -5,9 +5,10 @@
.box-content { .box-content {
//position: relative; //position: relative;
width:calc(100% - 13px); width:calc(100% - 13px);
height: 100%;
} }
.table-list { .table-list {
margin-top:30px; margin-top:40px;
overflow-y:auto; overflow-y:auto;
height: 100%; height: 100%;
} }
@@ -16,11 +17,9 @@
} }
.chartBox { .chartBox {
width: 100%; width: 100%;
float: left;
} }
.chartBoxMul { .chartBoxMul {
width: 100%; width: 100%;
float: left;
} }
.common-detail-top-title { .common-detail-top-title {
font-size: 16px; font-size: 16px;

11
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -17,7 +17,7 @@
<!-- <div class="float-left metric-title" >{{$t('dashboard.metricPreview.title')}} <!-- <div class="float-left metric-title" >{{$t('dashboard.metricPreview.title')}}
</div> --> </div> -->
<div class="float-right mr-10"> <div class="float-right mr-10">
<el-date-picker size="small" ref="calendar" <el-date-picker size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm" format="yyyy/MM/dd HH:mm"
@change="dateChange" @change="dateChange"
v-model="searchTime" v-model="searchTime"
@@ -32,12 +32,11 @@
</div> </div>
<div class="table-list" > <div class="table-list" >
<div class="box-content" > <div class="box-content" >
<el-row :gutter="20" class="row-width" > <el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);">
<el-col :span="12" > <el-col :span="12" >
<div >{{$t('dashboard.panel.chartForm.metric')}}</div>
<metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set> <metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set>
</el-col> </el-col>
<el-col :span="12" > <el-col :span="12" style="height: calc(100% - 10px);overflow-y: auto;overflow-x: hidden;">
<el-row class="border-area" v-show="chartCount === 'single'"> <el-row class="border-area" v-show="chartCount === 'single'">
<div class="chartBox"> <div class="chartBox">
<line-chart-block <line-chart-block
@@ -49,7 +48,9 @@
></line-chart-block> ></line-chart-block>
</div> </div>
</el-row> </el-row>
<el-row class="border-area" v-show="chartCount === 'multiple'"> <el-row class="border-area" v-show="chartCount === 'multiple'">
<el-scrollbar style="height: 100%">
<div class="chartBoxMul" v-for="(item, index) in lineList"> <div class="chartBoxMul" v-for="(item, index) in lineList">
<line-chart-block <line-chart-block
:show-setting="false" :show-setting="false"
@@ -59,7 +60,9 @@
@on-edit-chart-block="editData" @on-edit-chart-block="editData"
></line-chart-block> ></line-chart-block>
</div> </div>
</el-scrollbar>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>

12
nezha-fronted/src/components/page/dashboard/metricSet.scss
View File

@@ -1,3 +1,6 @@
.operate-area {
padding-bottom: 20px;
}
.metric-set { .metric-set {
/*搜索栏样式*/ /*搜索栏样式*/
.search-data { .search-data {
@@ -11,7 +14,6 @@
margin-left: 10px; margin-left: 10px;
} }
.metric-form { .metric-form {
padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
// height: 69%; // height: 69%;
@@ -21,18 +23,14 @@
.operate-area { .operate-area {
// border-top: 1px solid #dfe7f2; // border-top: 1px solid #dfe7f2;
border-bottom: 1px solid #dfe7f2; border-bottom: 1px solid #dfe7f2;
padding: 5px 0; padding-bottom: 20px;
margin-left:3px; text-align: right;
.operate-area-title { .operate-area-title {
padding: 5px 0; padding: 5px 0;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
} }
.element-item {
padding-top: 20px;
border-top: 1px dashed #dfe7f2;
}
.ivu-form-item .ivu-form-item { .ivu-form-item .ivu-form-item {
margin-bottom: 24px; margin-bottom: 24px;
} }

15
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -16,9 +16,6 @@
.common-middle{ .common-middle{
margin:-20px auto; margin:-20px auto;
} }
.element-item {
padding: 20px 0;
}
</style> </style>
<template> <template>
<div class="metric-set" > <div class="metric-set" >
@@ -45,11 +42,11 @@
</el-row> --> </el-row> -->
<el-row class="pt-5 pb-5 ml-3 operate-area"> <el-row class="operate-area">
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-metricset-left nz-btn-metricbtn">{{$t('dashboard.metric.previewChart')}}</button> <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button>
<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed nz-btn-metricbtn' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-light' : !(saveDisabled || loading)}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-light' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button> >{{chartSwitchWord}}</button>
<!-- <Button type="primary" @click="addTarget">添加指标</Button> --> <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
@@ -82,7 +79,7 @@
<div class="common-float-left"> <div class="common-float-left">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span" <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span"
:rules="{ required: true, type: 'number', trigger: 'change' }"> :rules="{ required: true, type: 'number', trigger: 'change' }">
<el-select class="w-select" size="small" v-model="chartInfo.span" transfer> <el-select class="w-select" size="mini" v-model="chartInfo.span" transfer>
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item"> <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
span-{{item}} span-{{item}}
</el-option> </el-option>
@@ -95,7 +92,7 @@
<div class="common-float-left common-middle"> <div class="common-float-left common-middle">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height" <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height"
:rules="{ required: true, type: 'number', trigger: 'change' }"> :rules="{ required: true, type: 'number', trigger: 'change' }">
<el-input v-model="chartInfo.height" :min="400" size="small" class="w-select" placeholder=""></el-input> <el-input v-model="chartInfo.height" :min="400" size="mini" class="w-select" placeholder=""></el-input>
<span class='nz-input-append'>px</span> <span class='nz-input-append'>px</span>
<!-- <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px --> <!-- <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px -->
</el-form-item> </el-form-item>
@@ -106,7 +103,7 @@
<div class="common-float-left"> <div class="common-float-left">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.type')" prop="type" <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.type')" prop="type"
:rules="{ required: true, trigger: 'change' }"> :rules="{ required: true, trigger: 'change' }">
<el-select transfer class="w-select" v-model="chartInfo.type" size="small"> <el-select transfer class="w-select" v-model="chartInfo.type" size="mini">
<el-option v-for="item in typeList" <el-option v-for="item in typeList"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"