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" 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 {
      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);
          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>