楼盘表回显

 <!--
  * @Author: yangwei
  * @Date: 2023-02-28 15:47:12
- * @LastEditors: yangwei
- * @LastEditTime: 2023-09-20 17:14:39
+ * @LastEditors: vers
+ * @LastEditTime: 2024-02-05 16:06:30
  * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
  * @Description:
  *
@@ -16,14 +16,16 @@
       border="1"
       cellspacing="0"
       cellpadding="0"
-      v-show="ch.length">
+      v-show="ch.length"
+    >
       <tr v-for="(cs, csIndex) in ch" :key="csIndex">
         <!-- 显示层数 -->
         <td
           class="floor"
           ref="cBsm"
           @contextmenu.prevent="openMenu($event, cs, 'c')"
-          @click="handleClickC($event, cs)">
+          @click="handleClickC($event, cs)"
+        >
           {{ cs.sjc }}层
         </td>
         <!-- 显示户 -->
@@ -35,15 +37,22 @@
           :data-qszt="hs.qszt"
           ref="hBsm"
           :key="hsIndex"
-          :style="{'border-color': borderColor}"
+          :style="{ 'border-color': borderColor }"
           :class="hs.select ? 'tdSelect' : ''"
           @click="handleClickH($event.target, hs.bsm, hs)"
           @dblclick="dbclick(hs.bsm)"
-          @contextmenu.prevent="openMenu($event, hs, 'h')">
+          @contextmenu.prevent="openMenu($event, hs, 'h')"
+        >
           {{ hs.shbw }}
-          <span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
-          <span @click.stop="" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
-          <span @click.stop="" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
+          <span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'"
+            >临</span
+          >
+          <span @click.stop="" class="hqszt zheng" v-show="hs.qszt == '1'"
+            >正</span
+          >
+          <span @click.stop="" class="hqszt xian" v-show="hs.qszt == '2'"
+            >现</span
+          >
           <ul @click.stop="hDyztClick($event, hs.bsm, hs)" class="dyzt">
             <li style="background-color: #6edee1" v-show="hs.qqzt == '1'">
               确
@@ -71,14 +80,16 @@
 </template>
 
 <script>
