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

metric proview样式修改

Browse Source
This commit is contained in:
wujiawen
2020-01-21 14:19:30 +08:00
parent 8ce3dae06c
commit c68d2c9021
6 changed files with 234 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,11 +126,12 @@ li{
} }
.nz-btn-metric-bottom{ .nz-btn-metric-bottom{
position: fixed; position: fixed;
left:52%; right:37%;
bottom:30px; top:95%;
margin-bottom:30px;
} }
.nz-btn-metricset-left{ .nz-btn-metricset-left{
margin: 0 20px 30px 515px; margin: 0 20px 30px 780px;
} }
.nz-btn-metric-bottom-left{ .nz-btn-metric-bottom-left{
margin-right:30px; margin-right:30px;
@@ -268,7 +269,6 @@ li{
.nz-input-append { .nz-input-append {
position: absolute; position: absolute;
right: 8px; right: 8px;
line-height: 38px;
color: #666; color: #666;
} }
/* end--el-input扩展 */ /* end--el-input扩展 */

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

@@ -92,20 +92,29 @@
.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);
} }
.nz-tab-chart-item-box{
padding:0;
display: inline-block;
}
.nz-tab-chart-style-left{
margin-left:40px;
}
</style> </style>
<template> <template>
<el-form :model="elementInfo" ref="elementInfo" > <el-form :model="elementInfo" ref="elementInfo" >
<el-row > <el-row >
<el-col span="16"> <el-col span="16">
<span class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}} <!-- <span class="star-red">*</span>&nbsp; -->
{{$t('dashboard.panel.chartForm.metric')}}
</el-col> </el-col>
<el-col span="8"> <el-col span="8">
<div class="nz-tab-item-box"> <div class="nz-tab-chart-item-box">
<div @click="clickTabelShow(1,'normal')" class="nz-tab-style" :class="{'nz-tab-style-light' : tableShow == 1}"> <div @click="clickTabelShow(1,'normal')" class="nz-tab-style nz-tab-chart-style-left" :class="{'nz-tab-style-light' : tableShow == 1}">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</div> </div>
<div @click="clickTabelShow(2,'expert')" class="nz-tab-style nz-tab-style-light-right" :class="{'nz-tab-style-light' : tableShow == 2}"> <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> <span>{{$t('dashboard.metric.expert')}}</span>
</div> </div>
</div> </div>
@@ -134,7 +143,9 @@
</el-form-item> </el-form-item>
</template> </template>
<!-- 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="8">
<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">
@@ -148,7 +159,9 @@
</el-scrollbar> </el-scrollbar>
</div> </div>
</el-col> </el-col>
<el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col> <el-col span="2" 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" >
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
@@ -165,6 +178,7 @@
</el-scrollbar> </el-scrollbar>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</template> </template>

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

