楼栋详情页面修正

.gitignore

@@ -28,3 +28,4 @@ build/Release
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
 
+/dist

package-lock.json

@@ -215,6 +215,123 @@
         }
       }
     },
+    "@better-scroll/core": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/core/-/core-2.2.1.tgz",
+      "integrity": "sha512-5Uap8j9tdatTVGnWKLCqzp1yEzmRKxaciURYrgng7FkjkBst5hR8YyS+YbBocUT1pAjeGS6c5Az2vaSmvN3yug==",
+      "requires": {
+        "@better-scroll/shared-utils": "^2.2.1"
+      }
+    },
+    "@better-scroll/indicators": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/indicators/-/indicators-2.2.1.tgz",
+      "integrity": "sha512-xiOa1Ksseg2Iurvh7Q/Zt6s97FGl9s4afd0uDFsja/LiXLTOGb/IBIIqMR/WxZSrfFUpYPwQLjqmJvYYnUqopA==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/infinity": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/infinity/-/infinity-2.2.1.tgz",
+      "integrity": "sha512-z2TspGWE3MnN9p2r19mn5JP7I6sXZt6cwVGZtjW98T1dpJCq0gkLEfXBpD8KvLfNMuwTR8QP3TCPe9ERnDaT7Q==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/mouse-wheel": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/mouse-wheel/-/mouse-wheel-2.2.1.tgz",
+      "integrity": "sha512-u+P4Jl9Gfz/Ke0TdDrAa8GMr4tJxnseNPJmnDv879EoW31K5iVt0gCcB7Jx4A+xb9U5HWxkR/JleLdlY5Hg+pA==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/movable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/movable/-/movable-2.2.1.tgz",
+      "integrity": "sha512-UzQCROMbtsRhGSahdzvqUkKyyRr2ecHrtV5ZYNDRUb1q4iLjIF4Lxh3TYUBYAJYX/a5ysnZiypNmdcuPIu0E/g==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/nested-scroll": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/nested-scroll/-/nested-scroll-2.2.1.tgz",
+      "integrity": "sha512-U87kbxOcnX9dYJ+yZDKBP/MNz9fy1JR3gVvVUlmZJO90Hwih/WXPr54QBD475RPgeVL4BLOYQ95HlEKsObdOSA==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/observe-dom": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/observe-dom/-/observe-dom-2.2.1.tgz",
+      "integrity": "sha512-R2ZnvGJEVTNga907kr2KTgfuX7hyO1Coc3K8e2OXima6d1LU+2iuNEC2GwiUVlgR/XtwnhfTBvy7gGg9gChZ3w==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/observe-image": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/observe-image/-/observe-image-2.2.1.tgz",
+      "integrity": "sha512-AwkqSNO6Tw2FN5N/clD490wcRw1TliLd2CnOrOke8pC3CSzzNL67Nco/PBZ5GX/sIIB/nRZMTO8iHnktVxNdoA==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/pull-down": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/pull-down/-/pull-down-2.2.1.tgz",
+      "integrity": "sha512-gaTcIGgY3B9hwGymvZIk7YJra3uFgwLYn0JwnZzWvQfLklptjQ2MK2p2VliJV+B5vDf7xuOtfxEp7sdadskQoA==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/pull-up": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/pull-up/-/pull-up-2.2.1.tgz",
+      "integrity": "sha512-6oXR1NZJKsePBqyiA1bJShp2gTrorAOYP8gBzotWwyC8rPUaJW9Q86VBnciVqry1MPCTXeMWNsatAYUiCCYyGw==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/scroll-bar": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/scroll-bar/-/scroll-bar-2.2.1.tgz",
+      "integrity": "sha512-ryyAMKXuo3eQ9zrl1DRBNBR1iduCRxGhkBw56PYzG+Vk8D4rqHzVIFpwPVow0ZhNixGLvvSg6wzKGP+lDVc+wg==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/shared-utils": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/shared-utils/-/shared-utils-2.2.1.tgz",
+      "integrity": "sha512-EDkIp/93CcdMYyVfdIqga1edErmolEQvi9xI0lmBxYl1dSBGZxVQgAmBunqw7zXODwJOAWcS7mhcIGu0H/oS5Q=="
+    },
+    "@better-scroll/slide": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/slide/-/slide-2.2.1.tgz",
+      "integrity": "sha512-RoYytgKue38EJP0u3Lk8fnW9hbggNg2x8FDVGbvNzkTy4T0rMdfkls5DisnCFuZaC8O6t/mCM/FWZabVVkDG3A==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/wheel": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/wheel/-/wheel-2.2.1.tgz",
+      "integrity": "sha512-/b247FVHRfm0OWusdeIU0xeASOho7tHSiYf6HJtmdD1YuDGZJBzzrt90JMslqs7sr6oqOJ1VCsCOK7C3pOYJmQ==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
+    "@better-scroll/zoom": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@better-scroll/zoom/-/zoom-2.2.1.tgz",
+      "integrity": "sha512-Sy5BY7W7/civJKFa2roINNhbM+Mz2Mefsd9vNKWIeQbe5FtpKd85RpjsmEPHvzZdT8SJhpAQRQoynui3gH4llQ==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1"
+      }
+    },
     "@popperjs/core": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
