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">
|
||||
<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>
|
||||
<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>{{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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- 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="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>
|
||||
</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);
|
||||
|
||||
Reference in New Issue
Block a user