Merge branch 'dev-3.2' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

# Conflicts:
#	nezha-fronted/src/components/charts/chartDataFormat.js
This commit is contained in:
zhangyu
2022-03-25 14:28:07 +08:00
14 changed files with 90 additions and 38 deletions

View File

@@ -430,6 +430,9 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
flex-direction: row;
align-items: center;
align-content: center;
.chart-stat-item{ .chart-stat-item{
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -441,6 +444,7 @@
padding: 2px; padding: 2px;
overflow: hidden; overflow: hidden;
color: $--color-text-regular; color: $--color-text-regular;
flex-grow: 1
} }
} }
.chart-gauge-box{ .chart-gauge-box{

View File

@@ -3,7 +3,7 @@
<div class="basic-info"> <div class="basic-info">
<div class="basic-info-title"> <div class="basic-info-title">
<span style="cursor: pointer"><i @click="hideElement" :class="{'nz-icon nz-icon-caret-right': showBasicInfo,'nz-icon nz-icon-caret-bottom': !showBasicInfo}"></i></span> <span style="cursor: pointer"><i @click="hideElement" :class="{'nz-icon nz-icon-caret-right': showBasicInfo,'nz-icon nz-icon-caret-bottom': !showBasicInfo}"></i></span>
<span>Basic info</span> <span>{{$t('overall.basicInfo')}}</span>
</div> </div>
<el-collapse-transition> <el-collapse-transition>
<!--asset info--> <!--asset info-->
@@ -78,7 +78,7 @@
</div> </div>
</div> </div>
<div class="basic-info-table-list"> <div class="basic-info-table-list">
<div class="basic-info-table-title">Endpoint</div> <div class="basic-info-table-title">{{$t('asset.endpoint')}}</div>
<div class="basic-info-table-value"> <div class="basic-info-table-value">
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp; <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
<span>{{chartDetail ? chartDetail.endpointNum : 0}}</span> <span>{{chartDetail ? chartDetail.endpointNum : 0}}</span>

View File

@@ -4,8 +4,12 @@
* type:自定义参数用于区分是y轴调用还是tooltip调用,以设置不同精度 type =1 y轴调用 type=2 tooltip调用 * type:自定义参数用于区分是y轴调用还是tooltip调用,以设置不同精度 type =1 y轴调用 type=2 tooltip调用
* */ * */
import bus from '../../libs/bus' import bus from '../../libs/bus'
import { formatScientificNotation } from '@/components/common/js/tools'
function none (value, index) { function none (value, index) {
const scientificNotationValue = formatScientificNotation(num, dot)
if (!numberWithEConvent(scientificNotationValue)) {
return scientificNotationValue
}
return keepDoubleNumber(value) return keepDoubleNumber(value)
} }
function short (value, index, type = 1, dot) { function short (value, index, type = 1, dot) {
@@ -18,14 +22,26 @@ function short (value, index, type = 1, dot) {
} }
} }
function percent01 (value, index) { function percent01 (value, index) {
const scientificNotationValue = formatScientificNotation(value, 2)
if (!numberWithEConvent(scientificNotationValue)) {
return `${scientificNotationValue} %`
}
value = parseFloat((Number(value)).toFixed(2)) value = parseFloat((Number(value)).toFixed(2))
return `${value} %` return `${value} %`
} }
function percent02 (value, index) { function percent02 (value, index) {
value = parseFloat((Number(value) * 100).toFixed(2)) const scientificNotationValue = formatScientificNotation(value, 2)
if (!numberWithEConvent(scientificNotationValue)) {
return `${scientificNotationValue} %`
}
value = parseFloat((Number(value) * 100))
return `${value} %` return `${value} %`
} }
function localFormat (value, index) { function localFormat (value, index) {
const scientificNotationValue = formatScientificNotation(value, 2)
if (!numberWithEConvent(scientificNotationValue)) {
return `${scientificNotationValue} %`
}
let num = (value || 0).toString() let num = (value || 0).toString()
let result = '' let result = ''
while (num.length > 3) { while (num.length > 3) {
@@ -287,6 +303,32 @@ function days (value, index, type = 1, dot) {
return timeCompute(value, 'day', 3) return timeCompute(value, 'day', 3)
} }
} }
function numberWithEConvent (num) {
if (num) {
if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {
const regExp = /'^((\\d+.?\\d+)[Ee]{1}(\\d+))$', 'ig'/
let result = regExp.exec(num)
let resultValue = ''
let power
if (result != null) {
resultValue = result[2]
power = result[3]
result = regExp.exec(num)
}
if (resultValue) {
if (power) {
const powVer = Math.pow(10, power)
resultValue = resultValue * powVer
return resultValue
}
}
} else {
return num
}
}
return 0
}
/* /*
* 一般数值格式化方法 * 一般数值格式化方法
* num: 需要格式化的值 * num: 需要格式化的值
@@ -295,6 +337,10 @@ function days (value, index, type = 1, dot) {
* dot保留的小数位 * dot保留的小数位
* */ * */
function asciiCompute (num, ascii, units, dot = 2) { function asciiCompute (num, ascii, units, dot = 2) {
const scientificNotationValue = formatScientificNotation(num, dot)
if (!numberWithEConvent(scientificNotationValue)) {
return scientificNotationValue
}
if (!num && num !== 0 && num !== '0') { if (!num && num !== 0 && num !== '0') {
return '' return ''
} }

View File

@@ -18,7 +18,7 @@
</span> </span>
</div> </div>
<div class="detail-top-search" style="text-align: center" v-else> <div class="detail-top-search" style="text-align: center" v-else>
All {{$t('config.assetLabel.all')}}
</div> </div>
<i class="nz-icon nz-icon-arrow-down search-value"/> <i class="nz-icon nz-icon-arrow-down search-value"/>
</div> </div>
@@ -50,7 +50,7 @@
</span> </span>
</div> </div>
<div class="detail-top-search" style="text-align: center" v-else> <div class="detail-top-search" style="text-align: center" v-else>
All {{$t('config.assetLabel.all')}}
</div> </div>
<i class="nz-icon nz-icon-arrow-down search-value"/> <i class="nz-icon nz-icon-arrow-down search-value"/>
</div> </div>

View File

@@ -160,32 +160,32 @@ export default {
panel: [ panel: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: true }, { prop: 'panelTab', name: this.$t('overall.detail'), active: true },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: 'Endpoint', active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: 'Log', active: false } { prop: 'log', name: this.$t('overall.logs'), active: false }
], ],
alertMessage: [ alertMessage: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
{ prop: 'endpointTab', name: 'Endpoint', active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: 'Log', active: false } { prop: 'log', name: this.$t('overall.logs'), active: false }
], ],
endpoint: [ endpoint: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: 'Endpoint', active: true }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
{ prop: 'log', name: 'Log', active: false } { prop: 'log', name: this.$t('overall.logs'), active: false }
], ],
log: [ log: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: 'Endpoint', active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: 'Log', active: true } { prop: 'log', name: this.$t('overall.logs'), active: true }
], ],
alertMessageSub: [ alertMessageSub: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: 'Endpoint', active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: 'Log', active: false }, { prop: 'log', name: this.$t('overall.logs'), active: false },
{ prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: true } { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: true }
] ]
}, },
@@ -200,8 +200,8 @@ export default {
endpointTabTitle: [ endpointTabTitle: [
{ prop: 'panelTab', name: this.$t('overall.detail') }, { prop: 'panelTab', name: this.$t('overall.detail') },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') }, { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
{ prop: 'endpointQuery', name: 'Metrics' }, { prop: 'endpointQuery', name: this.$t('project.metrics.metrics') },
{ prop: 'log', name: 'Log' } { prop: 'log', name: this.$t('overall.logs') }
] ]
}, },
chartTemp: { chartTemp: {

View File

@@ -93,7 +93,7 @@
{{$t('globalSearch.toEsc')}} {{$t('globalSearch.toEsc')}}
</div> </div>
<div class="global-search-footer-right"> <div class="global-search-footer-right">
<div class="scope-box" v-for="item in scope" :class="item.isSelect ? 'is-select' : ''" :key="item.type" @click="scopeChange(item)" :title="item.type"> <div class="scope-box" v-for="item in scope" :class="item.isSelect ? 'is-select' : ''" :key="item.type" @click="scopeChange(item)" :title="item.title">
<i class="nz-icon" :class="selectIcon(item)" /> <i class="nz-icon" :class="selectIcon(item)" />
{{stat[item.type] || 0}} {{stat[item.type] || 0}}
</div> </div>

View File

@@ -503,12 +503,12 @@ export default {
searchItemPath (item) { searchItemPath (item) {
let str = '' let str = ''
switch (item.type) { switch (item.type) {
case 'asset' : str += '<span>Asset</span> <span>/</span> <span>Asset</span>'; break case 'asset' : str += `<span>${this.$t('overall.asset')}</span> <span>/</span> <span>${this.$t('overall.asset')}</span>`; break
case 'datacenter' : str += '<span>Setting</span> <span>/</span> <span>Data center</span>'; break case 'datacenter' : str += `<span>${this.$t('config.config')}</span> <span>/</span> <span>${this.$t('overall.dc')}</span>`; break
case 'project' : str += '<span>Monitor</span> <span>/</span> <span>Project</span>'; break case 'project' : str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('dashboard.overview.project.project')}</span>`; break
case 'module' :str += '<span>Monitor</span> <span>/</span> <span>Module</span>'; break case 'module' :str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('overall.module')}</span>`; break
case 'endpoint' : str += '<span>Monitor</span> <span>/</span> <span>Endpoint</span>'; break case 'endpoint' : str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('asset.endpoint')}</span>`; break
case 'alertrule' : str += '<span>Alert</span> <span>/</span> <span>Alert rule</span>'; break case 'alertrule' : str += `<span>${this.$t('overall.alert')}</span> <span>/</span> <span>${this.$t('dashboard.overview.alert.alertRule')}</span>`; break
} }
return str return str
}, },

View File

@@ -19,7 +19,7 @@
node-key="id" node-key="id"
ref="assetTypeTree"> ref="assetTypeTree">
<div :class="{'tree--node__disabled': data.disabled}" class="tree--node" slot-scope="{ node, data }"> <div :class="{'tree--node__disabled': data.disabled}" class="tree--node" slot-scope="{ node, data }">
<span>{{ node.label }}</span> <span>{{ $t(node.label) }}</span>
</div> </div>
</el-tree> </el-tree>
</div> </div>

View File

@@ -35,8 +35,8 @@
<el-select v-model="editAsset.stateId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id"> <el-select v-model="editAsset.stateId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
<el-option v-for="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id"> <el-option v-for="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id">
<div style="display: flex;justify-content: space-between;padding: 5px;"> <div style="display: flex;justify-content: space-between;padding: 5px;">
<div>{{state.name}}</div> <div>{{$t(state.name)}}</div>
<div style="width: 450px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999999" :title="state.remark">{{state.remark}}</div> <div style="width: 450px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999999" :title="state.remark">{{$t(state.remark)}}</div>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>

View File

@@ -185,8 +185,8 @@ export default {
filterPanel: '', filterPanel: '',
groupArr: [], groupArr: [],
varTypeArr: [ varTypeArr: [
{ name: 'Asset', id: 1 }, { name: this.$t('asset.asset'), id: 1 },
{ name: 'Endpoint', id: 2 } { name: this.$t('asset.endpoint'), id: 2 }
], ],
panelName: '', panelName: '',
rules: { rules: {

View File

@@ -36,13 +36,13 @@ export default {
statisticsList: this.$CONSTANTS.statisticsList, statisticsList: this.$CONSTANTS.statisticsList,
legendPositionList: [ legendPositionList: [
{ {
label: 'bottom', label: this.$t('overall.bottom'),
value: 'bottom' value: 'bottom'
}, { }, {
label: 'left', label: this.$t('overall.left'),
value: 'left' value: 'left'
}, { }, {
label: 'right', label: this.$t('overall.right'),
value: 'right' value: 'right'
} }
], ],
@@ -156,16 +156,16 @@ export default {
], ],
textList: [ textList: [
{ {
label: 'All', label: this.$t('config.assetLabel.all'),
value: 'all' value: 'all'
}, { }, {
label: 'Value', label: this.$t('overall.value'),
value: 'value' value: 'value'
}, { }, {
label: 'Legend', label: this.$t('dashboard.panel.chartForm.legend'),
value: 'legend' value: 'legend'
}, { }, {
label: 'None', label: this.$t('config.assetLabel.all'),
value: 'none' value: 'none'
} }
], ],

View File

@@ -422,7 +422,7 @@ export default {
index: -1 index: -1
}, },
assetLabel: { assetLabel: {
label: 'More', label: this.$t('overall.more'),
key: 'fieldsDetail', key: 'fieldsDetail',
type: 'dropdownCheckBox', type: 'dropdownCheckBox',
children: [], children: [],

View File

@@ -48,6 +48,7 @@ export default {
return { return {
url: 'sys/log', url: 'sys/log',
tableId: 'operationLogTable', // 需要分页的table的id用于记录每页数量 tableId: 'operationLogTable', // 需要分页的table的id用于记录每页数量
orderBy: '-id',
searchMsg: { // 给搜索框子组件传递的信息 searchMsg: { // 给搜索框子组件传递的信息
searchLabelList: [ searchLabelList: [
{ {

View File

@@ -115,6 +115,7 @@ export default {
return { return {
url: 'terminal/session', url: 'terminal/session',
tableId: 'terminalLogTable', // 需要分页的table的id用于记录每页数量 tableId: 'terminalLogTable', // 需要分页的table的id用于记录每页数量
orderBy: '-id',
searchMsg: { // 给搜索框子组件传递的信息 searchMsg: { // 给搜索框子组件传递的信息
searchLabelList: [ searchLabelList: [
{ {