feat:新增asset info chart(细节待优化)
This commit is contained in:
wangwenrui
225
nezha-fronted/src/components/charts/chart-asset-info.scss
Normal file
225
nezha-fronted/src/components/charts/chart-asset-info.scss
Normal file
@@ -0,0 +1,225 @@
|
||||
/* ---------edit-chart-move--------- */
|
||||
.clearfix:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.clearfix{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.loading-font{
|
||||
color:#232f3e !important;
|
||||
}
|
||||
.dialog-tool {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.hidden{
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.chart-asset-info {
|
||||
width: 100%;
|
||||
height: 100%;//calc(100% - 40px);
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
border: 1px solid #d8dce1;
|
||||
padding: 0px 0px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 3px;
|
||||
.chart-info-container{
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
display:table;
|
||||
text-align:center;
|
||||
width:calc(100% - 16px);
|
||||
.single-stat-content{
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
display:table-cell;
|
||||
font-size:30px;
|
||||
}
|
||||
}
|
||||
.vue-resizable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: se-resize;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.vue-resizable-handle:after {
|
||||
border-right: 2px solid #555;
|
||||
border-bottom: 2px solid #555;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
.chartTitle:hover {
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.dragTitle{
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: #333;
|
||||
margin: -3px 0 3px 3px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
.chart-title-text{
|
||||
max-width:calc(100% - 20px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit:after{
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.button-panel-height{
|
||||
height:26px;
|
||||
}
|
||||
.button-panel-height button{
|
||||
height:26px;
|
||||
}
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 17px;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
.chart-select {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 25px;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
.chart-select-btn {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #5aacff;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*没有数据显示*/
|
||||
.null {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.element-bottom-border {
|
||||
border-bottom: 1px solid #dfe7f2;
|
||||
margin-bottom:-20px;
|
||||
}
|
||||
.element-top-border {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #dfe7f2;
|
||||
margin-top:-25px;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-info-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.basic-container,.feature-container{
|
||||
width: 100%;
|
||||
//height: calc(50% - 4px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.basic-container .basic-title,.feature-container .feature-title{
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap:nowrap;
|
||||
padding: 0 5px 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.basic-container .basic-title:hover,.feature-container .feature-title:hover{
|
||||
border: 1px solid #C0C4CC;
|
||||
}
|
||||
|
||||
.basic-container .basic-content,.feature-container .feature-content{
|
||||
height: calc(100% - 22px);
|
||||
transition: all 2s;
|
||||
}
|
||||
.shrink{
|
||||
height: 0px;
|
||||
display: none;
|
||||
}
|
||||
.basic-container{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.feature-container{
|
||||
|
||||
}
|
||||
.content-item{
|
||||
width: 100%;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
position: relative;
|
||||
.content-item-key{
|
||||
display: inline-block;
|
||||
//height: 25px;
|
||||
//line-height: 25px;
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
z-index: 2001;
|
||||
left: 0;
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
}
|
||||
.content-item-value{
|
||||
display: inline-block;
|
||||
//height: 25px;
|
||||
//line-height: 25px;
|
||||
float: right;
|
||||
width: 68%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
.content-item:hover{
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
428
nezha-fronted/src/components/charts/chart-asset-info.vue
Normal file
428
nezha-fronted/src/components/charts/chart-asset-info.vue
Normal file
@@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<div class="chart-asset-info" :id="'chartAssetInfoDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-popover
|
||||
v-if="isError"
|
||||
:close-delay=10
|
||||
placement="top-start"
|
||||
trigger="hover"
|
||||
popper-class="chart-error-popper">
|
||||
<div >{{errorContent}}</div>
|
||||
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
|
||||
<i class="nz-icon nz-icon-warning fa"></i>
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{data.title}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10 chart-info-container" v-cloak v-show="firstShow" >
|
||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
|
||||
<el-scrollbar style="height: 100%;" ref="scrollbar" class="el-scrollbar-large">
|
||||
<div style="padding: 0 15px">
|
||||
<div class="basic-container">
|
||||
<div class="basic-title" @click="hideElement('basic')">
|
||||
<div>{{$t('asset.basicTitle')}}</div>
|
||||
<div><i :class="{'el-icon-caret-bottom':hideBasic,'el-icon-caret-top':!hideBasic}"></i></div>
|
||||
</div>
|
||||
<div class="basic-content" :class="{'shrink':hideBasic}">
|
||||
<template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
|
||||
<div v-for="(value,key,index) in assetInfos.Basic" :key="index" class="content-item" :class="{'bg-grey':index % 2 == 1}">
|
||||
<div class="content-item-key">{{replaceSplit(key)}}</div>
|
||||
<div class="content-item-value">{{value}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-container">
|
||||
<div class="feature-title" @click="hideElement('feature')" >
|
||||
<div>{{$t('asset.featureTitle')}}</div>
|
||||
<div><i :class="{'el-icon-caret-bottom':hideFeature,'el-icon-caret-top':!hideFeature}"></i></div>
|
||||
</div>
|
||||
<div class="feature-content" :class="{'shrink':hideFeature}">
|
||||
<div v-for="(value,key,index) in assetInfos.Feature" class="content-item" :class="{'bg-grey':index % 2 == 1}">
|
||||
<div class="content-item-key" ><div style="vertical-align: middle">{{replaceSplit(key)}}</div></div>
|
||||
<template v-if="typeof value == 'string'">
|
||||
<div class="content-item-value">{{value}}</div>
|
||||
</template>
|
||||
<div v-if="Array.isArray(value) && value.length>0" class="content-item-value">
|
||||
<template v-if="typeof value[0] == 'string'">
|
||||
<div class="item-value-sub" v-for="(item,index) in value" :key="index">{{item}}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-table
|
||||
class="overview-table"
|
||||
:data="value"
|
||||
tooltip-effect="light"
|
||||
height="100%"
|
||||
ref="dataTable"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in setLabels(value)"
|
||||
v-if="item.show"
|
||||
:key="`col-${index}`"
|
||||
:width="item.width"
|
||||
:label="item.label"
|
||||
min-width="90"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template >
|
||||
<span v-html="scope.row[item.prop]"></span>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '../../libs/bus';
|
||||
import {Loading} from 'element-ui';
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import loading from "../common/loading";
|
||||
import timePicker from '../common/timePicker'
|
||||
|
||||
export default {
|
||||
name: 'chartAssetInfo',
|
||||
components: {
|
||||
'loading': loading,
|
||||
'time-picker':timePicker
|
||||
},
|
||||
props: {
|
||||
// 看板id
|
||||
panelId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
editChartId: {
|
||||
type: String,
|
||||
default: 'editChartId',
|
||||
},
|
||||
chartIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
unit:{},
|
||||
isError:false,
|
||||
errorContent:'',
|
||||
assetInfos:{},
|
||||
//toolbox: false,
|
||||
loading:Object,
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: false, // 是否第一次加载
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
},
|
||||
hideBasic:false,
|
||||
hideFeature:false,
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow:false,
|
||||
dragTitleShow:false,
|
||||
dropdownMenuShow:false,
|
||||
minHeight:200,
|
||||
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
|
||||
titleHeight:38,//title-height:28,magrin-bottom:10
|
||||
divFirstShow:false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
setLabels:function(source){
|
||||
let labels=[];
|
||||
source.forEach(item=>{
|
||||
labels=labels.concat(Object.keys(item))
|
||||
})
|
||||
labels=Array.from(new Set(labels));
|
||||
|
||||
labels=labels.map(item=>{
|
||||
return{
|
||||
label:this.replaceSplit(item),
|
||||
prop:item,
|
||||
show:true,
|
||||
}
|
||||
})
|
||||
|
||||
return labels;
|
||||
},
|
||||
hideElement:function(type){
|
||||
if(type == 'basic'){
|
||||
this.hideBasic=!this.hideBasic;
|
||||
}else{
|
||||
this.hideFeature=!this.hideFeature
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.scrollbar.update();
|
||||
})
|
||||
},
|
||||
replaceSplit(key){
|
||||
if(key){
|
||||
return key.replace('$_$',' ')
|
||||
}
|
||||
},
|
||||
dragResize:function(e){
|
||||
var diffWidth =20; //界面的宽度空白的地方的宽度
|
||||
var chartBoxPadding = 22;
|
||||
var targetDiv= document.getElementById('chartAssetInfoDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
|
||||
var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
|
||||
var maxWidth = targetDivContainer.offsetWidth-diffWidth;
|
||||
var minWidth = maxWidth/12;
|
||||
var stepWidth = maxWidth/12;
|
||||
var stepHeight = 10;
|
||||
|
||||
//得到点击时该容器的宽高：
|
||||
var targetDivHeight=targetDiv.offsetHeight;
|
||||
var targetDivWidth=targetDiv.offsetWidth;
|
||||
var startY=e.clientY;
|
||||
var startX=e.clientX;
|
||||
var _this=this;
|
||||
|
||||
document.onmousemove=function(e){
|
||||
e.preventDefault();
|
||||
//得到鼠标拖动的宽高距离：取绝对值
|
||||
var distY=Math.abs(e.clientY-startY);
|
||||
var distX=Math.abs(e.clientX-startX);
|
||||
|
||||
//往上方拖动：
|
||||
if( e.clientY < startY){
|
||||
targetDiv.style.height=targetDivHeight-distY+'px';
|
||||
//heightTmp = targetDivHeight-distY;
|
||||
}
|
||||
if( e.clientX < startX){
|
||||
targetDiv.style.width=targetDivWidth-distX+'px';
|
||||
//widthTmp = targetDivWidth-distX;
|
||||
}
|
||||
//往下方拖动：
|
||||
if (e.clientY > startY) {
|
||||
targetDiv.style.height=(targetDivHeight+distY)+'px';
|
||||
//heightTmp = targetDivHeight+distY;
|
||||
}
|
||||
if (e.clientX > startX) {
|
||||
targetDiv.style.width=(targetDivWidth+distX)+'px';
|
||||
//widthTmp = targetDivWidth+distX;
|
||||
}
|
||||
|
||||
if(parseInt(targetDiv.style.height)<=_this.minHeight){
|
||||
targetDiv.style.height=_this.minHeight+'px';
|
||||
//heightTmp = _this.minHeight;
|
||||
}
|
||||
|
||||
if(parseInt(targetDiv.style.width)>=maxWidth){
|
||||
targetDiv.style.width=maxWidth+'px';
|
||||
//widthTmp = maxWidth;
|
||||
}
|
||||
if(parseInt(targetDiv.style.width)<=minWidth){
|
||||
targetDiv.style.width=minWidth+'px';
|
||||
//widthTmp = minWidth;
|
||||
}
|
||||
//调整表格大小
|
||||
let containerHeight = parseInt(targetDiv.style.height);
|
||||
let containerWidth = parseInt(targetDiv.style.width);
|
||||
const chartBox = document.getElementsByClassName('chartBox');
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
|
||||
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
//表格的高度
|
||||
const chartAssetInfoBox = document.getElementById('chartContainer'+_this.chartIndex);
|
||||
chartAssetInfoBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
|
||||
}
|
||||
|
||||
document.onmouseup=function(){
|
||||
let targetDivHeightNew = parseInt(targetDiv.style.height);
|
||||
//let targetDivHeightNew = heightTmp
|
||||
let targetDivWidthNew = parseInt(targetDiv.style.width);
|
||||
//let targetDivWidthNew = widthTmp;
|
||||
|
||||
let diffHeight = Math.abs(targetDivHeight-targetDivHeightNew);
|
||||
if(targetDivHeight>targetDivHeightNew){
|
||||
let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
|
||||
//alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
|
||||
targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
|
||||
}
|
||||
if(targetDivHeight<targetDivHeightNew){
|
||||
let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
|
||||
targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
|
||||
}
|
||||
|
||||
var span = _this.data.span;
|
||||
if(targetDivWidth>targetDivWidthNew){
|
||||
span = Math.floor((targetDivWidthNew*12)/maxWidth);
|
||||
let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
|
||||
if((finalWidth)<minWidth){
|
||||
targetDiv.style.width=minWidth+'px';
|
||||
span = 1;
|
||||
}else {
|
||||
targetDiv.style.width = finalWidth+'px';
|
||||
}
|
||||
}
|
||||
if(targetDivWidth<targetDivWidthNew){
|
||||
span = Math.ceil((targetDivWidthNew*12)/maxWidth);
|
||||
let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
|
||||
let finalWidth = spanUnit*stepWidth;
|
||||
if(finalWidth>maxWidth || spanUnit===12){
|
||||
targetDiv.style.width=maxWidth+'px';
|
||||
span = 12;
|
||||
}else {
|
||||
targetDiv.style.width = finalWidth+'px';
|
||||
}
|
||||
}
|
||||
//调整表格大小
|
||||
let containerHeight = parseInt(targetDiv.style.height);
|
||||
let containerWidth = parseInt(targetDiv.style.width);
|
||||
|
||||
const chartBox = document.getElementsByClassName('chartBox');
|
||||
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
|
||||
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
|
||||
//表格的高度
|
||||
const chartAssetInfoBox = document.getElementById('chartContainer'+_this.chartIndex);
|
||||
chartAssetInfoBox.style.height = `${containerHeight-_this.titleHeight}px`;
|
||||
|
||||
const modifyParams = {
|
||||
id:_this.data.id,
|
||||
span:span,
|
||||
height:(containerHeight+_this.chartSpaceHeight),
|
||||
prev:parseInt(_this.data.prev),
|
||||
next:parseInt(_this.data.next),
|
||||
}
|
||||
targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
|
||||
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
//更新当前图表数据
|
||||
_this.data.span= span;
|
||||
_this.data.height= containerHeight+_this.chartSpaceHeight;
|
||||
_this.$emit('on-drag-chart', _this.data);
|
||||
}else {
|
||||
if(response.msg){
|
||||
_this.$message.error(response.msg);
|
||||
}else if(response.error){
|
||||
_this.$message.error(response.error);
|
||||
}else {
|
||||
_this.$message.error(response);
|
||||
}
|
||||
}
|
||||
});
|
||||
document.onmousemove=null;
|
||||
document.onmouseup = null;
|
||||
}
|
||||
},
|
||||
startLoading(area){
|
||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
||||
},
|
||||
endLoading(area){
|
||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
||||
},
|
||||
clearData(){
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartAssetInfoDiv'+this.chartIndex);
|
||||
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
|
||||
if(height<this.minHeight){
|
||||
height = this.minHeight;
|
||||
}
|
||||
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
|
||||
const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
|
||||
singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
|
||||
});
|
||||
this.startLoading();
|
||||
this.divFirstShow = true;
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.startLoading();
|
||||
this.firstShow = false;
|
||||
this.$emit('on-refresh-data', this.data.id);
|
||||
},
|
||||
// 编辑图表
|
||||
editChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-edit-chart-block', this.data.id);
|
||||
},
|
||||
// 删除该图表
|
||||
removeChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-remove-chart-block', this.data.id);
|
||||
},
|
||||
clickos() {
|
||||
this.dropdownMenuShow=false;
|
||||
},
|
||||
clearChart(){
|
||||
this.data = {};
|
||||
},
|
||||
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, assetInfos, panelId, filter,area,errorMsg) {
|
||||
if(errorMsg && errorMsg!==''){
|
||||
this.isError = true;
|
||||
this.errorContent = errorMsg;
|
||||
}else {
|
||||
this.isError = false;
|
||||
this.errorContent = '';
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const chartBox = document.getElementById('chartAssetInfoDiv'+this.chartIndex);
|
||||
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
|
||||
if(height<this.minHeight){
|
||||
height = this.minHeight;
|
||||
}
|
||||
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
|
||||
const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
|
||||
singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
|
||||
});
|
||||
this.divFirstShow = true;
|
||||
|
||||
this.firstShow = true; // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId;
|
||||
this.data = chartItem;
|
||||
|
||||
this.assetInfos=assetInfos;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.scrollbar.update();
|
||||
})
|
||||
this.endLoading();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.firstLoad = false;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.scrollbar.update();
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearChart();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './chart-asset-info';
|
||||
</style>
|
||||
<style>
|
||||
.asset-info-content .el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -128,6 +128,13 @@
|
||||
:panel-id="filter.panelId"
|
||||
:chart-index="index"
|
||||
:editChartId="'editChartId' + item.id"></chart-url>
|
||||
|
||||
<chart-asset-info v-if="item.type === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
|
||||
@on-drag-chart="editChartForDrag"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-index="index"
|
||||
:editChartId="'editChartId' + item.id"
|
||||
></chart-asset-info>
|
||||
</div>
|
||||
</draggable>
|
||||
<el-row v-if="dataList.length === 0" class="noData"></el-row>
|
||||
@@ -140,14 +147,17 @@ import lineChartBlock from './line-chart-block';
|
||||
import chartTable from './chart-table';
|
||||
import chartUrl from './chart-url';
|
||||
import chartSingleStat from './chart-single-stat';
|
||||
import chartAssetInfo from './chart-asset-info'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'chartList',
|
||||
props: {
|
||||
isModel: {type: Boolean, default: false}
|
||||
isModel: {type: Boolean, default: false},
|
||||
additionalInfo:{}
|
||||
},
|
||||
components: {
|
||||
chartAssetInfo,
|
||||
lineChartBlock,
|
||||
chartTable,
|
||||
chartUrl,
|
||||
@@ -816,9 +826,13 @@ export default {
|
||||
getChartData(chartInfo, pos, filterType) {
|
||||
const chartItem = chartInfo;
|
||||
const index = pos; // 指标
|
||||
const len = chartItem.elements.length;
|
||||
this.setSize(chartItem.span, index); // 设置该图表宽度
|
||||
if(chartItem.type === 'assetInfo'){
|
||||
this.getAssetInfoChartData(chartItem);
|
||||
return;
|
||||
}
|
||||
// 没有数据的设置提示信息暂无数据-针对每一个图
|
||||
const len = chartItem.elements.length;
|
||||
if (len === 0) {
|
||||
this.$nextTick(() => {
|
||||
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0){
|
||||
@@ -1088,6 +1102,53 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
getAssetInfoChartData(chartInfo){
|
||||
this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
|
||||
setTimeout(()=>{
|
||||
if(this.additionalInfo){
|
||||
let data={
|
||||
Basic:{
|
||||
sn:'assetInfo Test',
|
||||
host:'192.168.40.42',
|
||||
host1:'192.168.40.42',
|
||||
host2:'192.168.40.42',
|
||||
host3:'192.168.40.42',
|
||||
host4:'192.168.40.42',
|
||||
host5:'192.168.40.42',
|
||||
host6:'192.168.40.42',
|
||||
host7:'192.168.40.42',
|
||||
host8:'192.168.40.42',
|
||||
host9:'192.168.40.42',
|
||||
host10:'192.168.40.42',
|
||||
cpuNum:'8',
|
||||
memery:'12GB',
|
||||
memery$_$free:'3GB'
|
||||
},
|
||||
Feature:{
|
||||
CPU:"Intel E500",
|
||||
Memory:"256GB",
|
||||
NetworkInterface:["eth0","eth1"],
|
||||
Disk:[{
|
||||
mount:"/",
|
||||
total:"256GB",
|
||||
free:"128GB",
|
||||
usageRate:"50%"
|
||||
}]
|
||||
}
|
||||
}
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
}
|
||||
},1000)
|
||||
|
||||
// this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
|
||||
// if(response.code == 200){
|
||||
// let data=response.data;
|
||||
// this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
// }else{
|
||||
// this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
|
||||
// }
|
||||
// })
|
||||
},
|
||||
// 设置图表的宽度
|
||||
setSize(size, index) {
|
||||
this.$nextTick(() => {
|
||||
|
||||
@@ -368,17 +368,6 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.searchTime = [];
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
this.seriesItemScreen = this.seriesItem;
|
||||
this.screenModal = true;
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
|
||||
<div class="box-content">
|
||||
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
|
||||
ref="chartList" :is-model="from == 'model'"></chart-list>
|
||||
ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
@@ -421,7 +421,9 @@ const cn = {
|
||||
reloginPasswordTip: "RELOGIN提示",
|
||||
userPwdIntroduce: "请指定用户名和密码提示以便TELNET登录过程可自动运行",
|
||||
reLoginPwdIntroduce: "请指定密码提示以便RELOGIN登录过程可自动运行",
|
||||
exporter: "Exporter"
|
||||
exporter: "Exporter",
|
||||
basicTitle:'基础信息',
|
||||
featureTitle:'特征'
|
||||
},
|
||||
editAssetTab: {
|
||||
title: "新增资产",
|
||||
|
||||
@@ -445,6 +445,8 @@ const en = {
|
||||
clickToCover:'Cover',//'覆盖'
|
||||
sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置'
|
||||
exporter:'Exporter',
|
||||
basicTitle:'Basic info',
|
||||
featureTitle:'Feature'
|
||||
},
|
||||
editAssetTab:{
|
||||
title:'New asset',//'新增资产'
|
||||
|
||||
@@ -1081,7 +1081,6 @@
|
||||
},
|
||||
//点击遮罩层
|
||||
zhezhao_click() {
|
||||
console.log(111)
|
||||
if(this.input_sreach!=''){
|
||||
if(!this.searchMsg.zheze_none){
|
||||
if (this.input_sreach!='') {
|
||||
|
||||
Reference in New Issue
Block a user