jiangxiSZ/shuzhixiangzheng/src/components/DaZhongPage.vue

<template>
    <div id="3dage">
        <Time></Time>
        <ReturnButton></ReturnButton>
        <img class="img" id="img1" src="../assets/png/footer.png"></img>
        <img class="img" id="img2" src="../assets/png/title.png"></img>
        <img class="img" id="img3" :src="leftPng_url"></img>
        <img class="img" id="img5" :src="rightPng_url"></img>
        <img class="img" id="img4" src="../assets/png/pop.png"></img>
        <div id="child_form">
            <img class="img" id="x_img" src="../assets/png/×.png" v-show="form_show" v-on:click="form_showFun"></img>
                 <img class="img" id="form_img" :src="housePng_url" v-show="form_show"> 
                </img>
                    <div id="numberDiv" v-show="form_show">{{houseNum}}</div>
                    <el-table
                    :header-cell-style="{background:'#0b61c5',color:'#fff','font-weight': 700}"
                    v-show="form_show"
                    id="table"
                    :data="jhgj_tableData"
                    style="width: 33%;">
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="sexName"
                      label="性别"
                      width="80">
                    </el-table-column>
                    <el-table-column
                      prop="age"
                      label="年龄"
                      width="80">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="类别"
                    width="80">
                  </el-table-column>
                    <el-table-column
                    prop="workspace"
                    label="工作单位"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="telephone"
                    label="联系方式"
                    >
                </el-table-column>
                  </el-table>

               
                <div id="houses" v-show="houses_firePoint_show">
                    <div class="house_class" id="house_101"></div>
                    <div class="house_class" id="house_102"></div>
                    <div class="house_class" id="house_201"></div>
                    <div class="house_class" id="house_202"></div>
                    <div class="house_class" id="house_301"></div>
                    <div class="house_class" id="house_302"></div>
                    <div class="house_class" id="house_401"></div>
                    <div class="house_class" id="house_402"></div>
                    <div class="house_class" id="house_501"></div>
                    <div class="house_class" id="house_502"></div>
                    <div class="house_class" id="house_601"></div>
                    <div class="house_class" id="house_602"></div>
                    <div class="house_class" id="house_701"></div>
                    <div class="house_class" id="house_702"></div>
                    <div class="house_class" id="house_801"></div>
                    <div class="house_class" id="house_802"></div>
                    <div class="house_class" id="house_901"></div>
                    <div class="house_class" id="house_902"></div>
                    <div class="house_class" id="house_1001"></div>
                    <div class="house_class" id="house_1002"></div>
                    <div class="house_class" id="house_1101"></div>
                    <div class="house_class" id="house_1102"></div>
                    <div class="house_class" id="house_1201"></div>
                    <div class="house_class" id="house_1202"></div>
                    <div class="house_class" id="house_1301"></div>
                    <div class="house_class" id="house_1302"></div>
                    <div class="house_class" id="house_1401"></div>
                    <div class="house_class" id="house_1402"></div>
                    <div class="house_class" id="house_1501"></div>
                    <div class="house_class" id="house_1502"></div>
                    <div class="house_class" id="house_1601"></div>
                    <div class="house_class" id="house_1602"></div>
                    <div class="house_class" id="house_1701"></div>
                    <div class="house_class" id="house_1702"></div>
                    <div class="house_class" id="house_1801"></div>
                    <div class="house_class" id="house_1802"></div>
                </div>
                <div id="houses1" v-show="houses1_firePoint_show">
                    <div class="house_class" id="house1_101"></div>
                    <div class="house_class" id="house1_102"></div>
                    <div class="house_class" id="house1_103"></div>
                    <div class="house_class" id="house1_104"></div>
                    <div class="house_class" id="house1_201"></div>
                    <div class="house_class" id="house1_202"></div>
                    <div class="house_class" id="house1_203"></div>
                    <div class="house_class" id="house1_204"></div>
                    <div class="house_class" id="house1_301"></div>
                    <div class="house_class" id="house1_302"></div>
                    <div class="house_class" id="house1_303"></div>
                    <div class="house_class" id="house1_304"></div>
                    <div class="house_class" id="house1_401"></div>
                    <div class="house_class" id="house1_402"></div>
                    <div class="house_class" id="house1_403"></div>
                    <div class="house_class" id="house1_404"></div>
                    <div class="house_class" id="house1_501"></div>
                    <div class="house_class" id="house1_502"></div>
                    <div class="house_class" id="house1_503"></div>
                    <div class="house_class" id="house1_504"></div>
                    <div class="house_class" id="house1_601"></div>
                    <div class="house_class" id="house1_602"></div>
                    <div class="house_class" id="house1_603"></div>
                    <div class="house_class" id="house1_604"></div>
                </div>
        </div>
       <img class="img" id="background_img" src="../assets/png/background.png"  v-show="form_show"></img> 
       

    </div>
  </template>
  
  <script>
      import Time from "./Time.vue"
      import ReturnButton from "./ReturnButton.vue"
 
  import leftPng from "../assets/png/left.png"
  import rightPng from "../assets/png/right.png"
  import left1Png from "../assets/png/left1.png"
  import right1Png from "../assets/png/right1.png"
   import housePng  from "../assets/png/house.png"
   import house1Png  from "../assets/png/house1.png"

   import {jinghuguoji_httpGet} from "../assets/api/loadData.js"
  export default {
    name: 'threeDPage',
    components:{
    Time,
    ReturnButton
    },
    data () {
      return {
        msg: '',
        form_show:false,
        housePng_url:housePng,
        leftPng_url:leftPng,
        rightPng_url:rightPng,
        houses_firePoint_show:false,
        houses1_firePoint_show:false,
        jhgj_tableData: [{
            sexName: '',
          name: '',
          age: '',
          type:"",
          workspace:"",
          telephone:""
        }],
        houseNum:101
      }
    },
    mounted(){
        window.cesiumMap.removeGaode();
        this.addEvent();
        this.initTable();
        this.jhgj_changeHouse();
        this.lxw_changeHouse();
    },
    methods:{
        addEvent(){
            window.cesiumMap.left_clickFun(this.clickjinghuguojiShowFun,this.jinghuguojiShowFun,this.laoxianweisusheShowFun,this.yejiaxiaosheShowFun)
        },
        initTable(){
            jinghuguoji_httpGet({
                        villageName:"金湖国际",
                        buildingNumber:"A",
                        roomNumber:"101",
                        pageNum:0,
                        pageSize:10
                        },(result)=>{
                            this.jhgj_tableData=result.data.data.list
                        },()=>{}
                    );
        },
        jhgj_changeHouse(){
            let housesCode=[101,102,201,202,301,302,401,402,501,502,601,602,701,702,801,802,901,902,1001,1002,1101,1102,1201,1202,1301,1302,1401,1402,1501,1502,1601,1602,1701,1702,1801,1802];
            housesCode.map(c=>{
                document.getElementById("house_"+c).addEventListener("click",()=>{
                       // document.getElementById("form_img").src="../assets/png/jinghuguoji/"+c+".png";
                       jinghuguoji_httpGet({
                        villageName:"金湖国际",
                        buildingNumber:"A",
                        roomNumber:c,
                        pageNum:0,
                        pageSize:10
                        },(result)=>{
                            console.log(result.data.data)
                            this.jhgj_tableData=result.data.data.list
                        },()=>{}
                    );
                    this.houseNum=c;
                })
            });
        },
        lxw_changeHouse(){
            let house1sCode=[101,102,103,104,201,202,203,204,301,302,303,304,401,402,403,404,501,502,503,504,601,602,603,604];
            house1sCode.map(c=>{
                document.getElementById("house1_"+c).addEventListener("click",()=>{
                    // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
                    jinghuguoji_httpGet({
                        villageName:"老县委宿舍",
                        buildingNumber:"A",
                        roomNumber:c,
                        pageNum:0,
                        pageSize:10
                        },(result)=>{
                            console.log(c)
                            console.log(result.data.data)
                            this.jhgj_tableData=result.data.data.list
                        },()=>{}
                    );
                    this.houseNum=c;
                })
            });
        },
        clickjinghuguojiShowFun(){
            this.leftPng_url=left1Png;
            this.rightPng_url=right1Png;
            // document.getElementById("img3").src=left1Png_url;
            // document.getElementById("img5").src=right1Png_url;
        },
        jinghuguojiShowFun(){
            setTimeout(()=>{
                this.form_show=true;
                this.housePng_url=housePng;
                this.houses_firePoint_show=true;
            },100)
          
            // document.getElementById("houses1").style.display="none"
            // document.getElementById("form_img").src="../png/jinghuguoji/101.png";
        },
        laoxianweisusheShowFun(){
            setTimeout(()=>{
                this.form_show=true;
                 this.housePng_url=house1Png
                 this.houses1_firePoint_show=true;
            },100)
         
        },
        yejiaxiaosheShowFun(){
            
        },

        form_showFun(){
            this.form_show=false;
            this.houses1_firePoint_show=false;
            this.houses_firePoint_show=false;
        }
    }
  }
  </script>
  
  
  <style scoped>
    #numberDiv{
        position: absolute;
        z-index: 113;
        width: 200px;
        height: 100px;
        left: 52%;
        color: azure;
        font-size: 35px;
        top:18%
    }


     #table{
         position: absolute;
         z-index: 103;
         left: 50%;
         top: 25%;
         
     }

        #x_img,#x_img1{
            right: 18%;
            top:13%;
            z-index: 103;
            width: 30px;
        }
       #form{
            position: absolute;
            margin: 0;
            padding: 0;
            z-index: 101;
            width: 100%;
            height: 100%;
            
        }
        #form_img,#form_img1{
            width: 70%;
            left: 15%;
            top:10%;
            z-index: 102;
        }
        #background_img{
            z-index: 101;
            width: 100%;
            height: 100%;
        }
        #child_form{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .house_class{
           
         position: absolute;
         z-index: 114;
         width: 70px;
         height: 30px;
     }
     #house_101{
         left: 26%;
         top: 79.5%;
     }
     #house_102{
         left: 42%;
         top: 79.5%;
     }
     #house_201{
         left: 26%;
         top: 75.5%;
     }
     #house_202{
         left: 42%;
         top: 75.5%;
     }
     #house_301{
         left: 26%;
         top: 71.5%;
     }
     #house_302{
         left: 42%;
         top: 71.5%;
     }
     #house_401{
         left: 26%;
         top: 68.5%;
     }
     #house_402{
         left: 42%;
         top: 68.5%;
     }
     #house_501{
         left: 26%;
         top: 65%;
     }
     #house_502{
         left: 42%;
         top: 65%;
     }
     #house_601{
         left: 26%;
         top: 62%;
     }
     #house_602{
         left: 42%;
         top: 62%;
     }
      #house_701{
         left: 26%;
         top: 59%;
     } 
     #house_702{
         left: 42%;
         top: 59%;
     }
     #house_801{
         left: 26%;
         top: 55.5%;
     }
     #house_802{
         left: 42%;
         top: 55.5%;
     }
     #house_901{
         left: 26%;
         top: 52%;
     }
     #house_902{
         left: 42%;
         top: 52%;
     }
     #house_1001{
         left: 26%;
         top: 48.5%;
     }
     #house_1002{
         left: 42%;
         top: 48.5%;
     }
     #house_1101{
         left: 26%;
         top: 45%;
     }
     #house_1102{
         left: 42%;
         top: 45%;
     }
     #house_1201{
         left: 26%;
         top: 42%;
     }
     #house_1202{
         left: 42%;
         top: 42%;
     }
     #house_1301{
         left: 26%;
         top: 39%;
     }
     #house_1302{
         left: 42%;
         top: 39%;
     }
     #house_1401{
         left: 26%;
         top: 35.5%;
     }
     #house_1402{
         left: 42%;
         top: 35.5%;
     }
     #house_1501{
         left: 26%;
         top: 32.5%;
     }
     #house_1502{
         left: 42%;
         top: 32.5%;
     }
     #house_1601{
         left: 26%;
         top: 29.5%;
     }
     #house_1602{
         left: 42%;
         top: 29.5%;
     }
     #house_1701{
         left: 26%;
         top: 26%;
     }
     #house_1702{
         left: 42%;
         top: 26%;
     }
     #house_1801{
         left: 26%;
         top: 22.5%;
     }
     #house_1802{
         left: 42%;
         top: 22.5%;
     }

     #house1_101{
            left: 19%;
            top: 52.5%;
        }
        #house1_102{
            left: 30.2%;
             top: 52.5%;
        }
        #house1_103{
            left: 34%;
            top: 52.5%;
        }
        #house1_104{
            left: 46%;
            top: 52.5%;
        }

        #house1_201{
            left: 19%;
            top: 49%;
        }
        #house1_202{
            left: 30.2%;
            top: 49%;
        }
        #house1_203{
            left: 34%;
            top: 49%;
        }
        #house1_204{
            left: 46%;
            top: 49%;
        }

        #house1_301{
            left: 19%;
            top: 45.5%;
        }
        #house1_302{
            left: 30.2%;
            top: 45.5%;
        }
        #house1_303{
            left: 34%;
            top: 45.5%;
        }
        #house1_304{
            left: 46%;
            top: 45.5%;
        }

        #house1_401{
            left: 19%;
            top: 41.5%;
        }
        #house1_402{
            left: 30.2%;
            top: 41.5%;
        }
        #house1_403{
            left: 34%;
            top: 41.5%;
        }
        #house1_404{
            left: 46%;
            top: 41.5%;
        }

        #house1_501{
            left: 19%;
            top: 38%;
        }
        #house1_502{
            left: 30.2%;
            top: 38%;
        }
        #house1_503{
            left: 34%;
            top: 38%;
        }
        #house1_504{
            left: 46%;
            top: 38%;
        }

        #house1_601{
            left: 19%;
            top: 34.5%;
        }
        #house1_602{
            left: 30.2%;
            top: 34.5%;
        }
        #house1_603{
            left: 34%;
            top: 34.5%;
        }
        #house1_604{
            left: 46%;
            top: 34.5%;
        }



     @media screen and (max-height: 1000px){

        #numberDiv{
        position: absolute;
        z-index: 113;
        width: 200px;
        height: 100px;
        left: 52%;
        color: azure;
        font-size: 35px;
        top:19%
    }


     #table{
         position: absolute;
         z-index: 103;
         left: 50%;
         top: 30%;
         
     }
        #house_101{
            left: 26%;
            top: 90%;
        }
        #house_102{
            left: 42%;
            top: 90%;
        }
        #house_201{
            left: 26%;
            top: 85.5%;
        }
        #house_202{
            left: 42%;
            top: 85.5%;
        }
        #house_301{
            left: 26%;
            top: 81%;
        }
        #house_302{
            left: 42%;
            top: 81%;
        }
        #house_401{
            left: 26%;
            top: 77.5%;
        }
        #house_402{
            left: 42%;
            top: 77.5%;
        }
        #house_501{
            left: 26%;
            top: 73.5%;
        }
        #house_502{
            left: 42%;
            top: 73.5%;
        }
        #house_601{
            left: 26%;
            top: 70%;
        }
        #house_602{
            left: 42%;
            top: 70%;
        }


        /* ------------------------------- */
        #house_701{
            left: 26%;
            top: 66%;
        } 
        #house_702{
            left: 42%;
            top: 66%;
        }

        #house_801{
            left: 26%;
            top: 62%;
        }
        #house_802{
            left: 42%;
            top: 62%;
        }
        #house_901{
            left: 26%;
            top: 58%;
        }
        #house_902{
            left: 42%;
            top: 58%;
        }
        #house_1001{
            left: 26%;
            top: 54.5%;
        }
        #house_1002{
            left: 42%;
            top: 54.5%;
        }
        #house_1101{
            left: 26%;
            top: 51%;
        }
        #house_1102{
            left: 42%;
            top: 51%;
        }
        #house_1201{
            left: 26%;
            top: 47.5%;
        }
        #house_1202{
            left: 42%;
            top: 47.5%;
        }
        #house_1301{
            left: 26%;
            top: 44%;
        }
        #house_1302{
            left: 42%;
            top: 44%;
        }
        #house_1401{
            left: 26%;
            top: 40%;
        }
        #house_1402{
            left: 42%;
            top: 40%;
        }
        #house_1501{
            left: 26%;
            top: 36%;
        }
        #house_1502{
            left: 42%;
            top: 36%;
        }
        #house_1601{
            left: 26%;
            top: 32%;
        }
        #house_1602{
            left: 42%;
            top: 32%;
        }
        #house_1701{
            left: 26%;
            top: 28%;
        }
        #house_1702{
            left: 42%;
            top: 28%;
        }
        #house_1801{
            left: 26%;
            top: 24.5%;
        }
        #house_1802{
            left: 42%;
            top: 24.5%;
        }
        #house1_101{
            left: 19%;
            top: 59.5%;
        }
        #house1_102{
            left: 30.2%;
             top: 59.5%;
        }
        #house1_103{
            left: 34%;
            top: 59.5%;
        }
        #house1_104{
            left: 46%;
            top: 59.5%;
        }

        #house1_201{
            left: 19%;
            top: 55%;
        }
        #house1_202{
            left: 30.2%;
            top: 55%;
        }
        #house1_203{
            left: 34%;
            top: 55%;
        }
        #house1_204{
            left: 46%;
            top: 55%;
        }

        #house1_301{
            left: 19%;
            top: 50.5%;
        }
        #house1_302{
            left: 30.2%;
            top: 50.5%;
        }
        #house1_303{
            left: 34%;
            top: 50.5%;
        }
        #house1_304{
            left: 46%;
            top: 50.5%;
        }

        #house1_401{
            left: 19%;
            top: 46.5%;
        }
        #house1_402{
            left: 30.2%;
            top: 46.5%;
        }
        #house1_403{
            left: 34%;
            top: 46.5%;
        }
        #house1_404{
            left: 46%;
            top: 46.5%;
        }

        #house1_501{
            left: 19%;
            top: 42%;
        }
        #house1_502{
            left: 30.2%;
            top: 42%;
        }
        #house1_503{
            left: 34%;
            top: 42%;
        }
        #house1_504{
            left: 46%;
            top: 42%;
        }

        #house1_601{
            left: 19%;
            top: 37.5%;
        }
        #house1_602{
            left: 30.2%;
            top: 37.5%;
        }
        #house1_603{
            left: 34%;
            top: 37.5%;
        }
        #house1_604{
            left: 46%;
            top: 37.5%;
        }
     }

     .img{
            position: absolute;
        }
        #img1{
            bottom:1%;
            left: 50%; transform: translateX(-50%);
            z-index:111;
            width: 50%;
        }
        #img2{
            top:-1%;
            left: 50%; transform: translateX(-50%);
            z-index:111;
            width: 30%;
        }
        #img3{
            left: 2%;
            top:7%;
            z-index:2;
            width:23%
        }
        #img4{
            z-index:-1
        }
        #img5{
            right: 2%;
            top:7%;
            z-index:2;
            width:23%
        }
  </style>