perf: chart标题色统一、删除无用代码文件
This commit is contained in:
chenjinsong
@@ -1,316 +0,0 @@
|
|||||||
<style lang="scss">
|
|
||||||
@import './chart.scss';
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="nz-chart-resize">
|
|
||||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
|
||||||
<div class="resize-box resize-box-alert-rule" ref="resizeBox">
|
|
||||||
<div class="chart-alert-rule-info" :id="'chartAlertRuleInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
|
||||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
|
||||||
<div class="clearfix chartTitle drag-disabled" :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" 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>
|
|
||||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
|
|
||||||
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
|
|
||||||
<div style="padding: 0 15px">
|
|
||||||
<div v-if="noData" class="chart-no-data">No Data</div>
|
|
||||||
<div v-if="detail.project && detail.project.length > 0" class="basic-container">
|
|
||||||
<div class="basic-title asset-info-content-title" @click.stop="hideElement('project')">
|
|
||||||
<span><i :class="{'el-icon-caret-right': unfold.indexOf('project') == -1,'el-icon-caret-bottom': unfold.indexOf('project') > -1}"></i></span>
|
|
||||||
<span> {{$t('project.project.project')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="basic-content basic-content-asset unfold" ref="project">
|
|
||||||
<div v-for="(item, index) in detail.project" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'project' + index">
|
|
||||||
<span>{{item.name}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('project', item.name, index, ready)">{{item.name}}</div>
|
|
||||||
</div><div class="content-item-value">
|
|
||||||
<span>{{item.nums}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="detail.module && detail.module.length > 0" class="basic-container">
|
|
||||||
<div class="basic-title asset-info-content-title" @click.stop="hideElement('module')">
|
|
||||||
<span><i :class="{'el-icon-caret-right': unfold.indexOf('module') == -1,'el-icon-caret-bottom': unfold.indexOf('module') > -1}"></i></span>
|
|
||||||
<span> {{$t('project.module.module')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="basic-content basic-content-asset" ref="module">
|
|
||||||
<div v-for="(item, index) in detail.module" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'module' + index">
|
|
||||||
<span>{{item.name}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('module', item.name, index, ready)">{{item.name}}</div>
|
|
||||||
</div><div class="content-item-value">
|
|
||||||
<span>{{item.nums}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="detail.asset && detail.asset.length > 0" class="basic-container">
|
|
||||||
<div class="basic-title asset-info-content-title" @click.stop="hideElement('asset')">
|
|
||||||
<span><i :class="{'el-icon-caret-right': unfold.indexOf('asset') == -1,'el-icon-caret-bottom': unfold.indexOf('asset') > -1}"></i></span>
|
|
||||||
<span> {{$t('asset.asset')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="basic-content basic-content-asset" ref="asset">
|
|
||||||
<div v-for="(item, index) in detail.asset" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'asset' + index">
|
|
||||||
<span>{{item.name}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('asset', item.name, index, ready)">{{item.name}}</div>
|
|
||||||
</div><div class="content-item-value">
|
|
||||||
<span>{{item.nums}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="detail.endpoint && detail.endpoint.length > 0" class="basic-container">
|
|
||||||
<div class="basic-title asset-info-content-title" @click.stop="hideElement('endpoint')">
|
|
||||||
<span><i :class="{'el-icon-caret-right': unfold.indexOf('endpoint') == -1,'el-icon-caret-bottom': unfold.indexOf('endpoint') > -1}"></i></span>
|
|
||||||
<span> {{$t('project.endpoint.endpoint')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="basic-content basic-content-asset" ref="endpoint">
|
|
||||||
<div v-for="(item, index) in detail.endpoint" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'endpoint' + index">
|
|
||||||
<span>{{item.name}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('endpoint', item.name, index, ready)">{{item.name}}</div>
|
|
||||||
</div><div class="content-item-value">
|
|
||||||
<span>{{item.nums}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--<div v-for="(item, index) in detail" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'basicKey' + index">
|
|
||||||
<span>{{item.label}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
|
|
||||||
</div><div class="content-item-value item-tip" :id="'basicValue' + index">
|
|
||||||
<span>{{item.value ? item.value : " "}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
|
|
||||||
</div>
|
|
||||||
</div>-->
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--<span class="vue-resizable-handle" @mousedown="startResize"></span>-->
|
|
||||||
</div>
|
|
||||||
</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: 'chartAlertRuleInfo',
|
|
||||||
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 {
|
|
||||||
ready: false,
|
|
||||||
data: {}, // 该图表信息,chartItem
|
|
||||||
unit:{},
|
|
||||||
detail: {},
|
|
||||||
isError:false,
|
|
||||||
errorContent:'',
|
|
||||||
loading:Object,
|
|
||||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
|
||||||
firstLoad: false, // 是否第一次加载
|
|
||||||
screenModal: false,
|
|
||||||
// 查询数据使用
|
|
||||||
filter: {
|
|
||||||
start_time: '',
|
|
||||||
end_time: '',
|
|
||||||
from: ''
|
|
||||||
},
|
|
||||||
unfold: ["project"], //展开的列表 project、module、asset、endpoint
|
|
||||||
firstShow: false, // 默认不显示操作按钮,
|
|
||||||
caretShow:false,
|
|
||||||
dragTitleShow:false,
|
|
||||||
dropdownMenuShow:false,
|
|
||||||
divFirstShow:false,
|
|
||||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
|
||||||
oldSearchTime: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
itemTip() {
|
|
||||||
return function(type, content, index, ready) {
|
|
||||||
let className = "";
|
|
||||||
if (ready) {
|
|
||||||
let cellDom = document.querySelector(`#${type}${index}`);
|
|
||||||
let spanDom = document.createElement("span");
|
|
||||||
spanDom.style.display = "inline-block";
|
|
||||||
spanDom.innerText = content;
|
|
||||||
cellDom.appendChild(spanDom);
|
|
||||||
if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
|
|
||||||
className = "item-tip-show";
|
|
||||||
}
|
|
||||||
cellDom.removeChild(spanDom);
|
|
||||||
}
|
|
||||||
return className;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
noData() {
|
|
||||||
let vm = this;
|
|
||||||
return !vm.detail || function() {
|
|
||||||
return Object.values(vm.detail).filter(v => {
|
|
||||||
return v && v.length > 0;
|
|
||||||
}).length == 0;
|
|
||||||
}();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
startResize(e) {
|
|
||||||
let vm = this;
|
|
||||||
this.$chartResizeTool.start(vm, this.data, e);
|
|
||||||
},
|
|
||||||
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){
|
|
||||||
let dom = this.$refs[type];
|
|
||||||
if (this.unfold.indexOf(type) > -1) {
|
|
||||||
this.unfold.splice(this.unfold.indexOf(type), 1);
|
|
||||||
} else {
|
|
||||||
this.unfold.push(type);
|
|
||||||
}
|
|
||||||
if (dom.classList.contains("unfold")) {
|
|
||||||
dom.classList.remove("unfold");
|
|
||||||
dom.classList.add("fold");
|
|
||||||
} else if (dom.classList.contains("fold")) {
|
|
||||||
dom.classList.remove("fold");
|
|
||||||
dom.classList.add("unfold");
|
|
||||||
} else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
|
|
||||||
dom.classList.add("unfold");
|
|
||||||
}
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.$refs.scrollbar && this.$refs.scrollbar.update();
|
|
||||||
},400);
|
|
||||||
},
|
|
||||||
replaceSplit(key){
|
|
||||||
if(key){
|
|
||||||
return key.replace(/\$_\$/g,' ')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
startLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
|
||||||
},
|
|
||||||
endLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
|
||||||
},
|
|
||||||
resize() {
|
|
||||||
let container = document.querySelector('#chartAlertRuleInfoDiv' + this.chartIndex + " .chart-info-container");
|
|
||||||
container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight}px)`;
|
|
||||||
},
|
|
||||||
showLoad(chartItem) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.resize();
|
|
||||||
});
|
|
||||||
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, data) {
|
|
||||||
this.resize(chartItem);
|
|
||||||
this.divFirstShow = true;
|
|
||||||
|
|
||||||
this.firstShow = true; // 展示操作按键
|
|
||||||
|
|
||||||
this.data = chartItem;
|
|
||||||
this.detail = data;
|
|
||||||
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
});
|
|
||||||
this.endLoading();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.firstLoad = false;
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.ready = true;
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.clearChart();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,372 +0,0 @@
|
|||||||
<style lang="scss">
|
|
||||||
@import './chart.scss';
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="nz-chart-resize">
|
|
||||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
|
||||||
<div class="resize-box resize-box-asset" ref="resizeBox">
|
|
||||||
<div class="chart-asset-info" :id="'chartAssetInfoDiv'+chartIndex" @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" 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">{{$t('asset.createAssetTab.assetInfo')}}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-10 chart-info-container" v-cloak>
|
|
||||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
|
|
||||||
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
|
|
||||||
<div style="padding: 0 15px">
|
|
||||||
<div class="basic-container">
|
|
||||||
<div class="basic-title asset-info-content-title" @click="hideElement('basic')">
|
|
||||||
<span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
|
|
||||||
<span>{{$t('asset.createAssetTab.basicTitle')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="basic-content basic-content-asset" :class="{'fold':hideBasic, 'unfold':!hideBasic}">
|
|
||||||
<template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
|
|
||||||
<div v-for="(item,index) in basicKey" :key="index" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'basicKey' + index">
|
|
||||||
<span>{{item.label}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
|
|
||||||
</div><div
|
|
||||||
class="content-item-value" v-if="item.prop == 'pingStatus'">
|
|
||||||
<div class="active-icon" :class="{'green':assetInfos.Basic[item.prop] == 1,'red':assetInfos.Basic[item.prop] != 1}"></div>
|
|
||||||
<span>{{assetInfos.Basic.pingRtt ? assetInfos.Basic.pingRtt + 'ms' : ' '}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="content-item-value" v-else-if="item.prop == 'alert'">
|
|
||||||
<span class="as-button" :class="{'success': assetInfos.Basic[item.prop] <= 0, 'danger': assetInfos.Basic[item.prop] > 0}">{{assetInfos.Basic[item.prop] + ' ' + $t('overall.active')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="content-item-value" v-else-if="item.prop == 'state'">
|
|
||||||
{{assetInfos.Basic[item.prop] == 1?$t('asset.createAssetTab.inStock'):$t('asset.createAssetTab.outStock')}}
|
|
||||||
</div>
|
|
||||||
<div class="content-item-value item-tip" v-else :id="'basicValue' + index">
|
|
||||||
<span>{{assetInfos.Basic[item.prop] ? assetInfos.Basic[item.prop] : " "}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', assetInfos.Basic[item.prop], index, ready)">{{assetInfos.Basic[item.prop]}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="feature-container">
|
|
||||||
<div class="feature-title asset-info-content-title" @click="hideElement('feature')" >
|
|
||||||
<span><i :class="{'el-icon-caret-right':hideFeature,'el-icon-caret-bottom':!hideFeature}"></i></span>
|
|
||||||
<span>{{$t('asset.createAssetTab.featureTitle')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="feature-content feature-content-asset" :class="{'fold':hideFeature, 'unfold':!hideFeature}">
|
|
||||||
<div v-for="(value,key,index) in assetInfos.Feature" class="content-item item-tip">
|
|
||||||
<div class="content-item-key item-tip" :id="'featureKey' + index">
|
|
||||||
<span>{{key}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('featureKey', key, index, ready)">{{key}}</div>
|
|
||||||
</div><div
|
|
||||||
class="content-item-value item-tip" :id="'featureValue' + index" v-if="typeof value == 'string'">
|
|
||||||
<span>{{value}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip('featureValue', key, index, ready)">{{value}}</div>
|
|
||||||
</div><div
|
|
||||||
v-if="Array.isArray(value) && value.length>0" class="content-item-value content-item-value-muti">
|
|
||||||
<div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(item,index) in value" :key="index">{{item}}</div>
|
|
||||||
<el-table
|
|
||||||
v-else
|
|
||||||
class="nz-table asset-info-table"
|
|
||||||
:data="value"
|
|
||||||
tooltip-effect="light"
|
|
||||||
height="100%"
|
|
||||||
ref="dataTable"
|
|
||||||
v-scrollBar:el-table="'small'"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
:resizable="false"
|
|
||||||
v-for="(item, index) in setLabels(value)"
|
|
||||||
v-if="item.show"
|
|
||||||
:key="`col-${index}`"
|
|
||||||
:label="item.label"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope" :column="item">
|
|
||||||
<template >
|
|
||||||
<span v-html="scope.row[item.prop]"></span>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="vue-resizable-handle" @mousedown="startResize"></span>
|
|
||||||
</div>
|
|
||||||
</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 {
|
|
||||||
ready: false,
|
|
||||||
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,
|
|
||||||
divFirstShow:false,
|
|
||||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
|
||||||
oldSearchTime: [],
|
|
||||||
basicKey:[
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.host"),
|
|
||||||
prop: 'host',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.id"),
|
|
||||||
prop: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.assetType"),
|
|
||||||
prop: 'assetType',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.device"),
|
|
||||||
prop: 'sn',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.assetState"),
|
|
||||||
prop: 'state',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.dataCenter"),
|
|
||||||
prop: 'dataCenter',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.cabinet"),
|
|
||||||
prop: 'cabinet',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.model"),
|
|
||||||
prop: 'model',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.vendor"),
|
|
||||||
prop: 'vendor',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.procurementDate"),
|
|
||||||
prop: 'purchaseDate',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.principal"),
|
|
||||||
prop: 'principal',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.principalTel"),
|
|
||||||
prop: 'tel',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label:this.$t('asset.tableTitle.assetPing'),
|
|
||||||
prop:'pingStatus',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label:this.$t('asset.tableTitle.lastReply'),
|
|
||||||
prop:'pingLastReply',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.modules"),
|
|
||||||
prop: 'endpoint',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("asset.tableTitle.alerts"),
|
|
||||||
prop: 'alert',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
itemTip() {
|
|
||||||
return function(type, content, index, ready) {
|
|
||||||
let className = "";
|
|
||||||
if (ready) {
|
|
||||||
let cellDom = document.querySelector(`#${type}${index}`);
|
|
||||||
let spanDom = document.createElement("span");
|
|
||||||
spanDom.style.display = "inline-block";
|
|
||||||
spanDom.innerText = content;
|
|
||||||
cellDom.appendChild(spanDom);
|
|
||||||
if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
|
|
||||||
className = "item-tip-show";
|
|
||||||
}
|
|
||||||
cellDom.removeChild(spanDom);
|
|
||||||
}
|
|
||||||
return className;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
startResize(e) {
|
|
||||||
let vm = this;
|
|
||||||
this.$chartResizeTool.start(vm, this.data, e);
|
|
||||||
},
|
|
||||||
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
|
|
||||||
}
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
},400);
|
|
||||||
},
|
|
||||||
replaceSplit(key){
|
|
||||||
if(key){
|
|
||||||
return key.replace(/\$_\$/g,' ')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
startLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
|
||||||
},
|
|
||||||
endLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
|
||||||
},
|
|
||||||
resize() {
|
|
||||||
let container = document.querySelector('#chartAssetInfoDiv' + this.chartIndex + " .chart-info-container");
|
|
||||||
container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight}px)`;
|
|
||||||
},
|
|
||||||
showLoad(chartItem) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.resize();
|
|
||||||
});
|
|
||||||
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) {
|
|
||||||
this.resize(chartItem);
|
|
||||||
if(errorMsg && errorMsg!==''){
|
|
||||||
this.isError = true;
|
|
||||||
this.errorContent = errorMsg;
|
|
||||||
}else {
|
|
||||||
this.isError = false;
|
|
||||||
this.errorContent = '';
|
|
||||||
}
|
|
||||||
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();
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.ready = true;
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.clearChart();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,283 +0,0 @@
|
|||||||
<style lang="scss">
|
|
||||||
@import './chart.scss';
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="nz-chart-resize">
|
|
||||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
|
||||||
<div class="resize-box resize-box-endpoint" ref="resizeBox">
|
|
||||||
<div class="chart-asset-info" :id="'chartEndpointInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
|
||||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
|
||||||
<div class="clearfix chartTitle drag-disabled" :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" 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>
|
|
||||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
|
|
||||||
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
|
|
||||||
<div style="padding: 0 15px">
|
|
||||||
<div v-if="noData" class="chart-no-data">No Data</div>
|
|
||||||
<div v-if="!noData" class="basic-container">
|
|
||||||
<div class="basic-title asset-info-content-title" @click.stop="hideElement('basic')">
|
|
||||||
<span><i :class="{'el-icon-caret-right': unfold.indexOf('basic') == -1,'el-icon-caret-bottom': unfold.indexOf('basic') > -1}"></i></span>
|
|
||||||
<span> {{$t('project.endpoint.endpoint')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="basic-content basic-content-asset unfold" ref="basic">
|
|
||||||
<div v-for="(item, index) in detail" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'basicKey' + index">
|
|
||||||
<span>{{item.label}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
|
|
||||||
</div><div v-if="item.label != $t('alert.list.state')" class="content-item-value item-tip" :id="'basicValue' + index">
|
|
||||||
<span>{{item.value ? item.value : ' '}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
|
|
||||||
</div><div v-else class="content-item-value item-tip" :id="'basicValue' + index">
|
|
||||||
<span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="!noData" class="feature-container">
|
|
||||||
<div class="feature-title asset-info-content-title" @click="hideElement('feature')" >
|
|
||||||
<span><i :class="{'el-icon-caret-right': unfold.indexOf('feature') == -1,'el-icon-caret-bottom': unfold.indexOf('feature') > -1}"></i></span>
|
|
||||||
<span>{{$t('alert.alert')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="feature-content feature-content-asset" ref="feature">
|
|
||||||
<div v-for="(item, index) in alerts" class="content-item hover-bg">
|
|
||||||
<div class="content-item-key item-tip" :id="'alert' + index">
|
|
||||||
<span>{{item.label}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('alert', item.label, index, ready)">{{item.label}}</div>
|
|
||||||
</div><div class="content-item-value">
|
|
||||||
<span>{{item.value}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--preview -->
|
|
||||||
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
|
|
||||||
</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';
|
|
||||||
import chartPreview from './chartPreview';
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'chartEndpointInfo',
|
|
||||||
components: {
|
|
||||||
'loading': loading,
|
|
||||||
'time-picker': timePicker,
|
|
||||||
'chart-preview': chartPreview,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// 看板id
|
|
||||||
panelId: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
editChartId: {
|
|
||||||
type: String,
|
|
||||||
default: 'editChartId',
|
|
||||||
},
|
|
||||||
chartIndex:{
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
ready: false,
|
|
||||||
data: {}, // 该图表信息,chartItem
|
|
||||||
unit:{},
|
|
||||||
detail: [],
|
|
||||||
state: [],
|
|
||||||
alerts: [],
|
|
||||||
unfold: ["basic"],
|
|
||||||
isError:false,
|
|
||||||
errorContent:'',
|
|
||||||
assetInfos:{},
|
|
||||||
showState: false,
|
|
||||||
|
|
||||||
//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,
|
|
||||||
divFirstShow:false,
|
|
||||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
|
||||||
oldSearchTime: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
itemTip() {
|
|
||||||
return function(type, content, index, ready) {
|
|
||||||
let className = "";
|
|
||||||
if (ready) {
|
|
||||||
let cellDom = document.querySelector(`#${type}${index}`);
|
|
||||||
let spanDom = document.createElement("span");
|
|
||||||
spanDom.style.display = "inline-block";
|
|
||||||
spanDom.innerText = content;
|
|
||||||
cellDom.appendChild(spanDom);
|
|
||||||
if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
|
|
||||||
className = "item-tip-show";
|
|
||||||
}
|
|
||||||
cellDom.removeChild(spanDom);
|
|
||||||
}
|
|
||||||
return className;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
noData() {
|
|
||||||
return !this.detail || this.detail.length == 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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){
|
|
||||||
let dom = this.$refs[type];
|
|
||||||
if (this.unfold.indexOf(type) > -1) {
|
|
||||||
this.unfold.splice(this.unfold.indexOf(type), 1);
|
|
||||||
} else {
|
|
||||||
this.unfold.push(type);
|
|
||||||
}
|
|
||||||
if (dom.classList.contains("unfold")) {
|
|
||||||
dom.classList.remove("unfold");
|
|
||||||
dom.classList.add("fold");
|
|
||||||
} else if (dom.classList.contains("fold")) {
|
|
||||||
dom.classList.remove("fold");
|
|
||||||
dom.classList.add("unfold");
|
|
||||||
} else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
|
|
||||||
dom.classList.add("unfold");
|
|
||||||
}
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.$refs.scrollbar && this.$refs.scrollbar.update();
|
|
||||||
},400);
|
|
||||||
},
|
|
||||||
preview() {
|
|
||||||
this.$refs.chartsPreview.show(this.data);
|
|
||||||
},
|
|
||||||
replaceSplit(key){
|
|
||||||
if(key){
|
|
||||||
return key.replace(/\$_\$/g,' ')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
startLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
|
||||||
},
|
|
||||||
endLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
|
||||||
},
|
|
||||||
resize() {
|
|
||||||
let container = document.querySelector('#chartEndpointInfoDiv' + this.chartIndex + " .chart-info-container");
|
|
||||||
container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight}px)`;
|
|
||||||
},
|
|
||||||
showLoad(chartItem) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.resize();
|
|
||||||
});
|
|
||||||
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, endpointDetail, alerts) {
|
|
||||||
this.resize(chartItem);
|
|
||||||
this.divFirstShow = true;
|
|
||||||
|
|
||||||
this.firstShow = true; // 展示操作按键
|
|
||||||
|
|
||||||
this.data = chartItem;
|
|
||||||
this.detail = endpointDetail;
|
|
||||||
this.alerts = alerts;
|
|
||||||
this.detail.push({label: this.$t("alert.list.state"), value: ""});
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
});
|
|
||||||
this.endLoading();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.firstLoad = false;
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.ready = true;
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.clearChart();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -135,11 +135,7 @@
|
|||||||
import chartTable from './chart-table';
|
import chartTable from './chart-table';
|
||||||
import chartUrl from './chart-url';
|
import chartUrl from './chart-url';
|
||||||
import chartSingleStat from './chart-single-stat';
|
import chartSingleStat from './chart-single-stat';
|
||||||
import chartAssetInfo from './chart-asset-info';
|
|
||||||
import chartDetail from './chart-detail';
|
import chartDetail from './chart-detail';
|
||||||
import chartEndpointInfo from './chart-endpoint-info'
|
|
||||||
import chartAlertRuleInfo from './chart-alert-rule-info'
|
|
||||||
import chartProjectInfo from './chart-project-info'
|
|
||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
import chartDataFormat from "./chartDataFormat";
|
import chartDataFormat from "./chartDataFormat";
|
||||||
import chartAlertList from './chart-alert-list'
|
import chartAlertList from './chart-alert-list'
|
||||||
@@ -153,16 +149,12 @@
|
|||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
chartAlertList,
|
chartAlertList,
|
||||||
chartAssetInfo,
|
|
||||||
chartDetail,
|
chartDetail,
|
||||||
chartProjectInfo,
|
|
||||||
lineChartBlock,
|
lineChartBlock,
|
||||||
chartTable,
|
chartTable,
|
||||||
chartUrl,
|
chartUrl,
|
||||||
chartSingleStat,
|
chartSingleStat,
|
||||||
chartAlertRuleInfo,
|
|
||||||
draggable,
|
draggable,
|
||||||
chartEndpointInfo
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,353 +0,0 @@
|
|||||||
<style lang="scss">
|
|
||||||
@import './chart.scss';
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="nz-chart-resize">
|
|
||||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
|
||||||
<div class="resize-box resize-box-project" ref="resizeBox">
|
|
||||||
<div class="chart-project-info" :id="'chartProjectInfoDiv'+chartIndex" @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" 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">{{$t('project.chart.projectInfo')}}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-10 chart-info-container" v-cloak>
|
|
||||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
|
|
||||||
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
|
|
||||||
<div style="padding: 0 15px">
|
|
||||||
<div class="basic-container">
|
|
||||||
<div class="basic-title asset-info-content-title" @click="hideElement('basic')">
|
|
||||||
<span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
|
|
||||||
<span>{{$t('project.chart.basicTitle')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="basic-content basic-content-project init-no-animation" ref="basic">
|
|
||||||
<template v-if="projectInfos.basic && Object.keys(projectInfos.basic).length>0">
|
|
||||||
<div v-for="(item,index) in basicKey" :key="index" class="content-item">
|
|
||||||
<div class="content-item-key item-tip" :id="'basicKey' + index">
|
|
||||||
<span>{{item.label}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-item-value" v-if="item.prop == 'alertStat'">
|
|
||||||
<div class="active-icon dark-red"></div>
|
|
||||||
<span>{{projectInfos.basic.alertStat[0]}}</span>
|
|
||||||
<div class="active-icon red"></div>
|
|
||||||
<span>{{projectInfos.basic.alertStat[1]}}</span>
|
|
||||||
<div class="active-icon orange"></div>
|
|
||||||
<span>{{projectInfos.basic.alertStat[2]}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="content-item-value item-tip" v-else :id="'basicValue' + index">
|
|
||||||
<span>{{projectInfos.basic[item.prop] ? projectInfos.basic[item.prop] : " "}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', projectInfos.basic[item.prop], index, ready)">{{projectInfos.basic[item.prop]}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="feature-container" v-for="(module, mi) in projectInfos.module" :key="mi">
|
|
||||||
<div class="feature-title asset-info-content-title" @click.stop="hideElement(module.id)" >
|
|
||||||
<span><i :class="{'el-icon-caret-right': showModuleIds.indexOf(module.id) == -1,'el-icon-caret-bottom': showModuleIds.indexOf(module.id) > -1}"></i></span>
|
|
||||||
<span>{{$t('project.module.module')}}：{{module.name}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="feature-content feature-content-project" :ref="'module' + module.id">
|
|
||||||
<div v-for="(item,index) in moduleKey" :key="index" class="content-item">
|
|
||||||
<div class="content-item-key item-tip" :id="'featureKey' + module.id + '-' + index">
|
|
||||||
<span>{{item.label}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('featureKey' + module.id + '-', item.label, index, ready)">{{item.label}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-item-value" v-if="item.prop == 'endpointStat'">
|
|
||||||
<img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
|
|
||||||
<span>{{module.endpointStat[0]}}</span>
|
|
||||||
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
|
|
||||||
<span>{{module.endpointStat[1]}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="content-item-value" v-else-if="item.prop == 'alertStat'">
|
|
||||||
<div class="active-icon dark-red"></div>
|
|
||||||
<span>{{module.alertStat[0]}}</span>
|
|
||||||
<div class="active-icon red"></div>
|
|
||||||
<span>{{module.alertStat[1]}}</span>
|
|
||||||
<div class="active-icon orange"></div>
|
|
||||||
<span>{{module.alertStat[2]}}</span>
|
|
||||||
</div>
|
|
||||||
<div v-else class="content-item-value item-tip" :id="'featureValue' + module.id + '-' + index">
|
|
||||||
<span>{{module[item.prop] ? module[item.prop] : " "}}</span>
|
|
||||||
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip('featureValue' + module.id + '-', module[item.prop], index, ready)">{{module[item.prop]}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="vue-resizable-handle" @mousedown="startResize"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import loading from "../common/loading";
|
|
||||||
import timePicker from '../common/timePicker'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'chartProjectInfo',
|
|
||||||
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 {
|
|
||||||
ready: false,
|
|
||||||
data: {}, // 该图表信息,chartItem
|
|
||||||
unit:{},
|
|
||||||
isError:false,
|
|
||||||
errorContent:'',
|
|
||||||
projectInfos:{},
|
|
||||||
loading:Object,
|
|
||||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
|
||||||
firstLoad: false, // 是否第一次加载
|
|
||||||
screenModal: false,
|
|
||||||
// 查询数据使用
|
|
||||||
filter: {
|
|
||||||
start_time: '',
|
|
||||||
end_time: '',
|
|
||||||
},
|
|
||||||
hideBasic:false,
|
|
||||||
showModuleIds: [],
|
|
||||||
firstShow: false, // 默认不显示操作按钮,
|
|
||||||
caretShow:false,
|
|
||||||
dragTitleShow:false,
|
|
||||||
dropdownMenuShow:false,
|
|
||||||
divFirstShow:false,
|
|
||||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
|
||||||
oldSearchTime: [],
|
|
||||||
basicKey:[
|
|
||||||
{
|
|
||||||
label: "ID",
|
|
||||||
prop: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("overall.name"),
|
|
||||||
prop: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("overall.remark"),
|
|
||||||
prop: 'remark',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("project.chart.alertStat"),
|
|
||||||
prop: 'alertStat',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
moduleKey: [
|
|
||||||
{
|
|
||||||
label: "ID",
|
|
||||||
prop: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("overall.name"),
|
|
||||||
prop: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("overall.type"),
|
|
||||||
prop: 'type',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("overall.remark"),
|
|
||||||
prop: 'remark',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("project.chart.endpointStat"),
|
|
||||||
prop: 'endpointStat',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("project.chart.alertStat"),
|
|
||||||
prop: 'alertStat',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
itemTip() {
|
|
||||||
return function(type, content, index, ready) {
|
|
||||||
let className = "";
|
|
||||||
if (ready) {
|
|
||||||
let cellDom = document.querySelector(`#${type}${index}`);
|
|
||||||
let spanDom = document.createElement("span");
|
|
||||||
spanDom.style.display = "inline-block";
|
|
||||||
spanDom.innerText = content;
|
|
||||||
cellDom.appendChild(spanDom);
|
|
||||||
if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
|
|
||||||
className = "item-tip-show";
|
|
||||||
}
|
|
||||||
cellDom.removeChild(spanDom);
|
|
||||||
}
|
|
||||||
return className;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
startResize(e) {
|
|
||||||
let vm = this;
|
|
||||||
this.$chartResizeTool.start(vm, this.data, e);
|
|
||||||
},
|
|
||||||
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'){
|
|
||||||
if (this.hideBasic) {
|
|
||||||
this.$refs.basic.classList.add("unfold");
|
|
||||||
this.$refs.basic.classList.remove("fold");
|
|
||||||
} else {
|
|
||||||
this.$refs.basic.classList.add("fold");
|
|
||||||
this.$refs.basic.classList.remove("unfold");
|
|
||||||
}
|
|
||||||
this.hideBasic = !this.hideBasic;
|
|
||||||
}else{
|
|
||||||
let dom = this.$refs['module' + type][0];
|
|
||||||
if (this.showModuleIds.indexOf(type) > -1) {
|
|
||||||
this.showModuleIds.splice(this.showModuleIds.indexOf(type), 1);
|
|
||||||
} else {
|
|
||||||
this.showModuleIds.push(type);
|
|
||||||
}
|
|
||||||
if (dom.classList.contains("unfold")) {
|
|
||||||
dom.classList.remove("unfold");
|
|
||||||
dom.classList.add("fold");
|
|
||||||
} else if (dom.classList.contains("fold")) {
|
|
||||||
dom.classList.remove("fold");
|
|
||||||
dom.classList.add("unfold");
|
|
||||||
} else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
|
|
||||||
dom.classList.add("unfold");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
},400);
|
|
||||||
},
|
|
||||||
replaceSplit(key){
|
|
||||||
if(key){
|
|
||||||
return key.replace(/\$_\$/g,' ')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
startLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
|
||||||
},
|
|
||||||
endLoading(area){
|
|
||||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
|
||||||
},
|
|
||||||
resize() {
|
|
||||||
let container = document.querySelector('#chartProjectInfoDiv' + this.chartIndex + " .chart-info-container");
|
|
||||||
container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight}px)`;
|
|
||||||
},
|
|
||||||
showLoad(chartItem) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.resize();
|
|
||||||
});
|
|
||||||
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, projectInfos, panelId, filter,area,errorMsg) {
|
|
||||||
this.resize(chartItem);
|
|
||||||
if(errorMsg && errorMsg!==''){
|
|
||||||
this.isError = true;
|
|
||||||
this.errorContent = errorMsg;
|
|
||||||
}else {
|
|
||||||
this.isError = false;
|
|
||||||
this.errorContent = '';
|
|
||||||
}
|
|
||||||
this.divFirstShow = true;
|
|
||||||
|
|
||||||
this.firstShow = true; // 展示操作按键
|
|
||||||
|
|
||||||
this.panelIdInner = panelId;
|
|
||||||
this.data = chartItem;
|
|
||||||
|
|
||||||
this.projectInfos=projectInfos;
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
})
|
|
||||||
this.endLoading();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.firstLoad = false;
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.$refs.scrollbar.update();
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.ready = true;
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.clearChart();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -446,7 +446,6 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
color: #52545c;
|
color: #52545c;
|
||||||
color: #333;
|
|
||||||
display:flex;
|
display:flex;
|
||||||
justify-content:center;
|
justify-content:center;
|
||||||
align-items:center;
|
align-items:center;
|
||||||
|
|||||||
Reference in New Issue
Block a user