房屋图谱事件,组织树宽度修改,鼠标移入显示全部信息

src/views/modules/base/community/community.vue

@@ -42,8 +42,16 @@
               <span style="color: red">{{ data.showNum }}</span>
               <span>{{ ")" }}</span>
             </span> -->
-            <span :id="data.id"
+            <el-tooltip
-                  :style="{ color: showIcons(data) ? '#ff4d4f' : '' }">{{ data.showName }}</span>
+                    :content="tooltipTitle"
+                    :disabled="isShowTooltip"
+                    placement="top"
+                    effect="dark"
+                    >
+                    <span class="over-ellipsis" @mouseover="mouseOverNode($event)">
+                        {{ node.label }}
+                    </span>
+                    </el-tooltip>
           </span>
         </el-tree>
       </el-scrollbar>
@@ -432,6 +440,9 @@ export default {
       bDisabled: false,
 
       treeIsOk: true,//树点击是否加载完成
+
+      isShowTooltip:false,
+      tooltipTitle:null,
     };
   },
   components: {
@@ -492,6 +503,18 @@ export default {
     updateStartDate () { }
   },
   methods: {
+    mouseOverNode(event){
+      var target = event.target;
+      let textLength = target.clientWidth;
+      let containerLength = target.scrollWidth;
+   
+      if (textLength < containerLength) {
+        this.tooltipTitle = event.target.innerText;
+        this.isShowTooltip = false;
+      } else {
+        this.isShowTooltip = true;
+      }
+    },
     handleChangeV (val) {
       this.buildingId = "";
       this.buildingUnitId = "";
@@ -1006,28 +1029,44 @@ export default {
 
 .div_tree {
   margin: 7px 8px 7px 7px;
-  width: 30%;
+  width: 200px;
-  max-width: 304px;
+  padding: 24px 15px;
-  min-width: 240px;
+  background: #ffffff;
+  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+  // border-radius: 5px;
+  overflow-y: hidden;
   /deep/ .el-scrollbar__wrap {
     overflow-x: hidden !important;
   }
-
+  /deep/ .el-scrollbar__bar{
+    right: -2px;
+  }
   //搜索输入框样式
   /deep/ .el-input--medium .el-input__inner {
     height: 32px;
     background: rgba(0, 0, 0, 0.05);
     border-radius: 4px;
   }
-  flex: 0 0 280px;
+  
-  background: #ffffff;
+}
-  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+.custom-tree-node {
-    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+  flex: 1;
-  // border-radius: 5px;
+  display: flex;
-  padding: 24px 15px;
+  align-items: center;
-  overflow-y: hidden;
+  justify-content: space-between;
+  font-size: 14px;
+  overflow: hidden;
 }
 
+.over-ellipsis {
+  display: block;
+  width: 140PX;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-line-clamp: 1;
+}
 .filter_tree {
   overflow-x: auto;
   // background-color: #f6f6f6;
@@ -1036,7 +1075,7 @@ export default {
 
 .div_left {
   // flex: 1;
-  width: calc(100% - 300px);
+  width: calc(100% - 200px);
 }
 ::v-deep .el-dialog__body {
   padding: 0;

src/views/modules/base/resi.vue

@@ -24,7 +24,7 @@
           :default-expanded-keys="autoOpenArr"
           :load="lazyLoadTree"
         >
-          <span slot-scope="{ node, data }" class="custom-tree-node">
+          <div slot-scope="{ node, data }" class="custom-tree-node">
             <!-- <img
                     v-if="showIcons(data)"
                     src="@/assets/images/index/abnormal.png"
@@ -43,12 +43,22 @@
                     <span style="color: red">{{ data.showNum }}</span>
                     <span>{{ ")" }}</span>
                     </span> -->
-            <span :id="data.id">{{ data.label }}</span>
+                    <el-tooltip
-          </span>
+                    :content="tooltipTitle"
+                    :disabled="isShowTooltip"
+                    placement="top"
+                    effect="dark"
+                    >
+                    <span class="over-ellipsis" @mouseover="mouseOverNode($event)">
+                        {{ node.label }}
+                    </span>
+                    </el-tooltip>
+            <!-- <span :id="data.id">{{ data.label }}</span> -->
+          </div>
         </el-tree>
       </el-scrollbar>
     </div>
-    <section style="width: calc(100% - 300px)">
+    <section style="width: calc(100% - 200px)">
       <div class="m-search">
         <section
           :class="
@@ -556,6 +566,8 @@ export default {
 
       category: this.$route.query.category,
       searchForm: {},
+      isShowTooltip:false,
+      tooltipTitle:null,
     };
   },
 
@@ -586,7 +598,13 @@ export default {
 
   async mounted() {
     this.searchH = this.$refs.myResiSearch.offsetHeight;
-    this.loadTree();
+    await this.loadTree();
+    if (this.treeData.length > 0) {
+      this.$nextTick(() => {
+        // ref_tree 元素的ref   value 绑定的node-key
+        this.$refs.ref_tree.setCurrentKey(this.treeData[0].id);
+      });
+    }
     this.displayedBaobiaoBtn = await this.$refs.baobiao.existsTemplate({
       elseParams: {
         categoryKeys: ["resi_info"],
@@ -595,8 +613,22 @@ export default {
     });
     this.handleSearchFrom();
   },
-
+  activated(){
+    this.handleSearchFrom();
+  },
   methods: {
+    mouseOverNode(event){
+      var target = event.target;
+      let textLength = target.clientWidth;
+      let containerLength = target.scrollWidth;
+      console.log(textLength,containerLength);
+      if (textLength < containerLength) {
+        this.tooltipTitle = event.target.innerText;
+        this.isShowTooltip = false;
+      } else {
+        this.isShowTooltip = true;
+      }
+    },
     // 更新按钮权限
     updateBtnAuths() {
       let rot = this.$route;
@@ -773,10 +805,6 @@ export default {
           })
           .catch((err) => {
             if (err == "cancel") {
-              // this.$message({
-              //   type: "info",
-              //   message: "已取消删除"
-              // });
             }
           });
       } else {
@@ -1273,12 +1301,39 @@ export default {
 }
 .div_tree {
   margin: 7px 8px 7px 7px;
-  width: 30%;
+  width: 200px;
-  max-width: 304px;
+  padding: 24px 15px;
-  min-width: 240px;
+  background: #ffffff;
+  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+  // border-radius: 5px;
+  overflow-y: hidden;
+  .scrollar{
+    margin-top: 30px;
+  }
   /deep/ .el-scrollbar__wrap {
     overflow-x: hidden !important;
   }
+  /deep/ .el-scrollbar__bar{
+    right: -2px;
+  }
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.over-ellipsis {
+  display: block;
+  width: 140PX;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-line-clamp: 1;
+}
 
   //搜索输入框样式
   /deep/ .el-input--medium .el-input__inner {
@@ -1286,12 +1341,11 @@ export default {
     background: rgba(0, 0, 0, 0.05);
     border-radius: 4px;
   }
-  flex: 0 0 280px;
+  // flex: 0 0 280px;
   background: #ffffff;
   box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
     0px 3px 6px -4px rgba(0, 0, 0, 0.12);
   // border-radius: 5px;
-  padding: 24px 15px;
   overflow-y: hidden;
 }
 

src/views/modules/portrayal/house/cpts/graph.vue

@@ -74,7 +74,9 @@ export default {
                     'text': item.name,
                     'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'}  c-my-node-${item.type == 1?'home':index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' || item.houseHolderRel == '祖父母' ? item.gender == 1 ? 'grandpa' : 'grandma' : item.houseHolderRel == '母亲' ? 'grandma' : item.gender == 1 ? 'father' : 'mother' }"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.type == 1?`${item.name}`:item.name.length === 2 ?
                         item.name.substring(0, 1) + '*' :
-                        item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>`
+                        item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>`,
+                    'data':{id: item.id,type:item.type,name:item.name},
+
                 }))
 
 
@@ -97,7 +99,22 @@ export default {
         },
 
         onNodeClick(nodeObject, $event) {
-            console.log('onNodeClick:', nodeObject);
+            let {name,id,type} = nodeObject.data
+            if(type === 0){
+                this.$store.dispatch("saveData", {
+                    resiId:id,
+                    name
+                });
+                this.$router.push({ name: 'jumin-huaxiang' });
+                this.$store.state.contentTabs = this.$store.state.contentTabs.map(
+                    (item) => {
+                    if (item.name === "jumin-huaxiang") {
+                        return { ...item, title: name };
+                    }
+                    return item;
+                    }
+                );
+            }
         },
         onLineClick(lineObject, $event) {
             console.log('onLineClick:', lineObject);