temp: 临时提交代码，晚上在家办公用
This commit is contained in:
chenjinsong
@@ -22,7 +22,7 @@
|
||||
</el-popover>
|
||||
<span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
|
||||
</div>
|
||||
<div ref="chartInfo" class="mt-10 chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
|
||||
<div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
|
||||
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
|
||||
<div v-for="(item, index) in detail" :key="index" style="padding: 0 15px;">
|
||||
<div class="chart-sub-title" @click="hideElement(index)">
|
||||
@@ -30,21 +30,116 @@
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
<div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-500': show.indexOf(index) == -1, 'unfold-500': show.indexOf(index) > -1}">
|
||||
<div class="content-item" v-for="(value, key, i) in item.data">
|
||||
<template v-for="(value, key, i) in item.data">
|
||||
|
||||
<!-- endpoint-detail、asset的assetInfo的asset详情-->
|
||||
<div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset') && data.type == 'assetInfo' && assetKey[key]">
|
||||
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
|
||||
<span>{{key}}</span>
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
|
||||
<span>{{assetKey[key]}}</span>
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
|
||||
</div>
|
||||
|
||||
<div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
|
||||
<span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
|
||||
<span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
|
||||
<template v-else-if="key == 'pingRtt'">
|
||||
<div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
|
||||
<span>{{value ? value + 'ms' : ''}}</span>
|
||||
</template>
|
||||
<template v-else-if="Array.isArray(value) && value.length>0">
|
||||
<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>
|
||||
</template>
|
||||
<span v-else-if="assetKey[key]">{{value ? value : " "}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- project的projectInfo的project详情-->
|
||||
<div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
|
||||
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
|
||||
<template v-if="item.type == 'project'">
|
||||
<span>{{projectKey[key]}}</span>
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
|
||||
</template>
|
||||
<template v-if="item.type == 'module'">
|
||||
<span>{{moduleKey[key]}}</span>
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
|
||||
<template v-if="data.type == 'endpointInfo' && key == $t('alert.list.state')">
|
||||
<span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span>
|
||||
<template v-if="key == 'alertStat'">
|
||||
<div class="active-icon dark-red"></div>
|
||||
<span>{{value[0]}}</span>
|
||||
<div class="active-icon red"></div>
|
||||
<span>{{value[1]}}</span>
|
||||
<div class="active-icon orange"></div>
|
||||
<span>{{value[2]}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{value}}</span>
|
||||
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, value, i, ready)">{{value}}</div>
|
||||
<template v-else-if="key == 'endpointStat'">
|
||||
<img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
|
||||
<span>{{value[0]}}</span>
|
||||
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
|
||||
<span>{{value[1]}}</span>
|
||||
</template>
|
||||
<span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : " "}}</span>
|
||||
<span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : " "}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- endpoint-detail的endpointInfo的endpoint详情-->
|
||||
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && projectKey[key]">
|
||||
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
|
||||
<template v-if="item.type == 'project'">
|
||||
<span>{{projectKey[key]}}</span>
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
|
||||
</template>
|
||||
<template v-if="item.type == 'module'">
|
||||
<span>{{moduleKey[key]}}</span>
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
|
||||
<template v-if="key == 'alertStat'">
|
||||
<div class="active-icon dark-red"></div>
|
||||
<span>{{value[0]}}</span>
|
||||
<div class="active-icon red"></div>
|
||||
<span>{{value[1]}}</span>
|
||||
<div class="active-icon orange"></div>
|
||||
<span>{{value[2]}}</span>
|
||||
</template>
|
||||
<template v-else-if="key == 'endpointStat'">
|
||||
<img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
|
||||
<span>{{value[0]}}</span>
|
||||
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
|
||||
<span>{{value[1]}}</span>
|
||||
</template>
|
||||
<span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : " "}}</span>
|
||||
<span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : " "}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
@@ -108,6 +203,51 @@
|
||||
divFirstShow:false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
|
||||
assetKey: {
|
||||
host: this.$t("asset.tableTitle.host"),
|
||||
id: "Id",
|
||||
assetType: this.$t("asset.tableTitle.assetType"),
|
||||
sn: this.$t("asset.tableTitle.device"),
|
||||
state: this.$t("asset.tableTitle.assetState"),
|
||||
pingRtt: this.$t('asset.tableTitle.assetPing'),
|
||||
dataCenter: this.$t("asset.tableTitle.dataCenter"),
|
||||
cabinet: this.$t("asset.tableTitle.cabinet"),
|
||||
model: this.$t("asset.tableTitle.model"),
|
||||
vendor: this.$t("asset.tableTitle.vendor"),
|
||||
purchaseDate: this.$t("asset.tableTitle.procurementDate"),
|
||||
principal: this.$t("asset.tableTitle.principal"),
|
||||
tel: this.$t("asset.tableTitle.principalTel"),
|
||||
pingStatus: this.$t('asset.tableTitle.assetPing'),
|
||||
pingLastReply: this.$t('asset.tableTitle.lastReply'),
|
||||
endpoint: this.$t("asset.tableTitle.modules"),
|
||||
alert: this.$t("asset.tableTitle.alerts")
|
||||
},
|
||||
projectKey: {
|
||||
id: "ID",
|
||||
name: this.$t("overall.name"),
|
||||
remark: this.$t("overall.remark"),
|
||||
alertStat: this.$t("project.chart.alertStat"),
|
||||
},
|
||||
moduleKey: {
|
||||
id: "ID",
|
||||
name: this.$t("overall.name"),
|
||||
type: this.$t("overall.type"),
|
||||
remark: this.$t("overall.remark"),
|
||||
endpointStat: this.$t("project.chart.endpointStat"),
|
||||
alertStat: this.$t("project.chart.alertStat"),
|
||||
},
|
||||
endpointKey: {
|
||||
id: "ID",
|
||||
host: this.$t("project.endpoint.host"),
|
||||
port: this.$t("project.endpoint.port"),
|
||||
path: this.$t("project.endpoint.path"),
|
||||
param: this.$t("project.endpoint.param"),
|
||||
port: this.$t("project.endpoint.port"),
|
||||
state: this.$t("alert.list.state"),
|
||||
project: this.$t("project.project.project"),
|
||||
module: this.$t("project.module.module")
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -133,6 +273,27 @@
|
||||
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;
|
||||
},
|
||||
replaceSplit(key){
|
||||
if(key) {
|
||||
return key.replace(/\$_\$/g,' ')
|
||||
}
|
||||
},
|
||||
hideElement(index) {
|
||||
if (this.show.indexOf(index) > -1) {
|
||||
this.show.splice(this.show.indexOf(index), 1);
|
||||
|
||||
@@ -562,7 +562,7 @@
|
||||
id: -9,
|
||||
panelId: 0,
|
||||
title: this.$t("alert.config.chart.alertNumTrend"),
|
||||
span: 4,
|
||||
span: 8,
|
||||
height: 350,
|
||||
type: "line",
|
||||
prev: -10,
|
||||
@@ -576,6 +576,7 @@
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.dataList.forEach((item,index) => {
|
||||
this.$set(item, "from", params.from);
|
||||
this.setChartSize(item, index);//设置该图表宽度
|
||||
let chartBox = document.getElementById('chart-' + item.id);
|
||||
this.handleElementInViewport(chartBox, 0, item, index);
|
||||
@@ -631,6 +632,7 @@
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.dataList.forEach((item,index) => {
|
||||
this.$set(item, "from", params.from);
|
||||
this.setChartSize(item, index);//设置该图表宽度
|
||||
let chartBox = document.getElementById('chart-' + item.id);
|
||||
this.handleElementInViewport(chartBox, 0, item, index);
|
||||
@@ -671,6 +673,7 @@
|
||||
if (this.dataList.length > 0 ) {
|
||||
this.dataList.forEach((item,index) => {
|
||||
this.setChartSize(item, index);//设置该图表宽度
|
||||
this.$set(item, "from", params.from);
|
||||
if (param.from == "asset") {
|
||||
if (item.type == "assetInfo") {
|
||||
this.$set(item, "draggable", true);
|
||||
@@ -1229,6 +1232,7 @@
|
||||
getEndpointInfoChartData(chartInfo) {
|
||||
let vm = this;
|
||||
let detail = [];
|
||||
this.$refs['editChart'+chartInfo.id][0].showLoad();
|
||||
chartInfo.title = this.$t("project.chart.endpointInfo");
|
||||
detail.push({title: this.$t("project.chart.basicTitle"), data: function() {
|
||||
let data = {};
|
||||
@@ -1293,39 +1297,33 @@
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
|
||||
});
|
||||
}else {
|
||||
let data={
|
||||
Basic:{
|
||||
sn:'assetInfo Test',
|
||||
host:'192.168.40.42',
|
||||
host1:'192.168.40.42',
|
||||
host2:'192.168.40.42',
|
||||
host3:'192.168.40.42',
|
||||
host4:'192.168.40.42',
|
||||
host5:'192.168.40.42',
|
||||
host6:'192.168.40.42',
|
||||
host7:'192.168.40.42',
|
||||
host8:'192.168.40.42',
|
||||
host9:'192.168.40.42',
|
||||
host10:'192.168.40.42',
|
||||
pingStatus:1,
|
||||
pingRtt:80,
|
||||
cpuNum:'8',
|
||||
memery:'12GB',
|
||||
memery$_$free:'3GB'
|
||||
},
|
||||
Feature:{
|
||||
CPU:"Intel E500",
|
||||
Memory:"256GB",
|
||||
NetworkInterface:["eth0","eth1"],
|
||||
Disk:[{
|
||||
mount:"/",
|
||||
total:"256GB",
|
||||
free:"128GB",
|
||||
usageRate:"50%"
|
||||
detail.push({
|
||||
title: vm.$t('asset.createAssetTab.basicTitle'),
|
||||
data: {
|
||||
sn: 'assetInfo Test',
|
||||
host: '192.168.40.42',
|
||||
pingStatus: 1,
|
||||
pingRtt: 80,
|
||||
cpuNum: '8',
|
||||
memery: '12GB',
|
||||
memery$_$free: '3GB'
|
||||
}
|
||||
});
|
||||
detail.push({
|
||||
title: vm.$t('asset.createAssetTab.featureTitle'),
|
||||
data: {
|
||||
CPU: "Intel E500",
|
||||
Memory: "256GB",
|
||||
NetworkInterface: ["eth0", "eth1"],
|
||||
Disk: [{
|
||||
mount: "/",
|
||||
total: "256GB",
|
||||
free: "128GB",
|
||||
usageRate: "50%"
|
||||
}]
|
||||
}
|
||||
}
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
});
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
|
||||
}
|
||||
},
|
||||
getProjectInfoChartData(chartInfo){
|
||||
@@ -1338,13 +1336,15 @@
|
||||
response.data && function() {
|
||||
response.data.basic && detail.push({
|
||||
title: vm.$t('project.chart.basicTitle'),
|
||||
data: response.data.basic
|
||||
data: response.data.basic,
|
||||
type: "project"
|
||||
});
|
||||
response.data.module && function() {
|
||||
response.data.module.forEach(d => {
|
||||
detail.push({
|
||||
title: `${vm.$t('project.module.module')}：${d.name}`,
|
||||
data: d
|
||||
data: d,
|
||||
type: "module"
|
||||
});
|
||||
});
|
||||
}();
|
||||
@@ -1408,16 +1408,17 @@
|
||||
this.$get("alert/rule/stat?id=" + this.additionalInfo.id).then(response => {
|
||||
if (response.code == 200) {
|
||||
response.data && function () {
|
||||
for (let type in response.data) {
|
||||
if (type == "project" && response.data.project.length > 0) {
|
||||
if (response.data.project && response.data.project.length > 0) {
|
||||
detail.push({title: vm.$t("project.project.project"), data: convert(response.data.project)});
|
||||
} else if (type == "module" && response.data.module.length > 0) {
|
||||
}
|
||||
if (response.data.module && response.data.module.length > 0) {
|
||||
detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
|
||||
} else if (type == "asset" && response.data.asset.length > 0) {
|
||||
detail.push({title: vm.$t("asset.asset"), data: convert(response.data.asset)});
|
||||
} else if (type == "endpoint" && response.data.endpoint.length > 0) {
|
||||
}
|
||||
if (response.data.endpoint && response.data.endpoint.length > 0) {
|
||||
detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
|
||||
}
|
||||
if (response.data.asset && response.data.asset.length > 0) {
|
||||
detail.push({title: vm.$t("asset.asset"), data: convert(response.data.asset)});
|
||||
}
|
||||
}();
|
||||
resolve(true);
|
||||
|
||||
@@ -171,6 +171,18 @@
|
||||
.pagination {
|
||||
padding-top: 0;
|
||||
}
|
||||
.success {
|
||||
background-color: #50d050;
|
||||
color: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.danger {
|
||||
background-color: #d64f40;
|
||||
color: white;
|
||||
padding:2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.chart-table, .chart-alert-info {
|
||||
width: 100%;
|
||||
.table-container {
|
||||
|
||||
Reference in New Issue
Block a user