@@ -1,28 +1,28 @@
<style scoped> <style scoped>
.without-bottom { .without-bottom {
margin-bottom: 0; margin-bottom: 0;
} }
.ivu-select-dropdown { .ivu-select-dropdown {
max-height: 100px; max-height: 100px;
} }
.error-info-text { .error-info-text {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
line-height: 1; line-height: 1;
padding-top: 6px; padding-top: 6px;
color: #ed3f14; color: #ed3f14;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
} }
.error-text { .error-text {
color: #ed3f14; color: #ed3f14;
line-height: 1.5; line-height: 1.5;
} }
.nz-btn-style-higher{ .nz-btn-style-higher{
line-height: 22px; line-height: 22px;
} }
.li-list-part { /* .li-list-part {
width: 90%; width: 90%;
height: 130px; height: 130px;
border: 1px solid #cfcfcf; border: 1px solid #cfcfcf;
@@ -34,8 +34,28 @@
border: 1px solid #cfcfcf; border: 1px solid #cfcfcf;
overflow-y: auto; overflow-y: auto;
margin-top: 20px;/*21*/ margin-top: 20px;/*21*/
border: 0px; /* border: 0px;
} } */
.li-list-part {
height: 200px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 8px 12px;
color: #666;
width:90%;
}
.li-list-part-label-val-list {
height: 250px;
border: 1px solid #dcdfe6;
margin-top: 33px;
border-radius: 4px;
padding: 0px 5px 10px 5px;
box-sizing:border-box;
width:90%;
margin-left:-20px;
}
.no-list-style{ .no-list-style{
list-style: none; list-style: none;
} }
@@ -54,29 +74,90 @@
.metric-title-row-position{ .metric-title-row-position{
margin-top:-10px; margin-top:-10px;
} }
.star-red{ /* .star-red{
color:#ff1818; /* color:#ff1818; */
} /* } */
.full-width{ .full-width{
width:100%; width:100%;
} }
.mt1{ .mt1{
margin-top:1px; margin-top:1px;
} }
.symbol-area {
position: relative;
height: 135px;
}
.symbol-equal {
position: absolute;
bottom: 0;
left: 18px;
color: #c0c4cc;
font-size: 24px;
}
.symbol-delete {
padding-left: 8px;
cursor: pointer;
}
.symbol-delete i {
color: #c0c4cc;
}
.el-scrollbar__wrap{
/* overflow: auto !important; */
box-sizing:border-box;
margin:0 auto;
}
.el-input .el-input__inner{
/* width:80%; */
/* display:flex; */
}
.metric-title-position{
margin-bottom:2px;
}
/* .right-box-form-content-left{
line-height: 32px;
text-align: left;
width: 100%;
padding:0 10px;
} */
.el-form-item__content{
padding-left:15px;
margin:0 auto;
}
.li-list-part-label-val-list .metric-title-position .el-form-item__label {
font-size: 14px;
height: 10px;
color: #666;
line-height: 14px;
margin:0 auto;
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
margin:0 auto;
}
.nz-tab-style-left{
margin-left:130px;
}
</style> </style>
<template> <template>
<el-form :model="elementInfo" ref="elementInfo" > <el-form :model="elementInfo" ref="elementInfo" >
<el-row > <el-row >
<el-col span="16"> <el-col span="16">
<span class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}} <!-- <span class="star-red">*</span>&nbsp; -->
{{$t('dashboard.panel.chartForm.metric')}}
</el-col> </el-col>
<el-col span="8"> <el-col span="8">
<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="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light"> <div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-left">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</div> </div>
<div @click="" class="nz-tab-style nz-tab-style-light-right"> <div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light-right ">
<span>{{$t('dashboard.metric.expert')}}</span> <span>{{$t('dashboard.metric.expert')}}</span>
</div> </div>
<!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left"> <!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
@@ -86,13 +167,13 @@
<span>{{$t('dashboard.metric.expert')}}</span> <span>{{$t('dashboard.metric.expert')}}</span>
</button> --> </button> -->
</div> </div>
<div 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 @click="" class="nz-tab-style"> <div class="nz-tab-style nz-tab-style-left">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</div> </div>
<div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right"> <div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right ">
<span>{{$t('dashboard.metric.expert')}}</span> <span>{{$t('dashboard.metric.expert')}}</span>
</div> </div>
<!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left"> <!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
@@ -135,9 +216,46 @@
&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> &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-col>
</el-row> </el-row>
<!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="8">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part">
<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>
</el-scrollbar>
</div>
</el-col>
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"--> <el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col span="12">
<el-col span="14">
<div class="li-list-part-label-val-list" >
<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
@change="changeTag"
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>
<!-- create chart组件显示框 -->
<!-- <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> <div class="metric-title-label">{{elementInfo.metric}}</div>
<div class="li-list-part"> <div class="li-list-part">
<ul class="no-list-style"> <ul class="no-list-style">
@@ -156,9 +274,10 @@
<div class="li-list-part-label-val-list" > <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-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" > <el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row >{{item.name}}</el-row> <el-row >{{item.name}}</el-row>
<el-row class="metric-title-row-position" > <el-row class="metric-title-row-position" > -->
<!--多选列表 --> <!--多选列表 -->
<el-col span="20" > <!-- <el-col span="20" >
<el-select v-model="item.value" ref="tagSelect" size="small" <el-select v-model="item.value" ref="tagSelect" size="small"
placeholder="" placeholder=""
collapse-tags collapse-tags
@@ -174,8 +293,8 @@
</el-row> </el-row>
</el-form-item> </el-form-item>
</div> </div>
</el-col> </el-col> -->
</el-row> <!-- </el-row> -->
</el-form> </el-form>
</template> </template>
<script> <script>

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

