|
|
@@ -36,13 +36,19 @@
|
|
|
<tr>
|
|
|
<td rowspan="2" class="width">楼层</td>
|
|
|
<td class="width">单元</td>
|
|
|
- <td></td>
|
|
|
+ <td>
|
|
|
+ <template v-if="data!=null&&data.Chambers!=null&&data.Chambers.length>1">
|
|
|
+ <van-col class="border3" :span="span" v-for="item in data.Chambers" :key="item.cName" >{{item.cName}}</van-col>
|
|
|
+ </template>
|
|
|
+ </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 v-if="data!=null&&data.Chambers!=null">
|
|
|
+ <van-col class="border3" :span="span" v-for="item in data.Chambers" :key="item.cName" >
|
|
|
+ <div :style="'width:'+CountSpan(data.Chambers.length,item.SubChambers.length)+'px;display:inline-block;'" class="border3" v-for="item1 in item.SubChambers" :key="item1.subcName">{{item1.subcName}}</div>
|
|
|
+ </van-col>
|
|
|
</template>
|
|
|
</td>
|
|
|
</tr>
|
|
|
@@ -50,10 +56,10 @@
|
|
|
<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>
|
|
|
+ <template v-if="data!=null&&data.Rooms!=null">
|
|
|
+ <van-col class="border3" :span="span2" 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>
|
|
|
</template>
|
|
|
</td>
|
|
|
</tr>
|
|
|
@@ -67,7 +73,8 @@
|
|
|
<script>
|
|
|
import { GetSaBuildingStruct } from "@/common/api/loginApi.js";
|
|
|
import BetterScroll from 'better-scroll'
|
|
|
-
|
|
|
+import Swiper from 'swiper';
|
|
|
+ import 'swiper/swiper.min.css';
|
|
|
|
|
|
export default {
|
|
|
name: "login",
|
|
|
@@ -77,7 +84,10 @@ export default {
|
|
|
keyId:0,
|
|
|
keyValue:'',
|
|
|
width:'',
|
|
|
-
|
|
|
+ width1:"",
|
|
|
+ span:"24",
|
|
|
+ span2:"",
|
|
|
+ span3:""
|
|
|
};
|
|
|
},
|
|
|
created: function () {
|
|
|
@@ -100,16 +110,23 @@ export default {
|
|
|
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;
|
|
|
+ let width=this.data.Chambers[0].SubChambers.length*40+70;
|
|
|
+ if(this.width>width){
|
|
|
+ return this.width;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return width;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- return 400;
|
|
|
+ return this.width;
|
|
|
}
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
- this.scroll = new BetterScroll(this.$refs.wrapper, {scrollX: true,scrollY:false})
|
|
|
+ this.scroll = new BetterScroll(this.$refs.wrapper, {scrollX: true,scrollY:false,click:true})
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -129,9 +146,17 @@ export default {
|
|
|
}
|
|
|
//console.info('data.Chambers',res.data.Chambers[0].SubChambers)
|
|
|
that.data=res.data;
|
|
|
-
|
|
|
+ if(that.data.Chambers.length>=1){
|
|
|
+ this.span=24/that.data.Chambers.length;
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
+ CountSpan:function(chlen,col){ //计算行宽
|
|
|
+ let count=chlen*col;
|
|
|
+ let width2=this.width/count;
|
|
|
+ console.info('width2',width2);
|
|
|
+ return width2;
|
|
|
+ },
|
|
|
// 单选按钮点击事件
|
|
|
click1: function (event, id) {
|
|
|
//console.info("click1 event", event);
|
|
|
@@ -151,18 +176,10 @@ export default {
|
|
|
//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;
|
|
|
- }
|
|
|
-
|
|
|
+ return item.rCoordinateY==name;
|
|
|
});
|
|
|
- console.info('filterArray r',r);
|
|
|
+ this.span2=24/r.length;
|
|
|
+ //console.info('filterArray r',r);
|
|
|
return r;
|
|
|
}
|
|
|
},
|
|
|
@@ -170,8 +187,9 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
-<style scoped>
|
|
|
+<style lang="less" scoped>
|
|
|
@import 'vue-easytable/libs/themes-base/index.css';
|
|
|
+@import "../assets/css/swiper_table.less";
|
|
|
.title1 {
|
|
|
color: #1989fa;
|
|
|
text-align: left;
|
|
|
@@ -214,6 +232,9 @@ export default {
|
|
|
border:#999 solid 1px;
|
|
|
padding:0;
|
|
|
}
|
|
|
+.border3{
|
|
|
+ border:#999 solid 1px;
|
|
|
+}
|
|
|
.blackColor{
|
|
|
color: #000;
|
|
|
}
|
shengxuefei