feat:table添加统计字段&panel样式调整
This commit is contained in:
wangwenrui
80
nezha-fronted/package-lock.json
generated
80
nezha-fronted/package-lock.json
generated
@@ -1945,12 +1945,6 @@
|
||||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"charenc": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
|
||||
"integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
|
||||
"dev": true
|
||||
},
|
||||
"check-types": {
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
|
||||
@@ -2700,12 +2694,6 @@
|
||||
"which": "^1.2.9"
|
||||
}
|
||||
},
|
||||
"crypt": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
|
||||
"integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
|
||||
"dev": true
|
||||
},
|
||||
"crypto-browserify": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
|
||||
@@ -3973,11 +3961,12 @@
|
||||
}
|
||||
},
|
||||
"echarts": {
|
||||
"version": "4.8.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
|
||||
"integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.1.tgz",
|
||||
"integrity": "sha512-JYn22Dolt2esY2jEzUsw1OxbobuW67oGjIoTjZO3rW89SWkfJ4kbrmC2OW9JjsBrD1rdkmaWBuZZ2HgmThyxJw==",
|
||||
"requires": {
|
||||
"zrender": "4.3.1"
|
||||
"tslib": "2.0.3",
|
||||
"zrender": "5.0.3"
|
||||
}
|
||||
},
|
||||
"ee-first": {
|
||||
@@ -7019,17 +7008,6 @@
|
||||
"integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==",
|
||||
"dev": true
|
||||
},
|
||||
"md5": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
|
||||
"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"charenc": "0.0.2",
|
||||
"crypt": "0.0.2",
|
||||
"is-buffer": "~1.1.6"
|
||||
}
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
@@ -12611,6 +12589,11 @@
|
||||
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
|
||||
"dev": true
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
|
||||
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
|
||||
},
|
||||
"tty-browserify": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
|
||||
@@ -13601,15 +13584,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"webpack-md5-hash": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/webpack-md5-hash/-/webpack-md5-hash-0.0.6.tgz",
|
||||
"integrity": "sha512-HrQ0AJpeXHRa3IjsgyyEfTx8EqYs5y/4x/WklSYsNDcqBixHzCkrmJV5U+4ks+sx7ycKoIdqWLdyuk913FCS+Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"md5": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"webpack-merge": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
|
||||
@@ -13619,12 +13593,6 @@
|
||||
"lodash": "^4.17.15"
|
||||
}
|
||||
},
|
||||
"webpack-shell-plugin": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-shell-plugin/-/webpack-shell-plugin-0.5.0.tgz",
|
||||
"integrity": "sha1-Kbih2A3erg3bEOcpZn9yhlPCx0I=",
|
||||
"dev": true
|
||||
},
|
||||
"webpack-sources": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
|
||||
@@ -13895,15 +13863,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"yazl": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/yazl/-/yazl-2.5.1.tgz",
|
||||
"integrity": "sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"buffer-crc32": "~0.2.3"
|
||||
}
|
||||
},
|
||||
"zip-stream": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.1.3.tgz",
|
||||
@@ -13928,20 +13887,13 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"zip-webpack-plugin": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/zip-webpack-plugin/-/zip-webpack-plugin-2.0.0.tgz",
|
||||
"integrity": "sha1-xQZn3uFd3ezaXyy7ozNjbdOj58I=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"webpack-sources": "^1.0.1",
|
||||
"yazl": "^2.4.2"
|
||||
}
|
||||
},
|
||||
"zrender": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
|
||||
"integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.3.tgz",
|
||||
"integrity": "sha512-TVcN2IMdo7je3GEq/E4CER4AGBe/n50/izILdupppyHf/hVHuiXCRliqdu8+32Z1OmGg6RfKt5qQlkX+bOtU0g==",
|
||||
"requires": {
|
||||
"tslib": "2.0.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1378,7 +1378,7 @@ li{
|
||||
}
|
||||
|
||||
.right-box-form {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 15px);
|
||||
}
|
||||
.right-box-add-endpoint .right-box-form {
|
||||
height: 100%;
|
||||
@@ -1394,17 +1394,16 @@ li{
|
||||
}
|
||||
.right-box-form .one-third-form-item-left{
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
width: 170px;
|
||||
}
|
||||
.right-box-form .one-third-form-item-right{
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
width: 110px;
|
||||
width: 170px;
|
||||
.el-form-item__label{
|
||||
width: 20px !important;
|
||||
}
|
||||
.el-form-item__content{
|
||||
margin-left: 20px !important;
|
||||
//margin-left: 20px !important;
|
||||
}
|
||||
}
|
||||
.right-box-form>.el-form-item {
|
||||
@@ -2282,7 +2281,7 @@ li{
|
||||
padding: 20px 20px 20px 0;
|
||||
border: 1px dashed #dfe7f2;
|
||||
width: calc(100% - 120px);
|
||||
margin-left: 70px;
|
||||
margin-left: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.right-box-form .form-row-item .nz-icon-minus{
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<style scoped>
|
||||
.chartBox {
|
||||
float:left;
|
||||
padding: 0px 10px 10px 0;
|
||||
padding: 0px 2px 2px 0;
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -9,8 +9,8 @@
|
||||
text-align: center
|
||||
}
|
||||
.list-width{
|
||||
width: calc(100% - 14px);
|
||||
padding: 5px 15px 5px 0px;
|
||||
width: calc(100% - 2px);
|
||||
padding: 5px 5px 5px 0px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
|
||||
min-height: calc(100vh - 150px);
|
||||
@@ -813,9 +813,9 @@
|
||||
chartInfo.param.nullType=chartInfo.param.nullType||'connected';
|
||||
query+='&nullType='+chartInfo.param.nullType;
|
||||
}
|
||||
if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
|
||||
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
}
|
||||
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
|
||||
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
// }
|
||||
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
});
|
||||
// 一个图表的所有element单独获取数据
|
||||
@@ -969,14 +969,15 @@
|
||||
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
|
||||
}
|
||||
*/
|
||||
let t_date = new Date(dpsItem[0] * 1000);
|
||||
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
|
||||
// let t_date = new Date(dpsItem[0] * 1000);
|
||||
// let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
|
||||
tableData.push({//表格数据
|
||||
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
|
||||
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
|
||||
element: {element: host, alias: alias},
|
||||
time: timeTmp,//采集时间
|
||||
value: dpsItem[1],//数值
|
||||
// time: timeTmp,//采集时间
|
||||
// value: dpsItem[1],//数值
|
||||
data:[dpsItem[0] * 1000, dpsItem[1]]
|
||||
});
|
||||
return [dpsItem[0] * 1000, dpsItem[1]];
|
||||
});
|
||||
|
||||
@@ -393,6 +393,8 @@
|
||||
}
|
||||
this.data = chartItem;
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||||
let statistics = chartItem.param.statistics;
|
||||
seriesItem = this.getStatisticsResult(statistics,seriesItem)
|
||||
seriesItem && (seriesItem = seriesItem.map(item=>{
|
||||
if(chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type){
|
||||
let type=chartItem.param.valueMapping.type;
|
||||
@@ -450,6 +452,91 @@
|
||||
this.endLoading();
|
||||
}
|
||||
},
|
||||
getStatisticsResult(statistics,seriesItem){
|
||||
let copy=JSON.parse(JSON.stringify(seriesItem));
|
||||
let last,result;
|
||||
last=copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0];
|
||||
switch (statistics) {
|
||||
case 'null':
|
||||
return copy.map(item=>{
|
||||
return {
|
||||
element:item.element,
|
||||
time:bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:item.data[1]
|
||||
}
|
||||
})
|
||||
case 'min':
|
||||
result= copy.sort((x,y)=>{return parseFloat(x.data[1]) - parseFloat(y.data[1])})[0];
|
||||
result = [{
|
||||
element:result.element,
|
||||
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:result.data[1],
|
||||
}]
|
||||
break;
|
||||
case 'max':
|
||||
result= copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})[0];
|
||||
result = [{
|
||||
element:result.element,
|
||||
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:result.data[1],
|
||||
}]
|
||||
break;
|
||||
case 'average':
|
||||
copy = copy.map(t=>parseFloat(t.data[1]));
|
||||
let sum = eval(copy.join('+'));
|
||||
let avg = sum / copy.length;
|
||||
result=[{
|
||||
element:last.element,
|
||||
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:avg
|
||||
}]
|
||||
break;
|
||||
case 'total':
|
||||
copy = copy.map(t=>parseFloat(t.data[1]));
|
||||
let total = eval(copy.join('+'));
|
||||
result=[{
|
||||
element:last.element,
|
||||
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:total
|
||||
}]
|
||||
break;
|
||||
case 'first':
|
||||
result=copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1]
|
||||
result = [{
|
||||
element:result.element,
|
||||
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:result.data[1],
|
||||
}]
|
||||
break;
|
||||
case 'last':
|
||||
result=last;
|
||||
result = [{
|
||||
element:result.element,
|
||||
time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:result.data[1],
|
||||
}]
|
||||
break;
|
||||
case 'range':
|
||||
let sort = copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})
|
||||
let max = sort[0]
|
||||
let min = sort[sort.length-1]
|
||||
result=[{
|
||||
element:last.element,
|
||||
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:max.data[1] - min.data[1]
|
||||
}]
|
||||
break;
|
||||
case 'different':
|
||||
let first = copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1];
|
||||
result = [{
|
||||
element:last.element,
|
||||
time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
|
||||
value:last.data[1] - first.data[1]
|
||||
}]
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
// 数据排序
|
||||
tableDataSort(item) {
|
||||
this.orderBy = {order: item.order, prop: item.prop};
|
||||
|
||||
@@ -317,11 +317,11 @@ export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
|
||||
//chart-resize工具
|
||||
export const chartResizeTool = {
|
||||
minHeight: 200, //图表最小高度
|
||||
chartPaddingTop: 10, //图表padding-top
|
||||
chartBlankHeight: 12, //图表空白占位高度(padding-top + border)
|
||||
chartPaddingTop: 2, //图表padding-top
|
||||
chartBlankHeight:4, //图表空白占位高度(padding-top + border)
|
||||
chartTableBlankHeight: 6, //表格型图表额外空白占位高度
|
||||
chartBlankWidth: 10, //图表空白占位宽度
|
||||
containerBlankWidth: 15, //容器空白占位宽度（#listContainer的padding）
|
||||
chartBlankWidth: 2, //图表空白占位宽度
|
||||
containerBlankWidth: 5, //容器空白占位宽度（#listContainer的padding）
|
||||
titleHeight: 28, //标题dom高度
|
||||
stepHeight: 50, //单元高度
|
||||
timeouter:null,
|
||||
@@ -373,6 +373,7 @@ export const chartResizeTool = {
|
||||
let mouseY = e.clientY;
|
||||
//调整resize-box的宽高
|
||||
box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
|
||||
console.log(originalHeight,mouseY,mouseOriginalY,(mouseY-mouseOriginalY),chartBlankHeight,(originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight))
|
||||
box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
|
||||
//监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
|
||||
let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
|
||||
@@ -712,7 +713,7 @@ export function getMetricTypeValue(queryItem,type){
|
||||
let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1];
|
||||
return last;
|
||||
case 'first':
|
||||
let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length][1];
|
||||
let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length-1][1];
|
||||
return first;
|
||||
case 'total':
|
||||
copy = copy.map(t=>parseFloat(t[1]));
|
||||
|
||||
@@ -179,6 +179,7 @@ const cn = {
|
||||
last:'Last',
|
||||
range:'Range',
|
||||
different:'Different',
|
||||
null:'Null'
|
||||
},
|
||||
width: "宽",
|
||||
high: "高",
|
||||
|
||||
@@ -192,6 +192,7 @@ const en = {
|
||||
last:'Last',
|
||||
range:'Range',
|
||||
different:'Different',
|
||||
null:'Null'
|
||||
},
|
||||
width:'Width', //"宽"
|
||||
high:'High', //"高"
|
||||
@@ -423,7 +424,7 @@ const en = {
|
||||
assets: 'Assets',//'资产'
|
||||
editAsset: 'Edit asset',//'编辑资产'
|
||||
createAsset: 'New asset',//'编辑资产'
|
||||
batchEditAsset:'Batch edit asset',
|
||||
batchEditAsset:'Bulk edit',
|
||||
selectAsset:'Selected assets',
|
||||
host: "Host",
|
||||
state: 'State',//'状态'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -43,8 +43,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
.right-box-form .element-item.form-row-item{
|
||||
width: calc(100% - 120px);
|
||||
padding: 20px 20px 20px 0;
|
||||
width: calc(100% - 60px);
|
||||
padding: 5px 20px 0px 0;
|
||||
}
|
||||
/*metric样式--end*/
|
||||
.label-center{
|
||||
@@ -64,7 +64,7 @@
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
z-index: 100;
|
||||
}
|
||||
/deep/ .el-color-picker{
|
||||
position: absolute;
|
||||
@@ -259,17 +259,17 @@
|
||||
<el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie' ">
|
||||
<el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="editChart.param.statistics" id="chart-box-panelname">
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' ">
|
||||
<el-select placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.param.statistics" id="chart-box-panelname">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
|
||||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
|
||||
<!--<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
|
||||
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form-item>-->
|
||||
|
||||
<!--<el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">-->
|
||||
<!--<el-switch class="exporter-switch" v-model="editChart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>-->
|
||||
@@ -323,7 +323,7 @@
|
||||
></promql-input>
|
||||
-->
|
||||
<el-row>
|
||||
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
|
||||
<el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
|
||||
{{$t('dashboard.panel.chartForm.legend')}}
|
||||
<el-popover placement="top" trigger="hover" width="211">
|
||||
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
|
||||
@@ -452,7 +452,7 @@
|
||||
</div>
|
||||
<div style="margin-bottom: 20px; width: 100%" ></div>
|
||||
<div style="display: flex;">
|
||||
<span style="margin-left: 75px;"></span>
|
||||
<span style="margin-left: 15px;"></span>
|
||||
<template v-for="item in sortedOptionKeys">
|
||||
<div style="flex: 1">
|
||||
<span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
|
||||
@@ -506,6 +506,7 @@
|
||||
import {nzNumber} from "../../common/js/validate";
|
||||
import richTextEditor from "../../charts/richTextEditor";
|
||||
import selectPanel from "../../common/popBox/selectPanel";
|
||||
import i18n from "../../common/i18n";
|
||||
|
||||
var rz = {
|
||||
methods: {
|
||||
@@ -1042,7 +1043,7 @@
|
||||
this.$refs.alertParamBox.saveParam();
|
||||
return ;
|
||||
}
|
||||
if(this.editChart.type == 'singleStat'||this.editChart.type == 'pie'){
|
||||
if(this.editChart.type == 'singleStat'||this.editChart.type == 'pie'||this.editChart.type == 'table'){
|
||||
// this.$set(this.editChart.param, "statistics", this.statistics);
|
||||
} else {
|
||||
delete this.editChart.param.statistics;
|
||||
@@ -1351,9 +1352,11 @@
|
||||
}else if(chartType === 'alertList'){
|
||||
this.setIsAlertList();
|
||||
}else if(chartType === 'singleStat' || chartType==='pie') {
|
||||
|
||||
if(chartType == 'singleStat'){
|
||||
this.setIsSingleStat();
|
||||
this.resetElements();
|
||||
this.statistics='',
|
||||
}
|
||||
this.editChart.param={
|
||||
statistics:'last',
|
||||
valueMapping:{
|
||||
@@ -1369,7 +1372,7 @@
|
||||
}else if(chartType == 'table'){
|
||||
this.$set(this.editChart.param,'last',0)
|
||||
this.editChart.param={
|
||||
statistics:'',
|
||||
statistics:'last',
|
||||
nullType:'connected',
|
||||
valueMapping:{
|
||||
type:'value',
|
||||
@@ -1377,6 +1380,9 @@
|
||||
}
|
||||
}
|
||||
this.showPicker=[{bac:false,text:false}];
|
||||
this.statisticsList = JSON.parse(JSON.stringify(this.statisticsList));
|
||||
this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},);
|
||||
|
||||
}
|
||||
/*if(this.$refs.chartTag){
|
||||
this.$refs.chartTag.forEach((item, index) => {
|
||||
@@ -1443,8 +1449,7 @@
|
||||
// params.param.statistics=this.statistics;
|
||||
params.param.valueMapping=this.editChart.param.valueMapping;
|
||||
}
|
||||
console.log(this.editChart)
|
||||
if(this.editChart.type != 'singleStat' && this.editChart.type != 'pie'){
|
||||
if(this.editChart.type != 'singleStat' && this.editChart.type != 'pie'&& this.editChart.type != 'table'){
|
||||
delete params.param.statistics;
|
||||
}
|
||||
if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='table'){
|
||||
@@ -1455,7 +1460,6 @@
|
||||
}
|
||||
params.param.nullType=this.editChart.param.nullType;
|
||||
params.param.legendValue=this.editChart.param.legendValue;
|
||||
params.param.last=this.editChart.param.last;
|
||||
} else {
|
||||
delete params.param.threshold;
|
||||
delete params.param.nullType;
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<!--right-box里的样式-->
|
||||
<template v-if="styleType == 2">
|
||||
<el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1" style="width: 100%;">
|
||||
<el-col :style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':left, 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
|
||||
<el-col :style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':'left', 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
|
||||
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric <i class="nz-icon nz-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
|
||||
|
||||
@@ -100,7 +100,7 @@
|
||||
<div class="table-list" id="tableList">
|
||||
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
|
||||
<div class="box-content">
|
||||
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
|
||||
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :class="{'show-top':showTopBtn}"></chart-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -840,12 +840,15 @@
|
||||
.table-list {
|
||||
margin-top: 0px;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 92px);
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.box-content {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
.show-top:last-child{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* end-chart list*/
|
||||
|
||||
Reference in New Issue
Block a user