jiangxiSZ/shuzhixiangzheng/src/components/MainPage.vue

<template>
  <div id="firstPage">
      <!-- <img class="img" id="img1" src="../assets/png/title.png"></img> -->
      <!-- <div  id="time_time">10:45:23</div>
      <div id="time_week">星期五</div>
      <div id="time_day">2021.05.16</div> -->
        <Time></Time>
        <img class="img" id="img2" src="../assets/png/title.png"></img>
        <img class="img" id="first_img" src="../assets/png/first1.png"></img>

        <div id="left_div">
            <img class="menu" src="../assets/png/1.png"></img>
                <ViewPage></ViewPage>
            <img class="menu" id="peopleStatus" src="../assets/png/2.png"></img>
            <img id="person_status" src="../assets/png/people_status.png"></img>
                  <PersonStatusPage></PersonStatusPage>
            <img class="menu" id="insuredStatus" src="../assets/png/3.png"></img>
            <img id="insured_status" src="../assets/png/insured_status.png"></img>
                  <InsuredPage></InsuredPage>
    
       </div>
       <div id="right_div">
          <img class="menu" id="importantPersonStatus" src="../assets/png/4.png"></img>
          <KeyPopulationPage></KeyPopulationPage>
          <img class="menu" id="employmentSituation" src="../assets/png/5.png"></img>
          <EmploymentSituation></EmploymentSituation>
          <img class="menu" id="education" src="../assets/png/6.png"></img>
          <EducationPage></EducationPage>
          <img class="menu" id="vaccination" src="../assets/png/7.png"></img>
          <VaccinationPage></VaccinationPage>
       </div>

        <div id="click" class="click_class" v-on:click="to3DMap">
        </div>

        <div class="click_class" id="click_1" v-on:click="toZheji">
        </div>
        <div class="click_class"    id="click_2" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_3" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_4" v-on:click="toOther">
        </div>
        <div  id="click_5" v-on:click="toXiMen">
        </div>
        <div class="click_class"    id="click_6" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_7" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_8" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_9" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_10" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_11" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_12" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_13" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_14" v-on:click="toOther"> 
        </div>
        <div class="click_class"    id="click_15" v-on:click="toOther">
        </div>
        <div class="click_class"    id="click_16" v-on:click="toOther">
        </div>
  </div>
</template>

<script>
  import Time from "./Time.vue"
  import PersonStatusPage from "./MainPageChild/PersonStatusPage.vue"
  import ViewPage from "./MainPageChild/ViewPage.vue"
  import InsuredPage from "./MainPageChild/InsuredPage.vue"
  import KeyPopulationPage from "./MainPageChild/KeyPopulationPage.vue"
  import EmploymentSituation from "./MainPageChild/EmploymentSituation.vue"
  import VaccinationPage from "./MainPageChild/VaccinationPage.vue"
  import EducationPage from "./MainPageChild/EducationPage.vue"
  import {SZZSY_httpGet,SZZSQSY_httpGet,SZZXQ_httpGet} from "../assets/api/loadData.js"
export default {
  name: 'MainPage',
  components:{
    Time,
    PersonStatusPage,
    ViewPage,
    InsuredPage,
    KeyPopulationPage,
    EmploymentSituation,
    VaccinationPage,
    EducationPage,
    VaccinationPage
  },
  data () {
    return {
     
         
    }
  },
  created(){
  
  },
  mounted(){
    this.change();
  },
  methods:{
    
    change(){
      let boxCollection=document.getElementsByClassName("click_class");
      for(let i=0;i<boxCollection.length;i++){
          boxCollection[i].addEventListener("click",(event)=>{
            window.name=  window.cesiumMap.addLocationName(event) ;
            console.log("event",event);
            setTimeout(() => {
              this.changeData(event.view.name) ;
            }, 1000);
           
          });
      }
    },
    changeData(name){

      SZZSQSY_httpGet(name,result=>{
        console.log(name,result);
        this.$store.commit('setDaZhongdata',result.data); 
        this.$store.commit('setSzdata',result.data);
      },result=>{})
    },
    to3DMap(){
      setTimeout(()=>{
        window.cesiumMap.removeGaode();

        window.cesiumMap.addEntity();
      },100);
     
      this.$router.replace('/daZhong')
    },
    toZheji(){
      window.cesiumMap.addGaode();
      this.$router.replace('/zheJi')
    },
    toXiMen(){
      window.cesiumMap.loadximen();
      window.cesiumMap.addLocationName({target:{
        id:"click_5"
      }});
      this.$router.replace('/ximen')
    },
    toOther(){
      window.cesiumMap.addGaode();
      this.$router.replace('/other')
    }
  }
}
</script>


<style scoped>
  #peopleStatus{
    top:28%
  }
  #insuredStatus{
    top:75%
  }
  #importantPersonStatus{
    left: 10%;
  }
  #employmentSituation{
    top:22%
  }
  #vaccination{
    top:75%;
    width: 200px;
  }
 #education{
   top:45%
 }
#person_status{
  position: absolute;
  top:30%;
  left: 50%;
  width: 30%;
}
#insured_status{
  position: absolute;
  bottom:5%;
  left: 50%;
  width: 20%;
}

 #right_div{
    position: absolute;
    z-index: 120;
    color: azure;
    width: 25%;
    height: 90%;
    top:10%;
    right: 1%;
    /* background-color: rgb(0,0,0,0.1); */
  }

  #left_div{
    position: absolute;
    z-index: 120;
    color: azure;
    width: 25%;
    height: 90%;
    top:10%;
    /* background-color: rgb(0,0,0,0.1); */
  }
  .menu{
    position: absolute;
    width: 150px;
    left:10%
  }

  .font_background_png{
    z-index: 119;
    position: absolute;
    top:-50%;
    
  }


      #firstPage{
          position: absolute;
          width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
      }
      .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%;
        }
        #first_img{
            position: absolute;
            z-index: 110;
            width: 100%;
            height: 100%;
        }
        .click_class{
            position: absolute;
            z-index: 111;
            width: 80px;
            height: 40px;
            cursor: pointer;
        }
        #click{
         
           position: absolute;
           z-index: 111;
           width: 80px;
           height: 40px;
           left: 38%;
           top: 33%;
           cursor: pointer;
       }
       #click_1{
           left: 54%;
           top: 48%;
       }
       #click_2{
           left: 47.5%;
           top: 32.5%;
       }
       #click_3{
           left: 57.5%;
           top: 31%;
       }
       #click_4{
           left: 41%;
            top: 36%;
       }
       #click_5{
           position: absolute;
           z-index: 111;
           width: 80px;
           height: 40px;
           left: 32%;
            top: 38%;
            cursor: pointer;
       }
       #click_6{
           left: 36%;
           top: 42%;
       }
       #click_7{
           left: 42%;
            top: 43%;
       }
       #click_8{
           left: 52%;
            top: 40%;
       }
       #click_9{
           left: 52.5%;
   top: 35%;
       }
       #click_10{
           left: 51.5%;
           top: 45%;
       }
       #click_11{
           left: 59%;
           top: 47%;
       }
       #click_12{
           left: 63%;
           top: 54%;
       }
       #click_13{
           left: 38%;
           top: 53%;
       }
       #click_14{
           left: 27%;
           top: 56%;
       }

       #click_15{
           left: 65%;
           top: 43%;
       }
       #click_16{
           left: 48.5%;
           top: 27%;
       }
</style>