@@ -1518,6 +1635,27 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "better-scroll": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/better-scroll/-/better-scroll-2.2.1.tgz",
+      "integrity": "sha512-yoQdvxJx8+02E1erR9sJvwnYAEGf2ullY5AQWmF9qRuJutQzpT+9nTsvX0lsgUr+xKnOeg8kCK29j6aqsYwj+A==",
+      "requires": {
+        "@better-scroll/core": "^2.2.1",
+        "@better-scroll/indicators": "^2.2.1",
+        "@better-scroll/infinity": "^2.2.1",
+        "@better-scroll/mouse-wheel": "^2.2.1",
+        "@better-scroll/movable": "^2.2.1",
+        "@better-scroll/nested-scroll": "^2.2.1",
+        "@better-scroll/observe-dom": "^2.2.1",
+        "@better-scroll/observe-image": "^2.2.1",
+        "@better-scroll/pull-down": "^2.2.1",
+        "@better-scroll/pull-up": "^2.2.1",
+        "@better-scroll/scroll-bar": "^2.2.1",
+        "@better-scroll/slide": "^2.2.1",
+        "@better-scroll/wheel": "^2.2.1",
+        "@better-scroll/zoom": "^2.2.1"
+      }
+    },
     "bfj-node4": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.3.1.tgz",

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "better-scroll": "^2.2.1",
     "css-loader": "^3.2.0",
     "decimal.js": "^10.2.1",
     "vant": "^2.12.9",

src/common/util.js

@@ -99,4 +99,12 @@ export function getDate(mydate){
 export function isInt(str){
     var r = /^\d+$/;　　//正整数    
     return r.test(str);
-}
+}
+
+/*获取屏幕实际宽高*/
+export function getViewportSize () {
+    return {
+        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+    };
+}

src/components/getsabuildingstruct.vue

@@ -30,44 +30,44 @@
           <span >{{keyValue}}</span> 
         </van-col>
     </van-row>
-    <van-row type="flex">
-       <van-col span="24">
-        <van-row>
-            <van-col span="8">
-                <van-row>
-                    <van-col span="12" class="border1">楼层</van-col>
-                    <van-col span="12">
-                        <van-col span="24" class="height25">单元号</van-col>
-                        <van-col span="24" class="height25">室号</van-col>
-                    </van-col> 
-                </van-row>
-            </van-col>
-            <van-col span="16">
-                <van-col span="24" class="height25"></van-col>
-                <van-col span="24" class="height25" v-if="data!=null&&data.Chambers!=null">
-                    <van-col span="3" class="height25_1" v-for="item in data.Chambers[0].SubChambers" :key="item.subcName">{{item.subcName}}</van-col>
-                  
-                </van-col>
-            </van-col>
-        </van-row>
-
-        <div v-if="data!=null&&data.Floors!=null">
-          <van-row   v-for="item1 in data.Floors" :key="item1.fName"> 
-            <van-col span="8" class="height25">{{item1.fName}}</van-col>
-            <van-col span="16" class="height25" v-if="data!=null&&data.Rooms!=null">
-                <van-col span="3" class="height25_2" v-for="item in data.Rooms" :key="item.rID" >
-                <router-link :to="{path:'/getsaroominfo',query:{id:item.rID}}">{{item.rName}}</router-link> 
+   
+    <div  ref="wrapper" :style="'width:'+width+'px;'">
+      <table border="1" cellspacing="0" :style="'width:'+getWidth+'px;'">
+          <tr>
+            <td rowspan="2" class="width">楼层</td>
+            <td class="width">单元</td>
+            <td></td>
+          </tr>
+           <tr> 
+            <td>室号</td>
+            <td >
+              <template v-if="data!=null&&data.Floors!=null">
+                <van-col    class="height25_1" v-for="item in data.Chambers[0].SubChambers" :key="item.subcName">{{item.subcName}}</van-col>
+              </template>
+            </td>
+          </tr>
+          <template v-if="data!=null&&data.Rooms!=null">
+          <tr v-for="item1 in data.Floors" :key="item1.fName">
+            <td colspan="2">{{item1.fName}}</td>
+            <td >
+              <template v-if="data!=null&&data.Rooms!=null">
+                <van-col  class="height25_1" v-for="item in filterArray(data.Rooms,item1.fName)"  :key="item.rID" :style="'background:'+item.rColor+';'">
+                  <router-link :to="{path:'/getsaroominfo',query:{id:item.rID}}"  class="blackColor">{{item.rName}}</router-link> 
                 </van-col>