+import { set } from "nprogress";
+
 export default {
   name: "BdcdjWebCh",
   inject: {
-    openMenu:{value:'openMenu',default:null},
-    selectAll:{value:'selectAll',default:null},
-    changeChoosedObj:{value:'changeChoosedObj',default:null},
-    clearChangeChoosedObj:{value:'clearChangeChoosedObj',default:null},
-    getBsmList:{value:'getBsmList',default:null}
+    openMenu: { value: "openMenu", default: null },
+    selectAll: { value: "selectAll", default: null },
+    changeChoosedObj: { value: "changeChoosedObj", default: null },
+    clearChangeChoosedObj: { value: "clearChangeChoosedObj", default: null },
+    getBsmList: { value: "getBsmList", default: null },
   },
   props: {
     ch: {
@@ -87,10 +98,10 @@ export default {
         return [];
       },
     },
-    onlyShow:{
+    onlyShow: {
       type: Boolean,
       default: true,
-    }
+    },
   },
   data() {
     return {
@@ -101,26 +112,27 @@ export default {
       //区分单双击事件的定时器
       time: null,
       // 边框颜色
-      borderColor:'rgb(230, 230, 230)',
+      borderColor: "rgb(230, 230, 230)",
       // 申请单元列表数据
-      unitIdList:[],
+      unitIdList: [],
       // 组件标识
-      compFlag:Math.random()
+      compFlag: Math.random(),
     };
   },
   mounted() {
     // 根据申请单元列表数据处理选中户
-    console.log("window.unitData",window.unitData);
-    if(window.unitData && window.unitData.length){
-      window.unitData.forEach(e => {
-        this.unitIdList.push(e.bdcdyid)
-      })
+    console.log("window.unitData", window.unitData);
+    if (window.unitData && window.unitData.length) {
+      window.unitData.forEach((e) => {
+        this.unitIdList.push(e.bdcdyid);
+      });
+      console.log(this.unitIdList, "this.unitIdList");
       this.ch.forEach((c) => {
         c.hs.forEach((h) => {
-          if (h.dyhbsm.indexOf(this.unitIdList) > -1) {
+          if (this.unitIdList.indexOf(h.dyhbsm) > -1) {
             h.select = true;
             // 使用hbsmList时，需要去重
-            this.hbsmList.push(h.bsm)
+            this.hbsmList.push(h.bsm);
           }
         });
       });
@@ -144,7 +156,7 @@ export default {
             e.target.className += " tdSelect";
             h.select = true;
             // 使用hbsmList时，需要去重
-            this.hbsmList.push(h.bsm)
+            this.hbsmList.push(h.bsm);
           });
         } else {
           //选中→未选中
@@ -217,88 +229,90 @@ export default {
      * @param {*} flag
      * @author: renchao
      */
-    zdySelectAll(val,flag) {
+    zdySelectAll(val, flag) {
       // 手动点击全部取消选中
-      !flag &&  this.clearChangeChoosedObj()
+      !flag && this.clearChangeChoosedObj();
       this.ch.forEach((c) => {
         c.hs.forEach((h) => {
           if (val) {
             h.select = true;
             // 使用hbsmList时，需要去重
-            this.hbsmList.push(h.bsm)
+            this.hbsmList.push(h.bsm);
           } else {
             h.select = false;
-            this.borderColor = 'rgb(230, 230, 230)'
-            this.hbsmList = []
+            this.borderColor = "rgb(230, 230, 230)";
+            this.hbsmList = [];
           }
         });
       });
-      this.$refs.hBsm && this.$refs.hBsm.forEach((item) => {
-        // item.style.borderColor = this.borderColor
-        item.style.backgroundColor =  '#fff';
-        // item.style.border = `1px solid ${this.borderColor}`
-      });
+      this.$refs.hBsm &&
+        this.$refs.hBsm.forEach((item) => {
+          // item.style.borderColor = this.borderColor
+          item.style.backgroundColor = "#fff";
+          // item.style.border = `1px solid ${this.borderColor}`
+        });
     },
     //清除选中
-    clearChoosed(){
+    clearChoosed() {
       //清除选中户
-      this.zdySelectAll(false)
+      this.zdySelectAll(false);
       //清除选中层
       this.cbsmList = [];
-      this.$refs.cBsm && this.$refs.cBsm.forEach((item)=>{
-        item.className = 'floor'
-      })
+      this.$refs.cBsm &&
+        this.$refs.cBsm.forEach((item) => {
+          item.className = "floor";
+        });
     },
   },
   watch: {
     selectAll: {
       handler(val) {
         this.zdySelectAll(val.selectAll);
-        val.cancelChoosed && this.clearChoosed()
+        val.cancelChoosed && this.clearChoosed();
       },
       immediate: true,
       deep: true,
     },
-    hbsmList(val){ 
-      let list = []
-      val.length && val.forEach((i)=>{
-        this.ch.forEach((c) => {
-          c.hs.forEach((h) => {
-            if (i == h.bsm) {
-              list.push(
-                {
-                  bdcdyh:h.bdcdyh,
-                  bsm:h.bsm,
-                  dyhbsm:h.dyhbsm,
-                  bdcdyid:h.dyhbsm,
+    hbsmList(val) {
+      let list = [];
+      val.length &&
+        val.forEach((i) => {
+          this.ch.forEach((c) => {
+            c.hs.forEach((h) => {
+              if (i == h.bsm) {
+                list.push({
+                  bdcdyh: h.bdcdyh,
+                  bsm: h.bsm,
+                  dyhbsm: h.dyhbsm,
+                  bdcdyid: h.dyhbsm,
                   zl: h.zl,
-                  bdcdylx:'7',
-                  flag:this.compFlag
-                }
-              )
-            }
+                  bdcdylx: "7",
+                  flag: this.compFlag,
+                });
+              }
+            });
           });
         });
-      })
-      this.getBsmList(list,this.compFlag)
+      this.getBsmList(list, this.compFlag);
     },
     changeChoosedObj: {
       handler(val) {
-        this.borderColor = 'rgb(230, 230, 230)';
+        this.borderColor = "rgb(230, 230, 230)";
         if (val.bsms.length) {
           //清除选中户
-          this.zdySelectAll(false,true)
+          this.zdySelectAll(false, true);
           this.$refs.hBsm.forEach((item) => {
-            val.bsms.forEach((i,ind) => {
+            val.bsms.forEach((i, ind) => {
               if (item.dataset.bsm == i) {
                 if (ind == 0) {
                   //定位到第一个户所在位置
                   window.lpbContent.$refs.lpbContent.scrollTop = item.offsetTop;
-                  window.lpbContent.$refs.lpbContent.scrollLeft = item.offsetLeft;
+                  window.lpbContent.$refs.lpbContent.scrollLeft =
+                    item.offsetLeft;
                 }
                 // item.style.border = '1px solid '+ val.color;
                 // 背景色高亮
-                item.style.backgroundColor =  val.color;
+                item.style.backgroundColor = val.color;
               }
             });
           });
@@ -306,95 +320,95 @@ export default {
       },
       immediate: true,
       deep: true,
-    }
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
-  .ch-wrap {
-    display: flex;
-    flex-direction: column-reverse;
-    .chTable {
-      // margin-left: -1px;
-      border-color: #e4ebf4 !important;
-      border-collapse: collapse;
-      border-spacing: 0;
-      // position: relative;
-      tr {
+.ch-wrap {
+  display: flex;
+  flex-direction: column-reverse;
+  .chTable {
+    // margin-left: -1px;
+    border-color: #e4ebf4 !important;
+    border-collapse: collapse;
+    border-spacing: 0;
+    // position: relative;
+    tr {
+      .floor {
+        min-width: 56px;
+        background: #e8f2ff;
+        border: 1px solid #acbae8;
+      }
+      &:first-child {
         .floor {
-          min-width: 56px;
-          background: #e8f2ff;
-          border: 1px solid #acbae8;
+          border-radius: 4px 0px 0px 1px;
         }
-        &:first-child {
-          .floor {
-            border-radius: 4px 0px 0px 1px;
-          }
+      }
+      td {
+        min-width: 138px;
+        height: 64px;
+        line-height: 64px;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        .hqszt {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          font-size: 12px;
+          line-height: 16px;
+          position: absolute;
+          left: 6px;
+          top: 6px;
+          border: 1px solid;
+          border-radius: 3px 0px 3px 0px;
+        }
+        .lin {
+          color: #f7b500;
+          border-color: #f7b500;
+        }
+        .zheng {
+          color: #1ad6e1;
+          border-color: #1ad6e1;
+        }
+        .xian {
+          color: #45aefd;
+          border-color: #45aefd;
         }
-        td {
-          min-width: 138px;
-          height: 64px;
-          line-height: 64px;
-          text-align: center;
-          cursor: pointer;
-          position: relative;
-          .hqszt {
+        .dyzt {
+          user-select: none;
+          width: 138px;
+          height: 18px;
+          position: absolute;
+          bottom: 28px;
+          box-sizing: border-box;
+          padding: 0 6px;
+          li {
             display: inline-block;
-            width: 16px;
-            height: 16px;
+            width: 18px;
+            height: 18px;
             font-size: 12px;
-            line-height: 16px;
-            position: absolute;
-            left: 6px;
-            top: 6px;
+            line-height: 18px;
+            color: #ffffff;
             border: 1px solid;
-            border-radius: 3px 0px 3px 0px;
-          }
-          .lin {
-            color: #f7b500;
-            border-color: #f7b500;
-          }
-          .zheng {
-            color: #1ad6e1;
-            border-color: #1ad6e1;
-          }
-          .xian {
-            color: #45aefd;
-            border-color: #45aefd;
+            border-radius: 9px;
           }
-          .dyzt {
-            user-select: none;
-            width: 138px;
-            height: 18px;
-            position: absolute;
-            bottom: 28px;
-            box-sizing: border-box;
-            padding: 0 6px;
-            li {
-              display: inline-block;
-              width: 18px;
-              height: 18px;
-              font-size: 12px;
-              line-height: 18px;
-              color: #ffffff;
-              border: 1px solid;
-              border-radius: 9px;
-            }
-          }
-        }
-        .tdSelect {
-          border: 1px solid;
-          border-color: #5a78de !important;
-          background-image: url("./images/tdSelect.png");
-          background-repeat: no-repeat;
-          background-position: right top;
-          background-size: 30px;
-        }
-        .hasBorder {
-          border-width: 1px;
-          border-style: solid;
         }
       }
+      .tdSelect {
+        border: 1px solid;
+        border-color: #5a78de !important;
+        background-image: url("./images/tdSelect.png");
+        background-repeat: no-repeat;
+        background-position: right top;
+        background-size: 30px;
+      }
+      .hasBorder {
+        border-width: 1px;
+        border-style: solid;
+      }
     }
   }
+}
 </style>