monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit c1aef9777a31a8095523e6c23bf6f4f376f83962 1 parent bd065b7a

基本信息二得名称后添加查看拓扑图标及信息图标一直展示

Inline Side-by-side
Showing 3 changed files with 94 additions and 20 deletions
... ... @@ -63,6 +63,14 @@ export const monitorTreeShape = {
// value: '18'
// },
{
type: 'el-switch',
label: '分类型',
name: 'isType',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '字体颜色',
name: 'titleColor',
... ...
... ... @@ -12,15 +12,35 @@
</div>
<!-- <dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>-->
<div class="basic-ul-right" :style="borderStyleF" >
<div @mouseenter="mouseFun" @mouseleave="leaveFun" v-if="informationData[0].isDisplay=='1'">
<el-row class="backColor">
<el-col class="padding-10" :style="[borderStlye,tableTitleStyle]" aria-colspan="2">
<span class="link-type" :style="tableTitleStyle" @click="goTrend(informationData[0])">{{informationData[0].name}}</span>
<!-- <a class="link-type" :style="tableTitleStyle" :href="jkAddress.jkUrl" target="_blank"></a>-->
<i class="el-icon-info" v-if="visible" @click="resTopo"/>
</el-col>
</el-row>
</div>
<div v-if="informationDataAll[0].isDisplay=='1'" >
<el-row class="backColor" :style="bodyTitleStyle">
<el-col class="padding-10" :style="[tableTitleStyle]" aria-colspan="2">
<span class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
<el-tooltip v-model="visible" :manual="true" placement="right-start">
<template #content>
<div class="basic-tbody-all basic-border-nowrap" :style="wrapStyle">
<el-row class="basic-item" v-if="item.isDisplay=='1' && index>0" v-for="(item,index) in informationDataAll" :key="index">
<el-col :style="[lineHeightStyle]" v-if="index>0" class="basic-border basic-item-title basic-flex" :span="10">
{{ item.name }}
</el-col>
<el-col :style="[lineHeightStyle]" v-if="index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
</el-col>
</el-row>
</div>
</template>
<i class="el-icon-info"@mouseenter="visible = true"/>
</el-tooltip>
<el-tooltip
class="box-item"
effect="dark"
content="查看拓扑图"
placement="top"
>
<i class="el-icon-orange" @click="resTopo(item)" ></i>
</el-tooltip>
</el-col>
</el-row>
</div>
<div class="basic-tbody basic-border-wrap" :style="wrapStyle">
<el-row class="basic-item" :style="itemStyle" v-if="item.isDisplay=='1' && index>0" v-for="(item,index) in informationData" :key="index">
<!-- <el-col :style="headStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">-->
... ... @@ -32,7 +52,7 @@
</el-col>
<!-- && attrKey.attrKeyVal.includes(item.code)-->
</el-row>
<el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="informationData.length%2==0">
<el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="optionsSetUp.isTowColumn && informationData.length%2==0">
<el-col class="basic-border basic-item-title basic-flex" :span="10">
</el-col>
<el-col class="basic-border basic-flex basic-item-content" :span="14"><span></span>
... ... @@ -173,6 +193,18 @@
"border-top-color": headStyle.borderColor,
};
},
//信息表格内容标题样式
bodyTitleStyle(){
const headStyle = this.optionsSetUp;
return{
"border-bottom-style": headStyle.isLine ? "solid" : "none",
"border-bottom-width": headStyle.borderWidth + "px",
"border-bottom-color":headStyle.borderColor,
"border-right-style": headStyle.isLine ? "solid" : "none",
"border-right-width": headStyle.borderWidth + "px",
"border-right-color":headStyle.borderColor,
}
},
//表格标题样式
tableTitleStyle(){
return{
... ... @@ -274,7 +306,7 @@
methods: {
//右侧最后一个元素边框样式
borderStyleRight(index){
let border='none';
/* let border='none';
if(index+1==this.informationData.length){
border='none'
}else{
... ... @@ -282,7 +314,7 @@
}
return{
'border-right':border
}
}*/
},
handlerData() {
const resData = this.optionsData;
... ... @@ -405,9 +437,18 @@
this.visible = false;
},
//
resTopo() {
this.topoSrc = this.topoAddress.topoUrl;
this.topoVisible = true;
resTopo(item) {
// this.topoSrc = this.topoAddress.topoUrl;
// this.topoVisible = true;
let param = {
type:'topology',
data:{
resId: item.resId,
resType: item.resType
}
}
window.parent.postMessage(param, '*')
},
//弹框关闭确定
hideDialog() {
... ... @@ -481,8 +522,15 @@
white-space: nowrap;
color: #0d82e9;
cursor: pointer;
margin-right:5px;
}
.box-item{
margin-left:5px;
cursor: pointer;
}
.el-icon-info{
cursor: pointer;
}
.title-name {
color: rgb(30, 159, 255);
font-size: 16px;
... ... @@ -509,7 +557,7 @@
}
.basic-ul-all {
.basic-tbody-all {
.basic-item:nth-child(even) {
background-color: #262323 !important;
}
... ... @@ -533,7 +581,11 @@
//flex-flow: column;
flex-wrap: wrap;
}
.basic-border-nowrap{
display: flex;
flex-flow: column;
min-width: 200px;
}
.basic-img {
width: 16px;
... ... @@ -552,7 +604,7 @@
display: inline-block;
}
}*/
.basic-ul-all {
.basic-tbody-all {
.basic-item-content {
text-align: center;
}
... ...
<template>
<div :style="styleObj" class="treeContainer">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType">
<el-tab-pane label="业务" name="first"></el-tab-pane>
<el-tab-pane label="资源" name="second"></el-tab-pane>
</el-tabs>
<el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
node-key="id" :default-checked-keys="checkedKeys"
/>
... ... @@ -17,6 +21,7 @@ export default {
},
data() {
return {
activeName:'first',
defaultProps : {
children: 'children',
label: 'label',
... ... @@ -76,6 +81,9 @@ export default {
},
methods: {
handleClick(tab,event){
this.handleTableData();
},
handleNodeClick(data){
console.log(data);
this.$store.commit('CHANGE_TREE',data)
... ... @@ -83,7 +91,13 @@ export default {
editorOptions() {
this.setOptionsData();
},
//切换类型获取树结构数据
handleTableData() {
if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isType) {
//改变参数值-类型
this.optionsData.dynamicData.contextData.type = this.activeName;
}
},
// 数据解析
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
... ...