-            </van-col>
-          </van-row>
-      </div>
-       </van-col>
-    </van-row>
+              </template>
+            </td>
+          </tr>
+          </template>
+      </table>
+    </div>
+      
   </div>
 </template>
 
 <script>
 import { GetSaBuildingStruct } from "@/common/api/loginApi.js";
+import BetterScroll from 'better-scroll'
+
 
 export default {
   name: "login",
@@ -75,7 +75,9 @@ export default {
     return {
       data: {}, 
       keyId:0,
-      keyValue:''
+      keyValue:'',
+      width:'',
+      
     };
   },
   created: function () {
@@ -88,7 +90,28 @@ export default {
     //console.info('created id end');
     this.keyValue=this.$route.query.name;
     this.GetSaBuildingStruct();
+    console.info('getViewportSize',this.$util.getViewportSize());
+    
+    this.width=this.$util.getViewportSize().width;
+   console.info('width',this.width);
   },
+  computed: {
+    // 计算属性的 getter
+    getWidth:function(){
+      if(this.data!=null&&this.data.Chambers!=null){
+        if(this.data.Chambers[0].SubChambers.length>0){
+        return this.data.Chambers[0].SubChambers.length*40+70;
+        }
+      }
+      return 400;
+    }
+    
+  },
+    mounted() {
+      this.$nextTick(() => {
+        this.scroll = new BetterScroll(this.$refs.wrapper, {scrollX: true,scrollY:false})
+      })
+    },
   methods: {
     GetSaBuildingStruct: function () {
       var that = this;
@@ -106,6 +129,7 @@ export default {
         }
         //console.info('data.Chambers',res.data.Chambers[0].SubChambers)
         that.data=res.data;
+        
       });
     },
     // 单选按钮点击事件
@@ -123,12 +147,31 @@ export default {
     onClickRight() {
       this.$router.go(0);
     },
+    filterArray: function (arr,name) {      
+      //console.info('filterArray',arr);
+      //console.info('filterArray name',name);
+      var r=arr.filter(function(item,index,self){
+        if(name.length==1&&name!='1'){
+          return item.rName.substr(0,1)==name&&item.rName.length>=3;
+        }
+        else if(name.length==1&&name=='1'){
+          return item.rName.length<3||item.rName.substr(0,1)==name&&item.rName.length>=3;
+        }
+        else{
+          return item.rName.substr(0,2)==name&&item.rName.length>=3;
+        }
+         
+      });
+      console.info('filterArray r',r);
+      return r;
+    }
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+@import 'vue-easytable/libs/themes-base/index.css';
 .title1 {
   color: #1989fa;
   text-align: left;
@@ -149,6 +192,7 @@ export default {
   border:#999 solid 1px;
   margin-top: -5px;
   padding-top:2px;
+  width:35px;
  
 }
 .height25_2{
@@ -166,4 +210,18 @@ export default {
   padding-top:15px;
   
 }
+.border2{
+  border:#999 solid 1px;
+  padding:0;
+}
+.blackColor{
+  color: #000;
+}
+.box{
+  color:#000;
+  width:600px;
+}
+.width{
+  width:50px;
+}
 </style>

src/main.js

@@ -22,8 +22,7 @@ import {
 import './assets/css/index.css'
 import 'font-awesome/css/font-awesome.min.css'
 //引入vue-easytable
-//import "vue-easytable/libs/themes-base/index.css" // import style
-import VueEasytable from  'vue-easytable' // import library
+import {VTable,VPagination} from  'vue-easytable' // import library
 
 // 引入全部样式
 //import '!less-loader!vant/lib/index.less';
@@ -59,7 +58,8 @@ Vue.use(Button)
   .use(Calendar)
   .use(DatetimePicker)
   .use(Search)
-  .use(VueEasytable)   //vue easytable
+  .use(VTable)   //vue easytable
+  .use(VPagination)
   
 
 /* eslint-disable no-new */