楼盘表

yangwei
Showing 6 changed files with 144 additions and 80 deletions
src/api/lpb.js
src/views/lpb/index.vue
src/views/lpb/lpbContent/ch.vue
src/views/lpb/lpbContent/index.vue
src/views/lpb/lpbContent/ljzs.vue
src/views/lpb/lpbContent/zdys.vue
--- a/src/api/lpb.js
View file @69c583c
+++ b/src/api/lpb.js
View file @69c583c
 /*
 * @Description:
 * @Autor: renchao
- * @LastEditTime: 2023-06-08 13:43:33
+ * @LastEditTime: 2023-06-16 16:06:39
 */
-import request from '@/utils/request'
+import request from "@/utils/request";
-let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
+let SERVER = window.config
-const url = SERVER.SERVERAPI + '/rest/zhcx/lpcx/'
+  ? window.config
+  : JSON.parse(localStorage.getItem("ApiUrl"));
+const url = SERVER.SERVERAPI + "/rest/zhcx/lpcx/";
 //
 /**
 * @description:楼盘查询- 根据条件进行列表查询
 * @param {*} data
 * @author: renchao
 */
-export function getLpZrz (data) {
+export function getLpZrz(data) {
  return request({
-    url: 'service-lpb-zq/rest/zhcx/lpcx/getLpZrz',
+    url: "service-lpb-zq/rest/zhcx/lpcx/getLpZrz",
-    method: 'post',
+    method: "post",
-    data: data
+    data: data,
-  })
+  });
 }
 /**
@@ -25,32 +27,47 @@ export function getLpZrz (data) {
 * @param {*} zrzbsm
 * @author: renchao
 */
-export function getLpb (zrzbsm) {
+export function getLpb(zrzbsm) {
  return request({
-    url: 'service-lpb-zq/rest/zhcx/lpcx/getLpb?scyclx=1&zrzbsm=' + zrzbsm,
+    url: "service-lpb-zq/rest/zhcx/lpcx/getLpb?scyclx=0&zrzbsm=" + zrzbsm,
-    method: 'get'
+    method: "get",
-  })
+  });
 }
 /**
 * @description: 获取楼盘表房屋用途,房屋性质右侧房屋用途统计数据
 * @param {*} zrzbsm
 * @author: renchao
 */
-export function getLpbFwytAndQlxz (zrzbsm) {
+export function getLpbFwytAndQlxz(zrzbsm) {
  return request({
-    url: 'service-lpb-zq/rest/zhcx/lpcx/getLpbFwytAndQlxz?scyclx=1&zrzbsm=' + zrzbsm,
+    url:
-    method: 'get'
+      "service-lpb-zq/rest/zhcx/lpcx/getLpbFwytAndQlxz?scyclx=0&zrzbsm=" +
-  })
+      zrzbsm,
+    method: "get",
+  });
 }
 /**
 * @description: 获取楼盘表缺失项统计
 * @param {*} zrzbsm
 * @author: renchao
 */
-export function getLpbQsxtj (zrzbsm) {
+export function getLpbQsxtj(zrzbsm) {
  return request({
-    url: url + 'getLpbQsxtj?scyclx=1&zrzbsm=' + zrzbsm,
+    url: "service-lpb-zq/rest/zhcx/lpcx/getLpbQsxtj?scyclx=0&zrzbsm=" + zrzbsm,
-    method: 'get'
+    method: "get",
-  })
+  });
 }
+/**
+ * @description: 楼盘表 获取单元状态统计数据
+ * @param {*} data
+ * zrzbsm 自然幢标识码
+ * scyclx 实测预测类型   0预测，1实测
+ * @return {*}
+ */
+export function getLpbTj(zrzbsm) {
+  return request({
+    url: "service-lpb-zq/rest/zhcx/lpcx/getLpbTj?scyclx=0&zrzbsm=" + zrzbsm,
+    method: "get",
+  });
+}
--- a/src/views/lpb/index.vue
View file @69c583c
+++ b/src/views/lpb/index.vue
View file @69c583c
--- a/src/views/lpb/lpbContent/ch.vue
View file @69c583c
+++ b/src/views/lpb/lpbContent/ch.vue
View file @69c583c
@@ -2,7 +2,7 @@
 * @Author: yangwei
 * @Date: 2023-02-28 15:47:12
 * @LastEditors: yangwei
- * @LastEditTime: 2023-03-02 16:35:36
+ * @LastEditTime: 2023-06-16 16:14:51
 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
 * @Description: 
 * 
@@ -37,7 +37,7 @@
          :data-qszt="hs.qszt"
          ref="hBsm"
          :key="hsIndex"
-          style="border-color: rgb(230, 230, 230)"
+          :style="{'border-color': borderColor}"
          :class="hs.select ? 'tdSelect' : ''"
          @click="handleClickH($event.target, hs.bsm, hs)"
          @dblclick="dbclick(hs.bsm)"