@@ -14,8 +14,8 @@
<div class="top-tools" > <div class="top-tools" >
<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="small" ref="calendar"
format="yyyy/MM/dd HH:mm" format="yyyy/MM/dd HH:mm"

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

@@ -13,6 +13,7 @@
.metric-form { .metric-form {
padding-top: 20px; padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
position: relative;
// height: 69%; // height: 69%;
// max-height: 400px; // max-height: 400px;
// overflow: auto; // overflow: auto;

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

@@ -16,6 +16,9 @@
.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" >
@@ -28,18 +31,31 @@
@on-change-condition="getCondition" @on-change-condition="getCondition"
></chart-metric> ></chart-metric>
</el-row> </el-row>
<!-- <el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
:count-total="elements.length"
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@on-add-target-success="getTarget"
@on-change-condition="getCondition"
></chart-metric>
</el-row> -->
<el-row class="pt-5 pb-5 ml-3 operate-area"> <el-row class="pt-5 pb-5 ml-3 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 nz-btn-metricset-left nz-btn-metricbtn">{{$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-normal' : !(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 nz-btn-metricbtn' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-light' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button> >{{chartSwitchWord}}</button>
<!-- <Button type="primary" @click="addTarget">添加指标</Button> --> <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row> </el-row>
<el-row class=" nz-btn-metric-bottom"> <el-row class="nz-btn-metric-bottom">
<!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> --> <!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> -->
<button :disabled="saveDisabled" type="primary" @click="createNew" <button :disabled="saveDisabled" type="primary" @click="createNew"
:class="{'nz-btn-metric-bottom-left nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-140 nz-btn-size-normal nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-metric-bottom-left nz-btn-min-width-140 nz-btn-style-light' : !saveDisabled}" :class="{'nz-btn-metric-bottom-left nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-140 nz-btn-size-normal nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-metric-bottom-left nz-btn-min-width-140 nz-btn-style-light' : !saveDisabled}"
@@ -126,6 +142,7 @@ export default {
total: 0, total: 0,
loading: false, // 加载中 loading: false, // 加载中
chartModal: false, // 展示弹出框 chartModal: false, // 展示弹出框
elements: [1], // 指标部分 tarNum
// 新建信息 // 新建信息
chartInfo: { chartInfo: {
title: '', // 名称 title: '', // 名称
@@ -213,6 +230,38 @@ export default {
this.$refs.panelBox.setChartTitle(this.metricInfo.metric); this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
this.$refs.panelBox.getTableData(); this.$refs.panelBox.getTableData();
}, },
// 删除指标,第一步, 新方法
deleteTarget(index) {
//alert('box第一步，循环所有的metric，为什么要循环？？');
this.deleteIndex = index;
// alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
this.$refs.chartTag.forEach((item) => {
// 子组件保存内容到bus
item.subSave();
});
},
// subSave保存成功后回调,第二步
subOk() {
// 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
//alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
this.subCount += 1;
if (this.subCount === this.elements.length) {
this.subCount = 0;
// 保存完成,进行删除操作
//alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
//alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.elements.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
//alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.$nextTick(() => {
this.$refs.chartTag.forEach((item, index) => {
item.setSubdata(index); // 将数据从bus重新赋值
});
});
}
},
/* /*
// 取消创建modal // 取消创建modal
cancel() { cancel() {