From c157609198b623fe7d6c059def9cd7e38b75d7a9 Mon Sep 17 00:00:00 2001
From: lushangqing <lushangqing@honggroup.com.cn>
Date: Mon, 13 Jun 2022 11:05:59 +0800
Subject: [PATCH] 树结构高亮显示样式修改
---
report-ui/src/assets/styles/common.css | 12 ++++++++++++
report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue | 29 +++++++++++++++++++++++++++--
2 files changed, 39 insertions(+), 2 deletions(-)
diff --git a/report-ui/src/assets/styles/common.css b/report-ui/src/assets/styles/common.css
index f31b3b0..ea700ea 100644
--- a/report-ui/src/assets/styles/common.css
+++ b/report-ui/src/assets/styles/common.css
@@ -101,3 +101,15 @@ input:-webkit-autofill {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
+.tree-div .el-tree-node.is-current>.el-tree-node__content{
+ color:#fff;
+ background-color: #1e9fff;
+}
+.tree-div .el-tree-node__content:hover{
+ color:#fff;
+ background-color: #1e9fff;
+}
+.el-tabs__item.is-active{
+ background-color: #1e9fff;
+ color: #ffffff;
+}
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue b/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue
index 8537d7b..510b9c2 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/treeShape.vue
@@ -1,13 +1,17 @@
<template>
<div :style="styleObj" class="treeContainer">
<div class="tree-left" :style="treeLeftStyle">
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType" stretch>
+ <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-click="handleClick" v-if="optionsSetup.isType" stretch>
<el-tab-pane label="业务系统" name="bos"></el-tab-pane>
<el-tab-pane label="资源类型" name="res"></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"
- />
+ >
+ <el-tooltip :disabled ="showTitle" effect="dark" :content="tooltipTitle" placement="top" slot-scope="{ node, data }" >
+ <span class="span-ellipsis" @mouseover="onShowNameTipsMouseenter">{{node.label}}</span>
+ </el-tooltip>
+ </el-tree>
</div>
<div class="tree-content" v-if="optionsSetup.isFrame">
<iframe :src="iframeSrc" style="width:100%;height:100%;" frameborder="0"></iframe>
@@ -25,6 +29,8 @@ export default {
},
data() {
return {
+ showTitle:false,//提示
+ tooltipTitle:'',//提示文本
iframeSrc:'',
activeName:'bos',
/* defaultProps : {
@@ -117,6 +123,17 @@ export default {
},
methods: {
+ onShowNameTipsMouseenter(e) {
+ var target = e.target;
+ let textLength = target.clientWidth;
+ let containerLength = target.scrollWidth;
+ if (textLength < containerLength) {
+ this.tooltipTitle = e.target.innerText;
+ this.showTitle = false;
+ } else {
+ this.showTitle = true;
+ }
+ },
handleClick(tab,event){
//切换类型获取树结构数据
if (this.optionsData.dataType == "dynamicData" && this.optionsSetup.isType) {
@@ -301,5 +318,13 @@ export default {
width:50%!important;
margin:0 auto!important;
}
+.span-ellipsis {
+ width: 100%;
+ text-align: left;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-right: 20px;
+}
</style>
--
libgit2 0.24.0