@@ -82,7 +82,12 @@
 <script>
 export default {
  name: "BdcdjWebCh",
-  inject: ["openMenu", "selectAll"],
+  inject: {
+    openMenu:{value:'openMenu',default:null},
+    selectAll:{value:'selectAll',default:null},
+    changeChoosedObj:{value:'changeChoosedObj',default:null},
+    clearChangeChoosedObj:{value:'clearChangeChoosedObj',default:null}
+  },
  props: {
    ch: {
      type: Array,
@@ -101,6 +106,8 @@ export default {
      hqsztList: [],
      //区分单双击事件的定时器
      time: null,
+      // 边框颜色
+      borderColor:'rgb(230, 230, 230)'
    };
  },
  mounted() {},
@@ -108,48 +115,32 @@ export default {
    // 层选中事件
    handleClickC(e, item) {
      //判断点击的层是否选中
-      if (e.target.className.indexOf("tdSelect") == -1) {
+      // if (e.target.className.indexOf("tdSelect") == -1) {
-        //未选中→选中
+      //   //未选中→选中
-        e.target.className += " tdSelect"; //加边框
+      //   e.target.className += " tdSelect"; //加边框
-        this.cbsmList.push(item.bsm);
+      //   this.cbsmList.push(item.bsm);
-      } else {
+      // } else {
-        //选中→未选中
+      //   //选中→未选中
-        e.target.className = "floor";
+      //   e.target.className = "floor";
-        this.cbsmList = this.cbsmList.filter((i) => i != item.bsm);
+      //   this.cbsmList = this.cbsmList.filter((i) => i != item.bsm);
-      }
+      // }
      // this.$parent.getCbsm(this.cbsmList);
    },
    //户单击事件
    handleClickH(e, bsm, hs) {
-      let self = this;
-      // 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
-      clearTimeout(self.time);
-      self.time = setTimeout(() => {
-        // this.closeMenu();
-        //判断点击的户是否选中
-        if (!hs.select) {
-          //未选中→选中
-          hs.select = true; //加边框
-          this.hbsmList.push(bsm); // 将户bsm放进hbsmList
-          this.hqsztList.push(hs.qszt); // 将户qszt放进hqsztList
-        } else {
-          //选中→未选中
-          hs.select = false;
-          this.hbsmList = this.hbsmList.filter((i) => i != bsm);
-          this.hqsztList = this.hqsztList.filter((i) => i != hs.qszt);
-        }
-      }, 200);
    },
    // 户单元状态点击事件
    hDyztClick(e, bsm, hs) {
-      this.handleClickH(e.target.parentNode, bsm, hs);
+      // this.handleClickH(e.target.parentNode, bsm, hs);
    },
    //户双击事件
    dbclick(bsm) {
-      clearTimeout(this.time);
+      // clearTimeout(this.time);
    },
    //幢单元全选/反选
-    zdySelectAll(val) {
+    zdySelectAll(val,flag) {
+      // 手动点击全部取消选中
+      !flag &&  this.clearChangeChoosedObj()
      this.ch.forEach((c) => {
        c.hs.forEach((h) => {
          if (val) {
@@ -158,10 +149,16 @@ export default {
            this.hbsmList.push(h.bsm)
          } else {
            h.select = false;
+            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}`
+      });
    },
  },
  watch: {
@@ -172,6 +169,34 @@ export default {
      immediate: true,
      deep: true,
    },
+    changeChoosedObj: {
+      handler(val) {
+        debugger
+        //清除选中户
+        this.borderColor = 'rgb(230, 230, 230)';
+        this.zdySelectAll(false,true)
+        if (val.bsms.length) {
+          this.$refs.hBsm.forEach((item) => {
+            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;
+                }
+                item.style.border = '1px solid '+ val.color;
+                // item.style.backgroundColor =  val.color;
+              }
+            });
+          });
+        }else{
+          this.borderColor = 'rgb(230, 230, 230)'
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
  },
 };
 </script>
@@ -181,16 +206,26 @@ export default {
  display: flex;
  flex-direction: column-reverse;
  .chTable {
-    margin-left: -1px;
+    // 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 {
+          border-radius: 4px 0px 0px 1px;
+        }
+      }
      td {
        min-width: 138px;
-        height: 72px;
+        height: 64px;
-        line-height: 72px;
+        line-height: 64px;
        text-align: center;
        cursor: pointer;
        position: relative;
@@ -204,7 +239,7 @@ export default {
          left: 6px;
          top: 6px;
          border: 1px solid;
-          border-radius: 8px;
+          border-radius: 3px 0px 3px 0px;
        }
        .lin {
          color: #f7b500;
@@ -223,7 +258,7 @@ export default {
          width: 138px;
          height: 18px;
          position: absolute;
-          bottom: 32px;
+          bottom: 28px;
          box-sizing: border-box;
          padding: 0 6px;
          li {
@@ -239,7 +274,8 @@ export default {
        }
      }
      .tdSelect {
-        border: 1px solid #006cff !important;
+        border: 1px solid ;
+        border-color: #5A78DE !important;
        background-image: url("./images/tdSelect.png");
        background-repeat: no-repeat;
        background-position: right top;
--- a/src/views/lpb/lpbContent/index.vue
View file @69c583c
+++ b/src/views/lpb/lpbContent/index.vue
View file @69c583c
 <template>
  <div class="lpbContent-wrap" ref="lpbContentWrap">
-    <div class="lpbContent">
+    <div class="lpbContent" ref="lpbContent">
      <!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 -->
      <div class="ch-zdy-wrap">
        <!-- 幢单元 -->
@@ -13,9 +13,10 @@
    </div>
    <!-- 自然幢名称 -->
    <p class="lpb-xmmc">
-      <el-checkbox @change="zdySelectAll($event)">{{
+      <!-- <el-checkbox @change="zdySelectAll($event)">{{
        lpbData.xmmc
-      }}</el-checkbox>
+      }}</el-checkbox> -->
+      {{lpbData.xmmc}}
    </p>
    <!-- 右键菜单 -->
    <ul
@@ -38,6 +39,8 @@ export default {
    return {
      openMenu: this.openMenu,
      selectAll: this.selectAllObj,
+      changeChoosedObj:this.changeChoosedObj,
+      clearChangeChoosedObj:this.clearChangeChoosedObj
    };
  },
  name: "",
@@ -72,20 +75,27 @@ export default {
      //右键菜单定位位置
      lpbChLeft: 100,
      lpbChTop: 100,
+      // 改变户选中状态
+      changeChoosedObj:{
+        bsms:[],
+        color:''
+      }
    };
  },
  mounted() {
-    this.getLpb("dfc08a0cc6a25188990ea53d1d2c500e");
+    this.getLpb(this.zrzbsm);
-    // setTimeout(() => {
+		window.lpbContent = this;
-    //   //让滚动条滚动至最下面 -6是横向滚动条的高度
-    //   this.$refs.lpbContent.scrollTop =
-    //     this.$refs.lpbContent.scrollHeight -
-    //     this.$refs.lpbContent.clientHeight -
-    //     6;
-    // }, 200);
-    // window.lpbContent = this;
  },
  methods: {
+    // 改变户选中状态
+    changeChoosed(bsms, color){
+      debugger
+      this.changeChoosedObj.bsms = bsms;
+      this.changeChoosedObj.color = color;
+    },
+    clearChangeChoosedObj(){
+      this.changeChoosedObj.bsms = [];
+    },
    //全选户
    zdySelectAll(val) {
      this.selectAllObj.selectAll = val;
@@ -113,7 +123,7 @@ export default {
    openMenu(e, item, type) {
      this.lpbChLeft = e.pageX - 96;
      this.lpbChTop = e.pageY - 23;
-      this.lpbChVisible = true;
+      // this.lpbChVisible = true;
    },
    //关闭户右键菜单
    closeMenu() {
--- a/src/views/lpb/lpbContent/ljzs.vue
View file @69c583c
+++ b/src/views/lpb/lpbContent/ljzs.vue
View file @69c583c
@@ -10,7 +10,7 @@
 -->
 <template>
  <div class="ljzs-wrap">
-    <div v-for="ljzarr in ljzsCptd" :key="ljzarr[0].bsm">
+    <div v-for="ljzarr in ljzsCptd" :style="{'margin-bottom': ljzarr.length == 1 ? '34px':'80px'}" :key="ljzarr[0].bsm">
      <!-- 多个同起始层逻辑幢 横向排列  -->
      <div class="ch-zdy-wrap" v-if="ljzarr.length > 1">
        <div v-for="ljz in ljzarr" :key="ljz.ljzmc" class="same-floor-ljz">
@@ -94,7 +94,7 @@ export default {
  display: flex;
  flex-direction: column-reverse;
  > div {
-    margin-bottom: 80px;
+    // margin-bottom: 80px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
@@ -110,8 +110,8 @@ export default {
      }
      .ljz-xmmc {
        position: absolute;
-        width: calc(100% + 1px);
+        width: calc(100% - 4px);
-        bottom: -60px;
+        bottom: -34px;
      }
    }
    .cs-none {
--- a/src/views/lpb/lpbContent/zdys.vue
View file @69c583c
+++ b/src/views/lpb/lpbContent/zdys.vue
View file @69c583c
@@ -2,7 +2,7 @@
 * @Author: yangwei
 * @Date: 2023-02-28 16:29:04
 * @LastEditors: yangwei
- * @LastEditTime: 2023-03-02 14:45:19
+ * @LastEditTime: 2023-06-08 13:58:58
 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\zdys.vue
 * @Description: 
 * 
@@ -13,9 +13,10 @@
    <div v-for="zdy in realZdys" :key="zdy.bsm">
      <!-- 幢单元名称 -->
      <p class="lpb-xmmc">
-        <el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{
+        <!-- <el-checkbox @change="zdySelectAll($event,zdy.bsm)">{{
          zdy.zdymc
-        }}</el-checkbox>
+        }}</el-checkbox> -->
+        {{zdy.zdymc}}
      </p>
      <!-- 每个幢单元下的层户 -->
      <ch-cpn :ref="zdy.bsm" :ch="zdy.cs" />