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 chartUrl from './chart-url';
|
||||
import chartSingleStat from './chart-single-stat';
|
||||
import chartAssetInfo from './chart-asset-info';
|
||||
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 chartDataFormat from "./chartDataFormat";
|
||||
import chartAlertList from './chart-alert-list'
|
||||
@@ -153,16 +149,12 @@
|
||||
},
|
||||
components: {
|
||||
chartAlertList,
|
||||
chartAssetInfo,
|
||||
chartDetail,
|
||||
chartProjectInfo,
|
||||
lineChartBlock,
|
||||
chartTable,
|
||||
chartUrl,
|
||||
chartSingleStat,
|
||||
chartAlertRuleInfo,
|
||||
draggable,
|
||||
chartEndpointInfo
|
||||
},
|
||||
data() {
|
||||
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;
|
||||
line-height: 26px;
|
||||
color: #52545c;
|
||||
color: #333;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
|
||||
Reference in New Issue
Block a user