ydac/src/components/getsabuildingstruct.vue

<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">楼栋详情</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>

    <van-row>
        <van-col span="24" class="title1">
             <van-image
            :src="require('@/assets/img/query.jpg')"
            width="30"
            height="30"
          />
          <span >{{keyValue}}</span> 
        </van-col>
    </van-row>
   
    <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>
              <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.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>
          <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="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>
          </template>
      </table>
    </div>
      
  </div>
</template>

<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",
  data() {
    return {
      data: {}, 
      keyId:0,
      keyValue:'',
      width:'',
      width1:"",
      span:"24",
      span2:"",
      span3:""
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
   
    //console.info('created id start',this.$route.query.id);
    this.keyId=this.$route.query.id;
    //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){
          let width=this.data.Chambers[0].SubChambers.length*40+70;
          if(this.width>width){
            return this.width;
          }
          else{
             return width; 
          }
        
        }
      }
      return this.width;
    }
    
  },
    mounted() {
      this.$nextTick(() => {
        this.scroll = new BetterScroll(this.$refs.wrapper, {scrollX: true,scrollY:false,click:true})
      })
    },
  methods: {
    GetSaBuildingStruct: function () {
      var that = this;
      var data = {
        userCode: that.$store.state.data.userCode,  
        projectId: that.$store.state.projectId,
        buildingId:that.keyId
      };
      console.info("data", data);
      GetSaBuildingStruct(data).then((res) => {
        console.info("GetSaBuildingStruct", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        //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);
      //console.info("click1 value", id);
      //console.info("click1", e.target.innerText);
     
    },
    onClickLeft() {
      // this.$toast('返回')
      console.info("left");
      this.$router.go(-1);
    },
    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){
          return item.rCoordinateY==name;
      });
      this.span2=24/r.length;
      //console.info('filterArray r',r);
      return r;
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
@import 'vue-easytable/libs/themes-base/index.css';
@import "../assets/css/swiper_table.less";
.title1 {
  color: #1989fa;
  text-align: left;
  font-size:18px;
  font-weight:900;
  margin-left:15px;
  margin-top:15px;
  height:50px; 
  border-bottom:#999 solid 1px;
}
.height25{
  height: 25px;
  border:#999 solid 1px;
  padding: 5px;
}
.height25_1{
  height: 25px;
  border:#999 solid 1px;
  margin-top: -5px;
  padding-top:2px;
  width:35px;
 
}
.height25_2{
  height: 25px;
  border:#999 solid 1px;
  margin-top: -5px;
  padding-top:2px;
  background: #1989fa;
 
}
.border1{
  border:#999 solid 1px;
  height:50px;
  
  padding-top:15px;
  
}
.border2{
  border:#999 solid 1px;
  padding:0;
}
.border3{
  border:#999 solid 1px;
}
.blackColor{
  color: #000;
}
.box{
  color:#000;
  width:600px;
}
.width{
  width:50px;
}
</style>