jiangxiSZ/shuzhixiangzheng/src/components/MainPage.vue

<template>
  <div id="firstPage">
    <!-- <img class="img" id="img1" src="../assets/png/title.png" /> -->
    <!-- <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 class="img" id="first_img" src="../assets/png/first1.png" />

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

    <div id="click" class="click_class" v-on:click="to3DMap('大中社区')"></div>

    <div class="click_class" myName='叶家舍小区' id="click_1" v-on:click="toZheji('柘矶社区')"></div>
    <div class="click_class" myName='大岭社区' id="click_2" v-on:click="toOther('大岭社区')"></div>
    <div class="click_class" myName='台山社区' id="click_3" v-on:click="toOther('台山社区')"></div>
    <div class="click_class" myName='云亭社区' id="click_4" v-on:click="toOther('云亭社区')"></div>
    <div class="click_class" myName='西门社区' id="click_5" v-on:click="toXiMen('西门社区')"></div>
    <div class="click_class" myName='江阀社区' id="click_6" v-on:click="toOther('江阀社区')"></div>
    <div class="click_class" myName='莲湾社区' id="click_7" v-on:click="toOther('莲湾社区')"></div>
    <div class="click_class" myName='三里社区' id="click_8" v-on:click="toOther('三里社区')"></div>
    <div class="click_class" myName='江新社区' id="click_9" v-on:click="toOther('江新社区')"></div>
    <div class="click_class" myName='钟山社区' id="click_10" v-on:click="toOther('钟山社区')"></div>
    <div class="click_class" myName='鄱湖社区' id="click_11" v-on:click="toOther('鄱湖社区')"></div>
    <div class="click_class" myName='胜利村' id="click_12" v-on:click="toOther('胜利村')"></div>
    <div class="click_class" myName='月亮村' id="click_13" v-on:click="toOther('月亮村')"></div>
    <div class="click_class" myName='洪湖村' id="click_14" v-on:click="toOther('洪湖村')"></div>
    <div class="click_class" myName='柏树社区' id="click_15" v-on:click="toOther('柏树社区')"></div>
    <div class="click_class" myName='洋港社区' 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 {
        dataAll: {}
      };
    },
    created() {},
    mounted() {
      this.change();
      // 拿到首页数据，传给左侧的组件
      let clear = setInterval(() => {
        if (
          this.$store.getters.getSzdata.code === 10000 &&
          this.$store.getters.getSzdata.data.index
        ) {
          this.dataAll = this.$store.getters.getSzdata.data;
          console.log('拿到首页全部数据', this.dataAll);
          clearInterval(clear);
        }
      }, 500);
    },
    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);

            // setTimeout(() => {
            //   this.changeData(event.target.getAttribute("name"));
            // }, 1000);
          });
        }
      },
      changeData(name) {
        SZZSQSY_httpGet(
          name,
          (result) => {
            this.$store.commit("setDaZhongdata", result.data);
            //this.$store.commit("setSzdata", result.data);
          },
          (result) => {
            console.log(name, result)
          }
        );
      },
      to3DMap(name) {
        setTimeout(() => {
          this.changeData(name);
          window.cesiumMap.removeGaode();

          window.cesiumMap.addEntity();
        }, 100);

        this.$router.replace({
          path:"/daZhong",
          query:{imgName:name}
        });
      },
      toZheji(name) {
        this.changeData(name);
        window.cesiumMap.addGaode();
        this.$router.replace({
          path:"/zheJi",
          query:{imgName:name}
        });
      },
      toXiMen(name) {
        this.changeData(name);
        window.cesiumMap.loadximen();
        window.cesiumMap.addLocationName({
          target: {
            id: "click_5",
          },
        });
        this.$router.replace({
          path:"/ximen",
          query:{imgName:name}
        });
      },
      toOther(name) {
        this.changeData(name);
        window.cesiumMap.addGaode();
        this.$router.replace({
          path:"/other",
          query:{imgName:name}
        });
      },
    },
  };

</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>