perf:系统no data样式统一 & 隐藏asset 编辑页impl和telnet-login 提示相关属性
This commit is contained in:
@@ -2031,5 +2031,7 @@ li{
|
|||||||
top:50%;
|
top:50%;
|
||||||
width:100%;
|
width:100%;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
color:#52545c;
|
color: #909399;
|
||||||
|
font-family: NotoSans !important;
|
||||||
|
font-size: 12px !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -542,64 +542,8 @@
|
|||||||
const param = {
|
const param = {
|
||||||
panelId: params.panelId,
|
panelId: params.panelId,
|
||||||
query: params.query,
|
query: params.query,
|
||||||
from: params.from
|
|
||||||
};
|
};
|
||||||
if (!param.query) delete param.query;
|
if (!param.query) delete param.query;
|
||||||
//alert-rule单独处理
|
|
||||||
if (param.from == "alertRule") {
|
|
||||||
this.dataList = [];
|
|
||||||
this.dataList.push({
|
|
||||||
id: -10,
|
|
||||||
panelId: 0,
|
|
||||||
title: this.$t("alert.config.chart.alertRuleInfo"),
|
|
||||||
span: 4,
|
|
||||||
height: 350,
|
|
||||||
type: "alertRuleInfo",
|
|
||||||
prev: 0,
|
|
||||||
next: -9,
|
|
||||||
buildIn: 1
|
|
||||||
});
|
|
||||||
this.dataList.push({
|
|
||||||
id: -9,
|
|
||||||
panelId: 0,
|
|
||||||
title: this.$t("alert.config.chart.alertNumTrend"),
|
|
||||||
span: 4,
|
|
||||||
height: 350,
|
|
||||||
type: "line",
|
|
||||||
prev: -10,
|
|
||||||
next: -8,
|
|
||||||
buildIn: 1,
|
|
||||||
elements: [{
|
|
||||||
id: '',
|
|
||||||
expression: `nz_alert_nums{id="${this.alertRuleDetail[0].value}"}`,
|
|
||||||
type: ''
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
this.dataList.push({
|
|
||||||
id: -8,
|
|
||||||
panelId: 0,
|
|
||||||
title: this.$t("dashboard.panel.chartForm.statistics"),
|
|
||||||
span: 4,
|
|
||||||
height: 350,
|
|
||||||
type: "bar",
|
|
||||||
prev: -9,
|
|
||||||
next: -1,
|
|
||||||
buildIn: 1,
|
|
||||||
elements: [{
|
|
||||||
id: '',
|
|
||||||
expression: "",
|
|
||||||
type: ''
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.dataList.forEach((item,index) => {
|
|
||||||
this.setChartSize(item, index);//设置该图表宽度
|
|
||||||
let chartBox = document.getElementById('chart-' + item.id);
|
|
||||||
this.handleElementInViewport(chartBox, 0, item, index);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
//根据panelId获得panel下的所有图表
|
//根据panelId获得panel下的所有图表
|
||||||
this.$get('panel/'+ params.panelId+'/charts').then(response => {
|
this.$get('panel/'+ params.panelId+'/charts').then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
@@ -736,10 +680,6 @@
|
|||||||
this.getAlertListChartData(chartItem,filterType);
|
this.getAlertListChartData(chartItem,filterType);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(chartItem.type === 'alertRuleInfo'){
|
|
||||||
this.getAlertRuleChartData(chartItem);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.isModel) {
|
if (this.isModel) {
|
||||||
this.modelStaticData(chartInfo, filterType);
|
this.modelStaticData(chartInfo, filterType);
|
||||||
} else {
|
} else {
|
||||||
@@ -1035,7 +975,7 @@
|
|||||||
document.querySelector('body').appendChild(html);
|
document.querySelector('body').appendChild(html);
|
||||||
width = document.querySelector('.getTextWidth').offsetWidth;
|
width = document.querySelector('.getTextWidth').offsetWidth;
|
||||||
document.querySelector('.getTextWidth').remove();
|
document.querySelector('.getTextWidth').remove();
|
||||||
return Number('-'+width);
|
return Number('-'+(width+5));
|
||||||
},
|
},
|
||||||
modelStaticData(chartInfo, filterType) {
|
modelStaticData(chartInfo, filterType) {
|
||||||
let series = [];
|
let series = [];
|
||||||
@@ -1311,15 +1251,12 @@
|
|||||||
getAlertListChartData:function(chartInfo,filterType){
|
getAlertListChartData:function(chartInfo,filterType){
|
||||||
this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
|
this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
|
||||||
},
|
},
|
||||||
getAlertRuleChartData(chartInfo) {
|
|
||||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo);
|
|
||||||
},
|
|
||||||
// 设置图表的尺寸
|
// 设置图表的尺寸
|
||||||
setChartSize(item, index) {
|
setChartSize(item, index) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
let chartBox = document.getElementById("chart-" + item.id);
|
let chartBox = document.getElementById("chart-" + item.id);
|
||||||
chartBox.style.width = `${(item.span / 12) * 100}%`;
|
chartBox.style.width = `${(item.span / 12) * 100}%`;
|
||||||
chartBox.style.height = `${Math.round(item.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight}px`;
|
chartBox.style.height = `${item.height}px`;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getNewTime(time, num) {
|
getNewTime(time, num) {
|
||||||
|
|||||||
@@ -43,7 +43,7 @@
|
|||||||
<div class="mt-10 single-stat-container" v-cloak v-show="firstShow" >
|
<div class="mt-10 single-stat-container" v-cloak v-show="firstShow" >
|
||||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="single-stat-content" >
|
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="single-stat-content" >
|
||||||
{{serieSingleStat}}
|
{{serieSingleStat}}
|
||||||
<div class="chart-no-data" v-show="noData">No data</div>
|
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--全屏-->
|
<!--全屏-->
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
<div class="single-stat-screen-container" >
|
<div class="single-stat-screen-container" >
|
||||||
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" >
|
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" >
|
||||||
{{serieSingleStat}}
|
{{serieSingleStat}}
|
||||||
<div class="chart-no-data" v-show="noData">No data</div>
|
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||||
|
|||||||
@@ -78,7 +78,7 @@
|
|||||||
<template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'">
|
<template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'">
|
||||||
<div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
|
<div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
|
||||||
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;"></div>
|
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;"></div>
|
||||||
<div class="chart-no-data" v-show="noData">No data</div>
|
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||||
<div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
|
<div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
|
||||||
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
|
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
|
||||||
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
||||||
@@ -96,7 +96,7 @@
|
|||||||
display:table-cell;
|
display:table-cell;
|
||||||
font-size:30px;">
|
font-size:30px;">
|
||||||
{{serieSingleStat}}
|
{{serieSingleStat}}
|
||||||
<div class="chart-no-data" v-show="noData">No data</div>
|
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
|
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
|
||||||
<div class="chart-no-data" v-show="noData">No data</div>
|
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||||
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
|
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
|
||||||
<div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
|
<div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
|
||||||
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
||||||
@@ -78,7 +78,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
|
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
|
||||||
<div class="chart-no-data" v-show="noData">No data</div>
|
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||||
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
|
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
|
||||||
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
|
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
|
||||||
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
||||||
@@ -1247,7 +1247,7 @@
|
|||||||
document.querySelector('body').appendChild(html);
|
document.querySelector('body').appendChild(html);
|
||||||
width = document.querySelector('.getTextWidth').offsetWidth;
|
width = document.querySelector('.getTextWidth').offsetWidth;
|
||||||
document.querySelector('.getTextWidth').remove();
|
document.querySelector('.getTextWidth').remove();
|
||||||
return Number('-'+width);
|
return Number('-'+(width+5));
|
||||||
},
|
},
|
||||||
showLoad(chartItem) {
|
showLoad(chartItem) {
|
||||||
//设置高度
|
//设置高度
|
||||||
|
|||||||
@@ -127,7 +127,7 @@
|
|||||||
<span v-if="tabView">{{assetData.purchaseDate}}</span>
|
<span v-if="tabView">{{assetData.purchaseDate}}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!------------------------------------------impi---------------------------------------------->
|
<!------------------------------------------impi---------------------------------------------->
|
||||||
<div v-if="assetType == 1">
|
<!--<div v-if="assetType == 1">
|
||||||
<div class="right-box-sub-title">{{$t('asset.createAssetTab.impi.title')}}</div>
|
<div class="right-box-sub-title">{{$t('asset.createAssetTab.impi.title')}}</div>
|
||||||
<div class="line-100 right-box-line"></div>
|
<div class="line-100 right-box-line"></div>
|
||||||
<el-form-item :label="$t('asset.createAssetTab.impi.host')" class="right-box-form-content" prop="impi.host">
|
<el-form-item :label="$t('asset.createAssetTab.impi.host')" class="right-box-form-content" prop="impi.host">
|
||||||
@@ -138,7 +138,7 @@
|
|||||||
<el-input v-model="assetData.impi.port" size="small" v-if="!tabView"></el-input>
|
<el-input v-model="assetData.impi.port" size="small" v-if="!tabView"></el-input>
|
||||||
<span v-if="tabView">{{assetData.impi.port}}</span>
|
<span v-if="tabView">{{assetData.impi.port}}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>-->
|
||||||
<div class="right-box-sub-title">{{$t('asset.createAssetTab.location')}}</div>
|
<div class="right-box-sub-title">{{$t('asset.createAssetTab.location')}}</div>
|
||||||
<div class="line-100 right-box-line"></div>
|
<div class="line-100 right-box-line"></div>
|
||||||
<!------------------------------------------IDC---------------------------------------------->
|
<!------------------------------------------IDC---------------------------------------------->
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<div class="telnet-option" v-show="isEdit && account.protocol=='TELNET'">
|
<!--<div class="telnet-option" v-show="isEdit && account.protocol=='TELNET'">
|
||||||
<div class="telnet-option_title clickable" @click="isShowTelnetOption"><div style="width: 100px;">login option</div><div class="telnet-option_spilt"></div><div style="width: 20px"><i style="font-size: 12px;" :class="{'el-icon-arrow-left':!showTelnetOption,'el-icon-arrow-down':showTelnetOption}"></i></div></div>
|
<div class="telnet-option_title clickable" @click="isShowTelnetOption"><div style="width: 100px;">login option</div><div class="telnet-option_spilt"></div><div style="width: 20px"><i style="font-size: 12px;" :class="{'el-icon-arrow-left':!showTelnetOption,'el-icon-arrow-down':showTelnetOption}"></i></div></div>
|
||||||
<div v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" class="auto-login-tip">
|
<div v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" class="auto-login-tip">
|
||||||
{{$t('asset.createAssetTab.userPwdIntroduce')}}
|
{{$t('asset.createAssetTab.userPwdIntroduce')}}
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
|
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
|
||||||
<el-input type="text" size="small" v-model="account.reloginPasswordTip" />
|
<el-input type="text" size="small" v-model="account.reloginPasswordTip" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>-->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div class="chart-header">{{chartTitle}}</div>
|
<div class="chart-header">{{chartTitle}}</div>
|
||||||
|
|
||||||
<div class="chart-body" ref="chartBody" :id="chartId" ></div>
|
<div class="chart-body" ref="chartBody" :id="chartId" ></div>
|
||||||
<div class="chart-no-data" v-show="noData">No data</div>
|
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||||
|
|
||||||
<div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
|
<div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
|
||||||
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
|
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
|
||||||
|
|||||||
Reference in New Issue
Block a user